kireji 0.17.1 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "kireji",
- "version": "0.17.1",
+ "version": "0.18.0",
  "description": "A web framework for stateful, entropy-perfect, multi-origin web apps. Currently in alpha. Expect breaking changes for version 0. Use with caution!",
  "files": [
   "src/",

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1776207331/priority

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1776212585/status

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1776307785/status

@@ -1 +1 @@
-doing
+done

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1780696449/status

@@ -1 +1 @@
-doing
+done

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1781522546/affects_.js

@@ -0,0 +1,3 @@
+return [
+ _
+]

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1781522546/description

@@ -0,0 +1 @@
+Add a global debug part. Control it via a toggle in the About app. It should enable things like the debug map overlay for Orbital and position overlays for both walkable games. It should also toggle the FPS meter in the task bar tray.

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1781522546/part.json

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1781522546/priority

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1781522546/status

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1781522546/title

@@ -0,0 +1 @@
+Add Debug Boolean Part

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803713/affects_.js

@@ -0,0 +1,3 @@
+return [
+ Core
+]

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803713/description

@@ -0,0 +1 @@
+Add a sound manager which can be used to hold sound utilities and a global audio context.

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803713/part.json

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803713/priority

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803713/status

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803713/title

@@ -0,0 +1 @@
+Add Sound Manager

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803799/affects_.js

@@ -0,0 +1,3 @@
+return [
+ Abstract.gltfGame
+]

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803799/description

@@ -0,0 +1 @@
+Right now, mesh instances aren't rendered and all meshes in a GLTF file have to have their transforms applied so that they will render in the correct location in the game. This needs to be updated to fully leverage the GLTF format's potential: geometry instancing will save file space and use less memory on the GPU than having duplicate copies of the same data. This will make adding reusable props and archetecture easy and performant and will make editing the game levels in Blender easier too.

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803799/part.json

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803799/priority

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803799/status

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782803799/title

@@ -0,0 +1 @@
+Support Instancing and Node Transforms in GLTF Game

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782804028/affects_.js

@@ -0,0 +1,3 @@
+return [
+ Abstract.gltfGame
+]

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782804028/description

@@ -0,0 +1,7 @@
+Right now, only one scene (scene 0) is usable for each GLTF. This wastes the potential of having the scenes represent different levels so that a single GLTF can represent an entire game and geometry instances can be rightly shared between levels.
+
+Also, right now, the very first walkable mesh in the mesh list is used as the sole walkable collision surface for a GLTF game. Instead, scene transitions should be used to switch between multiple walkable meshes.
+
+Further, walkable meshes must currently have all of their transforms applied in order for collision to be in the correct position in the game. This should be changed to support transforms on collision nodes.
+
+Also, multiple collision meshes in a single scene should be aggregated into a single collision mesh space. Take note that multiple instances of the same collision mesh might be used across multiple scenes and it might make sense and save space to incorperate the scene and transform into the game state so that there is only one runtime copy of each triangle collision mesh while at the same time there is a walkable mesh transform matrix which can be multiplied by the geometry along with the camera matrix.

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782804028/part.json

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782804028/priority

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

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782804028/status

@@ -0,0 +1 @@
+to-do

package/src/app/kireji/issue-tracker/active-overlay/issue-modal/1782804028/title

@@ -0,0 +1 @@
+Support Multiple Scenes and Walkable Mesh Nodes in GLTF Game

package/src/part.css_.js

@@ -393,6 +393,10 @@ task-menu {
  font-size: var(--default-font-size);
 }
 
+body.hide-debug .debug {
+ display: none !important;
+}
+
 /* --- Media Elements --- */
 
 img[src^="data:image/svg+xml;inert;"] {

package/src/part.html_.js

@@ -11,6 +11,8 @@ if (_.includeEra !== "none")
 if (_.includeColor !== 'none')
  classes.push(Color.arm.key)
 
+classes.push(Debug.arm.key)
+
 if (includeMenu)
  classes.push(Menu.classes)
 

package/src/parts/abstract/gltf-game/async-load-level.js

@@ -1,11 +1,13 @@
 thisGLTFGame.loading = true
 
 // Create new level buffers, pipeline, bind group and render pass definitions.
-const { gltf } = thisGLTFGame.levels.arm
+const gltf = thisGLTFGame.levels.arm.gltf
 
 thisGLTFGame.renderPassDefinitions.length = 0
 
-for (const mesh of gltf.meshes) {
+for (const [meshIndex, instanceMatrices] of gltf.scenes[gltf.scene ?? 0].transformsMap) {
+
+ const mesh = gltf.meshes[meshIndex]
 
  if (mesh.name.startsWith("walkable_"))
   continue
@@ -161,11 +163,16 @@ for (const mesh of gltf.meshes) {
    },
   })
 
+  // ------
 
+  const instanceData = new Float32Array(instanceMatrices.length * 16)
+  instanceMatrices.forEach((m, i) => instanceData.set(m.data, i * 16))
+  const instanceBuffer = Graphics.createBuffer(instanceData, GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST)
   thisGLTFGame.renderPassDefinitions.push({
    vertexBuffers,
    pipeline,
    indexCount: indexArray.length,
+   instanceCount: instanceMatrices.length,
    indexBuffer: Graphics.createBuffer(indexArray, GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST),
    bindGroup: Graphics.device.createBindGroup({
     layout: pipeline.getBindGroupLayout(0),
@@ -173,6 +180,7 @@ for (const mesh of gltf.meshes) {
      { binding: 0, resource: { buffer: thisGLTFGame.uniformBuffer } },
      { binding: 1, resource: gpuTexture.createView() },
      { binding: 2, resource: gpuSampler },
+     { binding: 3, resource: { buffer: instanceBuffer } },
     ]
    }),
    indexArray

package/src/parts/abstract/gltf-game/build.js

@@ -1,6 +1,7 @@
 define(thisGLTFGame, {
  loading: { value: false, writable: true },
  loadedLevel: { value: null, writable: true },
+ disabledSound: { value: null, writable: true },
  uniformBuffer: { value: null, writable: true },
  onscreenContext: { value: null, writable: true },
  offscreenContext: { value: null, writable: true },

package/src/parts/abstract/gltf-game/camera/buffer_.js

@@ -1,98 +1,37 @@
-const { cos, sin } = Math
-const myGLTFGame = thisGLTFGameCamera[".."]
-
-// ── World scale ───────────────────────────────────────────────────────────────
-// Express near/far/scope in real-world meters and convert to world units here.
-// To change unit scale later, only this constant needs updating.
-const unitScale = 1  // world units per meter
-
-const near = thisGLTFGameCamera.manifest.near * unitScale
-const far = thisGLTFGameCamera.manifest.far * unitScale
-const scope = thisGLTFGameCamera.manifest.scope * unitScale
-
-// ── Matrix constructors (row-major, row-vector convention) ────────────────────
-const matrix = {
- multiply: (a, b) => new Float32Array([
-  a[0] * b[0] + a[1] * b[4] + a[2] * b[8] + a[3] * b[12],
-  a[0] * b[1] + a[1] * b[5] + a[2] * b[9] + a[3] * b[13],
-  a[0] * b[2] + a[1] * b[6] + a[2] * b[10] + a[3] * b[14],
-  a[0] * b[3] + a[1] * b[7] + a[2] * b[11] + a[3] * b[15],
-
-  a[4] * b[0] + a[5] * b[4] + a[6] * b[8] + a[7] * b[12],
-  a[4] * b[1] + a[5] * b[5] + a[6] * b[9] + a[7] * b[13],
-  a[4] * b[2] + a[5] * b[6] + a[6] * b[10] + a[7] * b[14],
-  a[4] * b[3] + a[5] * b[7] + a[6] * b[11] + a[7] * b[15],
-
-  a[8] * b[0] + a[9] * b[4] + a[10] * b[8] + a[11] * b[12],
-  a[8] * b[1] + a[9] * b[5] + a[10] * b[9] + a[11] * b[13],
-  a[8] * b[2] + a[9] * b[6] + a[10] * b[10] + a[11] * b[14],
-  a[8] * b[3] + a[9] * b[7] + a[10] * b[11] + a[11] * b[15],
-
-  a[12] * b[0] + a[13] * b[4] + a[14] * b[8] + a[15] * b[12],
-  a[12] * b[1] + a[13] * b[5] + a[14] * b[9] + a[15] * b[13],
-  a[12] * b[2] + a[13] * b[6] + a[14] * b[10] + a[15] * b[14],
-  a[12] * b[3] + a[13] * b[7] + a[14] * b[11] + a[15] * b[15],
- ]),
-
- rx: a => [
-  1, 0, 0, 0,
-  0, cos(a), sin(a), 0,
-  0, -sin(a), cos(a), 0,
-  0, 0, 0, 1
- ],
-
- ry: a => [
-  cos(a), 0, -sin(a), 0,
-  0, 1, 0, 0,
-  sin(a), 0, cos(a), 0,
-  0, 0, 0, 1
- ],
-
- rz: a => [
-  cos(a), sin(a), 0, 0,
-  -sin(a), cos(a), 0, 0,
-  0, 0, 1, 0,
-  0, 0, 0, 1
- ],
-
- t: (x, y, z) => [
-  1, 0, 0, 0,
-  0, 1, 0, 0,
-  0, 0, 1, 0,
-  x, y, z, 1
- ]
-}
-
-// ── Perspective projection (WebGPU NDC depth range: 0 to 1) ───────────────────
-const f = 1.0 / Math.tan((thisGLTFGameCamera.manifest.fov * Math.PI / 180) / 2)
-const aspect = myGLTFGame.onscreenContext.canvas.width /
- myGLTFGame.onscreenContext.canvas.height
-const nf = 1 / (near - far)
-
-const perspective = [
- f / aspect, 0, 0, 0,
- 0, f, 0, 0,
- 0, 0, far * nf, -1,
- 0, 0, far * near * nf, 0
-]
-
-// ── View transform chain ──────────────────────────────────────────────────────
-// Reading right to left: translate to player, rotate, pull back by scope.
-// In row-vector convention the rightmost matrix is applied last (closest to P).
-const rotation = thisGLTFGameCamera.model
-const position = myGLTFGame.levels.arm.model
-
-const t = matrix.t(-position.x, -thisGLTFGameCamera.manifest.height - position.y, -position.z)
-const ry = matrix.ry(rotation.y * Math.PI / 180)
-const rx = matrix.rx(rotation.x * Math.PI / 180)
-const rz = matrix.rz(rotation.z * Math.PI / 180)
-
-// Chain: t → ry → rx → rz → perspective
-// reduceRight so leftmost matrix is outermost (applied last)
-const viewProj = [perspective, rz, rx, ry, t]
- .reduceRight(matrix.multiply)
+const {
+ manifest: {
+  near,
+  far,
+  fov,
+  height
+ },
+ model: rotation,
+ [".."]: {
+  levels: {
+   arm: {
+    model: position
+   }
+  },
+  onscreenContext: {
+   canvas: {
+    width: canvasWidth,
+    height: canvasHeight
+   }
+  }
+ }
+} = thisGLTFGameCamera
 
 return new Float32Array([
- ...viewProj,
- _.now / 1000  // globalClock
+
+ // Perspective matrix.
+ ...Matrix.chain(
+  Matrix.translation(-position.x, -height - position.y, -position.z),
+  Matrix.rotationY(rotation.y * Math.PI / 180),
+  Matrix.rotationX(rotation.x * Math.PI / 180),
+  Matrix.rotationZ(rotation.z * Math.PI / 180),
+  Matrix.perspective(fov, canvasWidth / canvasHeight, near, far)
+ ).data,
+
+ // Time.
+ _.now / 1000
 ])

package/src/parts/abstract/gltf-game/debug-toggle.js

@@ -0,0 +1,8 @@
+if (Debug.arm === Debug.showDebug)
+ Q(`#${thisGLTFGame.domains.join("_")}>canvas`).after((() => {
+  const offscreen = document.createElement("div")
+  offscreen.innerHTML = thisGLTFGame.levels.arm["part.html"]
+  return offscreen.querySelector("world-")
+ })())
+
+else Q(`#${thisGLTFGame.domains.join("_")} world-`).remove()

package/src/parts/abstract/gltf-game/levels/level/data-get.js

@@ -66,6 +66,28 @@ const data = {
  gltf: json
 }
 
+for (const scene of json.scenes) {
+ scene.transformsMap = new Map()
+
+ const gatherNodeTransforms = (nodeIndex, parentWorld) => {
+  const node = json.nodes[nodeIndex]
+  const local = node.matrix ? Matrix.fromColumnMajor(node.matrix) : Matrix.compose(node.translation, node.rotation, node.scale)
+  const world = parentWorld ? Matrix.chain(local, parentWorld) : local
+
+  if (node.mesh !== undefined) {
+   if (!scene.transformsMap.has(node.mesh))
+    scene.transformsMap.set(node.mesh, [])
+   scene.transformsMap.get(node.mesh).push(world)
+  }
+
+  for (const child of node.children ?? [])
+   gatherNodeTransforms(child, world)
+ }
+
+ for (const rootIndex of scene.nodes)
+  gatherNodeTransforms(rootIndex, null)
+}
+
 const walkableIndices = json.meshes.reduce((indices, mesh, index) => {
  if (mesh.name.startsWith('walkable_'))
   indices.push(index)

package/src/parts/abstract/gltf-game/levels/level/type.d.ts

@@ -175,6 +175,8 @@ interface GLTFNode {
 interface GLTFScene {
  nodes: number[]
  name?: string
+ /** A runtime property that stores the array of node transforms around each mesh in the scene. */
+ transformsMap: Map<number, IMatrix4[]>
 }
 
 // ── Root glTF document ────────────────────────────────────────────────────────

package/src/parts/abstract/gltf-game/loop.js

@@ -28,5 +28,5 @@ thisGLTFGame.reactToKeyboardInput()
 thisGLTFGame.updateUniformBuffer()
 thisGLTFGame.render()
 
-if (thisGLTFGame.manifest.debug)
+if (Debug.arm === Debug.showDebug)
  thisGLTFGame.updateDebugView()

package/src/parts/abstract/gltf-game/part.html_.js

@@ -1,6 +1,6 @@
 return /* html */`<canvas id="onscreen-canvas">
  Your browser does not support the HTML canvas tag.
 </canvas>
-${thisGLTFGame.manifest.debug ? thisGLTFGame.levels.arm["part.html"] : ""}
+${Debug.arm === Debug.showDebug ? thisGLTFGame.levels.arm["part.html"] : ""}
 <section id=hud>${thisGLTFGame["hud.html"]}</section>
 <section id=pause-menu>${thisGLTFGame["pause-menu.html"]}</section>`

package/src/parts/abstract/gltf-game/part.json

@@ -1,7 +1,6 @@
 {
  "abstract": true,
  "extends": "app",
- "debug": false,
  "walkingSpeed": 142,
  "sprintingSpeed": 240,
  "mouseSensitivity": 0.5,

package/src/parts/abstract/gltf-game/point-action.js

@@ -4,6 +4,7 @@ Pointer.handle({
   label.classList.remove("blinked")
   label.offsetWidth // force reflow to restart css animation
   label.classList.add("blinked")
+  thisGLTFGame.disabledSound.play(Sound.now)
  },
  POINTER_EVENT,
  TARGET_ELEMENT

package/src/parts/abstract/gltf-game/render.js

@@ -30,7 +30,7 @@ for (const renderPassDefinition of thisGLTFGame.renderPassDefinitions) {
  pass.setBindGroup(0, renderPassDefinition.bindGroup)
  pass.setIndexBuffer(renderPassDefinition.indexBuffer, renderPassDefinition.indexArray instanceof Uint32Array ? 'uint32' : 'uint16')
  renderPassDefinition.vertexBuffers.forEach((buffer, index) => pass.setVertexBuffer(index, buffer))
- pass.drawIndexed(renderPassDefinition.indexCount)
+ pass.drawIndexed(renderPassDefinition.indexCount, renderPassDefinition.instanceCount)
 }
 pass.end()
 Graphics.device.queue.submit([encoder.finish()])

package/src/parts/abstract/gltf-game/type.d.ts

@@ -50,6 +50,8 @@ declare interface IGLTFGame<TOwner>
  readonly currentTurnSpeed: number
  readonly canvasSizeChanged: boolean
  readonly renderPassDefinitions: GPURenderPassDefinition[]
+ /** The sound that plays when the player uses the action button with no interactive object in focus. */
+ readonly disabledSound?: SoundWave
 }
 
 declare interface IGLTFGameManifest
@@ -67,6 +69,7 @@ declare interface IGLTFGameManifest
 
 declare interface GPURenderPassDefinition {
  readonly indexCount: number
+ readonly instanceCount: number
  readonly vertexBuffers: [
   slot: GPUIndex32,
   buffer:

package/src/parts/abstract/gltf-game/unlit.wgsl

@@ -6,15 +6,16 @@ struct Camera {
 @group(0) @binding(0) var<uniform> camera : Camera;
 @group(0) @binding(1) var t_diffuse: texture_2d<f32>;
 @group(0) @binding(2) var s_diffuse: sampler;
+@group(0) @binding(3) var<storage, read> instances: array<mat4x4<f32>>;
 
 struct VertexOutput {
  @builtin(position) position: vec4<f32>,
  @location(0) uv: vec2<f32>,
 };
 
-@vertex fn v({$0}) -> VertexOutput {
+@vertex fn v({$0}, @builtin(instance_index) instanceIndex: u32) -> VertexOutput {
  var out: VertexOutput;
- out.position = camera.projection * vec4<f32>(POSITION, 1.0);
+ out.position = camera.projection * (instances[instanceIndex] * vec4<f32>(POSITION, 1.0));
  out.uv = TEXCOORD_0;
  return out;
 }

package/src/parts/abstract/gltf-game/view-hydrate.js

@@ -39,4 +39,11 @@ document.addEventListener('pointerlockchange', reactivePause)
 document.addEventListener('pointerlockerror', reactivePause)
 document.addEventListener('visibilitychange', reactivePause)
 window.addEventListener('blur', reactivePause)
-window.addEventListener('focus', reactivePause)
+window.addEventListener('focus', reactivePause)
+
+Debug.attach("update", thisGLTFGame, "toggleDebug")
+
+thisGLTFGame.disabledSound = new Sound.Wave()
+thisGLTFGame.disabledSound.duration = 0.125
+thisGLTFGame.disabledSound.tone = 40
+thisGLTFGame.disabledSound.type = "sawtooth"

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

@@ -9,6 +9,7 @@ declare interface IAbstract
  readonly comingSoon: IComingSoonApp<IAbstract>
  readonly error: IErrorApp<IAbstract>
  readonly facet: IFacet<IAbstract, null>
+ readonly gltfGame: IGLTFGame<IAbstract>
  readonly issue: ITrackedIssue<IAbstract>
  readonly match: IMatch<IAbstract, null>
  readonly walkable: IWalkable<IAbstract>

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

@@ -11,7 +11,9 @@
   "ray-cast": [
    "FORCE_VECTOR",
    "DELTA_TIME",
-   "ENABLE_SLIDING"
+   "ENABLE_SLIDING",
+   "ENABLED_GRAVITY",
+   "MAX_CLIMB"
   ]
  }
 }

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

@@ -7,4 +7,6 @@ for (let triIndex = 0; triIndex < thisWalkable.triTable.length; triIndex++)
  if (triIndex !== thisWalkable.triIndex && thisWalkable.triContainsPoint(triIndex, POINT))
   return triIndex
 
+// Among all triangles at the candidate XZ point, sorted by ascending surfaceY, select the one with the highest surfaceY that satisfies surfaceY ≤ PLAYER_REFERENCE_Y + climbThreshold.
+
 return -1

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

@@ -3,8 +3,13 @@ declare interface IWalkable<TOwner>
 
  // Components.
  readonly getData(): IWalkableData
- /** Casts a ray from the current walkable position along the force vector direction for the given delta time and returns a summary of the results. @param FORCE_VECTOR the force vector represent the position the uninterrupted ray will arrive at in one second. @param DELTA_TIME the duration of the time cast in seconds. @param ENABLE_SLIDING whether or not to enable the ray to "wrap" along the walkable boundary instead of stopping cold. */
- readonly castRay(FORCE_VECTOR: Vector3, DELTA_TIME: number, ENABLE_SLIDING: boolean): IWalkableRayCastResult
+ /** Casts a ray from the current walkable position along the force vector direction for the given delta time and returns a summary of the results.
+  * @param FORCE_VECTOR the force vector represent the position the uninterrupted ray will arrive at in one second.
+  * @param DELTA_TIME the duration of the time cast in seconds.
+  * @param ENABLE_SLIDING if true, the ray will "wrap" along a boundary instead of stopping cold.
+  * @param GRAVITY if defined, the ray will not be snapped to the Y-position of the walkable surface but will accelerate downward toward it at the given rate (in Y units per second).
+  * @param MAX_CLIMB if defined, ray casts which land on a triangle whose Y-position is higher than the start position will be considered boundary walls unless they are less than this number. */
+ readonly castRay(FORCE_VECTOR: Vector3, DELTA_TIME: number, ENABLE_SLIDING: boolean, GRAVITY: number, MAX_CLIMB: number): IWalkableRayCastResult
  /** Checks if a point (x, y, z) rounds to a valid pixel within the specified tri's memoized row data. */
  readonly triContainsPoint(TRI_INDEX: IWalkableTriIndex, POINT: Vector3): boolean
  /** Returns whether or not the given point is in a tri. @returns the index of the tri that contains the point. -1 otherwise. */

package/src/parts/core/debug/hide-debug/data-state

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

package/src/parts/core/debug/hide-debug/id

@@ -0,0 +1 @@
+debug-control

package/src/parts/core/debug/hide-debug/part.json

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

package/src/parts/core/debug/hide-debug/title

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

package/src/parts/core/debug/open-is_.js

@@ -0,0 +1 @@
+return true

package/src/parts/core/debug/part.html_.js

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

package/src/parts/core/debug/part.json

@@ -0,0 +1,10 @@
+{
+ "name": "Debug",
+ "extends": "match",
+ "actions": {
+  "point": [
+   "POINTER_EVENT",
+   "TARGET_ELEMENT"
+  ]
+ }
+}

package/src/parts/core/debug/point.js

@@ -0,0 +1,8 @@
+Pointer.handle({
+ click() {
+  Debug.setRID(1n, true)
+ },
+ POINTER_EVENT,
+ TARGET_ELEMENT,
+ focus: "click"
+})

package/src/parts/core/debug/show-debug/data-state

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

package/src/parts/core/debug/show-debug/id

@@ -0,0 +1 @@
+debug-control

package/src/parts/core/debug/show-debug/part.json

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

package/src/parts/core/debug/show-debug/title

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

package/src/parts/core/debug/title

@@ -0,0 +1 @@
+Debug Views

package/src/parts/core/debug/type.d.ts

@@ -0,0 +1,12 @@
+declare interface IDebug
+ extends IMatch<IDesktop, IBodyMode<IEra>>,
+ IWebView {
+
+ // Subparts.
+ readonly hideDebug: IBodyMode<IDebug>
+ readonly showDebug: IBodyMode<IDebug>
+}
+
+/** Toggles helper views for developers. */
+declare const Debug: IDebug
+type Debug = T

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

@@ -42,9 +42,8 @@ title-bar>.part-icon {
 .toggle-control .base {
  width: 100%;
  border-radius: var(--spacing);
- background: var(--light-bg);
  width: calc(var(--spacing) * 2);
- box-shadow: inset 0px 0px 12px #000;
+ box-shadow: 0 0 0 1px var(--bg-light), inset 0px 0px 12px #000a;
  flex: 0 0 auto;
  overflow: hidden;
  display: flex;
@@ -229,7 +228,9 @@ tray- {
 }
 
 #clock-tray-item {
+ white-space: nowrap;
  overflow: hidden;
+ width: max-content;
 }
 
 #clock-tray-item,

package/src/parts/core/era/vintage/part.css_.js

@@ -345,7 +345,9 @@ tray- {
 }
 
 #clock-tray-item {
+ white-space: nowrap;
  overflow: hidden;
+ width: max-content;
 }
 
 #clock-tray-item,