@industry-theme/principal-view-panels 0.10.28 → 0.10.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"WorkflowExplainerPanel.d.ts","sourceRoot":"","sources":["../../src/panels/WorkflowExplainerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsiBD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAkKxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
1
+ {"version":3,"file":"WorkflowExplainerPanel.d.ts","sourceRoot":"","sources":["../../src/panels/WorkflowExplainerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6gBD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAkKxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
@@ -96728,20 +96728,20 @@ const Step2Components = () => {
96728
96728
  /* @__PURE__ */ jsxs("g", { children: [
96729
96729
  /* @__PURE__ */ jsx("rect", { x: "310", y: "85", width: "240", height: "55", fill: "#1e1b4b", stroke: "#6366f1", strokeWidth: "1", rx: "3" }),
96730
96730
  /* @__PURE__ */ jsx("text", { x: "315", y: "98", fill: "#c4b5fd", fontSize: "9", fontWeight: "600", children: "Scenario: success (priority: 1)" }),
96731
- /* @__PURE__ */ jsx("text", { x: "320", y: "110", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'condition: event = "order.completed"' }),
96731
+ /* @__PURE__ */ jsx("text", { x: "320", y: "110", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'events: { "order.completed": {} }' }),
96732
96732
  /* @__PURE__ */ jsx("text", { x: "320", y: "122", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'template: "Order #{order.id} completed"' }),
96733
96733
  /* @__PURE__ */ jsx("text", { x: "320", y: "134", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: "steps: [4 workflow steps...]" })
96734
96734
  ] }),
96735
96735
  /* @__PURE__ */ jsxs("g", { children: [
96736
96736
  /* @__PURE__ */ jsx("rect", { x: "310", y: "145", width: "240", height: "50", fill: "#1e1b4b", stroke: "#6366f1", strokeWidth: "1", rx: "3" }),
96737
96737
  /* @__PURE__ */ jsx("text", { x: "315", y: "158", fill: "#c4b5fd", fontSize: "9", fontWeight: "600", children: "Scenario: payment-declined (priority: 2)" }),
96738
- /* @__PURE__ */ jsx("text", { x: "320", y: "170", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'condition: event = "payment.declined"' }),
96738
+ /* @__PURE__ */ jsx("text", { x: "320", y: "170", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'events: { "payment.declined": {} }' }),
96739
96739
  /* @__PURE__ */ jsx("text", { x: "320", y: "182", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'template: "Payment declined..."' })
96740
96740
  ] }),
96741
96741
  /* @__PURE__ */ jsxs("g", { children: [
96742
96742
  /* @__PURE__ */ jsx("rect", { x: "310", y: "200", width: "240", height: "45", fill: "#1e1b4b", stroke: "#6366f1", strokeWidth: "1", rx: "3" }),
96743
96743
  /* @__PURE__ */ jsx("text", { x: "315", y: "213", fill: "#c4b5fd", fontSize: "9", fontWeight: "600", children: "Scenario: error (priority: 10)" }),
96744
- /* @__PURE__ */ jsx("text", { x: "320", y: "225", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'condition: status = "ERROR"' }),
96744
+ /* @__PURE__ */ jsx("text", { x: "320", y: "225", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'events: { "error": {} }' }),
96745
96745
  /* @__PURE__ */ jsx("text", { x: "320", y: "237", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'template: "Error occurred..."' })
96746
96746
  ] })
96747
96747
  ] }),
@@ -96794,19 +96794,19 @@ const Step3Scenarios = () => {
96794
96794
  /* @__PURE__ */ jsx("circle", { cx: "265", cy: "80", r: "12", fill: "#334155", stroke: "#475569", strokeWidth: "1.5" }),
96795
96795
  /* @__PURE__ */ jsx("text", { x: "265", y: "85", textAnchor: "middle", fill: "#64748b", fontSize: "10", fontWeight: "700", children: "1" }),
96796
96796
  /* @__PURE__ */ jsx("text", { x: "285", y: "75", fill: "#64748b", fontSize: "10", fontWeight: "600", children: "Success Scenario" }),
96797
- /* @__PURE__ */ jsx("text", { x: "285", y: "90", fill: "#64748b", fontSize: "9", children: 'condition: event = "order.completed" (no match)' }),
96797
+ /* @__PURE__ */ jsx("text", { x: "285", y: "90", fill: "#64748b", fontSize: "9", children: 'events: { "order.completed": {} } (no match)' }),
96798
96798
  /* @__PURE__ */ jsx("text", { x: "285", y: "103", fill: "#64748b", fontSize: "8", fontStyle: "italic", children: "Not matched - event not found" }),
96799
96799
  /* @__PURE__ */ jsx("rect", { x: "250", y: "120", width: "320", height: "60", fill: "#1e1b4b", stroke: "#3b82f6", strokeWidth: "3", rx: "4" }),
96800
96800
  /* @__PURE__ */ jsx("circle", { cx: "265", cy: "150", r: "12", fill: "#3b82f6", stroke: "#60a5fa", strokeWidth: "2" }),
96801
96801
  /* @__PURE__ */ jsx("text", { x: "265", y: "155", textAnchor: "middle", fill: "#fff", fontSize: "10", fontWeight: "700", children: "2" }),
96802
96802
  /* @__PURE__ */ jsx("text", { x: "285", y: "145", fill: "#dbeafe", fontSize: "10", fontWeight: "600", children: "Payment Declined Scenario" }),
96803
- /* @__PURE__ */ jsx("text", { x: "285", y: "160", fill: "#93c5fd", fontSize: "9", children: 'condition: event = "payment.declined" (match)' }),
96803
+ /* @__PURE__ */ jsx("text", { x: "285", y: "160", fill: "#93c5fd", fontSize: "9", children: 'events: { "payment.declined": {} } (match)' }),
96804
96804
  /* @__PURE__ */ jsx("text", { x: "285", y: "173", fill: "#34d399", fontSize: "9", fontWeight: "600", children: "MATCHED! This scenario will render" }),
96805
96805
  /* @__PURE__ */ jsx("rect", { x: "250", y: "190", width: "320", height: "60", fill: "#1e293b", stroke: "#475569", strokeWidth: "1.5", rx: "4", opacity: "0.5" }),
96806
96806
  /* @__PURE__ */ jsx("circle", { cx: "265", cy: "220", r: "12", fill: "#334155", stroke: "#475569", strokeWidth: "1.5" }),
96807
96807
  /* @__PURE__ */ jsx("text", { x: "265", y: "225", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontWeight: "700", children: "10" }),
96808
96808
  /* @__PURE__ */ jsx("text", { x: "285", y: "215", fill: "#64748b", fontSize: "10", fontWeight: "600", children: "Error Fallback Scenario" }),
96809
- /* @__PURE__ */ jsx("text", { x: "285", y: "230", fill: "#64748b", fontSize: "9", children: 'condition: status = "ERROR" (match)' }),
96809
+ /* @__PURE__ */ jsx("text", { x: "285", y: "230", fill: "#64748b", fontSize: "9", children: 'events: { "error": {} } (match)' }),
96810
96810
  /* @__PURE__ */ jsx("text", { x: "285", y: "243", fill: "#64748b", fontSize: "8", fontStyle: "italic", children: "Matches, but priority 2 wins" })
96811
96811
  ] }),
96812
96812
  /* @__PURE__ */ jsx("rect", { x: "40", y: "270", width: "520", height: "35", fill: "#065f46", stroke: "#059669", strokeWidth: "1.5", rx: "4" }),
@@ -96879,53 +96879,35 @@ const Step4Templates = () => {
96879
96879
  const Step5Conditions = () => {
96880
96880
  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
96881
96881
  /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 380", style: { width: "100%", height: "auto" }, children: [
96882
- /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "CONDITION TYPES" }),
96882
+ /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "EVENT-BASED MATCHING" }),
96883
96883
  /* @__PURE__ */ jsxs("g", { children: [
96884
- /* @__PURE__ */ jsx("rect", { x: "40", y: "40", width: "250", height: "75", fill: "#1e293b", stroke: "#8b5cf6", strokeWidth: "2", rx: "4" }),
96885
- /* @__PURE__ */ jsx("text", { x: "55", y: "58", fill: "#c4b5fd", fontSize: "11", fontWeight: "700", children: "EVENT CONDITION" }),
96886
- /* @__PURE__ */ jsx("rect", { x: "55", y: "65", width: "220", height: "45", fill: "#1e1b4b", stroke: "#6366f1", strokeWidth: "1", rx: "3" }),
96887
- /* @__PURE__ */ jsx("text", { x: "65", y: "80", fill: "#e0e7ff", fontSize: "9", fontFamily: "monospace", children: "{" }),
96888
- /* @__PURE__ */ jsx("text", { x: "70", y: "92", fill: "#e0e7ff", fontSize: "9", fontFamily: "monospace", children: ' type: "event",' }),
96889
- /* @__PURE__ */ jsx("text", { x: "70", y: "104", fill: "#e0e7ff", fontSize: "9", fontFamily: "monospace", children: ' event: "payment.success"' }),
96890
- /* @__PURE__ */ jsx("text", { x: "65", y: "115", fill: "#e0e7ff", fontSize: "9", fontFamily: "monospace", children: "}" })
96884
+ /* @__PURE__ */ jsx("rect", { x: "40", y: "40", width: "520", height: "90", fill: "#1e293b", stroke: "#8b5cf6", strokeWidth: "2", rx: "4" }),
96885
+ /* @__PURE__ */ jsx("text", { x: "55", y: "58", fill: "#c4b5fd", fontSize: "11", fontWeight: "700", children: "SINGLE EVENT MATCHING" }),
96886
+ /* @__PURE__ */ jsx("rect", { x: "55", y: "65", width: "490", height: "60", fill: "#1e1b4b", stroke: "#6366f1", strokeWidth: "1", rx: "3" }),
96887
+ /* @__PURE__ */ jsx("text", { x: "65", y: "80", fill: "#e0e7ff", fontSize: "9", fontFamily: "monospace", children: "template: {" }),
96888
+ /* @__PURE__ */ jsx("text", { x: "70", y: "95", fill: "#e0e7ff", fontSize: "9", fontFamily: "monospace", children: " events: {" }),
96889
+ /* @__PURE__ */ jsx("text", { x: "75", y: "110", fill: "#a78bfa", fontSize: "9", fontFamily: "monospace", children: ' "payment.success": {}' }),
96890
+ /* @__PURE__ */ jsx("text", { x: "70", y: "120", fill: "#e0e7ff", fontSize: "9", fontFamily: "monospace", children: " }" }),
96891
+ /* @__PURE__ */ jsx("text", { x: "65", y: "130", fill: "#e0e7ff", fontSize: "9", fontFamily: "monospace", children: "}" })
96891
96892
  ] }),
96892
96893
  /* @__PURE__ */ jsxs("g", { children: [
96893
- /* @__PURE__ */ jsx("rect", { x: "310", y: "40", width: "250", height: "75", fill: "#1e293b", stroke: "#f59e0b", strokeWidth: "2", rx: "4" }),
96894
- /* @__PURE__ */ jsx("text", { x: "325", y: "58", fill: "#fde68a", fontSize: "11", fontWeight: "700", children: "ATTRIBUTE CONDITION" }),
96895
- /* @__PURE__ */ jsx("rect", { x: "325", y: "65", width: "220", height: "45", fill: "#451a03", stroke: "#f59e0b", strokeWidth: "1", rx: "3" }),
96896
- /* @__PURE__ */ jsx("text", { x: "335", y: "80", fill: "#fef3c7", fontSize: "9", fontFamily: "monospace", children: "{" }),
96897
- /* @__PURE__ */ jsx("text", { x: "340", y: "92", fill: "#fef3c7", fontSize: "9", fontFamily: "monospace", children: ' type: "attribute",' }),
96898
- /* @__PURE__ */ jsx("text", { x: "340", y: "104", fill: "#fef3c7", fontSize: "9", fontFamily: "monospace", children: ' key: "http.status", value: 200' }),
96899
- /* @__PURE__ */ jsx("text", { x: "335", y: "115", fill: "#fef3c7", fontSize: "9", fontFamily: "monospace", children: "}" })
96894
+ /* @__PURE__ */ jsx("rect", { x: "40", y: "145", width: "520", height: "115", fill: "#1e293b", stroke: "#ec4899", strokeWidth: "2", rx: "4" }),
96895
+ /* @__PURE__ */ jsx("text", { x: "55", y: "163", fill: "#fbcfe8", fontSize: "11", fontWeight: "700", children: "MULTIPLE EVENTS (ALL REQUIRED)" }),
96896
+ /* @__PURE__ */ jsx("rect", { x: "55", y: "170", width: "490", height: "85", fill: "#500724", stroke: "#ec4899", strokeWidth: "1", rx: "3" }),
96897
+ /* @__PURE__ */ jsx("text", { x: "65", y: "185", fill: "#fce7f3", fontSize: "9", fontFamily: "monospace", children: "template: {" }),
96898
+ /* @__PURE__ */ jsx("text", { x: "70", y: "200", fill: "#fce7f3", fontSize: "9", fontFamily: "monospace", children: " events: {" }),
96899
+ /* @__PURE__ */ jsx("text", { x: "75", y: "215", fill: "#f9a8d4", fontSize: "9", fontFamily: "monospace", children: ' "order.created": {},' }),
96900
+ /* @__PURE__ */ jsx("text", { x: "75", y: "230", fill: "#f9a8d4", fontSize: "9", fontFamily: "monospace", children: ' "payment.processed": {},' }),
96901
+ /* @__PURE__ */ jsx("text", { x: "75", y: "245", fill: "#f9a8d4", fontSize: "9", fontFamily: "monospace", children: ' "shipping.scheduled": {}' }),
96902
+ /* @__PURE__ */ jsx("text", { x: "70", y: "255", fill: "#fce7f3", fontSize: "9", fontFamily: "monospace", children: " }" }),
96903
+ /* @__PURE__ */ jsx("text", { x: "65", y: "265", fill: "#fce7f3", fontSize: "9", fontFamily: "monospace", children: "}" })
96900
96904
  ] }),
96901
96905
  /* @__PURE__ */ jsxs("g", { children: [
96902
- /* @__PURE__ */ jsx("rect", { x: "40", y: "130", width: "250", height: "75", fill: "#1e293b", stroke: "#06b6d4", strokeWidth: "2", rx: "4" }),
96903
- /* @__PURE__ */ jsx("text", { x: "55", y: "148", fill: "#a5f3fc", fontSize: "11", fontWeight: "700", children: "SPAN CONDITION" }),
96904
- /* @__PURE__ */ jsx("rect", { x: "55", y: "155", width: "220", height: "45", fill: "#083344", stroke: "#06b6d4", strokeWidth: "1", rx: "3" }),
96905
- /* @__PURE__ */ jsx("text", { x: "65", y: "170", fill: "#cffafe", fontSize: "9", fontFamily: "monospace", children: "{" }),
96906
- /* @__PURE__ */ jsx("text", { x: "70", y: "182", fill: "#cffafe", fontSize: "9", fontFamily: "monospace", children: ' type: "span",' }),
96907
- /* @__PURE__ */ jsx("text", { x: "70", y: "194", fill: "#cffafe", fontSize: "9", fontFamily: "monospace", children: ' name: "ProcessPayment"' }),
96908
- /* @__PURE__ */ jsx("text", { x: "65", y: "205", fill: "#cffafe", fontSize: "9", fontFamily: "monospace", children: "}" })
96909
- ] }),
96910
- /* @__PURE__ */ jsxs("g", { children: [
96911
- /* @__PURE__ */ jsx("rect", { x: "310", y: "130", width: "250", height: "75", fill: "#1e293b", stroke: "#ec4899", strokeWidth: "2", rx: "4" }),
96912
- /* @__PURE__ */ jsx("text", { x: "325", y: "148", fill: "#fbcfe8", fontSize: "11", fontWeight: "700", children: "COMBINED (AND/OR)" }),
96913
- /* @__PURE__ */ jsx("rect", { x: "325", y: "155", width: "220", height: "45", fill: "#500724", stroke: "#ec4899", strokeWidth: "1", rx: "3" }),
96914
- /* @__PURE__ */ jsx("text", { x: "335", y: "170", fill: "#fce7f3", fontSize: "9", fontFamily: "monospace", children: '{ type: "and", conditions: [' }),
96915
- /* @__PURE__ */ jsx("text", { x: "340", y: "182", fill: "#fce7f3", fontSize: "9", fontFamily: "monospace", children: ' {type: "event", ...},' }),
96916
- /* @__PURE__ */ jsx("text", { x: "340", y: "194", fill: "#fce7f3", fontSize: "9", fontFamily: "monospace", children: ' {type: "attribute", ...}' }),
96917
- /* @__PURE__ */ jsx("text", { x: "335", y: "205", fill: "#fce7f3", fontSize: "9", fontFamily: "monospace", children: "]}" })
96918
- ] }),
96919
- /* @__PURE__ */ jsxs("g", { children: [
96920
- /* @__PURE__ */ jsx("text", { x: "300", y: "235", textAnchor: "middle", fill: "#94a3b8", fontSize: "12", fontWeight: "700", children: "EXAMPLE: COMPLEX MATCHING" }),
96921
- /* @__PURE__ */ jsx("rect", { x: "40", y: "250", width: "520", height: "115", fill: "#0f172a", stroke: "#475569", strokeWidth: "2", rx: "4" }),
96922
- /* @__PURE__ */ jsx("text", { x: "55", y: "268", fill: "#94a3b8", fontSize: "10", fontWeight: "600", children: "Scenario matches when:" }),
96923
- /* @__PURE__ */ jsx("rect", { x: "55", y: "275", width: "500", height: "55", fill: "#1e293b", stroke: "#334155", strokeWidth: "1", rx: "3" }),
96924
- /* @__PURE__ */ jsx("text", { x: "65", y: "290", fill: "#a78bfa", fontSize: "9", fontFamily: "monospace", children: 'type: "and"' }),
96925
- /* @__PURE__ */ jsx("text", { x: "70", y: "303", fill: "#c4b5fd", fontSize: "9", fontFamily: "monospace", children: '├─ event exists: "order.created"' }),
96926
- /* @__PURE__ */ jsx("text", { x: "70", y: "315", fill: "#c4b5fd", fontSize: "9", fontFamily: "monospace", children: '├─ event exists: "payment.processed"' }),
96927
- /* @__PURE__ */ jsx("text", { x: "70", y: "327", fill: "#c4b5fd", fontSize: "9", fontFamily: "monospace", children: '└─ attribute: payment.status = "success"' }),
96928
- /* @__PURE__ */ jsx("text", { x: "55", y: "350", fill: "#6ee7b7", fontSize: "10", fontWeight: "600", children: "All conditions must be true for this scenario to match" })
96906
+ /* @__PURE__ */ jsx("text", { x: "300", y: "290", textAnchor: "middle", fill: "#94a3b8", fontSize: "12", fontWeight: "700", children: "HOW IT WORKS" }),
96907
+ /* @__PURE__ */ jsx("rect", { x: "40", y: "305", width: "520", height: "60", fill: "#0f172a", stroke: "#475569", strokeWidth: "2", rx: "4" }),
96908
+ /* @__PURE__ */ jsx("text", { x: "55", y: "323", fill: "#94a3b8", fontSize: "10", fontWeight: "600", children: "Scenario matches when:" }),
96909
+ /* @__PURE__ */ jsx("text", { x: "70", y: "340", fill: "#c4b5fd", fontSize: "9", fontFamily: "monospace", children: "✓ ALL events listed in template.events are present in the execution" }),
96910
+ /* @__PURE__ */ jsx("text", { x: "70", y: "355", fill: "#6ee7b7", fontSize: "10", fontWeight: "600", children: "The scenario with the LOWEST priority number wins" })
96929
96911
  ] })
96930
96912
  ] }),
96931
96913
  /* @__PURE__ */ jsxs("div", { style: {
@@ -96936,15 +96918,11 @@ const Step5Conditions = () => {
96936
96918
  borderRadius: "6px",
96937
96919
  border: "1px solid #475569"
96938
96920
  }, children: [
96939
- "Conditions determine when a scenario matches. You can check for ",
96940
- /* @__PURE__ */ jsx("strong", { style: { color: "#8b5cf6" }, children: "events" }),
96941
- ", ",
96942
- /* @__PURE__ */ jsx("strong", { style: { color: "#f59e0b" }, children: "attributes" }),
96943
- ", ",
96944
- /* @__PURE__ */ jsx("strong", { style: { color: "#06b6d4" }, children: "spans" }),
96945
- ", or combine them with ",
96946
- /* @__PURE__ */ jsx("strong", { style: { color: "#ec4899" }, children: "AND/OR" }),
96947
- " logic."
96921
+ "Scenarios match based on ",
96922
+ /* @__PURE__ */ jsx("strong", { style: { color: "#8b5cf6" }, children: "events present in the execution" }),
96923
+ ". Each scenario's ",
96924
+ /* @__PURE__ */ jsx("code", { children: "template.events" }),
96925
+ " object defines which events must occur. All listed events must be present for a match."
96948
96926
  ] })
96949
96927
  ] });
96950
96928
  };
@@ -97036,7 +97014,7 @@ const Step7Workflow = () => {
97036
97014
  /* @__PURE__ */ jsxs("g", { children: [
97037
97015
  /* @__PURE__ */ jsx("rect", { x: "470", y: "130", width: "110", height: "60", fill: "#1e293b", stroke: "#ec4899", strokeWidth: "2", rx: "4" }),
97038
97016
  /* @__PURE__ */ jsx("text", { x: "525", y: "146", textAnchor: "middle", fill: "#fbcfe8", fontSize: "10", fontWeight: "700", children: "5. MATCH" }),
97039
- /* @__PURE__ */ jsx("text", { x: "478", y: "160", fill: "#94a3b8", fontSize: "8", children: "Test conditions" }),
97017
+ /* @__PURE__ */ jsx("text", { x: "478", y: "160", fill: "#94a3b8", fontSize: "8", children: "Match events" }),
97040
97018
  /* @__PURE__ */ jsx("text", { x: "478", y: "170", fill: "#94a3b8", fontSize: "8", children: "pick best" }),
97041
97019
  /* @__PURE__ */ jsx("text", { x: "478", y: "180", fill: "#94a3b8", fontSize: "8", children: "scenario" })
97042
97020
  ] }),
@@ -97093,7 +97071,7 @@ const sections$c = [
97093
97071
  { id: "components", title: "Template Components", component: Step2Components },
97094
97072
  { id: "scenarios", title: "How Scenarios Match", component: Step3Scenarios },
97095
97073
  { id: "templates", title: "Template Variables", component: Step4Templates },
97096
- { id: "conditions", title: "Condition Types", component: Step5Conditions },
97074
+ { id: "conditions", title: "Event Matching", component: Step5Conditions },
97097
97075
  { id: "files", title: "File Organization", component: Step6FileStructure },
97098
97076
  { id: "workflow", title: "End-to-End Workflow", component: Step7Workflow }
97099
97077
  ];
@@ -104851,19 +104829,19 @@ const Step3ScenarioConditions = () => {
104851
104829
  /* @__PURE__ */ jsx("text", { x: "410", y: "70", textAnchor: "middle", fill: "#ddd6fe", fontSize: "11", fontWeight: "600", children: "NARRATIVE SCENARIOS" }),
104852
104830
  /* @__PURE__ */ jsx("rect", { x: "275", y: "80", width: "270", height: "40", fill: "#1e293b", stroke: "#475569", strokeWidth: "1", rx: "3" }),
104853
104831
  /* @__PURE__ */ jsx("text", { x: "285", y: "95", fill: "#94a3b8", fontSize: "8", fontWeight: "600", children: "success:" }),
104854
- /* @__PURE__ */ jsx("text", { x: "290", y: "107", fill: "#64748b", fontSize: "7", children: 'condition: event = "user.created"' }),
104832
+ /* @__PURE__ */ jsx("text", { x: "290", y: "107", fill: "#64748b", fontSize: "7", children: 'events: { "user.created": {} }' }),
104855
104833
  /* @__PURE__ */ jsx("text", { x: "290", y: "117", fill: "#64748b", fontSize: "7", children: "✗ Does NOT match trace" }),
104856
104834
  /* @__PURE__ */ jsx("rect", { x: "275", y: "128", width: "270", height: "40", fill: "#064e3b", stroke: "#10b981", strokeWidth: "2", rx: "3" }),
104857
104835
  /* @__PURE__ */ jsx("text", { x: "285", y: "143", fill: "#6ee7b7", fontSize: "8", fontWeight: "600", children: "duplicate:" }),
104858
- /* @__PURE__ */ jsx("text", { x: "290", y: "155", fill: "#a7f3d0", fontSize: "7", children: 'condition: event = "user.exists"' }),
104836
+ /* @__PURE__ */ jsx("text", { x: "290", y: "155", fill: "#a7f3d0", fontSize: "7", children: 'events: { "user.exists": {} }' }),
104859
104837
  /* @__PURE__ */ jsx("text", { x: "290", y: "165", fill: "#34d399", fontSize: "7", fontWeight: "bold", children: "✓ MATCHES! Use this scenario" }),
104860
104838
  /* @__PURE__ */ jsx("rect", { x: "275", y: "176", width: "270", height: "40", fill: "#1e293b", stroke: "#475569", strokeWidth: "1", rx: "3" }),
104861
104839
  /* @__PURE__ */ jsx("text", { x: "285", y: "191", fill: "#94a3b8", fontSize: "8", fontWeight: "600", children: "invalid-email:" }),
104862
- /* @__PURE__ */ jsx("text", { x: "290", y: "203", fill: "#64748b", fontSize: "7", children: 'condition: event = "validation.failed"' }),
104840
+ /* @__PURE__ */ jsx("text", { x: "290", y: "203", fill: "#64748b", fontSize: "7", children: 'events: { "validation.failed": {} }' }),
104863
104841
  /* @__PURE__ */ jsx("text", { x: "290", y: "213", fill: "#64748b", fontSize: "7", children: "✗ Does NOT match trace" }),
104864
104842
  /* @__PURE__ */ jsx("rect", { x: "275", y: "224", width: "270", height: "40", fill: "#1e293b", stroke: "#475569", strokeWidth: "1", rx: "3" }),
104865
104843
  /* @__PURE__ */ jsx("text", { x: "285", y: "239", fill: "#94a3b8", fontSize: "8", fontWeight: "600", children: "db-error:" }),
104866
- /* @__PURE__ */ jsx("text", { x: "290", y: "251", fill: "#64748b", fontSize: "7", children: 'condition: event = "database.error"' }),
104844
+ /* @__PURE__ */ jsx("text", { x: "290", y: "251", fill: "#64748b", fontSize: "7", children: 'events: { "database.error": {} }' }),
104867
104845
  /* @__PURE__ */ jsx("text", { x: "290", y: "261", fill: "#64748b", fontSize: "7", children: "✗ Does NOT match trace" })
104868
104846
  ] }),
104869
104847
  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrow-validate", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#8b5cf6" }) }) })
@@ -104877,7 +104855,7 @@ const Step3ScenarioConditions = () => {
104877
104855
  border: "1px solid #475569"
104878
104856
  }, children: [
104879
104857
  /* @__PURE__ */ jsx("strong", { style: { color: "#8b5cf6" }, children: "Validation:" }),
104880
- " OTEL trace is matched against scenario conditions. The first matching scenario determines which workflow template to use and validates expected behavior."
104858
+ " OTEL trace is matched against scenario events. The scenario with the lowest priority whose events are all present in the trace determines which workflow template to use and validates expected behavior."
104881
104859
  ] })
104882
104860
  ] });
104883
104861
  };
@@ -104896,31 +104874,31 @@ const Step4ExhaustiveEnumeration = () => {
104896
104874
  /* @__PURE__ */ jsxs("text", { x: "80", y: "148", fill: "#d1fae5", fontSize: "8", children: [
104897
104875
  "1. ",
104898
104876
  /* @__PURE__ */ jsx("tspan", { fill: "#a7f3d0", fontWeight: "bold", children: "success" }),
104899
- ' - condition: event("user.created") → "User registered successfully"'
104877
+ ' - events: { "user.created": {} } → "User registered successfully"'
104900
104878
  ] }),
104901
104879
  /* @__PURE__ */ jsx("rect", { x: "70", y: "165", width: "460", height: "25", fill: "#064e3b", stroke: "#059669", strokeWidth: "1", rx: "2" }),
104902
104880
  /* @__PURE__ */ jsxs("text", { x: "80", y: "178", fill: "#d1fae5", fontSize: "8", children: [
104903
104881
  "2. ",
104904
104882
  /* @__PURE__ */ jsx("tspan", { fill: "#a7f3d0", fontWeight: "bold", children: "duplicate" }),
104905
- ' - condition: event("user.exists") → "User already exists"'
104883
+ ' - events: { "user.exists": {} } → "User already exists"'
104906
104884
  ] }),
104907
104885
  /* @__PURE__ */ jsx("rect", { x: "70", y: "195", width: "460", height: "25", fill: "#064e3b", stroke: "#059669", strokeWidth: "1", rx: "2" }),
104908
104886
  /* @__PURE__ */ jsxs("text", { x: "80", y: "208", fill: "#d1fae5", fontSize: "8", children: [
104909
104887
  "3. ",
104910
104888
  /* @__PURE__ */ jsx("tspan", { fill: "#a7f3d0", fontWeight: "bold", children: "invalid-email" }),
104911
- ' - condition: event("validation.failed") → "Invalid email format"'
104889
+ ' - events: { "validation.failed": {} } → "Invalid email format"'
104912
104890
  ] }),
104913
104891
  /* @__PURE__ */ jsx("rect", { x: "70", y: "225", width: "460", height: "25", fill: "#064e3b", stroke: "#059669", strokeWidth: "1", rx: "2" }),
104914
104892
  /* @__PURE__ */ jsxs("text", { x: "80", y: "238", fill: "#d1fae5", fontSize: "8", children: [
104915
104893
  "4. ",
104916
104894
  /* @__PURE__ */ jsx("tspan", { fill: "#a7f3d0", fontWeight: "bold", children: "db-error" }),
104917
- ' - condition: event("database.error") → "Database unavailable"'
104895
+ ' - events: { "database.error": {} } → "Database unavailable"'
104918
104896
  ] }),
104919
104897
  /* @__PURE__ */ jsx("rect", { x: "70", y: "255", width: "460", height: "25", fill: "#064e3b", stroke: "#059669", strokeWidth: "1", rx: "2" }),
104920
104898
  /* @__PURE__ */ jsxs("text", { x: "80", y: "268", fill: "#d1fae5", fontSize: "8", children: [
104921
104899
  "5. ",
104922
104900
  /* @__PURE__ */ jsx("tspan", { fill: "#a7f3d0", fontWeight: "bold", children: "rate-limited" }),
104923
- ' - condition: event("rate.exceeded") → "Too many requests"'
104901
+ ' - events: { "rate.exceeded": {} } → "Too many requests"'
104924
104902
  ] }),
104925
104903
  /* @__PURE__ */ jsx("text", { x: "65", y: "290", fill: "#6ee7b7", fontSize: "9", fontWeight: "600", children: "]" })
104926
104904
  ] })
@@ -104959,8 +104937,8 @@ const Step5ValidationProcess = () => {
104959
104937
  /* @__PURE__ */ jsx("rect", { x: "400", y: "50", width: "160", height: "70", fill: "#1e3a8a", stroke: "#3b82f6", strokeWidth: "2", rx: "4" }),
104960
104938
  /* @__PURE__ */ jsx("text", { x: "480", y: "70", textAnchor: "middle", fill: "#dbeafe", fontSize: "10", fontWeight: "700", children: "3. MATCH" }),
104961
104939
  /* @__PURE__ */ jsx("text", { x: "408", y: "85", fill: "#93c5fd", fontSize: "8", children: "Find scenario" }),
104962
- /* @__PURE__ */ jsx("text", { x: "408", y: "97", fill: "#93c5fd", fontSize: "8", children: "where condition" }),
104963
- /* @__PURE__ */ jsx("text", { x: "408", y: "109", fill: "#93c5fd", fontSize: "8", children: "matches trace" })
104940
+ /* @__PURE__ */ jsx("text", { x: "408", y: "97", fill: "#93c5fd", fontSize: "8", children: "whose events" }),
104941
+ /* @__PURE__ */ jsx("text", { x: "408", y: "109", fill: "#93c5fd", fontSize: "8", children: "match trace" })
104964
104942
  ] }),
104965
104943
  /* @__PURE__ */ jsx("line", { x1: "480", y1: "125", x2: "480", y2: "150", stroke: "#475569", strokeWidth: "2", markerEnd: "url(#arrow1)" }),
104966
104944
  /* @__PURE__ */ jsxs("g", { children: [