tutuca 0.9.106 → 0.9.108

package/dist/tutuca-components.js

@@ -1343,8 +1343,8 @@ var SchemaViewer = component4({
       @on.click="$toggleShowRaw"
       @text="$toggleLabel"
     ></button>
-    <x render=".value" hide=".showRaw"></x>
-    <x render=".raw" show=".showRaw"></x>
+    <x render=".value" @hide=".showRaw"></x>
+    <x render=".raw" @show=".showRaw"></x>
   </div>`
 });
 function hasObjectKeywords(schema) {
@@ -1402,6 +1402,12 @@ function getComponents4() {
   ];
 }
 
+// src/components/tutuca/activity-inspector.js
+import { component as component9, html as html9 } from "tutuca";
+
+// src/components/tutuca/instance-inspector.js
+import { component as component8, html as html8, isRecord } from "tutuca";
+
 // src/components/tutuca/component-inspector.js
 import { component as component5, html as html5 } from "tutuca";
 function introspectComponent(comp) {
@@ -1579,9 +1585,6 @@ function getComponents5() {
   return [ComponentInspector, CompSection, CompField, CompName, CompView, ...getComponents2()];
 }
 
-// src/components/tutuca/instance-inspector.js
-import { component as component8, html as html8, isRecord } from "tutuca";
-
 // src/components/tutuca/lint-inspector.js
 import { component as component6, html as html6 } from "tutuca";
 var tagDisplay = (tag) => tag ? String(tag).toLowerCase() : "";
@@ -1648,6 +1651,8 @@ function lintMessage(id, info = {}) {
       return `Redundant template string — '{${info.simpler}}' should be just '${info.simpler}'${originSuffix(info)}`;
     case "PLACEHOLDERLESS_TEMPLATE_STRING":
       return `Template string has no dynamic parts — use the literal ${info.literal} instead${originSuffix(info)}`;
+    case "CONSTANT_CONDITION":
+      return `Constant condition ${info.literal} — reference a field ('.name') or method ('$name')${originSuffix(info)}`;
     case "ASYNC_HANDLER":
       return `Handler '${info.name}' in '${info.channel}' is async — handlers must be synchronous`;
     case "UNKNOWN_COMPONENT_SPEC_KEY":
@@ -2235,6 +2240,120 @@ function getComponents8() {
   });
 }
 
+// src/components/tutuca/activity-inspector.js
+var ACTIVITY_CAP = 50;
+var ActivityEntry = component9({
+  name: "ActivityEntry",
+  fields: {
+    kind: "",
+    name: "",
+    handlerName: "",
+    matched: "",
+    pathLabel: "",
+    time: "",
+    before: null,
+    after: null,
+    hasAfter: true
+  },
+  view: html9`<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">
+      <span
+        title="How this was dispatched: receive (send), bubble, response, input, or request"
+        class="badge badge-sm badge-neutral"
+        @text=".kind"
+      ></span>
+      <span
+        title="Message name dispatched — for a DOM input, the event type (click, input, change, keydown, …)"
+        class="font-mono font-semibold"
+        @text=".name"
+      ></span>
+      <span
+        title="Actual handler that ran — shown only when it differs from the name (e.g. a $unknown fallback)"
+        class="text-xs opacity-60 font-mono"
+        @show="truthy? .handlerName"
+        @text=".handlerName"
+      ></span>
+      <span
+        title="Path to the target component"
+        class="text-xs opacity-40 font-mono"
+        @text=".pathLabel"
+      ></span>
+      <span
+        title="Handler resolution — exact: matched by name · unknown: $unknown fallback · none: no handler (no-op)"
+        class="badge badge-xs badge-ghost"
+        @show="truthy? .matched"
+        @text=".matched"
+      ></span>
+      <span
+        title="Time this event ran (HH:MM:SS.mmm)"
+        class="ml-auto text-xs opacity-40 font-mono tabular-nums"
+        @text=".time"
+      ></span>
+    </div>
+    <div class="flex gap-3 items-start font-mono text-xs">
+      <div class="flex-1 min-w-0">
+        <div class="opacity-50" title="Target state before the handler ran">before</div>
+        <x render=".before"></x>
+      </div>
+      <div class="flex-1 min-w-0" @show=".hasAfter">
+        <div class="opacity-50" title="Target state after the handler ran">after</div>
+        <x render=".after"></x>
+      </div>
+    </div>
+  </div>`
+});
+var ActivityLog = component9({
+  name: "ActivityLog",
+  fields: { events: [], hasEvents: false },
+  methods: {
+    appendEntry(entry) {
+      return this.setEvents(this.events.unshift(entry).slice(0, ACTIVITY_CAP)).setHasEvents(true);
+    }
+  },
+  view: html9`<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>
+    <x render-each=".events"></x>
+  </div>`
+});
+function fmtActivityTime(ts) {
+  const d = new Date(ts);
+  const p = (n, w = 2) => String(n).padStart(w, "0");
+  return `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}.${p(d.getMilliseconds(), 3)}`;
+}
+function pathKeysLabel(pathKeys) {
+  return pathKeys.map((k) => k.key === undefined ? k.field : `${k.field}[${k.key}]`).join(".");
+}
+function makeInspect(app) {
+  return (value) => {
+    const comp = isComponentInstance(value) ? app.comps.getCompFor(value) : null;
+    return InstanceInspector.Class.fromData(value, comp);
+  };
+}
+function recordToEntry(record, { inspect, pathLabel = pathKeysLabel } = {}) {
+  const hasAfter = record.after !== undefined;
+  const primary = record.name ?? record.handlerName ?? "?";
+  const handler = record.handlerName ?? "";
+  const handlerLabel = handler && handler !== primary ? `→ ${handler}` : "";
+  return ActivityEntry.make({
+    kind: record.kind ?? "",
+    name: primary,
+    handlerName: handlerLabel,
+    matched: record.matched ?? "",
+    pathLabel: pathLabel(record.pathKeys),
+    time: fmtActivityTime(record.timestamp),
+    before: inspect(record.before),
+    after: hasAfter ? inspect(record.after) : null,
+    hasAfter
+  });
+}
+function getComponents9() {
+  return [ActivityLog, ActivityEntry];
+}
+
 // src/components/build-views.js
 async function buildInspectorViews(value, scope, { getTests = null, components = [], dev = null, name } = {}) {
   const comp = isComponentInstance(value) ? scope.getCompFor(value) : null;
@@ -2273,8 +2392,9 @@ async function buildInspectorViews(value, scope, { getTests = null, components =
 }
 
 // src/components/index.js
-function getComponents9() {
+function getComponents10() {
   const all = [
+    ...getComponents9(),
     ...getComponents5(),
     ...getComponents8(),
     ...getComponents6(),
@@ -2294,13 +2414,17 @@ function getComponents9() {
 }
 export {
   valueWrapperMethods,
+  recordToEntry,
+  pathKeysLabel,
   makeValueInspector,
+  makeInspect,
   makeCompositeView,
   lintMessage,
   isComponentInstance,
   introspectComponent,
-  getComponents9 as getComponents,
+  getComponents10 as getComponents,
   fmtAnyKey,
+  fmtActivityTime,
   compositeView,
   compositeMethods,
   compositeFields,
@@ -2369,5 +2493,7 @@ export {
   CompView,
   CompSection,
   CompName,
-  CompField
+  CompField,
+  ActivityLog,
+  ActivityEntry
 };