devx-op · kattsushi · Apr 26, 2026 · Mar 29, 2026 · Mar 29, 2026 · Apr 10, 2026
diff --git a/.engram/chunks/5f70b832.jsonl.gz b/.engram/chunks/5f70b832.jsonl.gz
diff --git a/.engram/manifest.json b/.engram/manifest.json
@@ -72,6 +72,14 @@
       "sessions": 0,
       "memories": 5,
       "prompts": 1
+    },
+    {
+      "id": "5f70b832",
+      "created_by": "andres",
+      "created_at": "2026-04-22T19:29:00Z",
+      "sessions": 194,
+      "memories": 618,
+      "prompts": 264
     }
   ]
 }
diff --git a/apps/loom-example-app/index.html b/apps/loom-example-app/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Loom Example App</title>
+  </head>
+  <body>
+    <div id="loom-root"></div>
+  </body>
+</html>
diff --git a/apps/loom-example-app/package.json b/apps/loom-example-app/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@effectify/loom-example-app",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@effectify/loom": "workspace:*",
+    "@effectify/loom-nitro": "workspace:*",
+    "@effectify/loom-router": "workspace:*",
+    "@effectify/loom-vite": "workspace:*",
+    "@picocss/pico": "catalog:",
+    "effect": "catalog:"
+  },
+  "devDependencies": {
+    "@nx/vite": "catalog:",
+    "jsdom": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vitest": "catalog:"
+  }
+}
diff --git a/apps/loom-example-app/project.json b/apps/loom-example-app/project.json
@@ -0,0 +1,30 @@
+{
+  "name": "@effectify/loom-example-app",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/loom-example-app/src",
+  "projectType": "application",
+  "tags": ["loom", "example", "app"],
+  "targets": {
+    "lint": {
+      "executor": "nx-oxlint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/loom-example-app/**/*.{ts,tsx,js,jsx,mts,cts}"]
+      }
+    },
+    "test": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "../../node_modules/.bin/vitest run --config vite.config.mts",
+        "cwd": "apps/loom-example-app"
+      }
+    },
+    "typecheck": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "../../node_modules/.bin/tsc --noEmit -p tsconfig.app.json && ../../node_modules/.bin/tsc --noEmit -p tsconfig.spec.json",
+        "cwd": "apps/loom-example-app"
+      }
+    }
+  }
+}
diff --git a/apps/loom-example-app/src/app-config.ts b/apps/loom-example-app/src/app-config.ts
@@ -0,0 +1,4 @@
+export const appRootId = "loom-root"
+export const appBuildId = "loom-example-app"
+export const appPayloadElementId = "__loom_payload__"
+export const counterInitialCount = 2
diff --git a/apps/loom-example-app/src/app.css b/apps/loom-example-app/src/app.css
@@ -0,0 +1,302 @@
+@import "@picocss/pico/css/pico.min.css";
+
+:root {
+  --loom-example-surface: rgba(255, 255, 255, 0.82);
+  --loom-example-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
+}
+
+body {
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top, rgba(16, 185, 129, 0.12), transparent 30%),
+    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+}
+
+[data-app-shell="loom-example-app"] {
+  padding-block: clamp(2rem, 4vw, 4rem);
+}
+
+.loom-example-layout {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.loom-example-hero {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.loom-example-eyebrow {
+  margin: 0;
+  color: var(--pico-primary);
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.counter-title,
+.todo-title,
+.loom-example-not-found-title {
+  margin: 0;
+}
+
+.counter-copy,
+.todo-copy,
+.loom-example-copy,
+.counter-debug-note,
+.dev-mode-note,
+.compat-seam-note {
+  margin: 0;
+  color: var(--pico-muted-color);
+}
+
+.loom-example-card,
+.loom-example-note-stack {
+  display: grid;
+  gap: 1rem;
+  padding: clamp(1.25rem, 3vw, 2rem);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 1.25rem;
+  background: var(--loom-example-surface);
+  box-shadow: var(--loom-example-shadow);
+  backdrop-filter: blur(10px);
+}
+
+.counter-value-card {
+  display: inline-grid;
+  gap: 0.35rem;
+}
+
+.counter-cue-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.counter-cue-label {
+  color: var(--pico-muted-color);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.counter-value-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--pico-muted-color);
+}
+
+.counter-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.counter-value-prefix {
+  color: var(--pico-muted-color);
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.counter-dynamic-value {
+  display: inline-flex;
+  min-width: 2.5ch;
+  justify-content: center;
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+  background-color: rgba(15, 23, 42, 0.05);
+}
+
+.counter-reactive-cue {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2rem;
+  padding: 0.3rem 0.7rem;
+  border-radius: 999px;
+  color: #0f172a;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
+}
+
+.counter-reactive-cue--baseline {
+  color: #1d4ed8;
+}
+
+.counter-reactive-cue--rising {
+  color: #047857;
+}
+
+.counter-reactive-cue--falling {
+  color: #c2410c;
+}
+
+.counter-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin: 0;
+}
+
+.counter-actions > button {
+  margin: 0;
+}
+
+.todo-top-row {
+  display: grid;
+  gap: 1rem;
+}
+
+@media (min-width: 900px) {
+  .todo-top-row {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
+    align-items: start;
+  }
+}
+
+.todo-kpi-row,
+.todo-stat-grid,
+.todo-composer-row,
+.todo-composer-meta,
+.todo-list-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+  align-items: center;
+}
+
+.todo-kpi,
+.todo-stat {
+  display: grid;
+  gap: 0.2rem;
+  min-width: 9rem;
+  padding: 0.9rem 1rem;
+  border-radius: 1rem;
+  background: rgba(15, 23, 42, 0.04);
+}
+
+.todo-kpi-label,
+.todo-stat-label,
+.todo-section-title,
+.todo-item-status,
+.todo-session-count {
+  margin: 0;
+}
+
+.todo-kpi-label,
+.todo-stat-label,
+.todo-item-status {
+  color: var(--pico-muted-color);
+  font-size: 0.85rem;
+}
+
+.todo-kpi-value,
+.todo-stat-value,
+.todo-title,
+.todo-section-title,
+.todo-item-title {
+  margin: 0;
+}
+
+.todo-kpi-value,
+.todo-stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.todo-panel {
+  gap: 1rem;
+}
+
+.todo-section-title {
+  font-size: 1.25rem;
+}
+
+.todo-input {
+  flex: 1 1 18rem;
+  min-width: 15rem;
+  margin: 0;
+}
+
+.todo-composer-row > button,
+.todo-list-header > button,
+.todo-item > button,
+.todo-link {
+  margin: 0;
+}
+
+.todo-composer-meta {
+  justify-content: space-between;
+}
+
+.todo-session-count {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.65rem;
+  border-radius: 999px;
+  background: rgba(37, 99, 235, 0.1);
+  color: #1d4ed8;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.todo-item-list {
+  display: grid;
+  gap: 0.85rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.todo-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 0.95rem 1rem;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 1rem;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.todo-item--completed {
+  background: rgba(16, 185, 129, 0.08);
+}
+
+.todo-item-copy {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.todo-item-title {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.todo-item-title--completed {
+  text-decoration: line-through;
+  color: var(--pico-muted-color);
+}
+
+.todo-empty-state {
+  margin: 0;
+  padding: 1rem;
+  border-radius: 1rem;
+  background: rgba(15, 23, 42, 0.04);
+  color: var(--pico-muted-color);
+}
+
+.loom-example-note-stack {
+  gap: 0.85rem;
+}
+
+.loom-example-not-found {
+  display: grid;
+  gap: 1rem;
+}