tutuca 0.10.0 → 0.11.0

package/dist/tutuca-components.js

@@ -1,8 +1,5 @@
 // src/components/data/data.js
-import { component as component3, html as html3 } from "tutuca";
-
-// src/components/data/immutable-inspector.js
-import { component as component2, html as html2, IMap, ISet, List, OMap, OrderedSet, Record, Seq, Stack } from "tutuca";
+import { component as component2, html as html2 } from "tutuca";
 
 // src/components/data/json.js
 import { component, html } from "tutuca";
@@ -72,19 +69,19 @@ var compositeMethods = {
     return this.isExpanded ? "▼" : "▶";
   },
   isItemsEmpty() {
-    return this.items.size === 0;
+    return this.items.length === 0;
   },
   pageCount() {
-    return Math.max(1, Math.ceil(this.items.size / this.itemsPerPage));
+    return Math.max(1, Math.ceil(this.items.length / this.itemsPerPage));
   },
   pageStart() {
     return this.currentPage * this.itemsPerPage;
   },
   pageEnd() {
-    return Math.min(this.items.size, this.pageStart() + this.itemsPerPage);
+    return Math.min(this.items.length, this.pageStart() + this.itemsPerPage);
   },
   hasPagination() {
-    return this.items.size > this.itemsPerPage;
+    return this.items.length > this.itemsPerPage;
   },
   showPagination() {
     return this.isExpanded && this.hasPagination();
@@ -97,12 +94,18 @@ var compositeMethods = {
   },
   pageIndicatorText() {
     return `${this.currentPage + 1} / ${this.pageCount()}`;
+  }
+};
+var compositeReceive = {
+  toggleIsExpanded(draft) {
+    draft.isExpanded = !draft.isExpanded;
   },
-  prevPage() {
-    return this.currentPage > 0 ? this.setCurrentPage(this.currentPage - 1) : this;
+  prevPage(draft) {
+    if (draft.currentPage > 0) draft.currentPage--;
   },
-  nextPage() {
-    return this.currentPage < this.pageCount() - 1 ? this.setCurrentPage(this.currentPage + 1) : this;
+  nextPage(draft) {
+    const pageCount = Math.max(1, Math.ceil(draft.items.length / draft.itemsPerPage));
+    if (draft.currentPage < pageCount - 1) draft.currentPage++;
   }
 };
 var compositeAlter = {
@@ -113,7 +116,7 @@ var compositeAlter = {
 function makeCompositeView({
   typeClass = "",
   borderClass = "border-base-content/10",
-  toggleHandler = "$toggleIsExpanded"
+  toggleHandler = "toggleIsExpanded"
 } = {}) {
   return html`<span class="font-mono text-sm leading-tight inline-block">
     <span class="inline-flex items-center gap-2">
@@ -132,7 +135,7 @@ function makeCompositeView({
           type="button"
           class="join-item btn btn-xs"
           :disabled="$cannotPrevPage"
-          @on.click="$prevPage"
+          @on.click="prevPage"
         >
           «
         </button>
@@ -144,7 +147,7 @@ function makeCompositeView({
           type="button"
           class="join-item btn btn-xs"
           :disabled="$cannotNextPage"
-          @on.click="$nextPage"
+          @on.click="nextPage"
         >
           »
         </button>
@@ -168,9 +171,10 @@ var JsonArray = component({
       return "Array";
     },
     countText() {
-      return `(${this.items.size})`;
+      return `(${this.items.length})`;
     }
   },
+  receive: compositeReceive,
   alter: compositeAlter,
   view: compositeView
 });
@@ -183,9 +187,10 @@ var JsonObject = component({
       return "Object";
     },
     countText() {
-      return `{${this.items.size}}`;
+      return `{${this.items.length}}`;
     }
   },
+  receive: compositeReceive,
   alter: compositeAlter,
   view: compositeView
 });
@@ -201,11 +206,7 @@ var JsonProperty = component({
     <x render=".child"></x>
   </div>`
 });
-var valueWrapperMethods = {
-  toggleIsExpanded() {
-    return typeof this.value?.toggleIsExpanded === "function" ? this.setValue(this.value.toggleIsExpanded()) : this;
-  }
-};
+var valueWrapperMethods = {};
 var valueWrapperView = html`<span class="contents"><x render=".value"></x></span>`;
 function makeValueInspector({ name, fromData }) {
   return component({
@@ -272,11 +273,7 @@ function getComponents() {
   ];
 }
 
-// src/components/data/immutable-inspector.js
-var immutableContainerView = makeCompositeView({
-  typeClass: "text-accent",
-  borderClass: "border-accent"
-});
+// src/components/data/data.js
 function fmtAnyKey(k) {
   if (k === null) return "null";
   if (k === void 0) return "undefined";
@@ -288,232 +285,18 @@ function fmtAnyKey(k) {
   if (k instanceof Map) return `Map(${k.size})`;
   if (k instanceof Set) return `Set(${k.size})`;
   if (k instanceof Date) return k.toISOString();
-  if (List.isList(k)) return `List[${k.size}]`;
-  if (OMap.isOrderedMap(k)) return `OrderedMap[${k.size}]`;
-  if (IMap.isMap(k)) return `Map[${k.size}]`;
-  if (OrderedSet.isOrderedSet(k)) return `OrderedSet[${k.size}]`;
-  if (ISet.isSet(k)) return `Set[${k.size}]`;
   const ctor = k.constructor?.name;
   return ctor && ctor !== "Object" ? `${ctor} {…}` : Object.prototype.toString.call(k);
 }
-var fromIndexedData = {
-  fromData(coll, recurse) {
-    const items = coll.toArray().map((v, i) => ImEntry.make({ key: String(i), child: recurse(v) }));
-    return this.make({ items });
-  }
-};
-var fromKeyedData = {
-  fromData(map, recurse) {
-    const items = [];
-    map.forEach((v, k) => {
-      items.push(ImEntry.make({ key: fmtAnyKey(k), child: recurse(v) }));
-    });
-    return this.make({ items });
-  }
-};
-var fromSetData = {
-  fromData(set, recurse) {
-    const items = set.toArray().map((v) => ImEntry.make({ key: "", showKey: false, child: recurse(v) }));
-    return this.make({ items });
-  }
-};
-var ImEntry = component2({
-  name: "ImEntry",
-  fields: { key: "", child: null, showKey: true },
-  view: html2`<div class="flex items-center gap-2 leading-tight">
-    <span
-      @show=".showKey"
-      class="text-base-content/60 font-mono text-sm"
-      @text=".key"
-    ></span>
-    <span @show=".showKey" class="text-base-content/30">:</span>
-    <x render=".child"></x>
-  </div>`
-});
-var ImList = component2({
-  name: "ImList",
-  fields: compositeFields,
-  methods: {
-    ...compositeMethods,
-    typeText() {
-      return "List";
-    },
-    countText() {
-      return `[${this.items.size}]`;
-    }
-  },
-  alter: compositeAlter,
-  statics: fromIndexedData,
-  view: immutableContainerView
-});
-var ImStack = component2({
-  name: "ImStack",
-  fields: compositeFields,
-  methods: {
-    ...compositeMethods,
-    typeText() {
-      return "Stack";
-    },
-    countText() {
-      return `[${this.items.size}]`;
-    }
-  },
-  alter: compositeAlter,
-  statics: fromIndexedData,
-  view: immutableContainerView
-});
-var ImMap = component2({
-  name: "ImMap",
-  fields: compositeFields,
-  methods: {
-    ...compositeMethods,
-    typeText() {
-      return "Map";
-    },
-    countText() {
-      return `{${this.items.size}}`;
-    }
-  },
-  alter: compositeAlter,
-  statics: fromKeyedData,
-  view: immutableContainerView
-});
-var ImOMap = component2({
-  name: "ImOMap",
-  fields: compositeFields,
-  methods: {
-    ...compositeMethods,
-    typeText() {
-      return "OrderedMap";
-    },
-    countText() {
-      return `{${this.items.size}}`;
-    }
-  },
-  alter: compositeAlter,
-  statics: fromKeyedData,
-  view: immutableContainerView
-});
-var ImSet = component2({
-  name: "ImSet",
-  fields: compositeFields,
-  methods: {
-    ...compositeMethods,
-    typeText() {
-      return "Set";
-    },
-    countText() {
-      return `{${this.items.size}}`;
-    }
-  },
-  alter: compositeAlter,
-  statics: fromSetData,
-  view: immutableContainerView
-});
-var ImOSet = component2({
-  name: "ImOSet",
-  fields: compositeFields,
-  methods: {
-    ...compositeMethods,
-    typeText() {
-      return "OrderedSet";
-    },
-    countText() {
-      return `{${this.items.size}}`;
-    }
-  },
-  alter: compositeAlter,
-  statics: fromSetData,
-  view: immutableContainerView
-});
-var ImRecord = component2({
-  name: "ImRecord",
-  fields: { ...compositeFields, recordName: "" },
-  methods: {
-    ...compositeMethods,
-    typeText() {
-      return this.recordName ? `Record ${this.recordName}` : "Record";
-    },
-    countText() {
-      return `{${this.items.size}}`;
-    }
-  },
-  alter: compositeAlter,
-  statics: {
-    fromData(rec, recurse) {
-      const recordName = rec._name || rec.constructor.name || "Record";
-      const items = [];
-      rec.toSeq().forEach((v, k) => {
-        items.push(ImEntry.make({ key: String(k), child: recurse(v) }));
-      });
-      return this.make({ recordName, items });
-    }
-  },
-  view: immutableContainerView
-});
-var ImRange = component2({
-  name: "ImRange",
-  fields: { rangeText: "" },
-  statics: {
-    fromData(seq) {
-      const { _start: start, _end: end, _step: step } = seq;
-      const rangeText = step === 1 ? `${start}…${end}` : `${start}…${end} by ${step}`;
-      return this.make({ rangeText });
-    }
-  },
-  view: html2`<span
-    class="font-mono text-sm leading-tight inline-flex items-center gap-1"
-  >
-    <span class="font-mono text-accent">Range</span>
-    <span class="text-base-content/70" @text=".rangeText"></span>
-  </span>`
-});
-var ImInspector = makeValueInspector({
-  name: "ImInspector",
-  fromData(data) {
-    return this.make({ value: dispatch(data) });
-  }
-});
-function classifyImmutable(data, recurse) {
-  if (Seq.isSeq(data) && data._start !== void 0 && data._end !== void 0 && data._step !== void 0) {
-    return ImRange.Class.fromData(data, recurse);
-  }
-  if (Record.isRecord(data)) return ImRecord.Class.fromData(data, recurse);
-  if (List.isList(data)) return ImList.Class.fromData(data, recurse);
-  if (Stack.isStack(data)) return ImStack.Class.fromData(data, recurse);
-  if (OMap.isOrderedMap(data)) return ImOMap.Class.fromData(data, recurse);
-  if (IMap.isMap(data)) return ImMap.Class.fromData(data, recurse);
-  if (OrderedSet.isOrderedSet(data)) return ImOSet.Class.fromData(data, recurse);
-  if (ISet.isSet(data)) return ImSet.Class.fromData(data, recurse);
-  return null;
-}
-var dispatch = chain(classifyImmutable, classifyData);
-function getComponents2() {
-  return [
-    ImInspector,
-    ImEntry,
-    ImList,
-    ImStack,
-    ImMap,
-    ImOMap,
-    ImSet,
-    ImOSet,
-    ImRecord,
-    ImRange,
-    ...getComponents()
-  ];
-}
-
-// src/components/data/data.js
-var JsUndefined = component3({
+var JsUndefined = component2({
   name: "JsUndefined",
   fields: {},
-  view: html3`<span
+  view: html2`<span
     class="font-mono text-sm leading-tight text-warning italic"
     >undefined</span
   >`
 });
-var JsBigInt = component3({
+var JsBigInt = component2({
   name: "JsBigInt",
   fields: { value: "" },
   methods: {
@@ -521,21 +304,21 @@ var JsBigInt = component3({
       return `${this.value}n`;
     }
   },
-  view: html3`<span
+  view: html2`<span
     class="font-mono text-sm leading-tight text-info"
     @text="$text"
   ></span>`
 });
-var JsSymbol = component3({
+var JsSymbol = component2({
   name: "JsSymbol",
   fields: { description: "" },
-  view: html3`<span class="font-mono text-sm leading-tight"
+  view: html2`<span class="font-mono text-sm leading-tight"
     ><span class="text-info">Symbol</span
     ><span class="text-base-content/40">: </span
     ><span @text=".description"></span
   ></span>`
 });
-var JsFunction = component3({
+var JsFunction = component2({
   name: "JsFunction",
   fields: { name: "", kind: "function" },
   methods: {
@@ -552,7 +335,7 @@ var JsFunction = component3({
       return "() { … }";
     }
   },
-  view: html3`<span class="font-mono text-sm leading-tight"
+  view: html2`<span class="font-mono text-sm leading-tight"
     ><span class="text-base-content/40" @text="$prefixText"></span
     ><span
       class="text-info"
@@ -566,27 +349,27 @@ var JsFunction = component3({
     ></span
   ></span>`
 });
-var JsDate = component3({
+var JsDate = component2({
   name: "JsDate",
   fields: { value: "" },
-  view: html3`<span class="font-mono text-sm leading-tight"
+  view: html2`<span class="font-mono text-sm leading-tight"
     ><span class="text-info">Date</span
     ><span class="text-base-content/40">: </span
     ><span @text=".value"></span
   ></span>`
 });
-var JsRegExp = component3({
+var JsRegExp = component2({
   name: "JsRegExp",
   fields: { value: "" },
-  view: html3`<span
+  view: html2`<span
     class="font-mono text-sm leading-tight text-error"
     @text=".value"
   ></span>`
 });
-var JsError = component3({
+var JsError = component2({
   name: "JsError",
   fields: { errorName: "Error", message: "" },
-  view: html3`<span class="font-mono text-sm leading-tight"
+  view: html2`<span class="font-mono text-sm leading-tight"
     ><span class="text-info" @text=".errorName"></span
     ><span class="text-base-content/40">: </span
     ><span
@@ -596,14 +379,14 @@ var JsError = component3({
     ></span
   ></span>`
 });
-var JsSetItem = component3({
+var JsSetItem = component2({
   name: "JsSetItem",
   fields: { child: null },
-  view: html3`<div class="flex items-center gap-2 leading-tight">
+  view: html2`<div class="flex items-center gap-2 leading-tight">
     <x render=".child"></x>
   </div>`
 });
-var JsMap = component3({
+var JsMap = component2({
   name: "JsMap",
   fields: compositeFields,
   methods: {
@@ -612,9 +395,10 @@ var JsMap = component3({
       return "Map";
     },
     countText() {
-      return `(${this.items.size})`;
+      return `(${this.items.length})`;
     }
   },
+  receive: compositeReceive,
   alter: compositeAlter,
   statics: {
     fromData(map, recurse) {
@@ -627,7 +411,7 @@ var JsMap = component3({
   },
   view: compositeView
 });
-var JsSet = component3({
+var JsSet = component2({
   name: "JsSet",
   fields: compositeFields,
   methods: {
@@ -636,9 +420,10 @@ var JsSet = component3({
       return "Set";
     },
     countText() {
-      return `(${this.items.size})`;
+      return `(${this.items.length})`;
     }
   },
+  receive: compositeReceive,
   alter: compositeAlter,
   statics: {
     fromData(set, recurse) {
@@ -648,7 +433,7 @@ var JsSet = component3({
   },
   view: compositeView
 });
-var JsClassInstance = component3({
+var JsClassInstance = component2({
   name: "JsClassInstance",
   fields: { ...compositeFields, className: "Object" },
   methods: {
@@ -657,9 +442,10 @@ var JsClassInstance = component3({
       return this.className;
     },
     countText() {
-      return `{${this.items.size}}`;
+      return `{${this.items.length}}`;
     }
   },
+  receive: compositeReceive,
   alter: compositeAlter,
   statics: {
     fromData(obj, recurse) {
@@ -704,14 +490,14 @@ function classifyJsExtra(data, recurse) {
   }
   return null;
 }
-var dispatch2 = chain(classifyImmutable, classifyJsExtra, classifyJson);
+var dispatch = chain(classifyJsExtra, classifyJson);
 var DataInspector = makeValueInspector({
   name: "DataInspector",
   fromData(data) {
-    return this.make({ value: dispatch2(data) });
+    return this.make({ value: dispatch(data) });
   }
 });
-function getComponents3() {
+function getComponents2() {
   return [
     DataInspector,
     JsUndefined,
@@ -725,12 +511,12 @@ function getComponents3() {
     JsSet,
     JsClassInstance,
     JsSetItem,
-    ...getComponents2()
+    ...getComponents()
   ];
 }
 
 // src/components/data/json-schema.js
-import { component as component4, html as html4 } from "tutuca";
+import { component as component3, html as html3 } from "tutuca";
 var schemaNodeFields = {
   ...compositeFields,
   typeLabel: "",
@@ -748,27 +534,27 @@ function schemaNodeMethods(extra = {}) {
     ...extra
   };
 }
-var GRID_BODY = html4`<div
+var GRID_BODY = html3`<div
   @show=".isExpanded"
   class="ml-1 grid gap-x-2 gap-y-0.5 items-baseline border-l border-base-content/10 pl-2 mt-0.5"
   style="grid-template-columns: auto 1fr"
 >
   <x render-each=".items" @loop-with="getPageRange"></x>
 </div>`;
-var LIST_BODY = html4`<div
+var LIST_BODY = html3`<div
   @show=".isExpanded"
   class="ml-1 flex flex-col gap-0.5 border-l border-base-content/10 pl-2 mt-0.5"
 >
   <x render-each=".items" @loop-with="getPageRange"></x>
 </div>`;
 function makeSchemaView(accent, body = GRID_BODY) {
-  return html4`<span class="font-mono text-sm leading-tight inline-block">
+  return html3`<span class="font-mono text-sm leading-tight inline-block">
     <span class="inline-flex items-center gap-2 flex-wrap">
       <button
         type="button"
         class="cursor-pointer text-base-content/70 hover:text-base-content inline-flex items-center gap-1"
         :disabled="$isItemsEmpty"
-        @on.click="$toggleIsExpanded"
+        @on.click="toggleIsExpanded"
       >
         <span @hide="$isItemsEmpty" @text="$arrowText"></span>
         <span class="${accent} font-semibold" @text="$typeText"></span>
@@ -787,7 +573,7 @@ function makeSchemaView(accent, body = GRID_BODY) {
           type="button"
           class="join-item btn btn-xs"
           :disabled="$cannotPrevPage"
-          @on.click="$prevPage"
+          @on.click="prevPage"
         >
           «
         </button>
@@ -799,7 +585,7 @@ function makeSchemaView(accent, body = GRID_BODY) {
           type="button"
           class="join-item btn btn-xs"
           :disabled="$cannotNextPage"
-          @on.click="$nextPage"
+          @on.click="nextPage"
         >
           »
         </button>
@@ -925,12 +711,12 @@ function collectExtras(schema, recurse, primary) {
   }
   return rows;
 }
-var SchemaProperty = component4({
+var SchemaProperty = component3({
   name: "SchemaProperty",
   fields: { key: "", child: null, required: false },
   // `contents` so the key cell and value cell land directly in the parent's
   // grid, aligning values across rows.
-  view: html4`<div class="contents">
+  view: html3`<div class="contents">
     <span class="font-mono text-sm flex items-center gap-1 leading-tight">
       <span class="text-base-content/60" @text=".key"></span>
       <span @show=".required" class="text-error font-bold" title="required"
@@ -941,7 +727,7 @@ var SchemaProperty = component4({
     <x render=".child"></x>
   </div>`
 });
-var SchemaBranch = component4({
+var SchemaBranch = component3({
   name: "SchemaBranch",
   fields: { label: "", child: null, labelClass: "text-accent" },
   methods: {
@@ -951,7 +737,7 @@ var SchemaBranch = component4({
   },
   // `contents` so the label cell and value cell land directly in the parent's
   // grid, aligning values across rows.
-  view: html4`<div class="contents">
+  view: html3`<div class="contents">
     <span class="flex items-center gap-1 leading-tight">
       <span :class="$labelCssClass" @text=".label"></span>
       <span class="text-base-content/30">:</span>
@@ -961,12 +747,12 @@ var SchemaBranch = component4({
   views: {
     // Decoy: labelClass colours are chosen in JS, so they never appear as
     // literals for the margaui scanner.
-    _margauiClasses: html4`<p
+    _margauiClasses: html3`<p
       class="text-accent text-secondary text-info text-error"
     ></p>`
   }
 });
-var SchemaScalar = component4({
+var SchemaScalar = component3({
   name: "SchemaScalar",
   fields: schemaNodeFields,
   methods: schemaNodeMethods({
@@ -974,6 +760,7 @@ var SchemaScalar = component4({
       return "";
     }
   }),
+  receive: compositeReceive,
   alter: compositeAlter,
   statics: {
     fromData(schema, recurse) {
@@ -987,14 +774,15 @@ var SchemaScalar = component4({
   },
   view: makeSchemaView("text-success")
 });
-var SchemaObject = component4({
+var SchemaObject = component3({
   name: "SchemaObject",
   fields: schemaNodeFields,
   methods: schemaNodeMethods({
     countText() {
-      return this.items.size > 0 ? `{${this.items.size}}` : "";
+      return this.items.length > 0 ? `{${this.items.length}}` : "";
     }
   }),
+  receive: compositeReceive,
   alter: compositeAlter,
   statics: {
     fromData(schema, recurse) {
@@ -1051,14 +839,15 @@ var SchemaObject = component4({
   },
   view: makeSchemaView("text-primary")
 });
-var SchemaArray = component4({
+var SchemaArray = component3({
   name: "SchemaArray",
   fields: schemaNodeFields,
   methods: schemaNodeMethods({
     countText() {
-      return this.items.size > 0 ? `[${this.items.size}]` : "";
+      return this.items.length > 0 ? `[${this.items.length}]` : "";
     }
   }),
+  receive: compositeReceive,
   alter: compositeAlter,
   statics: {
     fromData(schema, recurse) {
@@ -1097,14 +886,15 @@ var SchemaArray = component4({
   },
   view: makeSchemaView("text-primary")
 });
-var SchemaEnum = component4({
+var SchemaEnum = component3({
   name: "SchemaEnum",
   fields: schemaNodeFields,
   methods: schemaNodeMethods({
     countText() {
-      return this.items.size > 0 ? `(${this.items.size})` : "";
+      return this.items.length > 0 ? `(${this.items.length})` : "";
     }
   }),
+  receive: compositeReceive,
   alter: compositeAlter,
   statics: {
     fromData(schema, recurse) {
@@ -1122,7 +912,7 @@ var SchemaEnum = component4({
   // list layout: each enum member is a single value rendered one per line.
   view: makeSchemaView("text-info", LIST_BODY)
 });
-var SchemaConst = component4({
+var SchemaConst = component3({
   name: "SchemaConst",
   fields: { value: null },
   statics: {
@@ -1130,7 +920,7 @@ var SchemaConst = component4({
       return this.make({ value: JsonViewer.Class.fromData(schema.const) });
     }
   },
-  view: html4`<span
+  view: html3`<span
     class="font-mono text-sm leading-tight inline-flex items-center gap-2"
   >
     <span class="text-info font-semibold">const</span>
@@ -1138,14 +928,15 @@ var SchemaConst = component4({
     <x render=".value"></x>
   </span>`
 });
-var SchemaCombinator = component4({
+var SchemaCombinator = component3({
   name: "SchemaCombinator",
   fields: schemaNodeFields,
   methods: schemaNodeMethods({
     countText() {
-      return this.items.size > 0 ? `(${this.items.size})` : "";
+      return this.items.length > 0 ? `(${this.items.length})` : "";
     }
   }),
+  receive: compositeReceive,
   alter: compositeAlter,
   statics: {
     fromData(schema, recurse) {
@@ -1169,7 +960,7 @@ var SchemaCombinator = component4({
   // list layout: members are full schema nodes listed one per line, no keys.
   view: makeSchemaView("text-accent", LIST_BODY)
 });
-var SchemaConditional = component4({
+var SchemaConditional = component3({
   name: "SchemaConditional",
   fields: {
     ifNode: null,
@@ -1189,7 +980,7 @@ var SchemaConditional = component4({
       });
     }
   },
-  view: html4`<span class="font-mono text-sm leading-tight inline-block">
+  view: html3`<span class="font-mono text-sm leading-tight inline-block">
     <span class="inline-flex items-center gap-2 flex-wrap">
       <span class="text-accent font-semibold">conditional</span>
       <span @show=".deprecated" class="badge badge-xs badge-warning"
@@ -1234,7 +1025,7 @@ var SchemaConditional = component4({
     </div>
   </span>`
 });
-var SchemaNot = component4({
+var SchemaNot = component3({
   name: "SchemaNot",
   fields: { child: null },
   statics: {
@@ -1242,7 +1033,7 @@ var SchemaNot = component4({
       return this.make({ child: recurse(schema.not) });
     }
   },
-  view: html4`<span
+  view: html3`<span
     class="font-mono text-sm leading-tight inline-flex items-center gap-2"
   >
     <span class="text-error font-semibold">not</span>
@@ -1250,7 +1041,7 @@ var SchemaNot = component4({
     <x render=".child"></x>
   </span>`
 });
-var SchemaBoolean = component4({
+var SchemaBoolean = component3({
   name: "SchemaBoolean",
   fields: { value: true },
   methods: {
@@ -1262,21 +1053,21 @@ var SchemaBoolean = component4({
       return `${base} ${this.value ? "text-success" : "text-error"}`;
     }
   },
-  view: html4`<span :class="$cssClass" @text="$text"></span>`,
+  view: html3`<span :class="$cssClass" @text="$text"></span>`,
   views: {
     // Decoy: cssClass() builds these at runtime, so they never appear as
     // literals the margaui scanner can find.
-    _margauiClasses: html4`<p class="text-success text-error"></p>`
+    _margauiClasses: html3`<p class="text-success text-error"></p>`
   }
 });
-var SchemaRef = component4({
+var SchemaRef = component3({
   name: "SchemaRef",
   fields: { target: "" },
-  view: html4`<span class="font-mono text-sm leading-tight text-secondary"
+  view: html3`<span class="font-mono text-sm leading-tight text-secondary"
     >→ <span @text=".target"></span
   ></span>`
 });
-var SchemaViewer = component4({
+var SchemaViewer = component3({
   name: "SchemaViewer",
   fields: {
     value: null,
@@ -1293,17 +1084,22 @@ var SchemaViewer = component4({
   statics: {
     fromData(schema) {
       return this.make({
-        value: dispatch3(schema),
+        value: dispatch2(schema),
         raw: JsonViewer.Class.fromData(schema),
         rawSchema: schema
       });
     }
   },
-  view: html4`<div class="inline-flex flex-col items-start gap-1">
+  receive: {
+    toggleShowRaw(draft) {
+      draft.showRaw = !draft.showRaw;
+    }
+  },
+  view: html3`<div class="inline-flex flex-col items-start gap-1">
     <button
       type="button"
       class="btn btn-xs btn-ghost self-end"
-      @on.click="$toggleShowRaw"
+      @on.click="toggleShowRaw"
       @text="$toggleLabel"
     ></button>
     <x render=".value" @hide=".showRaw"></x>
@@ -1335,8 +1131,8 @@ function classifySchema(schema, recurse = classifySchema) {
     return SchemaConditional.Class.fromData(schema, recurse);
   return SchemaScalar.Class.fromData(schema, recurse);
 }
-var dispatch3 = chain(classifySchema);
-function getComponents4() {
+var dispatch2 = chain(classifySchema);
+function getComponents3() {
   return [
     SchemaViewer,
     SchemaScalar,
@@ -1356,13 +1152,13 @@ function getComponents4() {
 }
 
 // src/components/tutuca/activity-inspector.js
-import { component as component9, html as html9 } from "tutuca";
+import { component as component8, html as html8 } from "tutuca";
 
 // src/components/tutuca/instance-inspector.js
-import { component as component8, html as html8, isRecord } from "tutuca";
+import { component as component7, html as html7 } from "tutuca";
 
 // src/components/tutuca/component-inspector.js
-import { component as component5, html as html5 } from "tutuca";
+import { component as component4, html as html4 } from "tutuca";
 function introspectComponent(comp) {
   const { fields, methods } = comp.Class.getMetaClass();
   return {
@@ -1393,18 +1189,18 @@ var sectionView = makeCompositeView({
   // inspector can toggle every section at once.
   toggleHandler: "toggle isCtrl"
 });
-var CompName = component5({
+var CompName = component4({
   name: "CompName",
   fields: { name: "" },
-  view: html5`<span
+  view: html4`<span
     class="font-mono text-sm leading-tight badge badge-sm badge-ghost"
     @text=".name"
   ></span>`
 });
-var CompField = component5({
+var CompField = component4({
   name: "CompField",
   fields: { name: "", typeName: "", child: null },
-  view: html5`<div class="flex items-center gap-2 leading-tight">
+  view: html4`<div class="flex items-center gap-2 leading-tight">
     <span class="text-base-content/70 font-mono text-sm" @text=".name"></span>
     <span class="text-base-content/30">:</span>
     <span class="text-base-content/50 font-mono text-xs" @text=".typeName"></span>
@@ -1412,7 +1208,7 @@ var CompField = component5({
     <x render=".child"></x>
   </div>`
 });
-var CompView = component5({
+var CompView = component4({
   name: "CompView",
   fields: { name: "", rawView: "", isExpanded: false },
   methods: {
@@ -1421,15 +1217,16 @@ var CompView = component5({
     }
   },
   receive: {
-    toggle(isCtrl, ctx) {
+    ...compositeReceive,
+    toggle(draft, isCtrl, ctx) {
       if (isCtrl) {
         ctx.intent("toggleAllViews", [!this.isExpanded], { route: ["dyn"] });
         return this;
       }
-      return this.toggleIsExpanded();
+      draft.isExpanded = !draft.isExpanded;
     }
   },
-  view: html5`<div class="flex flex-col gap-0.5 leading-tight">
+  view: html4`<div class="flex flex-col gap-0.5 leading-tight">
     <button
       type="button"
       class="cursor-pointer text-base-content/70 hover:text-base-content inline-flex items-center gap-1 self-start"
@@ -1444,7 +1241,7 @@ var CompView = component5({
     ><code @text=".rawView"></code></pre>
   </div>`
 });
-var CompSection = component5({
+var CompSection = component4({
   name: "CompSection",
   fields: { ...compositeFields, label: "" },
   methods: {
@@ -1453,57 +1250,37 @@ var CompSection = component5({
       return this.label;
     },
     countText() {
-      return `(${this.items.size})`;
+      return `(${this.items.length})`;
     }
   },
   receive: {
-    toggle(isCtrl, ctx) {
+    ...compositeReceive,
+    toggle(draft, isCtrl, ctx) {
       if (isCtrl) {
         ctx.intent("toggleAllSections", [!this.isExpanded], { route: ["dyn"] });
         return this;
       }
-      return this.toggleIsExpanded();
+      draft.isExpanded = !draft.isExpanded;
     }
   },
   alter: compositeAlter,
   view: sectionView
 });
-var ComponentInspector = component5({
+var ComponentInspector = component4({
   name: "ComponentInspector",
   fields: { compName: "", compId: 0, sections: [] },
   methods: {
     idText() {
       return `#${this.compId}`;
-    },
-    setAllSections(state) {
-      return this.setSections(this.sections.map((s) => s.setIsExpanded(state)));
-    },
-    expandAll() {
-      return this.setAllSections(true);
-    },
-    collapseAll() {
-      return this.setAllSections(false);
-    },
-    setAllViews(state) {
-      return this.setSections(
-        this.sections.map(
-          (s) => s.label === "Views" ? s.setItems(s.items.map((v) => v.setIsExpanded(state))) : s
-        )
-      );
-    },
-    expandAllViews() {
-      return this.setAllViews(true);
-    },
-    collapseAllViews() {
-      return this.setAllViews(false);
     }
   },
   intent: {
-    toggleAllSections(state) {
-      return this.setAllSections(state);
+    toggleAllSections(draft, state) {
+      for (const section of draft.sections) section.isExpanded = state;
     },
-    toggleAllViews(state) {
-      return this.setAllViews(state);
+    toggleAllViews(draft, state) {
+      const section = draft.sections.find((candidate) => candidate.label === "Views");
+      if (section) for (const view of section.items) view.isExpanded = state;
     }
   },
   statics: {
@@ -1522,7 +1299,7 @@ var ComponentInspector = component5({
           (f) => CompField.make({
             name: f.name,
             typeName: f.type,
-            child: ImInspector.Class.fromData(f.defaultValue)
+            child: DataInspector.Class.fromData(f.defaultValue)
           })
         ),
         true
@@ -1539,7 +1316,7 @@ var ComponentInspector = component5({
       return this.make({ compName: d.name, compId: d.id, sections });
     }
   },
-  view: html5`<div class="font-mono text-sm leading-tight flex flex-col gap-1">
+  view: html4`<div class="font-mono text-sm leading-tight flex flex-col gap-1">
     <div class="inline-flex items-center gap-2">
       <span class="font-semibold" @text=".compName"></span>
       <span class="text-base-content/40 text-xs" @text="$idText"></span>
@@ -1547,12 +1324,12 @@ var ComponentInspector = component5({
     <x render-each=".sections"></x>
   </div>`
 });
-function getComponents5() {
+function getComponents4() {
   return [ComponentInspector, CompSection, CompField, CompName, CompView, ...getComponents2()];
 }
 
 // src/components/tutuca/lint-inspector.js
-import { component as component6, html as html6 } from "tutuca";
+import { component as component5, html as html5 } from "tutuca";
 var tagDisplay = (tag) => tag ? String(tag).toLowerCase() : "";
 function originSuffix(info) {
   if (!info) return "";
@@ -1596,8 +1373,8 @@ function lintMessage(id, info = {}) {
       return `'$${info.name}' calls a method, but '${info.name}' is a field — use '.${info.name}'${originSuffix(info)}`;
     case "RECEIVE_HANDLER_NOT_IMPLEMENTED":
       return `Receive handler '${info.name}' is not implemented${eventSuffix(info)}`;
-    case "RECEIVE_HANDLER_METHOD_NOT_IMPLEMENTED":
-      return `Method '$${info.name}' is not implemented${eventSuffix(info)}`;
+    case "EVENT_HANDLER_METHOD_NOT_ALLOWED":
+      return `Event handler '$${info.name}' is a method reference — move it to receive and use '${info.name}'`;
     case "ALT_HANDLER_NOT_DEFINED":
       return `Alter handler '${info.name}' is not defined${originSuffix(info)}`;
     case "DYN_VAL_NOT_DEFINED":
@@ -1631,7 +1408,7 @@ var componentView = makeCompositeView({
   typeClass: "font-semibold",
   borderClass: "border-base-content/15"
 });
-var LintFinding = component6({
+var LintFinding = component5({
   name: "LintFinding",
   fields: { id: "", level: "", message: "", suggestion: "", detail: null },
   methods: {
@@ -1655,11 +1432,11 @@ var LintFinding = component6({
   },
   // Decoy so the runtime-built soft badge colours survive the class scan.
   views: {
-    _palette: html6`<span
+    _palette: html5`<span
       class="badge-soft badge-error badge-warning badge-neutral"
     ></span>`
   },
-  view: html6`<div class="flex flex-col gap-1.5 py-1.5 leading-snug">
+  view: html5`<div class="flex flex-col gap-1.5 py-1.5 leading-snug">
     <div class="flex items-baseline gap-2 flex-wrap">
       <span :class="$levelBadgeClass" @text=".level"></span>
       <span class="text-sm text-base-content/90" @text=".message"></span>
@@ -1682,10 +1459,10 @@ function buildFinding(f) {
     level: f.level ?? "",
     message: lintMessage(f.id, info),
     suggestion: suggestionText(f.suggestion),
-    detail: ImInspector.Class.fromData({ id: f.id, info, context: ctx })
+    detail: DataInspector.Class.fromData({ id: f.id, info, context: ctx })
   });
 }
-var LintComponent = component6({
+var LintComponent = component5({
   name: "LintComponent",
   fields: { ...compositeFields, componentName: "", errors: 0, warns: 0, hints: 0 },
   methods: {
@@ -1701,10 +1478,11 @@ var LintComponent = component6({
       return parts.length ? parts.join(", ") : "ok";
     }
   },
+  receive: compositeReceive,
   alter: compositeAlter,
   view: componentView
 });
-var LintReport = component6({
+var LintReport = component5({
   name: "LintReport",
   fields: {
     title: "",
@@ -1775,11 +1553,11 @@ var LintReport = component6({
   },
   // Decoy so the runtime-absent soft tally colours are emitted.
   views: {
-    _palette: html6`<span
+    _palette: html5`<span
       class="badge-soft badge-error badge-warning badge-neutral badge-success"
     ></span>`
   },
-  view: html6`<div class="font-mono text-sm leading-snug flex flex-col gap-3">
+  view: html5`<div class="font-mono text-sm leading-snug flex flex-col gap-3">
     <div class="flex items-center gap-2 flex-wrap">
       <span class="font-semibold" @text=".title"></span>
       <span class="text-base-content/40 text-xs" @text=".path"></span>
@@ -1807,12 +1585,12 @@ var LintReport = component6({
     <x render-each=".components"></x>
   </div>`
 });
-function getComponents6() {
+function getComponents5() {
   return [LintReport, LintComponent, LintFinding, ...getComponents2()];
 }
 
 // src/components/tutuca/test-inspector.js
-import { component as component7, html as html7 } from "tutuca";
+import { component as component6, html as html6 } from "tutuca";
 function collectTests(getTests) {
   const root = { children: [] };
   const stack = [root];
@@ -1845,7 +1623,7 @@ var suiteView = makeCompositeView({
   // it can expand/collapse every suite at once (like the component inspector).
   toggleHandler: "toggle isCtrl"
 });
-var TestCase = component7({
+var TestCase = component6({
   name: "TestCase",
   fields: { title: "", status: "", durationMs: 0, message: "", detail: null },
   methods: {
@@ -1884,9 +1662,9 @@ var TestCase = component7({
   },
   // Decoy so the runtime-built mark colors survive the margaui class scan.
   views: {
-    _palette: html7`<span class="text-success text-error text-base-content/40"></span>`
+    _palette: html6`<span class="text-success text-error text-base-content/40"></span>`
   },
-  view: html7`<div class="flex flex-col gap-0.5 leading-tight">
+  view: html6`<div class="flex flex-col gap-0.5 leading-tight">
     <div class="flex items-center gap-2">
       <span :class="$markClass" @text="$mark"></span>
       <span class="font-mono text-sm" @text=".title"></span>
@@ -1896,7 +1674,7 @@ var TestCase = component7({
     <div @show="$hasDetail" class="ml-5"><x render=".detail"></x></div>
   </div>`
 });
-var TestSuite = component7({
+var TestSuite = component6({
   name: "TestSuite",
   fields: { ...compositeFields, title: "", summary: "" },
   methods: {
@@ -1905,24 +1683,26 @@ var TestSuite = component7({
       return this.title;
     },
     countText() {
-      return this.summary || `(${this.items.size})`;
+      return this.summary || `(${this.items.length})`;
     }
   },
   receive: {
-    toggle(isCtrl, ctx) {
+    ...compositeReceive,
+    toggle(draft, isCtrl, ctx) {
       if (isCtrl) {
         ctx.intent("toggleAll", [!this.isExpanded], { route: ["dyn"] });
         return this;
       }
-      return this.toggleIsExpanded();
+      draft.isExpanded = !draft.isExpanded;
     }
   },
   alter: compositeAlter,
   view: suiteView
 });
 function setSuiteTreeExpanded(node, state) {
-  if (typeof node.setIsExpanded !== "function") return node;
-  return node.setIsExpanded(state).setItems(node.items.map((c) => setSuiteTreeExpanded(c, state)));
+  if (!("isExpanded" in node)) return;
+  node.isExpanded = state;
+  for (const child of node.items) setSuiteTreeExpanded(child, state);
 }
 function buildDefNode(node) {
   if (Array.isArray(node.children)) {
@@ -1956,7 +1736,7 @@ function buildResultNode(node) {
     status,
     durationMs: node.durationMs ?? 0,
     message: err?.message ?? "",
-    detail: hasDiff ? ImInspector.Class.fromData({ expected: err.expected, actual: err.actual }) : null
+    detail: hasDiff ? DataInspector.Class.fromData({ expected: err.expected, actual: err.actual }) : null
   });
   return {
     comp,
@@ -1965,7 +1745,7 @@ function buildResultNode(node) {
     skip: status === "skip" ? 1 : 0
   };
 }
-var TestReport = component7({
+var TestReport = component6({
   name: "TestReport",
   fields: {
     title: "",
@@ -1991,15 +1771,12 @@ var TestReport = component7({
     },
     hasSkips() {
       return this.hasCounts && this.skip > 0;
-    },
-    setAllSuites(state) {
-      return this.setSuites(this.suites.map((s) => setSuiteTreeExpanded(s, state)));
     }
   },
   intent: {
     // ctrl/cmd-click on any suite expands/collapses the whole tree at once.
-    toggleAll(state) {
-      return this.setAllSuites(state);
+    toggleAll(draft, state) {
+      for (const suite of draft.suites) setSuiteTreeExpanded(suite, state);
     }
   },
   statics: {
@@ -2026,7 +1803,7 @@ var TestReport = component7({
       });
     }
   },
-  view: html7`<div class="font-mono text-sm leading-tight flex flex-col gap-1">
+  view: html6`<div class="font-mono text-sm leading-tight flex flex-col gap-1">
     <div class="flex items-center gap-2 flex-wrap">
       <span class="font-semibold" @text=".title"></span>
       <span class="text-base-content/40 text-xs" @text=".path"></span>
@@ -2049,17 +1826,17 @@ var TestReport = component7({
     <x render-each=".suites"></x>
   </div>`
 });
-function getComponents7() {
+function getComponents6() {
   return [TestReport, TestSuite, TestCase, ...getComponents2()];
 }
 
 // src/components/tutuca/instance-inspector.js
-var isComponentInstance = (v) => isRecord(v) && typeof v?.constructor?.getMetaClass === "function";
+var isComponentInstance = (v) => v !== null && typeof v === "object" && typeof v?.constructor?.getMetaClass === "function";
 var fieldsView = makeCompositeView({
   typeClass: "font-semibold",
   borderClass: "border-base-content/15"
 });
-var InstanceFields = component8({
+var InstanceFields = component7({
   name: "InstanceFields",
   fields: { ...compositeFields, typeName: "" },
   methods: {
@@ -2068,17 +1845,18 @@ var InstanceFields = component8({
       return this.typeName;
     },
     countText() {
-      return `{${this.items.size}}`;
+      return `{${this.items.length}}`;
     }
   },
+  receive: compositeReceive,
   alter: compositeAlter,
   statics: {
     fromData(instance, comp) {
       const d = introspectComponent(comp);
       const items = d.fields.map(
-        (f) => ImEntry.make({
+        (f) => JsonProperty.make({
           key: f.name,
-          child: ImInspector.Class.fromData(instance.get(f.name))
+          child: DataInspector.Class.fromData(instance[f.name])
         })
       );
       return this.make({ typeName: d.name, items, isExpanded: true });
@@ -2089,7 +1867,7 @@ var InstanceFields = component8({
 var InstanceInspector = makeValueInspector({
   name: "InstanceInspector",
   fromData(instance, comp) {
-    const value = comp && isComponentInstance(instance) ? InstanceFields.Class.fromData(instance, comp) : ImInspector.Class.fromData(instance);
+    const value = comp && isComponentInstance(instance) ? InstanceFields.Class.fromData(instance, comp) : DataInspector.Class.fromData(instance);
     return this.make({ value });
   }
 });
@@ -2101,7 +1879,7 @@ function asLintView(lint) {
   if (lint == null) return null;
   return isComponentInstance(lint) ? lint : LintReport.Class.fromData(lint);
 }
-var InstanceExplorer = component8({
+var InstanceExplorer = component7({
   name: "InstanceExplorer",
   fields: {
     activeTab: "instance",
@@ -2128,14 +1906,19 @@ var InstanceExplorer = component8({
       });
     }
   },
-  view: html8`<div class="font-mono text-sm leading-snug flex flex-col gap-3">
+  receive: {
+    setActiveTab(draft, value) {
+      draft.activeTab = value;
+    }
+  },
+  view: html7`<div class="font-mono text-sm leading-snug flex flex-col gap-3">
     <div role="tablist" class="tabs">
       <a
         role="tab"
         @if.class="equals? .activeTab 'instance'"
         @then="'tab tab-active'"
         @else="'tab'"
-        @on.click="$setActiveTab 'instance'"
+        @on.click="setActiveTab 'instance'"
       >
         Instance
       </a>
@@ -2145,7 +1928,7 @@ var InstanceExplorer = component8({
         @if.class="equals? .activeTab 'component'"
         @then="'tab tab-active'"
         @else="'tab'"
-        @on.click="$setActiveTab 'component'"
+        @on.click="setActiveTab 'component'"
       >
         Component
       </a>
@@ -2155,7 +1938,7 @@ var InstanceExplorer = component8({
         @if.class="equals? .activeTab 'tests'"
         @then="'tab tab-active'"
         @else="'tab'"
-        @on.click="$setActiveTab 'tests'"
+        @on.click="setActiveTab 'tests'"
       >
         Tests
       </a>
@@ -2165,7 +1948,7 @@ var InstanceExplorer = component8({
         @if.class="equals? .activeTab 'lint'"
         @then="'tab tab-active'"
         @else="'tab'"
-        @on.click="$setActiveTab 'lint'"
+        @on.click="setActiveTab 'lint'"
       >
         Lint
       </a>
@@ -2187,14 +1970,14 @@ var InstanceExplorer = component8({
     </div>
   </div>`
 });
-function getComponents8() {
+function getComponents7() {
   const all = [
     InstanceExplorer,
     InstanceInspector,
     InstanceFields,
-    ...getComponents5(),
-    ...getComponents7(),
-    ...getComponents6()
+    ...getComponents4(),
+    ...getComponents6(),
+    ...getComponents5()
   ];
   const seen = /* @__PURE__ */ new Set();
   return all.filter((c) => {
@@ -2206,7 +1989,7 @@ function getComponents8() {
 
 // src/components/tutuca/activity-inspector.js
 var ACTIVITY_CAP = 50;
-var ActivityEntry = component9({
+var ActivityEntry = component8({
   name: "ActivityEntry",
   fields: {
     kind: "",
@@ -2219,7 +2002,7 @@ var ActivityEntry = component9({
     after: null,
     hasAfter: true
   },
-  view: html9`<div
+  view: html8`<div
     class="rounded border border-base-content/15 p-2 text-sm flex flex-col gap-1"
   >
     <div class="flex items-center gap-2 flex-wrap">
@@ -2268,15 +2051,13 @@ var ActivityEntry = component9({
     </div>
   </div>`
 });
-var ActivityLog = component9({
+var ActivityLog = component8({
   name: "ActivityLog",
   fields: { events: [], hasEvents: false },
-  methods: {
-    appendEntry(entry) {
-      return this.setEvents(this.events.unshift(entry).slice(0, ACTIVITY_CAP)).setHasEvents(true);
-    }
+  statics: {
+    cap: ACTIVITY_CAP
   },
-  view: html9`<div class="p-3 flex flex-col gap-2 max-h-[60vh] overflow-y-auto">
+  view: html8`<div class="p-3 flex flex-col gap-2 max-h-[60vh] overflow-y-auto">
     <div class="text-xs opacity-40" @hide=".hasEvents">
       No activity yet — interact with the component.
     </div>
@@ -2314,7 +2095,7 @@ function recordToEntry(record, { inspect, pathLabel = pathKeysLabel } = {}) {
     hasAfter
   });
 }
-function getComponents9() {
+function getComponents8() {
   return [ActivityLog, ActivityEntry];
 }
 
@@ -2356,16 +2137,15 @@ async function buildInspectorViews(value, scope, { getTests = null, components =
 }
 
 // src/components/index.js
-function getComponents10() {
+function getComponents9() {
   const all = [
-    ...getComponents9(),
-    ...getComponents5(),
     ...getComponents8(),
-    ...getComponents6(),
-    ...getComponents7(),
-    ...getComponents3(),
     ...getComponents4(),
+    ...getComponents7(),
+    ...getComponents5(),
+    ...getComponents6(),
     ...getComponents2(),
+    ...getComponents3(),
     ...getComponents()
   ];
   const seen = /* @__PURE__ */ new Set();
@@ -2384,16 +2164,6 @@ export {
   CompView,
   ComponentInspector,
   DataInspector,
-  ImEntry,
-  ImInspector,
-  ImList,
-  ImMap,
-  ImOMap,
-  ImOSet,
-  ImRange,
-  ImRecord,
-  ImSet,
-  ImStack,
   InstanceExplorer,
   InstanceFields,
   InstanceInspector,
@@ -2438,7 +2208,6 @@ export {
   buildInspectorViews,
   chain,
   classifyData,
-  classifyImmutable,
   classifyJsExtra,
   classifyJson,
   classifySchema,
@@ -2446,10 +2215,11 @@ export {
   compositeAlter,
   compositeFields,
   compositeMethods,
+  compositeReceive,
   compositeView,
   fmtActivityTime,
   fmtAnyKey,
-  getComponents10 as getComponents,
+  getComponents9 as getComponents,
   introspectComponent,
   isComponentInstance,
   lintMessage,