@typeonce/effect-machine-devtools 0.27.0 → 0.28.0

package/src/internal/browser/styles.css

@@ -455,8 +455,10 @@ button {
 
 .chart-state {
   position: absolute;
-  display: block;
-  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 12px;
   border: 1px solid #30363f;
   border-radius: 4px;
   color: #d9dce1;
@@ -493,7 +495,6 @@ button {
 
 .chart-state-heading,
 .chart-state-identity,
-.chart-field-row,
 .chart-activity-row {
   display: flex;
   min-width: 0;
@@ -523,18 +524,7 @@ button {
   box-shadow: 0 0 0 3px rgb(117 167 255 / 10%);
 }
 
-.chart-state-status.is-initial {
-  border-color: #d9a441;
-  background: #d9a441;
-  box-shadow: 0 0 0 3px rgb(217 164 65 / 12%);
-}
-
-.chart-state-status.is-active.is-initial {
-  box-shadow: 0 0 0 2px #14181d, 0 0 0 4px var(--accent);
-}
-
 .chart-state-name,
-.chart-field-name,
 .chart-activity-name {
   min-width: 0;
   overflow: hidden;
@@ -546,8 +536,6 @@ button {
   font-size: 12px;
 }
 
-.chart-section-label,
-.chart-field-type,
 .chart-activity-kind,
 .chart-more {
   color: #7e8792;
@@ -555,28 +543,20 @@ button {
   line-height: 1.3;
 }
 
-.chart-section-label,
 .chart-activity-kind {
   text-transform: uppercase;
 }
 
 .chart-state-section {
   width: min(300px, 100%);
-  margin-top: 11px;
-  padding-top: 8px;
+  margin-top: 8px;
+  padding-top: 7px;
   border-top: 1px solid #242a31;
 }
 
-.chart-section-label {
-  margin-bottom: 4px;
-  letter-spacing: 0.06em;
-}
-
-.chart-field-row,
 .chart-activity-row {
   display: grid;
-  min-height: 22px;
-  grid-template-columns: minmax(0, 1fr) auto;
+  min-height: 20px;
   gap: 10px;
 }
 
@@ -584,13 +564,11 @@ button {
   grid-template-columns: auto minmax(0, 1fr);
 }
 
-.chart-field-name,
 .chart-activity-name {
   color: #c4c9d0;
   font-size: 10px;
 }
 
-.chart-field-type,
 .chart-activity-kind {
   flex: 0 1 auto;
   overflow: hidden;
@@ -646,15 +624,15 @@ button {
 }
 
 .chart-more {
-  min-height: 18px;
-  padding-top: 3px;
+  min-height: 16px;
+  padding-top: 2px;
 }
 
 .chart-initial {
   position: absolute;
   border-radius: 50%;
-  background: #9ba3ae;
-  box-shadow: 0 0 0 3px rgb(155 163 174 / 8%);
+  background: #b0965d;
+  box-shadow: 0 0 0 2px rgb(176 150 93 / 10%);
   pointer-events: none;
 }
 
@@ -680,6 +658,13 @@ button {
   fill: none;
 }
 
+.chart-edge-parent-origin {
+  fill: #101318;
+  stroke: #89929e;
+  stroke-width: 1.8;
+  vector-effect: non-scaling-stroke;
+}
+
 .chart-edge-casing {
   stroke: #0b0c0e;
   stroke-width: 5.5;
@@ -698,7 +683,8 @@ button {
 }
 
 .chart-edge-initial .chart-edge-line {
-  stroke: #89929e;
+  stroke: #9f8a5c;
+  stroke-width: 1.2;
 }
 
 .chart-edge-hit {
@@ -709,7 +695,8 @@ button {
 }
 
 #chart-arrow path,
-#chart-direction path {
+#chart-direction path,
+#chart-initial-arrow path {
   fill: context-stroke;
 }
 
@@ -729,6 +716,23 @@ button {
   user-select: none;
 }
 
+.chart-edge-group.chart-edge-parent-child .chart-edge-line,
+.chart-edge-group.chart-edge-parent-child .chart-edge-direction,
+.chart-edge-group.chart-edge-parent-child .chart-edge-parent-origin {
+  stroke: #9187a7;
+}
+
+.chart-edge-group.chart-edge-parent-child .chart-edge-parent-origin {
+  fill: #1b1820;
+}
+
+.chart-edge-label-parent-child {
+  border-color: #4d465a;
+  color: #aea5c1;
+  background: #17151b;
+  box-shadow: inset 2px 0 #6f6681;
+}
+
 .chart-edge-label:not(:disabled):hover,
 .chart-edge-label:focus-visible,
 .chart-edge-group.is-hovered + .chart-edge-label {
@@ -744,7 +748,8 @@ button {
 }
 
 .chart-edge-group.is-hovered .chart-edge-line,
-.chart-edge-group.is-hovered .chart-edge-direction {
+.chart-edge-group.is-hovered .chart-edge-direction,
+.chart-edge-group.is-hovered .chart-edge-parent-origin {
   stroke: #7c9ed2;
   stroke-width: 1.8;
 }
@@ -774,7 +779,12 @@ button {
 .chart-edge-group.chart-edge-activity-effect .chart-edge-direction,
 .chart-edge-group.chart-edge-activity-timer .chart-edge-direction,
 .chart-edge-group.chart-edge-activity-stream .chart-edge-direction,
-.chart-edge-group.chart-edge-activity-machine .chart-edge-direction {
+.chart-edge-group.chart-edge-activity-machine .chart-edge-direction,
+.chart-edge-group.chart-edge-activity-process .chart-edge-parent-origin,
+.chart-edge-group.chart-edge-activity-effect .chart-edge-parent-origin,
+.chart-edge-group.chart-edge-activity-timer .chart-edge-parent-origin,
+.chart-edge-group.chart-edge-activity-stream .chart-edge-parent-origin,
+.chart-edge-group.chart-edge-activity-machine .chart-edge-parent-origin {
   stroke: var(--chart-activity-color);
 }
 
@@ -789,19 +799,22 @@ button {
 }
 
 .chart-edge-group.is-incoming .chart-edge-line,
-.chart-edge-group.is-incoming .chart-edge-direction {
+.chart-edge-group.is-incoming .chart-edge-direction,
+.chart-edge-group.is-incoming .chart-edge-parent-origin {
   stroke: #ed6a70;
   stroke-width: 2;
 }
 
 .chart-edge-group.is-outgoing .chart-edge-line,
-.chart-edge-group.is-outgoing .chart-edge-direction {
+.chart-edge-group.is-outgoing .chart-edge-direction,
+.chart-edge-group.is-outgoing .chart-edge-parent-origin {
   stroke: #6eb6dc;
   stroke-width: 2;
 }
 
 .chart-edge-group.is-selected .chart-edge-line,
-.chart-edge-group.is-selected .chart-edge-direction {
+.chart-edge-group.is-selected .chart-edge-direction,
+.chart-edge-group.is-selected .chart-edge-parent-origin {
   stroke: #8ab5ff;
   stroke-width: 2.5;
 }
@@ -1580,7 +1593,7 @@ button {
   gap: 12px;
 }
 
-.input-field-identity,
+.input-field-contract,
 .input-constraints {
   display: flex;
   min-width: 0;
@@ -1589,6 +1602,12 @@ button {
   gap: 6px;
 }
 
+.input-field-contract {
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  margin-left: auto;
+}
+
 .input-label,
 .input-required,
 .input-optional {
@@ -1648,6 +1667,18 @@ button {
   color: #d7a5a2;
 }
 
+.value-shape-block {
+  margin: 0;
+  padding: 12px;
+  border: 1px solid var(--line-soft);
+  color: #b8c1ce;
+  background: var(--surface-raised);
+  font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  overflow-x: auto;
+  tab-size: 2;
+  white-space: pre;
+}
+
 .trace-topology {
   display: grid;
   gap: 10px;

package/src/internal/browser/visualizer-app.ts

@@ -271,13 +271,12 @@ const renderContractField = (
   if (omit.has(label)) return null
   const row = createElement("div", "input-contract-field")
   const heading = createElement("div", "input-field-heading")
-  const identity = createElement("div", "input-field-identity")
-  identity.append(
-    createElement("span", "input-label", label),
+  const contract = createElement("div", "input-field-contract")
+  contract.append(
     createElement("span", "input-field-type", inputType(field)),
     createElement("span", required ? "input-required" : "input-optional", required ? "required" : "optional")
   )
-  heading.append(identity)
+  heading.append(createElement("span", "input-label", label), contract)
   row.append(heading)
   const constraints = inputConstraints(field)
   if (constraints.length > 0) {
@@ -350,6 +349,55 @@ const contractSummary = (schema: InputSchema | null): string | null => {
   ) + (fields.length > 3 ? ` · +${fields.length - 3}` : "")
 }
 
+type ValueShape = string | ReadonlyArray<ValueShape> | { readonly [key: string]: ValueShape }
+
+const typePreview = (field: InputField): string => {
+  switch (field._tag) {
+    case "String":
+      return field.format === undefined ? "string" : `string (${field.format})`
+    case "Number":
+      return field.integer ? "integer" : "number"
+    case "Boolean":
+      return "boolean"
+    case "Enum":
+      return field.values.map(String).join(" | ")
+    case "Literal":
+      return String(field.value)
+    case "Object":
+      return "object"
+    case "Array":
+      return `${typePreview(field.item)}[]`
+    case "Union":
+      return [...new Set(field.alternatives.map(typePreview))].join(" | ")
+    case "Unsupported":
+      return "unknown"
+  }
+}
+
+const fieldValueShape = (field: InputField): ValueShape => {
+  if (field._tag === "Object") {
+    return Object.fromEntries(
+      field.fields
+        .filter(({ key }) => key !== "_tag")
+        .map(({ key, required, field }) => [required ? key : `${key}?`, fieldValueShape(field)])
+    )
+  }
+  if (field._tag === "Array") return [fieldValueShape(field.item)]
+  return typePreview(field)
+}
+
+export const valueShape = (schema: InputSchema): ValueShape => fieldValueShape(projectInputSchema(schema))
+
+const renderValueShape = (title: string, schema: InputSchema): HTMLElement => {
+  const section = createElement("section", "inspector-section value-shape-section")
+  section.append(inspectionSection(title))
+  const code = createElement("code", undefined, JSON.stringify(valueShape(schema), null, 2))
+  const block = createElement("pre", "value-shape-block")
+  block.append(code)
+  section.append(block)
+  return section
+}
+
 const triggerName = (trigger: Trigger): string => {
   switch (trigger.type) {
     case "event":
@@ -518,6 +566,13 @@ export const renderVisualizer = (
     }
     inspectorContent.append(header)
 
+    if (
+      inspection.state.valueSchema !== null &&
+      contractSummary(inspection.state.valueSchema) !== null
+    ) {
+      inspectorContent.append(renderValueShape("Value", inspection.state.valueSchema))
+    }
+
     if (inspection.outgoing.length > 0) {
       const transitions = createElement("section", "inspector-section")
       transitions.append(inspectionSection("Transitions", inspection.outgoing.length))