@almadar/ui 2.15.12 → 2.16.0

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.
Files changed (41) hide show
  1. package/dist/avl/index.cjs +1837 -0
  2. package/dist/avl/index.d.cts +312 -0
  3. package/dist/avl/index.d.ts +33 -0
  4. package/dist/avl/index.js +1801 -0
  5. package/dist/components/atoms/avl/AvlApplication.d.ts +8 -0
  6. package/dist/components/atoms/avl/AvlBinding.d.ts +12 -0
  7. package/dist/components/atoms/avl/AvlBindingRef.d.ts +7 -0
  8. package/dist/components/atoms/avl/AvlEffect.d.ts +8 -0
  9. package/dist/components/atoms/avl/AvlEntity.d.ts +9 -0
  10. package/dist/components/atoms/avl/AvlEvent.d.ts +7 -0
  11. package/dist/components/atoms/avl/AvlField.d.ts +10 -0
  12. package/dist/components/atoms/avl/AvlFieldType.d.ts +8 -0
  13. package/dist/components/atoms/avl/AvlGuard.d.ts +7 -0
  14. package/dist/components/atoms/avl/AvlLiteral.d.ts +7 -0
  15. package/dist/components/atoms/avl/AvlOperator.d.ts +8 -0
  16. package/dist/components/atoms/avl/AvlOrbital.d.ts +11 -0
  17. package/dist/components/atoms/avl/AvlPage.d.ts +7 -0
  18. package/dist/components/atoms/avl/AvlPersistence.d.ts +8 -0
  19. package/dist/components/atoms/avl/AvlSExpr.d.ts +8 -0
  20. package/dist/components/atoms/avl/AvlState.d.ts +10 -0
  21. package/dist/components/atoms/avl/AvlTrait.d.ts +13 -0
  22. package/dist/components/atoms/avl/AvlTransition.d.ts +18 -0
  23. package/dist/components/atoms/avl/index.d.ts +20 -0
  24. package/dist/components/atoms/avl/types.d.ts +19 -0
  25. package/dist/components/index.cjs +4 -4
  26. package/dist/components/index.js +4 -4
  27. package/dist/components/molecules/avl/AvlClosedCircuit.d.ts +20 -0
  28. package/dist/components/molecules/avl/AvlEmitListen.d.ts +16 -0
  29. package/dist/components/molecules/avl/AvlExprTree.d.ts +13 -0
  30. package/dist/components/molecules/avl/AvlOrbitalUnit.d.ts +20 -0
  31. package/dist/components/molecules/avl/AvlSlotMap.d.ts +17 -0
  32. package/dist/components/molecules/avl/AvlStateMachine.d.ts +22 -0
  33. package/dist/components/molecules/avl/avl-layout.d.ts +31 -0
  34. package/dist/components/molecules/avl/index.d.ts +7 -0
  35. package/dist/illustrations/index.cjs +1789 -20
  36. package/dist/illustrations/index.d.cts +276 -1
  37. package/dist/illustrations/index.d.ts +24 -0
  38. package/dist/illustrations/index.js +1765 -20
  39. package/dist/marketing/index.cjs +4 -4
  40. package/dist/marketing/index.js +4 -4
  41. package/package.json +6 -1
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import React from 'react';
2
+ import React24 from 'react';
3
3
 
4
4
  function buildForkPaths(x, y, branches, scale) {
5
5
  const inLength = 30 * scale;
@@ -126,7 +126,7 @@ var SvgFlow = ({
126
126
  opacity = 1,
127
127
  className
128
128
  }) => {
129
- const markerId = React.useMemo(() => {
129
+ const markerId = React24.useMemo(() => {
130
130
  flowIdCounter += 1;
131
131
  return `almadar-flow-arrow-${flowIdCounter}`;
132
132
  }, []);
@@ -627,7 +627,7 @@ var SvgRing = ({
627
627
  className,
628
628
  label
629
629
  }) => {
630
- const gradientId = React.useMemo(() => {
630
+ const gradientId = React24.useMemo(() => {
631
631
  ringIdCounter += 1;
632
632
  return `almadar-ring-glow-${ringIdCounter}`;
633
633
  }, []);
@@ -787,7 +787,7 @@ var AIGenerates = ({
787
787
  color = "var(--color-primary)",
788
788
  animated = false
789
789
  }) => {
790
- const ids = React.useMemo(() => {
790
+ const ids = React24.useMemo(() => {
791
791
  aiGeneratesId += 1;
792
792
  const base = `ag-${aiGeneratesId}`;
793
793
  return {
@@ -917,7 +917,7 @@ var ClosedCircuit = ({
917
917
  color = "var(--color-primary)",
918
918
  animated = false
919
919
  }) => {
920
- const ids = React.useMemo(() => {
920
+ const ids = React24.useMemo(() => {
921
921
  closedCircuitId += 1;
922
922
  const base = `cc-${closedCircuitId}`;
923
923
  return {
@@ -1063,7 +1063,7 @@ var CommunityOwnership = ({
1063
1063
  color = "var(--color-primary)",
1064
1064
  animated = false
1065
1065
  }) => {
1066
- const ids = React.useMemo(() => {
1066
+ const ids = React24.useMemo(() => {
1067
1067
  communityOwnershipId += 1;
1068
1068
  const base = `co-${communityOwnershipId}`;
1069
1069
  return { unitGlow: `${base}-ug` };
@@ -1148,7 +1148,7 @@ var CompileAnywhere = ({
1148
1148
  color = "var(--color-primary)",
1149
1149
  animated = false
1150
1150
  }) => {
1151
- const ids = React.useMemo(() => {
1151
+ const ids = React24.useMemo(() => {
1152
1152
  compileAnywhereId += 1;
1153
1153
  const base = `ca-${compileAnywhereId}`;
1154
1154
  return {
@@ -1278,7 +1278,7 @@ var ComposableModels = ({
1278
1278
  color = "var(--color-primary)",
1279
1279
  animated = false
1280
1280
  }) => {
1281
- const ids = React.useMemo(() => {
1281
+ const ids = React24.useMemo(() => {
1282
1282
  composableModelsId += 1;
1283
1283
  const base = `cm-${composableModelsId}`;
1284
1284
  return {
@@ -1425,7 +1425,7 @@ var DescribeProveDeploy = ({
1425
1425
  color = "var(--color-primary)",
1426
1426
  animated = false
1427
1427
  }) => {
1428
- const ids = React.useMemo(() => {
1428
+ const ids = React24.useMemo(() => {
1429
1429
  describeProveDeployId += 1;
1430
1430
  const base = `dpd-${describeProveDeployId}`;
1431
1431
  return {
@@ -1593,7 +1593,7 @@ var DomainGrid = ({
1593
1593
  color = "var(--color-primary)",
1594
1594
  animated = false
1595
1595
  }) => {
1596
- const ids = React.useMemo(() => {
1596
+ const ids = React24.useMemo(() => {
1597
1597
  domainGridId += 1;
1598
1598
  const base = `dg-${domainGridId}`;
1599
1599
  return { clusterGlow: `${base}-cg` };
@@ -1696,7 +1696,7 @@ var EventBus = ({
1696
1696
  color = "var(--color-primary)",
1697
1697
  animated = false
1698
1698
  }) => {
1699
- const ids = React.useMemo(() => {
1699
+ const ids = React24.useMemo(() => {
1700
1700
  eventBusId += 1;
1701
1701
  const base = `eb-${eventBusId}`;
1702
1702
  return {
@@ -1808,7 +1808,7 @@ var OrbitalUnit = ({
1808
1808
  color = "var(--color-primary)",
1809
1809
  animated = false
1810
1810
  }) => {
1811
- const ids = React.useMemo(() => {
1811
+ const ids = React24.useMemo(() => {
1812
1812
  orbitalUnitId += 1;
1813
1813
  const base = `ou-${orbitalUnitId}`;
1814
1814
  return {
@@ -1974,7 +1974,7 @@ var PlanVerifyRemember = ({
1974
1974
  color = "var(--color-primary)",
1975
1975
  animated = false
1976
1976
  }) => {
1977
- const ids = React.useMemo(() => {
1977
+ const ids = React24.useMemo(() => {
1978
1978
  planVerifyRememberId += 1;
1979
1979
  const base = `pvr-${planVerifyRememberId}`;
1980
1980
  return {
@@ -2123,7 +2123,7 @@ var ProveCorrect = ({
2123
2123
  color = "var(--color-primary)",
2124
2124
  animated = false
2125
2125
  }) => {
2126
- const ids = React.useMemo(() => {
2126
+ const ids = React24.useMemo(() => {
2127
2127
  proveCorrectId += 1;
2128
2128
  const base = `pc-${proveCorrectId}`;
2129
2129
  return {
@@ -2243,7 +2243,7 @@ var ServiceLayers = ({
2243
2243
  color = "var(--color-primary)",
2244
2244
  animated = false
2245
2245
  }) => {
2246
- const ids = React.useMemo(() => {
2246
+ const ids = React24.useMemo(() => {
2247
2247
  serviceLayersId += 1;
2248
2248
  const base = `sly-${serviceLayersId}`;
2249
2249
  return {
@@ -2395,7 +2395,7 @@ var SharedReality = ({
2395
2395
  color = "var(--color-primary)",
2396
2396
  animated = false
2397
2397
  }) => {
2398
- const ids = React.useMemo(() => {
2398
+ const ids = React24.useMemo(() => {
2399
2399
  sharedRealityId += 1;
2400
2400
  const base = `sr-${sharedRealityId}`;
2401
2401
  return { grad: `${base}-grad`, unitGlow: `${base}-ug` };
@@ -2497,7 +2497,7 @@ var StandardLibrary = ({
2497
2497
  color = "var(--color-primary)",
2498
2498
  animated = false
2499
2499
  }) => {
2500
- const ids = React.useMemo(() => {
2500
+ const ids = React24.useMemo(() => {
2501
2501
  standardLibraryId += 1;
2502
2502
  const base = `sl-${standardLibraryId}`;
2503
2503
  return { glow: `${base}-glow`, groupGlow: `${base}-gg` };
@@ -2606,7 +2606,7 @@ var StateMachine = ({
2606
2606
  color = "var(--color-primary)",
2607
2607
  animated = false
2608
2608
  }) => {
2609
- const ids = React.useMemo(() => {
2609
+ const ids = React24.useMemo(() => {
2610
2610
  stateMachineId += 1;
2611
2611
  const base = `sm-${stateMachineId}`;
2612
2612
  return {
@@ -2784,7 +2784,7 @@ var WorldModel = ({
2784
2784
  color = "var(--color-primary)",
2785
2785
  animated = false
2786
2786
  }) => {
2787
- const ids = React.useMemo(() => {
2787
+ const ids = React24.useMemo(() => {
2788
2788
  worldModelId += 1;
2789
2789
  const base = `wm-${worldModelId}`;
2790
2790
  return {
@@ -2932,4 +2932,1749 @@ var WorldModel = ({
2932
2932
  };
2933
2933
  WorldModel.displayName = "WorldModel";
2934
2934
 
2935
- export { AIGenerates, ClosedCircuit, CommunityOwnership, CompileAnywhere, ComposableModels, DescribeProveDeploy, DomainGrid, EventBus, OrbitalUnit, PlanVerifyRemember, ProveCorrect, ServiceLayers, SharedReality, StandardLibrary, StateMachine, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, WorldModel };
2935
+ // components/atoms/avl/types.ts
2936
+ var AVL_OPERATOR_COLORS = {
2937
+ arithmetic: "#4A90D9",
2938
+ comparison: "#E8913A",
2939
+ logic: "#9B59B6",
2940
+ string: "#27AE60",
2941
+ collection: "#1ABC9C",
2942
+ time: "#F39C12",
2943
+ control: "#E74C3C",
2944
+ async: "#E91E8F"
2945
+ };
2946
+ var AvlOrbital = ({
2947
+ cx = 0,
2948
+ cy = 0,
2949
+ r = 80,
2950
+ label,
2951
+ color = "var(--color-primary)",
2952
+ opacity = 1,
2953
+ className
2954
+ }) => {
2955
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
2956
+ /* @__PURE__ */ jsx(
2957
+ "circle",
2958
+ {
2959
+ cx,
2960
+ cy,
2961
+ r,
2962
+ fill: "none",
2963
+ stroke: color,
2964
+ strokeWidth: 2
2965
+ }
2966
+ ),
2967
+ /* @__PURE__ */ jsx(
2968
+ "circle",
2969
+ {
2970
+ cx,
2971
+ cy,
2972
+ r,
2973
+ fill: color,
2974
+ opacity: 0.03
2975
+ }
2976
+ ),
2977
+ label && /* @__PURE__ */ jsx(
2978
+ "text",
2979
+ {
2980
+ x: cx,
2981
+ y: cy - r - 8,
2982
+ textAnchor: "middle",
2983
+ fill: color,
2984
+ fontSize: 11,
2985
+ fontFamily: "inherit",
2986
+ fontWeight: "bold",
2987
+ children: label
2988
+ }
2989
+ )
2990
+ ] });
2991
+ };
2992
+ AvlOrbital.displayName = "AvlOrbital";
2993
+ function persistenceStroke(kind) {
2994
+ switch (kind) {
2995
+ case "persistent":
2996
+ return { strokeWidth: 2.5 };
2997
+ case "runtime":
2998
+ return { strokeDasharray: "6 3", strokeWidth: 2 };
2999
+ case "singleton":
3000
+ return { strokeWidth: 3.5 };
3001
+ case "instance":
3002
+ return { strokeDasharray: "2 3", strokeWidth: 2 };
3003
+ }
3004
+ }
3005
+ var AvlEntity = ({
3006
+ x = 0,
3007
+ y = 0,
3008
+ r = 18,
3009
+ fieldCount = 0,
3010
+ persistence = "persistent",
3011
+ label,
3012
+ color = "var(--color-primary)",
3013
+ opacity = 1,
3014
+ className
3015
+ }) => {
3016
+ const strokeProps = persistenceStroke(persistence);
3017
+ const facets = Array.from({ length: fieldCount }, (_, i) => {
3018
+ const angle = Math.PI * 2 * i / fieldCount - Math.PI / 2;
3019
+ const innerR = r + 2;
3020
+ const outerR = r + 10;
3021
+ return {
3022
+ x1: x + innerR * Math.cos(angle),
3023
+ y1: y + innerR * Math.sin(angle),
3024
+ x2: x + outerR * Math.cos(angle),
3025
+ y2: y + outerR * Math.sin(angle)
3026
+ };
3027
+ });
3028
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3029
+ /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r, fill: color, opacity: 0.15 }),
3030
+ /* @__PURE__ */ jsx(
3031
+ "circle",
3032
+ {
3033
+ cx: x,
3034
+ cy: y,
3035
+ r,
3036
+ fill: "none",
3037
+ stroke: color,
3038
+ strokeWidth: strokeProps.strokeWidth,
3039
+ strokeDasharray: strokeProps.strokeDasharray
3040
+ }
3041
+ ),
3042
+ persistence === "singleton" && /* @__PURE__ */ jsx(
3043
+ "circle",
3044
+ {
3045
+ cx: x,
3046
+ cy: y,
3047
+ r: r - 4,
3048
+ fill: "none",
3049
+ stroke: color,
3050
+ strokeWidth: 1.5
3051
+ }
3052
+ ),
3053
+ facets.map((f, i) => /* @__PURE__ */ jsx(
3054
+ "line",
3055
+ {
3056
+ x1: f.x1,
3057
+ y1: f.y1,
3058
+ x2: f.x2,
3059
+ y2: f.y2,
3060
+ stroke: color,
3061
+ strokeWidth: 1,
3062
+ opacity: 0.6
3063
+ },
3064
+ i
3065
+ )),
3066
+ label && /* @__PURE__ */ jsx(
3067
+ "text",
3068
+ {
3069
+ x,
3070
+ y: y + r + (fieldCount > 0 ? 18 : 14),
3071
+ textAnchor: "middle",
3072
+ fill: color,
3073
+ fontSize: 10,
3074
+ fontFamily: "inherit",
3075
+ fontWeight: "bold",
3076
+ children: label
3077
+ }
3078
+ )
3079
+ ] });
3080
+ };
3081
+ AvlEntity.displayName = "AvlEntity";
3082
+ var AvlTrait = ({
3083
+ cx = 0,
3084
+ cy = 0,
3085
+ rx = 60,
3086
+ ry = 30,
3087
+ rotation = 0,
3088
+ label,
3089
+ color = "var(--color-primary)",
3090
+ opacity = 1,
3091
+ className
3092
+ }) => {
3093
+ return /* @__PURE__ */ jsxs("g", { className, opacity, transform: `rotate(${rotation},${cx},${cy})`, children: [
3094
+ /* @__PURE__ */ jsx(
3095
+ "ellipse",
3096
+ {
3097
+ cx,
3098
+ cy,
3099
+ rx,
3100
+ ry,
3101
+ fill: "none",
3102
+ stroke: color,
3103
+ strokeWidth: 1.5,
3104
+ strokeDasharray: "4 2"
3105
+ }
3106
+ ),
3107
+ label && /* @__PURE__ */ jsx(
3108
+ "text",
3109
+ {
3110
+ x: cx - rx - 6,
3111
+ y: cy,
3112
+ textAnchor: "end",
3113
+ dominantBaseline: "central",
3114
+ fill: color,
3115
+ fontSize: 9,
3116
+ fontFamily: "inherit",
3117
+ opacity: 0.8,
3118
+ transform: `rotate(${-rotation},${cx - rx - 6},${cy})`,
3119
+ children: label
3120
+ }
3121
+ )
3122
+ ] });
3123
+ };
3124
+ AvlTrait.displayName = "AvlTrait";
3125
+ var AvlPage = ({
3126
+ x = 0,
3127
+ y = 0,
3128
+ size = 12,
3129
+ label,
3130
+ color = "var(--color-primary)",
3131
+ opacity = 1,
3132
+ className
3133
+ }) => {
3134
+ const half = size / 2;
3135
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3136
+ /* @__PURE__ */ jsx(
3137
+ "rect",
3138
+ {
3139
+ x: x - half,
3140
+ y: y - half,
3141
+ width: size,
3142
+ height: size,
3143
+ fill: color,
3144
+ opacity: 0.3,
3145
+ stroke: color,
3146
+ strokeWidth: 1.5
3147
+ }
3148
+ ),
3149
+ label && /* @__PURE__ */ jsx(
3150
+ "text",
3151
+ {
3152
+ x,
3153
+ y: y + half + 12,
3154
+ textAnchor: "middle",
3155
+ fill: color,
3156
+ fontSize: 8,
3157
+ fontFamily: "inherit",
3158
+ children: label
3159
+ }
3160
+ )
3161
+ ] });
3162
+ };
3163
+ AvlPage.displayName = "AvlPage";
3164
+ var AvlApplication = ({
3165
+ x = 0,
3166
+ y = 0,
3167
+ width = 500,
3168
+ height = 350,
3169
+ label,
3170
+ color = "var(--color-primary)",
3171
+ opacity = 1,
3172
+ className
3173
+ }) => {
3174
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3175
+ /* @__PURE__ */ jsx(
3176
+ "rect",
3177
+ {
3178
+ x,
3179
+ y,
3180
+ width,
3181
+ height,
3182
+ rx: 12,
3183
+ ry: 12,
3184
+ fill: "none",
3185
+ stroke: color,
3186
+ strokeWidth: 3
3187
+ }
3188
+ ),
3189
+ /* @__PURE__ */ jsx(
3190
+ "rect",
3191
+ {
3192
+ x,
3193
+ y,
3194
+ width,
3195
+ height,
3196
+ rx: 12,
3197
+ ry: 12,
3198
+ fill: color,
3199
+ opacity: 0.02
3200
+ }
3201
+ ),
3202
+ label && /* @__PURE__ */ jsx(
3203
+ "text",
3204
+ {
3205
+ x: x + 16,
3206
+ y: y + 20,
3207
+ fill: color,
3208
+ fontSize: 12,
3209
+ fontFamily: "inherit",
3210
+ fontWeight: "bold",
3211
+ children: label
3212
+ }
3213
+ )
3214
+ ] });
3215
+ };
3216
+ AvlApplication.displayName = "AvlApplication";
3217
+ var AvlState = ({
3218
+ x = 0,
3219
+ y = 0,
3220
+ name,
3221
+ isInitial = false,
3222
+ isTerminal = false,
3223
+ width = 100,
3224
+ height = 40,
3225
+ color = "var(--color-primary)",
3226
+ opacity = 1,
3227
+ className
3228
+ }) => {
3229
+ const rx = height / 2;
3230
+ return /* @__PURE__ */ jsxs("g", { className, opacity, transform: `translate(${x},${y})`, children: [
3231
+ isInitial && /* @__PURE__ */ jsx(
3232
+ "circle",
3233
+ {
3234
+ cx: -16,
3235
+ cy: height / 2,
3236
+ r: 6,
3237
+ fill: color
3238
+ }
3239
+ ),
3240
+ isTerminal && /* @__PURE__ */ jsx(
3241
+ "rect",
3242
+ {
3243
+ x: -4,
3244
+ y: -4,
3245
+ width: width + 8,
3246
+ height: height + 8,
3247
+ rx: rx + 4,
3248
+ ry: rx + 4,
3249
+ fill: "none",
3250
+ stroke: color,
3251
+ strokeWidth: 1,
3252
+ opacity: 0.5
3253
+ }
3254
+ ),
3255
+ /* @__PURE__ */ jsx(
3256
+ "rect",
3257
+ {
3258
+ x: 0,
3259
+ y: 0,
3260
+ width,
3261
+ height,
3262
+ rx,
3263
+ ry: rx,
3264
+ fill: "none",
3265
+ stroke: color,
3266
+ strokeWidth: 2
3267
+ }
3268
+ ),
3269
+ name && /* @__PURE__ */ jsx(
3270
+ "text",
3271
+ {
3272
+ x: width / 2,
3273
+ y: height / 2,
3274
+ textAnchor: "middle",
3275
+ dominantBaseline: "central",
3276
+ fill: color,
3277
+ fontSize: 11,
3278
+ fontFamily: "inherit",
3279
+ children: name
3280
+ }
3281
+ )
3282
+ ] });
3283
+ };
3284
+ AvlState.displayName = "AvlState";
3285
+ var avlTransitionId = 0;
3286
+ var AvlTransition = ({
3287
+ x1,
3288
+ y1,
3289
+ x2,
3290
+ y2,
3291
+ curved = false,
3292
+ curveAwayFrom,
3293
+ label,
3294
+ color = "var(--color-primary)",
3295
+ opacity = 1,
3296
+ className
3297
+ }) => {
3298
+ const ids = React24.useMemo(() => {
3299
+ avlTransitionId += 1;
3300
+ return { arrow: `avl-tr-${avlTransitionId}-arrow` };
3301
+ }, []);
3302
+ const mx = (x1 + x2) / 2;
3303
+ const my = (y1 + y2) / 2;
3304
+ const dx = x2 - x1;
3305
+ const dy = y2 - y1;
3306
+ const len = Math.sqrt(dx * dx + dy * dy) || 1;
3307
+ const curvature = len * 0.2;
3308
+ let perpX = -dy / len;
3309
+ let perpY = dx / len;
3310
+ if (curveAwayFrom) {
3311
+ const testX = mx + perpX * curvature;
3312
+ const testY = my + perpY * curvature;
3313
+ const distTest = Math.sqrt((testX - curveAwayFrom.x) ** 2 + (testY - curveAwayFrom.y) ** 2);
3314
+ const distMid = Math.sqrt((mx - curveAwayFrom.x) ** 2 + (my - curveAwayFrom.y) ** 2);
3315
+ if (distTest < distMid) {
3316
+ perpX = -perpX;
3317
+ perpY = -perpY;
3318
+ }
3319
+ }
3320
+ const cpx = mx + perpX * curvature;
3321
+ const cpy = my + perpY * curvature;
3322
+ const d = curved ? `M${x1},${y1} Q${cpx},${cpy} ${x2},${y2}` : `M${x1},${y1} L${x2},${y2}`;
3323
+ const labelX = curved ? (x1 + 2 * cpx + x2) / 4 : mx;
3324
+ const labelY = curved ? (y1 + 2 * cpy + y2) / 4 : my;
3325
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3326
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
3327
+ "marker",
3328
+ {
3329
+ id: ids.arrow,
3330
+ markerWidth: "8",
3331
+ markerHeight: "6",
3332
+ refX: "7",
3333
+ refY: "3",
3334
+ orient: "auto",
3335
+ markerUnits: "strokeWidth",
3336
+ children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color })
3337
+ }
3338
+ ) }),
3339
+ /* @__PURE__ */ jsx(
3340
+ "path",
3341
+ {
3342
+ d,
3343
+ fill: "none",
3344
+ stroke: color,
3345
+ strokeWidth: 1.5,
3346
+ markerEnd: `url(#${ids.arrow})`
3347
+ }
3348
+ ),
3349
+ label && /* @__PURE__ */ jsx(
3350
+ "text",
3351
+ {
3352
+ x: labelX,
3353
+ y: labelY - 6,
3354
+ textAnchor: "middle",
3355
+ fill: color,
3356
+ fontSize: 9,
3357
+ fontFamily: "inherit",
3358
+ opacity: 0.8,
3359
+ children: label
3360
+ }
3361
+ )
3362
+ ] });
3363
+ };
3364
+ AvlTransition.displayName = "AvlTransition";
3365
+ var AvlEvent = ({
3366
+ x = 0,
3367
+ y = 0,
3368
+ size = 16,
3369
+ label,
3370
+ color = "var(--color-primary)",
3371
+ opacity = 1,
3372
+ className
3373
+ }) => {
3374
+ const s = size / 16;
3375
+ const bolt = [
3376
+ `M${x - 2 * s},${y - 8 * s}`,
3377
+ `L${x + 4 * s},${y - 8 * s}`,
3378
+ `L${x + 1 * s},${y - 1 * s}`,
3379
+ `L${x + 5 * s},${y - 1 * s}`,
3380
+ `L${x - 3 * s},${y + 8 * s}`,
3381
+ `L${x},${y + 1 * s}`,
3382
+ `L${x - 4 * s},${y + 1 * s}`,
3383
+ "Z"
3384
+ ].join(" ");
3385
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3386
+ /* @__PURE__ */ jsx("path", { d: bolt, fill: color }),
3387
+ label && /* @__PURE__ */ jsx(
3388
+ "text",
3389
+ {
3390
+ x,
3391
+ y: y + size / 2 + 12,
3392
+ textAnchor: "middle",
3393
+ fill: color,
3394
+ fontSize: 9,
3395
+ fontFamily: "inherit",
3396
+ children: label
3397
+ }
3398
+ )
3399
+ ] });
3400
+ };
3401
+ AvlEvent.displayName = "AvlEvent";
3402
+ var AvlGuard = ({
3403
+ x = 0,
3404
+ y = 0,
3405
+ size = 24,
3406
+ label,
3407
+ color = "var(--color-primary)",
3408
+ opacity = 1,
3409
+ className
3410
+ }) => {
3411
+ const h = size / 2;
3412
+ const points = `${x},${y - h} ${x + h},${y} ${x},${y + h} ${x - h},${y}`;
3413
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3414
+ /* @__PURE__ */ jsx(
3415
+ "polygon",
3416
+ {
3417
+ points,
3418
+ fill: "none",
3419
+ stroke: color,
3420
+ strokeWidth: 2,
3421
+ strokeLinejoin: "round"
3422
+ }
3423
+ ),
3424
+ label && /* @__PURE__ */ jsx(
3425
+ "text",
3426
+ {
3427
+ x,
3428
+ y,
3429
+ textAnchor: "middle",
3430
+ dominantBaseline: "central",
3431
+ fill: color,
3432
+ fontSize: 8,
3433
+ fontFamily: "inherit",
3434
+ children: label
3435
+ }
3436
+ )
3437
+ ] });
3438
+ };
3439
+ AvlGuard.displayName = "AvlGuard";
3440
+ function effectIcon(type, x, y, s, color) {
3441
+ switch (type) {
3442
+ case "render-ui":
3443
+ return /* @__PURE__ */ jsxs("g", { children: [
3444
+ /* @__PURE__ */ jsx("rect", { x: x - s, y: y - s, width: s * 2, height: s * 2, fill: "none", stroke: color, strokeWidth: 1.5, rx: 1 }),
3445
+ /* @__PURE__ */ jsx("line", { x1: x, y1: y - s, x2: x, y2: y + s, stroke: color, strokeWidth: 1 }),
3446
+ /* @__PURE__ */ jsx("line", { x1: x - s, y1: y, x2: x + s, y2: y, stroke: color, strokeWidth: 1 })
3447
+ ] });
3448
+ case "set":
3449
+ return /* @__PURE__ */ jsx(
3450
+ "path",
3451
+ {
3452
+ d: `M${x - s * 0.6},${y + s} L${x - s},${y + s * 0.4} L${x + s * 0.4},${y - s} L${x + s},${y - s * 0.4} Z`,
3453
+ fill: "none",
3454
+ stroke: color,
3455
+ strokeWidth: 1.5,
3456
+ strokeLinejoin: "round"
3457
+ }
3458
+ );
3459
+ case "persist":
3460
+ return /* @__PURE__ */ jsxs("g", { children: [
3461
+ /* @__PURE__ */ jsx("ellipse", { cx: x, cy: y - s * 0.6, rx: s, ry: s * 0.4, fill: "none", stroke: color, strokeWidth: 1.5 }),
3462
+ /* @__PURE__ */ jsx("line", { x1: x - s, y1: y - s * 0.6, x2: x - s, y2: y + s * 0.4, stroke: color, strokeWidth: 1.5 }),
3463
+ /* @__PURE__ */ jsx("line", { x1: x + s, y1: y - s * 0.6, x2: x + s, y2: y + s * 0.4, stroke: color, strokeWidth: 1.5 }),
3464
+ /* @__PURE__ */ jsx("ellipse", { cx: x, cy: y + s * 0.4, rx: s, ry: s * 0.4, fill: "none", stroke: color, strokeWidth: 1.5 })
3465
+ ] });
3466
+ case "fetch":
3467
+ return /* @__PURE__ */ jsxs("g", { children: [
3468
+ /* @__PURE__ */ jsx("line", { x1: x, y1: y - s, x2: x, y2: y + s * 0.6, stroke: color, strokeWidth: 1.5 }),
3469
+ /* @__PURE__ */ jsx("polyline", { points: `${x - s * 0.5},${y + s * 0.1} ${x},${y + s} ${x + s * 0.5},${y + s * 0.1}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" })
3470
+ ] });
3471
+ case "emit":
3472
+ return /* @__PURE__ */ jsxs("g", { children: [
3473
+ /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s * 0.3, fill: color }),
3474
+ /* @__PURE__ */ jsx("path", { d: `M${x - s * 0.7},${y - s * 0.7} A${s},${s} 0 0,1 ${x + s * 0.7},${y - s * 0.7}`, fill: "none", stroke: color, strokeWidth: 1.5 }),
3475
+ /* @__PURE__ */ jsx("path", { d: `M${x - s},${y - s} A${s * 1.4},${s * 1.4} 0 0,1 ${x + s},${y - s}`, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.6 })
3476
+ ] });
3477
+ case "navigate":
3478
+ return /* @__PURE__ */ jsxs("g", { children: [
3479
+ /* @__PURE__ */ jsx("line", { x1: x - s, y1: y, x2: x + s * 0.6, y2: y, stroke: color, strokeWidth: 1.5 }),
3480
+ /* @__PURE__ */ jsx("polyline", { points: `${x + s * 0.1},${y - s * 0.5} ${x + s},${y} ${x + s * 0.1},${y + s * 0.5}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" })
3481
+ ] });
3482
+ case "notify":
3483
+ return /* @__PURE__ */ jsxs("g", { children: [
3484
+ /* @__PURE__ */ jsx("path", { d: `M${x - s * 0.7},${y + s * 0.3} Q${x - s * 0.7},${y - s} ${x},${y - s} Q${x + s * 0.7},${y - s} ${x + s * 0.7},${y + s * 0.3} Z`, fill: "none", stroke: color, strokeWidth: 1.5 }),
3485
+ /* @__PURE__ */ jsx("line", { x1: x - s * 0.8, y1: y + s * 0.3, x2: x + s * 0.8, y2: y + s * 0.3, stroke: color, strokeWidth: 1.5 }),
3486
+ /* @__PURE__ */ jsx("circle", { cx: x, cy: y + s * 0.7, r: s * 0.2, fill: color })
3487
+ ] });
3488
+ case "call-service":
3489
+ return /* @__PURE__ */ jsxs("g", { children: [
3490
+ /* @__PURE__ */ jsx("line", { x1: x - s, y1: y - s * 0.3, x2: x + s, y2: y - s * 0.3, stroke: color, strokeWidth: 1.5 }),
3491
+ /* @__PURE__ */ jsx("polyline", { points: `${x + s * 0.5},${y - s * 0.7} ${x + s},${y - s * 0.3} ${x + s * 0.5},${y + s * 0.1}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" }),
3492
+ /* @__PURE__ */ jsx("line", { x1: x + s, y1: y + s * 0.3, x2: x - s, y2: y + s * 0.3, stroke: color, strokeWidth: 1.5 }),
3493
+ /* @__PURE__ */ jsx("polyline", { points: `${x - s * 0.5},${y - s * 0.1} ${x - s},${y + s * 0.3} ${x - s * 0.5},${y + s * 0.7}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" })
3494
+ ] });
3495
+ case "spawn":
3496
+ return /* @__PURE__ */ jsxs("g", { children: [
3497
+ /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 }),
3498
+ /* @__PURE__ */ jsx("line", { x1: x - s * 0.5, y1: y, x2: x + s * 0.5, y2: y, stroke: color, strokeWidth: 1.5 }),
3499
+ /* @__PURE__ */ jsx("line", { x1: x, y1: y - s * 0.5, x2: x, y2: y + s * 0.5, stroke: color, strokeWidth: 1.5 })
3500
+ ] });
3501
+ case "despawn":
3502
+ return /* @__PURE__ */ jsxs("g", { children: [
3503
+ /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 }),
3504
+ /* @__PURE__ */ jsx("line", { x1: x - s * 0.5, y1: y, x2: x + s * 0.5, y2: y, stroke: color, strokeWidth: 1.5 })
3505
+ ] });
3506
+ case "do":
3507
+ return /* @__PURE__ */ jsxs("g", { children: [
3508
+ /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 }),
3509
+ /* @__PURE__ */ jsx("polygon", { points: `${x - s * 0.3},${y - s * 0.5} ${x + s * 0.5},${y} ${x - s * 0.3},${y + s * 0.5}`, fill: color })
3510
+ ] });
3511
+ case "if":
3512
+ return /* @__PURE__ */ jsx(
3513
+ "polygon",
3514
+ {
3515
+ points: `${x},${y - s} ${x + s * 0.7},${y} ${x},${y + s} ${x - s * 0.7},${y}`,
3516
+ fill: "none",
3517
+ stroke: color,
3518
+ strokeWidth: 1.5,
3519
+ strokeLinejoin: "round"
3520
+ }
3521
+ );
3522
+ case "log":
3523
+ return /* @__PURE__ */ jsx(
3524
+ "text",
3525
+ {
3526
+ x,
3527
+ y,
3528
+ textAnchor: "middle",
3529
+ dominantBaseline: "central",
3530
+ fill: color,
3531
+ fontSize: s * 2.2,
3532
+ fontFamily: "serif",
3533
+ children: "\xB6"
3534
+ }
3535
+ );
3536
+ }
3537
+ }
3538
+ var AvlEffect = ({
3539
+ x = 0,
3540
+ y = 0,
3541
+ effectType,
3542
+ size = 8,
3543
+ label,
3544
+ color = "var(--color-primary)",
3545
+ opacity = 1,
3546
+ className
3547
+ }) => {
3548
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3549
+ effectIcon(effectType, x, y, size, color),
3550
+ label && /* @__PURE__ */ jsx(
3551
+ "text",
3552
+ {
3553
+ x,
3554
+ y: y + size + 10,
3555
+ textAnchor: "middle",
3556
+ fill: color,
3557
+ fontSize: 8,
3558
+ fontFamily: "inherit",
3559
+ opacity: 0.7,
3560
+ children: label
3561
+ }
3562
+ )
3563
+ ] });
3564
+ };
3565
+ AvlEffect.displayName = "AvlEffect";
3566
+ var AvlField = ({
3567
+ x = 0,
3568
+ y = 0,
3569
+ angle = 0,
3570
+ length = 30,
3571
+ required = true,
3572
+ label,
3573
+ color = "var(--color-primary)",
3574
+ opacity = 1,
3575
+ className
3576
+ }) => {
3577
+ const x2 = x + length * Math.cos(angle);
3578
+ const y2 = y + length * Math.sin(angle);
3579
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3580
+ /* @__PURE__ */ jsx(
3581
+ "line",
3582
+ {
3583
+ x1: x,
3584
+ y1: y,
3585
+ x2,
3586
+ y2,
3587
+ stroke: color,
3588
+ strokeWidth: 1.5,
3589
+ strokeDasharray: required ? void 0 : "3 2"
3590
+ }
3591
+ ),
3592
+ /* @__PURE__ */ jsx("circle", { cx: x2, cy: y2, r: 2.5, fill: color, opacity: 0.6 }),
3593
+ label && /* @__PURE__ */ jsx(
3594
+ "text",
3595
+ {
3596
+ x: x2 + 6 * Math.cos(angle),
3597
+ y: y2 + 6 * Math.sin(angle),
3598
+ textAnchor: Math.cos(angle) >= 0 ? "start" : "end",
3599
+ dominantBaseline: "central",
3600
+ fill: color,
3601
+ fontSize: 8,
3602
+ fontFamily: "inherit",
3603
+ opacity: 0.7,
3604
+ children: label
3605
+ }
3606
+ )
3607
+ ] });
3608
+ };
3609
+ AvlField.displayName = "AvlField";
3610
+ function typeShape(kind, x, y, s, color) {
3611
+ switch (kind) {
3612
+ case "string":
3613
+ return /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: color });
3614
+ case "number":
3615
+ return /* @__PURE__ */ jsx(
3616
+ "polygon",
3617
+ {
3618
+ points: `${x},${y - s} ${x + s},${y + s * 0.7} ${x - s},${y + s * 0.7}`,
3619
+ fill: color
3620
+ }
3621
+ );
3622
+ case "boolean":
3623
+ return /* @__PURE__ */ jsx("rect", { x: x - s * 0.8, y: y - s * 0.8, width: s * 1.6, height: s * 1.6, fill: color });
3624
+ case "date":
3625
+ return /* @__PURE__ */ jsx(
3626
+ "polygon",
3627
+ {
3628
+ points: `${x},${y - s} ${x + s},${y} ${x},${y + s} ${x - s},${y}`,
3629
+ fill: color
3630
+ }
3631
+ );
3632
+ case "enum":
3633
+ return /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 });
3634
+ case "object":
3635
+ return /* @__PURE__ */ jsx(
3636
+ "polygon",
3637
+ {
3638
+ points: Array.from({ length: 6 }, (_, i) => {
3639
+ const a = Math.PI * 2 * i / 6 - Math.PI / 6;
3640
+ return `${x + s * Math.cos(a)},${y + s * Math.sin(a)}`;
3641
+ }).join(" "),
3642
+ fill: color,
3643
+ opacity: 0.8
3644
+ }
3645
+ );
3646
+ case "array":
3647
+ return /* @__PURE__ */ jsxs("g", { children: [
3648
+ /* @__PURE__ */ jsx("line", { x1: x - s, y1: y - s * 0.6, x2: x + s, y2: y - s * 0.6, stroke: color, strokeWidth: 2 }),
3649
+ /* @__PURE__ */ jsx("line", { x1: x - s, y1: y, x2: x + s, y2: y, stroke: color, strokeWidth: 2 }),
3650
+ /* @__PURE__ */ jsx("line", { x1: x - s, y1: y + s * 0.6, x2: x + s, y2: y + s * 0.6, stroke: color, strokeWidth: 2 })
3651
+ ] });
3652
+ }
3653
+ }
3654
+ var AvlFieldType = ({
3655
+ x = 0,
3656
+ y = 0,
3657
+ kind,
3658
+ size = 5,
3659
+ label,
3660
+ color = "var(--color-primary)",
3661
+ opacity = 1,
3662
+ className
3663
+ }) => {
3664
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3665
+ typeShape(kind, x, y, size, color),
3666
+ label && /* @__PURE__ */ jsx(
3667
+ "text",
3668
+ {
3669
+ x,
3670
+ y: y + size + 10,
3671
+ textAnchor: "middle",
3672
+ fill: color,
3673
+ fontSize: 8,
3674
+ fontFamily: "inherit",
3675
+ opacity: 0.7,
3676
+ children: label
3677
+ }
3678
+ )
3679
+ ] });
3680
+ };
3681
+ AvlFieldType.displayName = "AvlFieldType";
3682
+ var AvlBinding = ({
3683
+ x1,
3684
+ y1,
3685
+ x2,
3686
+ y2,
3687
+ label,
3688
+ color = "var(--color-primary)",
3689
+ opacity = 1,
3690
+ className
3691
+ }) => {
3692
+ const mx = (x1 + x2) / 2;
3693
+ const my = (y1 + y2) / 2;
3694
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3695
+ /* @__PURE__ */ jsx(
3696
+ "line",
3697
+ {
3698
+ x1,
3699
+ y1,
3700
+ x2,
3701
+ y2,
3702
+ stroke: color,
3703
+ strokeWidth: 1,
3704
+ strokeDasharray: "2 3",
3705
+ opacity: 0.6
3706
+ }
3707
+ ),
3708
+ /* @__PURE__ */ jsx(
3709
+ "text",
3710
+ {
3711
+ x: mx,
3712
+ y: my - 4,
3713
+ textAnchor: "middle",
3714
+ fill: color,
3715
+ fontSize: 10,
3716
+ fontFamily: "inherit",
3717
+ fontWeight: "bold",
3718
+ children: "@"
3719
+ }
3720
+ ),
3721
+ label && /* @__PURE__ */ jsx(
3722
+ "text",
3723
+ {
3724
+ x: mx,
3725
+ y: my + 10,
3726
+ textAnchor: "middle",
3727
+ fill: color,
3728
+ fontSize: 8,
3729
+ fontFamily: "inherit",
3730
+ opacity: 0.6,
3731
+ children: label
3732
+ }
3733
+ )
3734
+ ] });
3735
+ };
3736
+ AvlBinding.displayName = "AvlBinding";
3737
+ var AvlPersistence = ({
3738
+ x = 0,
3739
+ y = 0,
3740
+ kind,
3741
+ size = 20,
3742
+ label,
3743
+ color = "var(--color-primary)",
3744
+ opacity = 1,
3745
+ className
3746
+ }) => {
3747
+ const half = size / 2;
3748
+ const strokeProps = (() => {
3749
+ switch (kind) {
3750
+ case "persistent":
3751
+ return { strokeWidth: 2.5 };
3752
+ case "runtime":
3753
+ return { strokeDasharray: "6 3", strokeWidth: 2 };
3754
+ case "singleton":
3755
+ return { strokeWidth: 3 };
3756
+ case "instance":
3757
+ return { strokeDasharray: "2 3", strokeWidth: 2 };
3758
+ }
3759
+ })();
3760
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3761
+ /* @__PURE__ */ jsx(
3762
+ "line",
3763
+ {
3764
+ x1: x - half,
3765
+ y1: y,
3766
+ x2: x + half,
3767
+ y2: y,
3768
+ stroke: color,
3769
+ strokeWidth: strokeProps.strokeWidth,
3770
+ strokeDasharray: strokeProps.strokeDasharray,
3771
+ strokeLinecap: "round"
3772
+ }
3773
+ ),
3774
+ kind === "singleton" && /* @__PURE__ */ jsx(
3775
+ "line",
3776
+ {
3777
+ x1: x - half,
3778
+ y1: y + 5,
3779
+ x2: x + half,
3780
+ y2: y + 5,
3781
+ stroke: color,
3782
+ strokeWidth: 1.5,
3783
+ strokeLinecap: "round"
3784
+ }
3785
+ ),
3786
+ label && /* @__PURE__ */ jsx(
3787
+ "text",
3788
+ {
3789
+ x,
3790
+ y: y + (kind === "singleton" ? 20 : 14),
3791
+ textAnchor: "middle",
3792
+ fill: color,
3793
+ fontSize: 8,
3794
+ fontFamily: "inherit",
3795
+ opacity: 0.7,
3796
+ children: label
3797
+ }
3798
+ )
3799
+ ] });
3800
+ };
3801
+ AvlPersistence.displayName = "AvlPersistence";
3802
+ var AvlOperator = ({
3803
+ x = 0,
3804
+ y = 0,
3805
+ name,
3806
+ namespace = "arithmetic",
3807
+ size = 16,
3808
+ color,
3809
+ opacity = 1,
3810
+ className
3811
+ }) => {
3812
+ const opColor = color ?? AVL_OPERATOR_COLORS[namespace];
3813
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3814
+ /* @__PURE__ */ jsx(
3815
+ "rect",
3816
+ {
3817
+ x: x - size,
3818
+ y: y - size * 0.7,
3819
+ width: size * 2,
3820
+ height: size * 1.4,
3821
+ rx: 4,
3822
+ ry: 4,
3823
+ fill: opColor,
3824
+ fillOpacity: 0.15,
3825
+ stroke: opColor,
3826
+ strokeWidth: 1.5
3827
+ }
3828
+ ),
3829
+ /* @__PURE__ */ jsx(
3830
+ "text",
3831
+ {
3832
+ x,
3833
+ y: y + 1,
3834
+ textAnchor: "middle",
3835
+ dominantBaseline: "central",
3836
+ fill: opColor,
3837
+ fontSize: size > 14 ? 10 : 8,
3838
+ fontFamily: "inherit",
3839
+ fontWeight: "bold",
3840
+ children: name
3841
+ }
3842
+ )
3843
+ ] });
3844
+ };
3845
+ AvlOperator.displayName = "AvlOperator";
3846
+ var AvlSExpr = ({
3847
+ x = 0,
3848
+ y = 0,
3849
+ width = 140,
3850
+ height = 80,
3851
+ label,
3852
+ color = "var(--color-primary)",
3853
+ opacity = 1,
3854
+ className
3855
+ }) => {
3856
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3857
+ /* @__PURE__ */ jsx(
3858
+ "rect",
3859
+ {
3860
+ x,
3861
+ y,
3862
+ width,
3863
+ height,
3864
+ rx: 6,
3865
+ ry: 6,
3866
+ fill: color,
3867
+ fillOpacity: 0.05,
3868
+ stroke: color,
3869
+ strokeWidth: 1,
3870
+ strokeDasharray: "6 3"
3871
+ }
3872
+ ),
3873
+ /* @__PURE__ */ jsx("circle", { cx: x + 12, cy: y + 12, r: 3, fill: color, opacity: 0.4 }),
3874
+ /* @__PURE__ */ jsx("line", { x1: x + 12, y1: y + 15, x2: x + 8, y2: y + 22, stroke: color, strokeWidth: 0.8, opacity: 0.3 }),
3875
+ /* @__PURE__ */ jsx("line", { x1: x + 12, y1: y + 15, x2: x + 16, y2: y + 22, stroke: color, strokeWidth: 0.8, opacity: 0.3 }),
3876
+ label && /* @__PURE__ */ jsx(
3877
+ "text",
3878
+ {
3879
+ x: x + width / 2,
3880
+ y: y + height / 2,
3881
+ textAnchor: "middle",
3882
+ dominantBaseline: "central",
3883
+ fill: color,
3884
+ fontSize: 9,
3885
+ fontFamily: "inherit",
3886
+ opacity: 0.6,
3887
+ children: label
3888
+ }
3889
+ )
3890
+ ] });
3891
+ };
3892
+ AvlSExpr.displayName = "AvlSExpr";
3893
+ var AvlLiteral = ({
3894
+ x = 0,
3895
+ y = 0,
3896
+ value,
3897
+ size = 12,
3898
+ color = "var(--color-primary)",
3899
+ opacity = 1,
3900
+ className
3901
+ }) => {
3902
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3903
+ /* @__PURE__ */ jsx(
3904
+ "circle",
3905
+ {
3906
+ cx: x,
3907
+ cy: y,
3908
+ r: size,
3909
+ fill: "none",
3910
+ stroke: color,
3911
+ strokeWidth: 1,
3912
+ opacity: 0.5
3913
+ }
3914
+ ),
3915
+ /* @__PURE__ */ jsx(
3916
+ "text",
3917
+ {
3918
+ x,
3919
+ y: y + 1,
3920
+ textAnchor: "middle",
3921
+ dominantBaseline: "central",
3922
+ fill: color,
3923
+ fontSize: size > 10 ? 9 : 7,
3924
+ fontFamily: "inherit",
3925
+ children: value
3926
+ }
3927
+ )
3928
+ ] });
3929
+ };
3930
+ AvlLiteral.displayName = "AvlLiteral";
3931
+ var AvlBindingRef = ({
3932
+ x = 0,
3933
+ y = 0,
3934
+ path,
3935
+ size = 12,
3936
+ color = "var(--color-primary)",
3937
+ opacity = 1,
3938
+ className
3939
+ }) => {
3940
+ const fullLabel = `@${path}`;
3941
+ const autoR = Math.max(size, fullLabel.length * 3.5 + 4);
3942
+ return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
3943
+ /* @__PURE__ */ jsx(
3944
+ "circle",
3945
+ {
3946
+ cx: x,
3947
+ cy: y,
3948
+ r: autoR,
3949
+ fill: "none",
3950
+ stroke: color,
3951
+ strokeWidth: 1.5,
3952
+ strokeDasharray: "3 2"
3953
+ }
3954
+ ),
3955
+ /* @__PURE__ */ jsx(
3956
+ "text",
3957
+ {
3958
+ x,
3959
+ y: y + 1,
3960
+ textAnchor: "middle",
3961
+ dominantBaseline: "central",
3962
+ fill: color,
3963
+ fontSize: 10,
3964
+ fontFamily: "inherit",
3965
+ children: fullLabel
3966
+ }
3967
+ )
3968
+ ] });
3969
+ };
3970
+ AvlBindingRef.displayName = "AvlBindingRef";
3971
+
3972
+ // components/molecules/avl/avl-layout.ts
3973
+ function ringPositions(cx, cy, r, count, startAngle = -Math.PI / 2) {
3974
+ return Array.from({ length: count }, (_, i) => {
3975
+ const angle = startAngle + Math.PI * 2 * i / count;
3976
+ return {
3977
+ x: cx + r * Math.cos(angle),
3978
+ y: cy + r * Math.sin(angle),
3979
+ angle
3980
+ };
3981
+ });
3982
+ }
3983
+ var avlSmId = 0;
3984
+ var AvlStateMachine = ({
3985
+ states,
3986
+ transitions,
3987
+ className,
3988
+ color = "var(--color-primary)",
3989
+ animated = false
3990
+ }) => {
3991
+ const ids = React24.useMemo(() => {
3992
+ avlSmId += 1;
3993
+ const base = `avl-sm-${avlSmId}`;
3994
+ return { glow: `${base}-glow`, grad: `${base}-grad` };
3995
+ }, []);
3996
+ const cx = 300;
3997
+ const cy = 200;
3998
+ const r = 150;
3999
+ const stateWidth = 90;
4000
+ const stateHeight = 36;
4001
+ const positions = ringPositions(cx, cy, r, states.length);
4002
+ const stateIndex = new Map(states.map((s, i) => [s.name, i]));
4003
+ const pairCount = /* @__PURE__ */ new Map();
4004
+ const pairSeen = /* @__PURE__ */ new Map();
4005
+ for (const tr of transitions) {
4006
+ const key = [tr.from, tr.to].sort().join("|");
4007
+ pairCount.set(key, (pairCount.get(key) ?? 0) + 1);
4008
+ }
4009
+ return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
4010
+ /* @__PURE__ */ jsxs("defs", { children: [
4011
+ /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
4012
+ /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
4013
+ /* @__PURE__ */ jsxs("feMerge", { children: [
4014
+ /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
4015
+ /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
4016
+ ] })
4017
+ ] }),
4018
+ /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
4019
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.1 }),
4020
+ /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
4021
+ ] })
4022
+ ] }),
4023
+ animated && /* @__PURE__ */ jsx("style", { children: `
4024
+ @keyframes avl-sm-dash { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
4025
+ ` }),
4026
+ /* @__PURE__ */ jsx("circle", { cx, cy, r: r + 30, fill: `url(#${ids.grad})` }),
4027
+ transitions.map((tr, i) => {
4028
+ const fromIdx = stateIndex.get(tr.from);
4029
+ const toIdx = stateIndex.get(tr.to);
4030
+ if (fromIdx === void 0 || toIdx === void 0) return null;
4031
+ const fp = positions[fromIdx];
4032
+ const tp = positions[toIdx];
4033
+ const dx = tp.x - fp.x;
4034
+ const dy = tp.y - fp.y;
4035
+ const dist4 = Math.sqrt(dx * dx + dy * dy) || 1;
4036
+ const nx = dx / dist4;
4037
+ const ny = dy / dist4;
4038
+ const pairKey = [tr.from, tr.to].sort().join("|");
4039
+ const totalForPair = pairCount.get(pairKey) ?? 1;
4040
+ const seenIdx = pairSeen.get(pairKey) ?? 0;
4041
+ pairSeen.set(pairKey, seenIdx + 1);
4042
+ const pairOffset = totalForPair > 1 ? (seenIdx - (totalForPair - 1) / 2) * 24 : 0;
4043
+ const x1 = fp.x + nx * (stateWidth / 2 + 4);
4044
+ const y1 = fp.y + ny * (stateHeight / 2 + 4);
4045
+ const x2 = tp.x - nx * (stateWidth / 2 + 8);
4046
+ const y2 = tp.y - ny * (stateHeight / 2 + 8);
4047
+ const t = 0.3;
4048
+ const labelX = x1 * (1 - t) + x2 * t;
4049
+ const labelY = y1 * (1 - t) + y2 * t;
4050
+ const perpX = -ny * (20 + Math.abs(pairOffset));
4051
+ const perpY = nx * (20 + Math.abs(pairOffset));
4052
+ const midToCenter = Math.sqrt((labelX - cx) ** 2 + (labelY - cy) ** 2);
4053
+ const testX = labelX + perpX;
4054
+ const testY = labelY + perpY;
4055
+ const testToCenter = Math.sqrt((testX - cx) ** 2 + (testY - cy) ** 2);
4056
+ const outSign = testToCenter > midToCenter ? 1 : -1;
4057
+ const lx = labelX + perpX * outSign + -ny * pairOffset;
4058
+ const ly = labelY + perpY * outSign + nx * pairOffset;
4059
+ return /* @__PURE__ */ jsxs("g", { children: [
4060
+ /* @__PURE__ */ jsx(
4061
+ AvlTransition,
4062
+ {
4063
+ x1: x1 + -ny * pairOffset,
4064
+ y1: y1 + nx * pairOffset,
4065
+ x2: x2 + -ny * pairOffset,
4066
+ y2: y2 + nx * pairOffset,
4067
+ curved: states.length > 2,
4068
+ curveAwayFrom: { x: cx, y: cy },
4069
+ color,
4070
+ opacity: 0.7
4071
+ }
4072
+ ),
4073
+ tr.event && /* @__PURE__ */ jsx(
4074
+ "text",
4075
+ {
4076
+ x: lx,
4077
+ y: ly,
4078
+ textAnchor: "middle",
4079
+ fill: color,
4080
+ fontSize: 9,
4081
+ fontFamily: "inherit",
4082
+ fontWeight: "bold",
4083
+ opacity: 0.8,
4084
+ children: tr.event
4085
+ }
4086
+ ),
4087
+ tr.guard && /* @__PURE__ */ jsxs(
4088
+ "text",
4089
+ {
4090
+ x: lx,
4091
+ y: ly + 12,
4092
+ textAnchor: "middle",
4093
+ fill: color,
4094
+ fontSize: 8,
4095
+ fontFamily: "inherit",
4096
+ opacity: 0.6,
4097
+ children: [
4098
+ "[",
4099
+ tr.guard,
4100
+ "]"
4101
+ ]
4102
+ }
4103
+ ),
4104
+ tr.effects?.map((eff, j) => /* @__PURE__ */ jsx(
4105
+ AvlEffect,
4106
+ {
4107
+ x: lx + (j - ((tr.effects?.length ?? 1) - 1) / 2) * 14,
4108
+ y: ly + (tr.guard ? 22 : 12),
4109
+ effectType: eff,
4110
+ size: 5,
4111
+ color,
4112
+ opacity: 0.7
4113
+ },
4114
+ j
4115
+ ))
4116
+ ] }, `tr-${i}`);
4117
+ }),
4118
+ states.map((state, i) => {
4119
+ const pos = positions[i];
4120
+ return /* @__PURE__ */ jsx(
4121
+ AvlState,
4122
+ {
4123
+ x: pos.x - stateWidth / 2,
4124
+ y: pos.y - stateHeight / 2,
4125
+ width: stateWidth,
4126
+ height: stateHeight,
4127
+ name: state.name,
4128
+ isInitial: state.isInitial,
4129
+ isTerminal: state.isTerminal,
4130
+ color
4131
+ },
4132
+ state.name
4133
+ );
4134
+ })
4135
+ ] });
4136
+ };
4137
+ AvlStateMachine.displayName = "AvlStateMachine";
4138
+ var avlOuId = 0;
4139
+ var AvlOrbitalUnit = ({
4140
+ entityName,
4141
+ fields = 4,
4142
+ persistence = "persistent",
4143
+ traits,
4144
+ pages,
4145
+ className,
4146
+ color = "var(--color-primary)",
4147
+ animated = false
4148
+ }) => {
4149
+ const ids = React24.useMemo(() => {
4150
+ avlOuId += 1;
4151
+ const base = `avl-ou-${avlOuId}`;
4152
+ return { glow: `${base}-glow`, grad: `${base}-grad` };
4153
+ }, []);
4154
+ const cx = 300;
4155
+ const cy = 200;
4156
+ const entityR = 24;
4157
+ const orbitalR = 130;
4158
+ const traitBaseRx = 55;
4159
+ const traitBaseRy = 24;
4160
+ const traitRxStep = 20;
4161
+ const traitRyStep = 8;
4162
+ const traitAngleStep = traits.length > 1 ? 120 / (traits.length - 1) : 0;
4163
+ const traitAngleStart = traits.length > 1 ? -60 : 0;
4164
+ const pageAngleStart = -Math.PI / 3;
4165
+ const pageAngleStep = pages.length > 1 ? Math.PI * 0.8 / (pages.length - 1) : 0;
4166
+ return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
4167
+ /* @__PURE__ */ jsxs("defs", { children: [
4168
+ /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
4169
+ /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
4170
+ /* @__PURE__ */ jsxs("feMerge", { children: [
4171
+ /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
4172
+ /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
4173
+ ] })
4174
+ ] }),
4175
+ /* @__PURE__ */ jsxs("radialGradient", { id: ids.grad, cx: "50%", cy: "50%", r: "50%", children: [
4176
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.08 }),
4177
+ /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
4178
+ ] })
4179
+ ] }),
4180
+ animated && /* @__PURE__ */ jsx("style", { children: `
4181
+ @keyframes avl-ou-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
4182
+ ` }),
4183
+ /* @__PURE__ */ jsx("circle", { cx, cy, r: orbitalR + 20, fill: `url(#${ids.grad})` }),
4184
+ /* @__PURE__ */ jsx(AvlOrbital, { cx, cy, r: orbitalR, label: entityName, color }),
4185
+ traits.map((trait, i) => {
4186
+ const rotation = traitAngleStart + i * traitAngleStep;
4187
+ const traitColor = trait.color ?? color;
4188
+ return /* @__PURE__ */ jsx(
4189
+ AvlTrait,
4190
+ {
4191
+ cx,
4192
+ cy,
4193
+ rx: traitBaseRx + i * traitRxStep,
4194
+ ry: traitBaseRy + i * traitRyStep,
4195
+ rotation,
4196
+ label: trait.name,
4197
+ color: traitColor,
4198
+ opacity: 0.7
4199
+ },
4200
+ trait.name
4201
+ );
4202
+ }),
4203
+ /* @__PURE__ */ jsx(
4204
+ AvlEntity,
4205
+ {
4206
+ x: cx,
4207
+ y: cy,
4208
+ r: entityR,
4209
+ fieldCount: fields,
4210
+ persistence,
4211
+ color
4212
+ }
4213
+ ),
4214
+ pages.map((page, i) => {
4215
+ const angle = pageAngleStart + i * pageAngleStep;
4216
+ const px = cx + orbitalR * Math.cos(angle);
4217
+ const py = cy + orbitalR * Math.sin(angle);
4218
+ return /* @__PURE__ */ jsx(
4219
+ AvlPage,
4220
+ {
4221
+ x: px,
4222
+ y: py,
4223
+ size: 10,
4224
+ label: page.name,
4225
+ color
4226
+ },
4227
+ page.name
4228
+ );
4229
+ })
4230
+ ] });
4231
+ };
4232
+ AvlOrbitalUnit.displayName = "AvlOrbitalUnit";
4233
+ var avlCcId = 0;
4234
+ var AvlClosedCircuit = ({
4235
+ states,
4236
+ transitions,
4237
+ className,
4238
+ color = "var(--color-primary)",
4239
+ animated = false
4240
+ }) => {
4241
+ const ids = React24.useMemo(() => {
4242
+ avlCcId += 1;
4243
+ const base = `avl-cc-${avlCcId}`;
4244
+ return { glow: `${base}-glow`, grad: `${base}-grad`, arrow: `${base}-arrow` };
4245
+ }, []);
4246
+ const cx = 300;
4247
+ const cy = 200;
4248
+ const r = 120;
4249
+ const stateW = 80;
4250
+ const stateH = 32;
4251
+ const positions = ringPositions(cx, cy, r, states.length);
4252
+ const stateIndex = new Map(states.map((s, i) => [s.name, i]));
4253
+ return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
4254
+ /* @__PURE__ */ jsxs("defs", { children: [
4255
+ /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
4256
+ /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
4257
+ /* @__PURE__ */ jsxs("feMerge", { children: [
4258
+ /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
4259
+ /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
4260
+ ] })
4261
+ ] }),
4262
+ /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
4263
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
4264
+ /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.4 }),
4265
+ /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.15 })
4266
+ ] }),
4267
+ /* @__PURE__ */ jsx(
4268
+ "marker",
4269
+ {
4270
+ id: ids.arrow,
4271
+ markerWidth: "8",
4272
+ markerHeight: "6",
4273
+ refX: "7",
4274
+ refY: "3",
4275
+ orient: "auto",
4276
+ markerUnits: "strokeWidth",
4277
+ children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
4278
+ }
4279
+ )
4280
+ ] }),
4281
+ animated && /* @__PURE__ */ jsx("style", { children: `
4282
+ @keyframes avl-cc-flow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
4283
+ ` }),
4284
+ /* @__PURE__ */ jsx("circle", { cx, cy, r: r + 30, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.06 }),
4285
+ /* @__PURE__ */ jsx("circle", { cx, cy, r: 50, fill: "none", stroke: color, strokeWidth: 0.5, opacity: 0.08 }),
4286
+ transitions.map((tr, i) => {
4287
+ const fromIdx = stateIndex.get(tr.from);
4288
+ const toIdx = stateIndex.get(tr.to);
4289
+ if (fromIdx === void 0 || toIdx === void 0) return null;
4290
+ const fp = positions[fromIdx];
4291
+ const tp = positions[toIdx];
4292
+ const dx = tp.x - fp.x;
4293
+ const dy = tp.y - fp.y;
4294
+ const dist4 = Math.sqrt(dx * dx + dy * dy) || 1;
4295
+ const nx = dx / dist4;
4296
+ const ny = dy / dist4;
4297
+ const x1 = fp.x + nx * (stateW / 2 + 4);
4298
+ const y1 = fp.y + ny * (stateH / 2 + 4);
4299
+ const x2 = tp.x - nx * (stateW / 2 + 8);
4300
+ const y2 = tp.y - ny * (stateH / 2 + 8);
4301
+ const mx = (x1 + x2) / 2;
4302
+ const my = (y1 + y2) / 2;
4303
+ const curvature = dist4 * 0.25;
4304
+ let perpX = -ny;
4305
+ let perpY = nx;
4306
+ const testX = mx + perpX * curvature;
4307
+ const testY = my + perpY * curvature;
4308
+ const distTest = Math.sqrt((testX - cx) ** 2 + (testY - cy) ** 2);
4309
+ const distMid = Math.sqrt((mx - cx) ** 2 + (my - cy) ** 2);
4310
+ if (distTest < distMid) {
4311
+ perpX = -perpX;
4312
+ perpY = -perpY;
4313
+ }
4314
+ const cpx = mx + perpX * curvature;
4315
+ const cpy = my + perpY * curvature;
4316
+ const d = `M${x1},${y1} Q${cpx},${cpy} ${x2},${y2}`;
4317
+ return /* @__PURE__ */ jsxs("g", { children: [
4318
+ /* @__PURE__ */ jsx(
4319
+ "path",
4320
+ {
4321
+ d,
4322
+ fill: "none",
4323
+ stroke: `url(#${ids.grad})`,
4324
+ strokeWidth: 1.5,
4325
+ strokeDasharray: animated ? "8 6" : void 0,
4326
+ markerEnd: `url(#${ids.arrow})`,
4327
+ style: animated ? { animation: "avl-cc-flow 1.5s linear infinite" } : void 0
4328
+ }
4329
+ ),
4330
+ tr.event && /* @__PURE__ */ jsx(
4331
+ AvlEvent,
4332
+ {
4333
+ x: cpx,
4334
+ y: cpy - 14,
4335
+ size: 8,
4336
+ label: tr.event,
4337
+ color,
4338
+ opacity: 0.8
4339
+ }
4340
+ ),
4341
+ tr.guard && /* @__PURE__ */ jsx(
4342
+ AvlGuard,
4343
+ {
4344
+ x: mx,
4345
+ y: my - 8,
4346
+ size: 10,
4347
+ label: tr.guard,
4348
+ color,
4349
+ opacity: 0.6
4350
+ }
4351
+ ),
4352
+ tr.effects?.map((eff, j) => /* @__PURE__ */ jsx(
4353
+ AvlEffect,
4354
+ {
4355
+ x: mx + (j - ((tr.effects?.length ?? 1) - 1) / 2) * 14,
4356
+ y: my + 14,
4357
+ effectType: eff,
4358
+ size: 5,
4359
+ color,
4360
+ opacity: 0.7
4361
+ },
4362
+ j
4363
+ ))
4364
+ ] }, `cc-tr-${i}`);
4365
+ }),
4366
+ states.map((state, i) => {
4367
+ const pos = positions[i];
4368
+ return /* @__PURE__ */ jsx(
4369
+ AvlState,
4370
+ {
4371
+ x: pos.x - stateW / 2,
4372
+ y: pos.y - stateH / 2,
4373
+ width: stateW,
4374
+ height: stateH,
4375
+ name: state.name,
4376
+ color
4377
+ },
4378
+ state.name
4379
+ );
4380
+ }),
4381
+ /* @__PURE__ */ jsx("circle", { cx, cy, r: 3, fill: color, opacity: 0.4 })
4382
+ ] });
4383
+ };
4384
+ AvlClosedCircuit.displayName = "AvlClosedCircuit";
4385
+ var avlElId = 0;
4386
+ var AvlEmitListen = ({
4387
+ emitter,
4388
+ listener,
4389
+ eventName,
4390
+ className,
4391
+ color = "var(--color-primary)",
4392
+ animated = false
4393
+ }) => {
4394
+ const ids = React24.useMemo(() => {
4395
+ avlElId += 1;
4396
+ const base = `avl-el-${avlElId}`;
4397
+ return { arrow: `${base}-arrow`, grad: `${base}-grad` };
4398
+ }, []);
4399
+ const leftCx = 180;
4400
+ const rightCx = 420;
4401
+ const cy = 200;
4402
+ const orbR = 80;
4403
+ return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
4404
+ /* @__PURE__ */ jsxs("defs", { children: [
4405
+ /* @__PURE__ */ jsx(
4406
+ "marker",
4407
+ {
4408
+ id: ids.arrow,
4409
+ markerWidth: "8",
4410
+ markerHeight: "6",
4411
+ refX: "7",
4412
+ refY: "3",
4413
+ orient: "auto",
4414
+ markerUnits: "strokeWidth",
4415
+ children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
4416
+ }
4417
+ ),
4418
+ /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
4419
+ /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.5 }),
4420
+ /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.2 })
4421
+ ] })
4422
+ ] }),
4423
+ animated && /* @__PURE__ */ jsx("style", { children: `
4424
+ @keyframes avl-el-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
4425
+ ` }),
4426
+ /* @__PURE__ */ jsx(AvlOrbital, { cx: leftCx, cy, r: orbR, label: emitter.name, color }),
4427
+ /* @__PURE__ */ jsx(AvlEntity, { x: leftCx, y: cy, r: 18, fieldCount: emitter.fields ?? 3, color }),
4428
+ /* @__PURE__ */ jsx(AvlOrbital, { cx: rightCx, cy, r: orbR, label: listener.name, color }),
4429
+ /* @__PURE__ */ jsx(AvlEntity, { x: rightCx, y: cy, r: 18, fieldCount: listener.fields ?? 3, color }),
4430
+ /* @__PURE__ */ jsx(
4431
+ "path",
4432
+ {
4433
+ d: `M${leftCx + orbR + 4},${cy} L${rightCx - orbR - 8},${cy}`,
4434
+ fill: "none",
4435
+ stroke: `url(#${ids.grad})`,
4436
+ strokeWidth: 2,
4437
+ strokeDasharray: "6 4",
4438
+ markerEnd: `url(#${ids.arrow})`,
4439
+ style: animated ? { animation: "avl-el-dash 1s linear infinite" } : void 0
4440
+ }
4441
+ ),
4442
+ /* @__PURE__ */ jsx(
4443
+ AvlEffect,
4444
+ {
4445
+ x: leftCx + orbR + 20,
4446
+ y: cy - 20,
4447
+ effectType: "emit",
4448
+ size: 6,
4449
+ color,
4450
+ opacity: 0.8
4451
+ }
4452
+ ),
4453
+ eventName && /* @__PURE__ */ jsxs(
4454
+ "text",
4455
+ {
4456
+ x: 300,
4457
+ y: cy - 18,
4458
+ textAnchor: "middle",
4459
+ fill: color,
4460
+ fontSize: 11,
4461
+ fontFamily: "inherit",
4462
+ fontWeight: "bold",
4463
+ opacity: 0.8,
4464
+ children: [
4465
+ "~",
4466
+ eventName
4467
+ ]
4468
+ }
4469
+ ),
4470
+ /* @__PURE__ */ jsx(
4471
+ "text",
4472
+ {
4473
+ x: 300,
4474
+ y: cy + 18,
4475
+ textAnchor: "middle",
4476
+ fill: color,
4477
+ fontSize: 12,
4478
+ fontFamily: "inherit",
4479
+ opacity: 0.3,
4480
+ letterSpacing: 4,
4481
+ children: "~ ~ ~"
4482
+ }
4483
+ )
4484
+ ] });
4485
+ };
4486
+ AvlEmitListen.displayName = "AvlEmitListen";
4487
+ var AvlSlotMap = ({
4488
+ slots,
4489
+ pageWidth = 360,
4490
+ pageHeight = 280,
4491
+ className,
4492
+ color = "var(--color-primary)",
4493
+ animated = false
4494
+ }) => {
4495
+ const ox = (600 - pageWidth) / 2;
4496
+ const oy = (400 - pageHeight) / 2;
4497
+ return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
4498
+ animated && /* @__PURE__ */ jsx("style", { children: `
4499
+ @keyframes avl-slot-pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.25; } }
4500
+ ` }),
4501
+ /* @__PURE__ */ jsx(
4502
+ "rect",
4503
+ {
4504
+ x: ox,
4505
+ y: oy,
4506
+ width: pageWidth,
4507
+ height: pageHeight,
4508
+ rx: 4,
4509
+ ry: 4,
4510
+ fill: "none",
4511
+ stroke: color,
4512
+ strokeWidth: 2
4513
+ }
4514
+ ),
4515
+ /* @__PURE__ */ jsx(
4516
+ "rect",
4517
+ {
4518
+ x: ox,
4519
+ y: oy,
4520
+ width: pageWidth,
4521
+ height: 24,
4522
+ rx: 4,
4523
+ ry: 4,
4524
+ fill: color,
4525
+ opacity: 0.1
4526
+ }
4527
+ ),
4528
+ /* @__PURE__ */ jsx(
4529
+ "text",
4530
+ {
4531
+ x: ox + pageWidth / 2,
4532
+ y: oy + 16,
4533
+ textAnchor: "middle",
4534
+ fill: color,
4535
+ fontSize: 10,
4536
+ fontFamily: "inherit",
4537
+ fontWeight: "bold",
4538
+ children: "Page Layout"
4539
+ }
4540
+ ),
4541
+ slots.map((slot) => /* @__PURE__ */ jsxs("g", { children: [
4542
+ /* @__PURE__ */ jsx(
4543
+ "rect",
4544
+ {
4545
+ x: ox + slot.x,
4546
+ y: oy + 24 + slot.y,
4547
+ width: slot.width,
4548
+ height: slot.height,
4549
+ rx: 3,
4550
+ ry: 3,
4551
+ fill: color,
4552
+ opacity: 0.08,
4553
+ stroke: color,
4554
+ strokeWidth: 1,
4555
+ strokeDasharray: "4 2",
4556
+ style: animated ? { animation: "avl-slot-pulse 2s ease-in-out infinite" } : void 0
4557
+ }
4558
+ ),
4559
+ /* @__PURE__ */ jsx(
4560
+ "text",
4561
+ {
4562
+ x: ox + slot.x + slot.width / 2,
4563
+ y: oy + 24 + slot.y + slot.height / 2,
4564
+ textAnchor: "middle",
4565
+ dominantBaseline: "central",
4566
+ fill: color,
4567
+ fontSize: 9,
4568
+ fontFamily: "inherit",
4569
+ opacity: 0.6,
4570
+ children: slot.name
4571
+ }
4572
+ )
4573
+ ] }, slot.name))
4574
+ ] });
4575
+ };
4576
+ AvlSlotMap.displayName = "AvlSlotMap";
4577
+ var avlEtId = 0;
4578
+ function layoutTree(node, x, y, hSpacing, vSpacing) {
4579
+ const children = node.children ?? [];
4580
+ if (children.length === 0) {
4581
+ return { label: node.label, type: node.type, x, y, children: [] };
4582
+ }
4583
+ const totalWidth = (children.length - 1) * hSpacing;
4584
+ const startX = x - totalWidth / 2;
4585
+ const layoutChildren = children.map(
4586
+ (child, i) => layoutTree(child, startX + i * hSpacing, y + vSpacing, hSpacing * 0.65, vSpacing)
4587
+ );
4588
+ return { label: node.label, type: node.type, x, y, children: layoutChildren };
4589
+ }
4590
+ function nodeColor(type, baseColor) {
4591
+ switch (type) {
4592
+ case "operator":
4593
+ return baseColor;
4594
+ case "literal":
4595
+ return baseColor;
4596
+ case "binding":
4597
+ return baseColor;
4598
+ }
4599
+ }
4600
+ function renderNode(node, color, glowId) {
4601
+ const labelLen = node.label.length;
4602
+ const baseR = node.type === "operator" ? 20 : 16;
4603
+ const r = Math.max(baseR, labelLen * 3.5 + 6);
4604
+ const nc = nodeColor(node.type, color);
4605
+ return /* @__PURE__ */ jsxs(React24.Fragment, { children: [
4606
+ node.children.map((child, i) => {
4607
+ const childR = Math.max(
4608
+ child.type === "operator" ? 20 : 16,
4609
+ child.label.length * 3.5 + 6
4610
+ );
4611
+ return /* @__PURE__ */ jsx(
4612
+ "line",
4613
+ {
4614
+ x1: node.x,
4615
+ y1: node.y + (node.type === "operator" ? r * 0.7 : r),
4616
+ x2: child.x,
4617
+ y2: child.y - (child.type === "operator" ? childR * 0.7 : childR),
4618
+ stroke: color,
4619
+ strokeWidth: 1,
4620
+ opacity: 0.3
4621
+ },
4622
+ `line-${i}`
4623
+ );
4624
+ }),
4625
+ node.type === "operator" ? /* @__PURE__ */ jsx(
4626
+ "rect",
4627
+ {
4628
+ x: node.x - r,
4629
+ y: node.y - r * 0.6,
4630
+ width: r * 2,
4631
+ height: r * 1.2,
4632
+ rx: 4,
4633
+ ry: 4,
4634
+ fill: color,
4635
+ fillOpacity: 0.15,
4636
+ stroke: nc,
4637
+ strokeWidth: 1.5
4638
+ }
4639
+ ) : node.type === "binding" ? /* @__PURE__ */ jsx("circle", { cx: node.x, cy: node.y, r, fill: "none", stroke: nc, strokeWidth: 1.5, strokeDasharray: "3 2" }) : /* @__PURE__ */ jsx("circle", { cx: node.x, cy: node.y, r, fill: "none", stroke: nc, strokeWidth: 1, opacity: 0.5 }),
4640
+ /* @__PURE__ */ jsx(
4641
+ "text",
4642
+ {
4643
+ x: node.x,
4644
+ y: node.y + 1,
4645
+ textAnchor: "middle",
4646
+ dominantBaseline: "central",
4647
+ fill: nc,
4648
+ fontSize: node.type === "operator" ? 11 : 10,
4649
+ fontFamily: "inherit",
4650
+ fontWeight: node.type === "operator" ? "bold" : "normal",
4651
+ children: node.type === "binding" ? `@${node.label}` : node.label
4652
+ }
4653
+ ),
4654
+ node.children.map((child) => renderNode(child, color))
4655
+ ] }, `${node.label}-${node.x}-${node.y}`);
4656
+ }
4657
+ var AvlExprTree = ({
4658
+ expression,
4659
+ className,
4660
+ color = "var(--color-primary)"
4661
+ }) => {
4662
+ const ids = React24.useMemo(() => {
4663
+ avlEtId += 1;
4664
+ return { glow: `avl-et-${avlEtId}-glow` };
4665
+ }, []);
4666
+ const layout = layoutTree(expression, 300, 70, 150, 85);
4667
+ return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
4668
+ /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
4669
+ /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "2", result: "blur" }),
4670
+ /* @__PURE__ */ jsxs("feMerge", { children: [
4671
+ /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
4672
+ /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
4673
+ ] })
4674
+ ] }) }),
4675
+ renderNode(layout, color, ids.glow)
4676
+ ] });
4677
+ };
4678
+ AvlExprTree.displayName = "AvlExprTree";
4679
+
4680
+ export { AIGenerates, AvlApplication, AvlBinding, AvlBindingRef, AvlClosedCircuit, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalUnit, AvlPage, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlTrait, AvlTransition, ClosedCircuit, CommunityOwnership, CompileAnywhere, ComposableModels, DescribeProveDeploy, DomainGrid, EventBus, OrbitalUnit, PlanVerifyRemember, ProveCorrect, ServiceLayers, SharedReality, StandardLibrary, StateMachine, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, WorldModel };