kireji 0.8.2 → 0.10.0

package/src/app/kireji/issue-tracker/static.css

@@ -0,0 +1,255 @@
+body.modern:not(.dark) #issue-tracker_kireji_app {
+ background-color: white;
+}
+
+#issue-tracker_kireji_app {
+ display: flex;
+ flex-flow: column nowrap;
+}
+
+body.modern #issue-tracker_kireji_app {
+ padding: var(--spacing);
+}
+
+#kireji-issue-modal {
+ position: absolute;
+ background-color: var(--bg);
+ padding: var(--spacing);
+ display: flex;
+ gap: var(--spacing);
+ flex-flow: column nowrap;
+}
+
+body.modern #kireji-issue-modal {
+ left: calc(3 * var(--spacing));
+ right: calc(3 * var(--spacing));
+ top: calc(2 * var(--spacing));
+ bottom: calc(2 * var(--spacing));
+}
+
+body.vintage #kireji-issue-modal {
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+}
+
+#kireji-issue-modal .exit-button {
+ position: absolute;
+ right: var(--spacing);
+ top: var(--spacing);
+ width: var(--spacing);
+ height: var(--spacing);
+ font-size: var(--spacing);
+ line-height: var(--spacing);
+ text-align: center;
+ cursor: pointer;
+ pointer-events: all;
+}
+
+body.modern #kireji-issue-modal {
+ border-radius: calc(var(--spacing) / 2);
+}
+
+body.modern:not(.dark) #kireji-issue-modal {
+ background-color: white;
+}
+
+body.vintage #kireji-issue-modal {
+ background-color: var(--bg);
+}
+
+#issue-tracker_kireji_app:has(#kireji-issue-modal:not(:empty)) {
+ pointer-events: none;
+ color: var(--fg-mode);
+ background-color: var(--bg-un-mode);
+}
+
+#kireji-issue-modal:empty {
+ display: none;
+}
+
+#kireji-issue-modal>* {
+ margin: 0;
+ padding: 0;
+}
+
+#kireji-issue-modal>h1 {
+ margin-right: var(--spacing);
+ font-size: var(--spacing);
+ line-height: var(--spacing);
+}
+
+#kireji-issue-modal .issue-description {
+ white-space: pre-wrap;
+}
+
+#issue-tracker_kireji_app .issue-title {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: pre;
+}
+
+body.modern #issue-tracker_kireji_app .issue-title {
+ font-weight: 500;
+}
+
+#issue-tracker_kireji_app :is(.issue-table>scroller->scroll-content, .issue-links) {
+ display: flex;
+ flex-flow: column nowrap;
+ width: 100%;
+}
+
+#issue-tracker_kireji_app .issue-row {
+ position: relative;
+ display: flex;
+ text-decoration: none;
+ color: inherit;
+}
+
+body.modern #issue-tracker_kireji_app .issue-row {
+ padding: calc(var(--spacing) / 2) 0;
+}
+
+body.modern #issue-tracker_kireji_app .issue-row:not(.header) {
+ border-radius: calc(var(--spacing) / 3);
+ cursor: pointer;
+}
+
+body.modern #issue-tracker_kireji_app .issue-row:not(.header):hover {
+ background-color: var(--accent-mode-est);
+}
+
+body.vintage #issue-tracker_kireji_app .issue-row>* {
+ padding: 4px;
+}
+
+#issue-tracker_kireji_app .issue-row>* {
+ line-height: var(--spacing);
+}
+
+body.vintage #issue-tracker_kireji_app .issue-row:not(.header):hover {
+ background-color: var(--accent);
+ color: white;
+}
+
+body.vintage.dark #issue-tracker_kireji_app .issue-row:not(.header):hover {
+ color: black;
+}
+
+#issue-tracker_kireji_app :is(.issue-status, .issue-priority, .issue-date) {
+ width: var(--column-width);
+ display: inline-block;
+}
+
+#issue-tracker_kireji_app .issue-row>span {
+ position: relative;
+}
+
+body.vintage #issue-tracker_kireji_app .issue-date {
+ --column-width: calc(7 * var(--spacing));
+}
+
+body.modern #issue-tracker_kireji_app .issue-date {
+ --column-width: calc(7 * var(--spacing));
+}
+
+body.vintage #issue-tracker_kireji_app .issue-status {
+ --column-width: 76px;
+}
+
+body.modern #issue-tracker_kireji_app .issue-status {
+ --column-width: calc(6 * var(--spacing));
+}
+
+body.vintage #issue-tracker_kireji_app .issue-priority {
+ --column-width: 42px;
+}
+
+body.modern #issue-tracker_kireji_app .issue-priority {
+ --column-width: calc(4 * var(--spacing));
+}
+
+body.modern #issue-tracker_kireji_app :not(.header)>:is(.issue-status, .issue-priority, .issue-date) {
+ border-radius: calc(var(--spacing) / 4);
+ font-weight: 600;
+ font-size: calc(var(--spacing) * .7);
+ text-align: center;
+ line-height: inherit;
+}
+
+#issue-tracker_kireji_app :is(.issue-status, .issue-date) {
+ white-space: nowrap;
+}
+
+body.modern #issue-tracker_kireji_app :not(.header)>.issue-status {
+ color: steelblue;
+ background-color: powderblue;
+}
+
+body.modern.dark #issue-tracker_kireji_app :not(.header)>.issue-status {
+ color: powderblue;
+ background-color: steelblue;
+}
+
+body.modern #issue-tracker_kireji_app :not(.header)[data-status="doing"]>.issue-status {
+ color: brown;
+ background-color: wheat;
+}
+
+body.modern.dark #issue-tracker_kireji_app :not(.header)[data-status="doing"]>.issue-status {
+ color: wheat;
+ background-color: peru;
+}
+
+body.modern #issue-tracker_kireji_app :not(.header)[data-status="done"]>.issue-status {
+ color: seagreen;
+ background-color: palegreen;
+}
+
+body.modern.dark #issue-tracker_kireji_app :not(.header)[data-status="done"]>.issue-status {
+ color: palegreen;
+ background-color: seagreen;
+}
+
+body.modern #issue-tracker_kireji_app :not(.header)[data-priority="A"]>.issue-priority {
+ color: red;
+}
+
+body.modern #issue-tracker_kireji_app :not(.header)[data-priority="B"]>.issue-priority {
+ color: orange;
+}
+
+body.modern #issue-tracker_kireji_app :not(.header)[data-priority="C"]>.issue-priority {
+ color: green;
+}
+
+#issue-tracker_kireji_app .issue-table {
+ min-height: 0;
+ position: relative;
+ overflow: hidden;
+ flex: 1;
+}
+
+#kireji-issue-modal .issue-row {
+ pointer-events: all;
+}
+
+body.vintage #issue-tracker_kireji_app {
+ padding: 2px;
+ box-shadow: var(--deep-inset);
+}
+
+body.vintage #issue-tracker_kireji_app :is(.issue-table, .issue-links) {
+ background: white;
+}
+
+body.vintage.dark #issue-tracker_kireji_app :is(.issue-table, .issue-links) {
+ background: black;
+}
+
+body.vintage #issue-tracker_kireji_app .issue-links {
+ padding: 2px;
+ box-shadow: var(--deep-inset);
+}

package/src/app/kireji/issue-tracker/title

@@ -0,0 +1 @@
+Issue Tracker

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

@@ -0,0 +1,13 @@
+declare interface IKirejiIssueTrackerApp
+ extends IApplication<IKirejiApp, IPartAny> {
+
+ // Subparts.
+ readonly scroller: IScroller<IKirejiIssueTrackerApp>
+ readonly sections: IKirejiIssueSections
+ readonly filters: IKirejiIssueFilters
+
+ // Serialized Properties.
+ readonly "issues.html": string
+}
+
+declare const kirejiIssueTracker: IKirejiIssueTrackerApp

package/src/app/kireji/issue-tracker/urls.xml_.js

@@ -0,0 +1 @@
+return kirejiIssueSections["urls.xml"]

package/src/app/kireji/meta-description

@@ -1 +1 @@
-This is a work-in-progress IDE. Everything is currently read-only. Explore the component model and hash function that power the Kireji Demo App Ecosystem.
+This is a work-in-progress IDE. Everything is currently read-only. Explore the component model and hash function that power the Kireji Demo Ecosystem.

package/src/app/kireji/type.d.ts

@@ -5,6 +5,7 @@ declare interface IKirejiApp
  readonly toolBar: IKirejiAppToolBar
  readonly sidebar: IKirejiAppSidebar
  readonly editor: IKirejiAppEditor
+ readonly issueTracker: IKirejiIssueTrackerApp
 }
 
 declare const kirejiApp: IKirejiApp

package/src/build.js

@@ -894,7 +894,6 @@ function ƒ(_, compressedSubjectOrigins) {
      return totalInheritors
     },
     configureArchiveContent = () => {
-     // TODO: Consider merging user landing model with stock landing model instead of replacing it.
      const landingModel = JSON.parse(_["landing-model.json"])
 
      let desktopFeatures = 3
@@ -1050,7 +1049,6 @@ function ƒ(_, compressedSubjectOrigins) {
 }
 
 ƒ({
- // TODO: fix source mapping bugs.
  verbosity: "1",
  change: "major",
  hangHydration: "0",

package/src/description

@@ -1,4 +1,4 @@
-This part represents the root of the Kireji Demo App Ecosystem. Its domain name is the empty string ("", representing the DNS root), and all of its subparts represent top-level domains (TLDs) like ".com" and ".io".
+This part represents the root of the Kireji Demo Ecosystem. Its domain name is the empty string ("", representing the DNS root), and all of its subparts represent top-level domains (TLDs) like ".com" and ".io".
 
 It forms the root of the runtime state space used to compute a two-way minimal perfect hash function (MPHF) across all hosted applications. When serialized, it inlines all metadata and file structure compiled from the repository at build time.
 

package/src/landing-model.json

@@ -15,6 +15,27 @@
      "about": true
     }
    },
+   "issue-tracker": {
+    "sections": "summary",
+    "filters": {
+     "dropdown": "none",
+     "order": {
+      "descending": true,
+      "by": "date"
+     },
+     "priority": {
+      "a": true,
+      "b": true,
+      "c": true
+     },
+     "status": {
+      "doing": true,
+      "done": false,
+      "to-do": true
+     }
+    },
+    "scroller": 0
+   },
    "sidebar": {
     "outliner-domains": {
      "folders": [

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

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

package/src/parts/abstract/mesh/ray-cast.js

@@ -160,7 +160,7 @@ while (true) {
    }
 
    if (boundaryAppearsFlat) {
-    // TODO: Consider using the line through the opposing neighbors to search for asymmetry in the mesh boundary.
+    // Do nothing for now...
    }
 
    // If there is no neighboring point, we are "stuck". The ray cast ends here.
@@ -176,7 +176,6 @@ while (true) {
    const distance = Vector.magnitude(vectorToNeighbor)
 
    // Construct a force vector pointing to the chosen neighbor.
-   // TODO: speed should actually be reduced.
    const forceVectorToNeighbor = Vector.multiply(Vector.normalize(vectorToNeighbor), speed)
 
    // Compute travel time to reach the neighbor.
@@ -222,8 +221,6 @@ while (true) {
     }
 
     return safeIterationResult
-
-    // TODO: Consider moving toward a 4-point neighbor instead.
    }
 
    // Set the neighbor as the new safe point.

package/src/parts/abstract/mesh/routeID-model-to.js

@@ -1,4 +1,3 @@
-// TODO: Validate MODEL and handle out-of-range points.
 const triIndex = mesh.triThatContainsPoint(MODEL)
 const triData = mesh.triTable[triIndex]
 const row = triData.rows[Math.floor(MODEL.y) - triData.range.min]

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

@@ -1,15 +1,23 @@
-/* Sort ascending by cardinality to optimize Route ID encoding:
- 1. In mix parts, using the largest factor as the most significant digit
-    prevents its large cardinality from being a multiplier for other factors.
- 2. In match parts, placing larger arms at the end of the address space
-    prevents their large cardinalities from being offsets for smaller arms. */
-part.subparts.sort((a, b) => {
- /* Relational comparisons are used to avoid BigInt subtraction which
-    would unnecessarily compute and store a third BigInt. */
- if (a.cardinality < b.cardinality) return -1
- if (a.cardinality > b.cardinality) return 1
- return 0
-})
+part.subparts.sort((() => {
+
+ if (Array.isArray(part.manifest.order)) {
+  // If there is a custom order defined, just used that.
+  return (a, b) => part.manifest.order.indexOf(a.key) - part.manifest.order.indexOf(b.key)
+ }
+
+ /* Otherwise, sort ascending by cardinality to optimize Route ID encoding:
+  1. In mix parts, using the largest factor as the most significant digit
+     prevents its large cardinality from being a multiplier for other factors.
+  2. In match parts, placing larger arms at the end of the address space
+     prevents their large cardinalities from being offsets for smaller arms. */
+ return (a, b) => {
+  /* Relational comparisons are used to avoid BigInt subtraction which
+     would unnecessarily compute and store a third BigInt. */
+  if (a.cardinality < b.cardinality) return -1
+  if (a.cardinality > b.cardinality) return 1
+  return 0
+ }
+})())
 
 part.define({
  dirty: { value: false, writable: true },

package/src/parts/abstract/part/mathML.js

@@ -15,8 +15,6 @@ const expression = (() => {
  return (LABELS ? "<munder>" + (needsParentheses ? "" : "<mrow>") : "") + (needsParentheses ? "<mrow class=parenthetic><mo>(</mo>" : "") + terms.join("") + (needsParentheses ? `<mo>)</mo></mrow>` : "") + (LABELS ? (needsParentheses ? "" : "</mrow>") + `<munder><mo stretchy="true">&#x23df;</mo>${recurse(0, "none", false, false)}</munder></munder>` : "")
 })()
 
-// TODO: handle parenthesis!
-
 const showBracketBelow = DEPTH > 2
 
 return /* html */`${WRAP_IN_MATH_TAG ? "<math displaystyle=true><mrow>" : ""}${equationVariable}${expression}${equationValue}${WRAP_IN_MATH_TAG ? "</mrow></math>" : ""}`

package/src/parts/abstract/part/type.d.ts

@@ -64,6 +64,8 @@ declare interface IPart<TOwner, TSubpart>
  readonly cssVariableOfImage(IMAGE_NAME: string): string
  /** Collects every build function in the part's prototype chain and then calls them all on the part itself. */
  readonly startBuild(): void
+ /** Performs `part.modelToRouteID()` on MODEL and then performs `part.setRouteID()` on the resulting route ID. */
+ readonly setModel(MODEL: any)
  /** Sets the part's routeID, propagating it leafward and rootward and updating all views. If DELTA is true, then ROUTE_ID is added to the part's current route ID. */
  readonly setRouteID(ROUTE_ID: bigint, DELTA: boolean = false): void
  /** Recomputes and then updates the part's routeID in response to a change in the the given subpart's routeID.
@@ -199,10 +201,12 @@ declare type IRuntimePropertyDefinition<TOwner, TValue> = {
 declare interface IPartManifest {
  /** Whether or not the part should be considered a subpart of its parent part (abstract = false) or an uninstanceable prototype for other parts (abstract = true). */
  readonly abstract?: boolean
- /** Whether or not the part will be instanced (inherit = false) or retained (inherit = true) during the create step. */
- readonly inherit?: boolean
  /** The list of methods that the part adds. The prototype of the methods object is set to the part's prototype's manifest methods object. If no object is defined in a manifest, the empty object will be created automatically. */
- readonly methods: Record<string, string[]>
+ readonly methods?: Record<string, string[]>
+ /** The relative or absolute host name of the part that this part inherits from. The default value is `part`. */
+ readonly extends?: string
+ /** An optional string array of subpart keys representing the explicit order that the subparts should take in the part's subpart array. This affects how parts are iterated over and how they are integrated into the hash function. */
+ readonly order?: string[]
 }
 
 declare type IPartAny =

package/src/parts/abstract/part-outliner/itemHTML-recursive.js

@@ -8,6 +8,4 @@ return partOutliner.getChildren(SUBJECT).map((childPart, i, childArray) => {
  const label = `<span class="label${childPart.isAbstract ? " abstract" : ""}">${partOutliner.getLabel(childPart)}</span>`
  const summary = `<summary ${partOutliner.pointAttr("point", partIndex)} data-index="${partIndex}"${partOutliner.isActive(childPart) ? " data-active" : ""}${IS_LAST_OF_TYPE && !hasSubparts ? ' id="lastOutlinerItem"' : ""}><outliner-spacer style="--depth:${DEPTH + +!hasSubparts}"></outliner-spacer>${handle}${symbol}${label}</summary>`
  return `<details${hasSubparts ? "" : ` class=empty`} ${isOpen ? "open" : ""}>${summary}${recurse(childPart, DEPTH + 1, IS_LAST_OF_TYPE && i === childArray.length - 1)}</details>`
-}).join("")
-
-/* TODO: the children of collapsed outliner items should not be rendered into HTML as it bloats the fetch size. Instead, they should be rendered during hydration. */
+}).join("")

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

@@ -1,21 +1,3 @@
-
-/* 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]

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

@@ -1,7 +1,5 @@
 const n = permutation.supersetSize
 
-// TODO: factor in other aspects when expanding to the collection type.
-
 return [
  "<mn>1</mn>",
  "<mo>+</mo>",

package/src/parts/abstract/permutation/view-hydrate.js

@@ -1,3 +1,2 @@
-// TODO: Replace with subparts and let their own view controls manage this.
 permutation.viewedPermutationRouteID = permutation.permutationRouteID
 permutation.viewedInstances = [...permutation.instances]

package/src/parts/abstract/permutation/view-update.js

@@ -1,6 +1,4 @@
-// TODO: Consider if this should be distribute view update instead of just view update.
 if (permutation.instances.length !== permutation.viewedInstances.length || permutation.viewedPermutationRouteID !== permutation.permutationRouteID) {
- // TODO: This is a dead-simple approach ... more performant approaches exist.
  const existingInstanceCount = permutation.viewedInstances.length
  const targetInstanceCount = permutation.instances.length
  const maxLength = Math.max(existingInstanceCount, targetInstanceCount)

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

@@ -1,4 +1,3 @@
-// TODO: consider moving this check (and the cardinality type check) to a post-build "validation" step?
 if (!scroller.query)
  throw new ReferenceError(`Scrollers must define a css selector at \`scroller.query\` which can select the parent element of the scroller (from ${scroller.host}).`)
 

package/src/parts/abstract/type.d.ts

@@ -3,14 +3,21 @@ declare interface IAbstract
 
  // Subparts.
  readonly application: IApplication<IAbstract, null>
+ readonly bodyMode: IBodyMode<IAbstract>
+ readonly boolean: IBoolean<IAbstract>
  readonly clip: IClip<IAbstract, null>
+ readonly comingSoon: IComingSoonApplication<IAbstract>
  readonly error: IErrorApplication<IAbstract>
  readonly facet: IFacet<IAbstract, null>
+ readonly issue: ITrackedIssue<IAbstract>
  readonly match: IMatch<IAbstract, null>
+ readonly mesh: IMesh<IAbstract>
  readonly mix: IMix<IAbstract, null>
  readonly part: IPart<IAbstract, null>
+ readonly partMask: IPartMask<IAbstract, null>
+ readonly partOutliner: IPartOutliner<IAbstract>
+ readonly permutation: IPermutation<IAbstract, null, null, null>
  readonly scroller: IScroller<IAbstract, null>
- readonly section: IApplicationSection<IAbstract, null>
  readonly sections: IApplicationSections<IAbstract, null>
  readonly tld: ITopLevelDomain<IAbstract, null>
 }

package/src/parts/core/client/async-install.js

@@ -40,7 +40,7 @@ logScope(0, "Finalizing Hydration", log => {
   client: _.parts.core.client
  })
 
- // Handle navigation. TODO: fix bugs here.
+ // Handle forward/back button navigation.
  window.addEventListener("pageshow", pageTransitionEvent => {
   log("Setting Initial State")
   addressBar.useRoute()

package/src/parts/core/server/sync-install.js

@@ -23,7 +23,6 @@ const
   'Content-Type': 'text/html;charset=UTF-8',
   "Document-Policy": "force-load-at-top",
   "Vary": "Sec-CH-Prefers-Color-Scheme",
-  // TODO: Finish the security setup.
   // 'Content-Security-Policy': "default-src 'none'; style-src 'unsafe-inline'; image-src data:; script-src self 'unsafe-inline'",
   // 'Permissions-Policy': 'microphone=(), camera=(), web-share=(self), full-screen=(self)',
   'Cross-Origin-Embedder-Policy': 'require-corp',

package/src/parts/desktop/color/part.html_.js

@@ -1,4 +1,4 @@
-return `<span ${color.pointAttr()} id="color-control" tabIndex=0 data-state="${color.arm.stateData}">
+return `<span ${color.pointAttr()} id="color-control" tabIndex=0 data-state="${color.arm.stateData}" class="toggle-control">
  <span class="label">${color.title}:</span><flex-spacer></flex-spacer>
  <span class="base"><span class="handle"></span></span>
 </span>`

package/src/parts/desktop/era/modern/part.css

@@ -28,14 +28,12 @@ title-bar>.part-icon {
  margin: calc(var(--spacing) / 2);
 }
 
-#color-control,
-#era-control {
+.toggle-control {
  cursor: pointer;
  position: relative;
 }
 
-#color-control .base,
-#era-control .base {
+.toggle-control .base {
  width: 100%;
  border-radius: var(--spacing);
  background: var(--light-bg);
@@ -149,7 +147,8 @@ task-menu>* {
  background-color: var(--bg-dark);
 }
 
-#settings>span {
+#settings>span,
+.toggle-control {
  gap: 1ch;
  height: var(--spacing);
  box-sizing: content-box;
@@ -174,14 +173,10 @@ task-menu>* {
 }
 
 
-#settings>span[data-state="enabled"] .handle {
+.toggle-control[data-state="enabled"] .handle {
  left: calc(var(--spacing) + 2px);
 }
 
-#settings>span[data-state="partial"] .handle {
- left: calc(.5 * var(--spacing) + 2px);
-}
-
 .task-link[data-here]>a::before {
  content: "";
  position: absolute;

package/src/parts/desktop/era/part.html_.js

@@ -1,4 +1,4 @@
-return `<span ${era.pointAttr()} id="era-control" tabIndex=0 data-state="${era.arm.stateData}">
+return `<span ${era.pointAttr()} id="era-control" tabIndex=0 data-state="${era.arm.stateData}" class="toggle-control">
  <span class="label">${era.title}:</span><flex-spacer></flex-spacer>
  <span class="base"><span class="handle"></span></span>
 </span>`

package/src/parts/desktop/era/vintage/static.css

@@ -60,16 +60,14 @@ scroll-bar>thumb- {
  --thumb-start: var(--scrollbar-width);
 }
 
-#color-control .base,
-#era-control .base {
+.toggle-control .base {
  background: white;
  width: 16px;
  height: 16px;
  box-shadow: var(--deep-inset);
 }
 
-#color-control .base::after,
-#era-control .base::after {
+.toggle-control .base::after {
  content: "";
  display: block;
  width: 16px;
@@ -81,11 +79,11 @@ scroll-bar>thumb- {
  color: black;
 }
 
-#settings>span[data-state="enabled"] .base::after {
+.toggle-control[data-state="enabled"] .base::after {
  content: "✓";
 }
 
-#settings>span[data-state="partial"] .base::after {
+.toggle-control[data-state="partial"] .base::after {
  content: "–";
 }
 
@@ -190,7 +188,7 @@ body {
   inset 2px 2px var(--bg-light-est);
  --default-font-size: 11px;
  font: var(--default-font-size) var(--system-ui);
- image-rendering: pixelated;
+ /*image-rendering: pixelated;*/
 }
 
 body,

package/src/parts/desktop/task-bar/tray/fullscreen/point.js

@@ -1,4 +1,3 @@
-// TODO: check for support and show the tray item only if the browser supports it. Prefer instructing user to enter the browser's native fullscreen instead of JS fullscreen (which doesn't have cross-origin support).
 pointer.handle({
  click() {
   if (!document.fullscreenElement) {