@walkeros/explorer 4.8.0 → 4.8.1-next-1792019907609

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.
package/dist/styles.css CHANGED
@@ -1868,6 +1868,53 @@
1868
1868
  width: 100%;
1869
1869
  }
1870
1870
  }
1871
+ @layer components {
1872
+ .elb-viz-tok {
1873
+ border-radius: var(--radius-xs);
1874
+ transition: background var(--motion) var(--ease);
1875
+ }
1876
+ .elb-viz-tok--tag {
1877
+ color: var(--viz-tag);
1878
+ }
1879
+ .elb-viz-tok--attr,
1880
+ .elb-viz-tok--key {
1881
+ color: var(--event-globals);
1882
+ }
1883
+ .elb-viz-tok--punct {
1884
+ color: var(--viz-punct);
1885
+ }
1886
+ .elb-viz-tok--str {
1887
+ color: var(--viz-string);
1888
+ }
1889
+ .elb-viz-tok--text {
1890
+ color: var(--viz-fg);
1891
+ }
1892
+ .elb-viz-tok--kw,
1893
+ .elb-viz-tok--fn {
1894
+ color: var(--event-action);
1895
+ }
1896
+ .elb-viz-tok--num {
1897
+ color: var(--viz-number);
1898
+ }
1899
+ .elb-viz-tok--value {
1900
+ color: var(--event-entity);
1901
+ }
1902
+ .elb-viz-tok--mark-entity {
1903
+ background: color-mix(in srgb, var(--event-entity) 16%, transparent);
1904
+ }
1905
+ .elb-viz-tok--mark-action {
1906
+ background: color-mix(in srgb, var(--event-action) 16%, transparent);
1907
+ }
1908
+ .elb-viz-tok--mark-property {
1909
+ background: color-mix(in srgb, var(--event-property) 16%, transparent);
1910
+ }
1911
+ .elb-viz-tok--mark-context {
1912
+ background: color-mix(in srgb, var(--event-context) 16%, transparent);
1913
+ }
1914
+ .elb-viz-tok--mark-globals {
1915
+ background: color-mix(in srgb, var(--event-globals) 16%, transparent);
1916
+ }
1917
+ }
1871
1918
  @layer components {
1872
1919
  .elb-code-inline {
1873
1920
  font-family: var(--font-mono);
@@ -2550,6 +2597,300 @@
2550
2597
  }
2551
2598
  }
2552
2599
  }
2600
+ @layer components {
2601
+ .elb-event-log {
2602
+ container: elb-event-log/inline-size;
2603
+ display: flex;
2604
+ flex-direction: column;
2605
+ min-width: 0;
2606
+ overflow: hidden;
2607
+ color: var(--fg);
2608
+ background: var(--surface);
2609
+ border: 1px solid var(--border);
2610
+ border-radius: var(--radius-lg);
2611
+ font-family: var(--type-product-body-family);
2612
+ font-size: var(--type-product-body-size);
2613
+ line-height: var(--type-product-body-line-height);
2614
+ font-weight: var(--type-product-body-weight);
2615
+ text-align: left;
2616
+ }
2617
+ .elb-event-log__bar {
2618
+ display: flex;
2619
+ flex: none;
2620
+ align-items: center;
2621
+ gap: 10px;
2622
+ padding: var(--space-3) var(--space-3-5) var(--space-3) 18px;
2623
+ border-bottom: 1px solid var(--border);
2624
+ }
2625
+ .elb-event-log__title {
2626
+ font-size: var(--type-product-title-size);
2627
+ line-height: var(--type-product-title-line-height);
2628
+ font-weight: var(--type-product-title-weight);
2629
+ }
2630
+ .elb-event-log__count {
2631
+ padding: 0 7px;
2632
+ color: var(--fg-2);
2633
+ border: 1px solid var(--border);
2634
+ border-radius: var(--radius-full);
2635
+ font-family: var(--type-code-step-family);
2636
+ font-size: var(--type-product-caption-size);
2637
+ line-height: 20px;
2638
+ }
2639
+ .elb-event-log__button {
2640
+ flex: none;
2641
+ padding: 4px 10px;
2642
+ font-family: var(--type-product-caption-family);
2643
+ font-size: var(--type-product-caption-size);
2644
+ line-height: var(--type-product-caption-line-height);
2645
+ white-space: nowrap;
2646
+ }
2647
+ .elb-event-log__clear {
2648
+ margin-left: auto;
2649
+ }
2650
+ .elb-event-log__empty {
2651
+ display: flex;
2652
+ flex-direction: column;
2653
+ align-items: center;
2654
+ gap: 6px;
2655
+ padding: 48px var(--gutter);
2656
+ text-align: center;
2657
+ }
2658
+ .elb-event-log__empty-title {
2659
+ margin: 0;
2660
+ font-weight: 500;
2661
+ }
2662
+ .elb-event-log__empty-text {
2663
+ max-width: 300px;
2664
+ margin: 0;
2665
+ color: var(--fg-2);
2666
+ font-size: var(--type-product-small-size);
2667
+ line-height: var(--type-product-small-line-height);
2668
+ text-wrap: pretty;
2669
+ }
2670
+ .elb-event-log__body {
2671
+ display: grid;
2672
+ flex: 1 1 auto;
2673
+ grid-template-columns: minmax(320px, 1fr) minmax(0, 1.2fr);
2674
+ min-height: 0;
2675
+ }
2676
+ .elb-event-log__list {
2677
+ min-height: 0;
2678
+ margin: 0;
2679
+ padding: 0;
2680
+ overflow-y: auto;
2681
+ list-style: none;
2682
+ border-right: 1px solid var(--border);
2683
+ }
2684
+ .elb-event-log__row {
2685
+ display: grid;
2686
+ grid-template-columns: 34px minmax(0, 1fr) auto auto;
2687
+ align-items: center;
2688
+ gap: var(--space-3);
2689
+ width: 100%;
2690
+ padding: 9px 16px 9px 11px;
2691
+ color: var(--fg);
2692
+ background: transparent;
2693
+ border: 0;
2694
+ border-left: 3px solid transparent;
2695
+ border-bottom: 1px solid var(--border);
2696
+ font: inherit;
2697
+ text-align: left;
2698
+ cursor: pointer;
2699
+ transition: background var(--motion) var(--ease);
2700
+ }
2701
+ .elb-event-log__row:hover:not(:disabled) {
2702
+ background: var(--surface-2);
2703
+ }
2704
+ .elb-event-log__row:disabled {
2705
+ cursor: default;
2706
+ }
2707
+ .elb-event-log__row[aria-pressed=true] {
2708
+ background: var(--surface-2);
2709
+ border-left-color: var(--primary);
2710
+ }
2711
+ .elb-event-log__list > li:first-child > .elb-event-log__row {
2712
+ animation: elb-event-log-arrive 900ms var(--ease);
2713
+ }
2714
+ @keyframes elb-event-log-arrive {
2715
+ from {
2716
+ background-color: color-mix(in srgb, var(--event-entity) 22%, transparent);
2717
+ }
2718
+ }
2719
+ .elb-event-log__seq,
2720
+ .elb-event-log__time {
2721
+ font-family: var(--type-code-step-family);
2722
+ font-size: var(--type-product-caption-size);
2723
+ line-height: var(--type-product-caption-line-height);
2724
+ }
2725
+ .elb-event-log__seq {
2726
+ color: var(--fg-3);
2727
+ text-align: right;
2728
+ }
2729
+ .elb-event-log__time {
2730
+ grid-column: 4;
2731
+ color: var(--fg-2);
2732
+ }
2733
+ .elb-event-log__name {
2734
+ min-width: 0;
2735
+ overflow: hidden;
2736
+ font-family: var(--type-code-step-family);
2737
+ font-size: var(--type-code-step-size);
2738
+ line-height: var(--type-code-step-line-height);
2739
+ text-overflow: ellipsis;
2740
+ white-space: nowrap;
2741
+ }
2742
+ .elb-event-log__trigger {
2743
+ color: var(--fg-2);
2744
+ white-space: nowrap;
2745
+ }
2746
+ .elb-event-log__entity {
2747
+ color: var(--event-entity);
2748
+ }
2749
+ .elb-event-log__action {
2750
+ color: var(--event-action);
2751
+ }
2752
+ .elb-event-log__detail {
2753
+ min-width: 0;
2754
+ min-height: 0;
2755
+ overflow-y: auto;
2756
+ color: var(--viz-fg);
2757
+ background: var(--viz-code-bg);
2758
+ }
2759
+ .elb-event-log__head {
2760
+ position: sticky;
2761
+ top: 0;
2762
+ display: flex;
2763
+ align-items: flex-start;
2764
+ gap: var(--space-3);
2765
+ padding: var(--space-3-5) 16px var(--space-3) 18px;
2766
+ background: var(--viz-code-bg);
2767
+ border-bottom: 1px solid var(--viz-surface);
2768
+ }
2769
+ .elb-event-log__summary {
2770
+ display: flex;
2771
+ flex: 1 1 auto;
2772
+ flex-direction: column;
2773
+ gap: 3px;
2774
+ min-width: 0;
2775
+ }
2776
+ .elb-event-log__detail-name {
2777
+ font-family: var(--type-code-step-family);
2778
+ font-size: var(--type-product-title-size);
2779
+ line-height: var(--type-product-title-line-height);
2780
+ font-weight: 500;
2781
+ overflow-wrap: anywhere;
2782
+ }
2783
+ .elb-event-log__meta {
2784
+ color: var(--viz-fg-2);
2785
+ font-size: var(--type-product-small-size);
2786
+ line-height: var(--type-product-small-line-height);
2787
+ }
2788
+ .elb-event-log__views {
2789
+ display: flex;
2790
+ flex: none;
2791
+ padding: 2px;
2792
+ border: 1px solid var(--viz-surface);
2793
+ border-radius: var(--radius-md);
2794
+ }
2795
+ .elb-event-log__view {
2796
+ padding: 3px 9px;
2797
+ color: var(--viz-fg-2);
2798
+ background: transparent;
2799
+ border: 0;
2800
+ border-radius: var(--radius-sm);
2801
+ font: inherit;
2802
+ font-size: var(--type-product-caption-size);
2803
+ line-height: var(--type-product-caption-line-height);
2804
+ cursor: pointer;
2805
+ transition: color var(--motion) var(--ease), background var(--motion) var(--ease);
2806
+ }
2807
+ .elb-event-log__view:hover {
2808
+ color: var(--viz-fg);
2809
+ }
2810
+ .elb-event-log__view[aria-pressed=true] {
2811
+ color: var(--viz-fg);
2812
+ background: var(--viz-surface);
2813
+ }
2814
+ .elb-event-log__status {
2815
+ position: absolute;
2816
+ width: 1px;
2817
+ height: 1px;
2818
+ margin: -1px;
2819
+ padding: 0;
2820
+ overflow: hidden;
2821
+ clip-path: inset(50%);
2822
+ white-space: nowrap;
2823
+ border: 0;
2824
+ }
2825
+ .elb-event-log__sections {
2826
+ padding: 6px 0 var(--space-3-5);
2827
+ }
2828
+ .elb-event-log__section {
2829
+ display: flex;
2830
+ flex-direction: column;
2831
+ gap: 2px;
2832
+ padding: 10px 18px 4px;
2833
+ }
2834
+ .elb-event-log__label {
2835
+ padding-bottom: 4px;
2836
+ color: var(--viz-fg-2);
2837
+ font-family: var(--type-code-step-family);
2838
+ font-size: var(--type-product-caption-size);
2839
+ line-height: var(--type-product-caption-line-height);
2840
+ letter-spacing: 0.06em;
2841
+ text-transform: uppercase;
2842
+ }
2843
+ .elb-event-log__fields {
2844
+ margin: 0;
2845
+ }
2846
+ .elb-event-log__field {
2847
+ display: grid;
2848
+ grid-template-columns: minmax(80px, 120px) minmax(0, 1fr);
2849
+ gap: var(--space-3-5);
2850
+ padding: 3px 0;
2851
+ font-family: var(--type-code-step-family);
2852
+ font-size: var(--type-code-step-size);
2853
+ line-height: var(--type-code-step-line-height);
2854
+ font-weight: var(--type-code-step-weight);
2855
+ }
2856
+ .elb-event-log__field > dt {
2857
+ overflow: hidden;
2858
+ text-overflow: ellipsis;
2859
+ }
2860
+ .elb-event-log__field > dd {
2861
+ display: flex;
2862
+ flex-wrap: wrap;
2863
+ align-items: baseline;
2864
+ gap: 0 var(--space-2);
2865
+ min-width: 0;
2866
+ margin: 0;
2867
+ overflow-wrap: anywhere;
2868
+ }
2869
+ .elb-event-log__sub {
2870
+ color: var(--viz-fg-2);
2871
+ font-size: var(--type-product-caption-size);
2872
+ }
2873
+ .elb-event-log__json {
2874
+ padding: var(--space-3) 18px 16px;
2875
+ font-family: var(--type-code-step-family);
2876
+ font-size: var(--type-code-step-size);
2877
+ line-height: var(--type-code-step-line-height);
2878
+ font-weight: var(--type-code-step-weight);
2879
+ white-space: pre-wrap;
2880
+ overflow-wrap: anywhere;
2881
+ }
2882
+ @container elb-event-log (max-width: 639px) {
2883
+ .elb-event-log__body {
2884
+ grid-template-columns: minmax(0, 1fr);
2885
+ grid-template-rows: minmax(0, auto) minmax(0, 1fr);
2886
+ }
2887
+ .elb-event-log__list {
2888
+ max-height: 190px;
2889
+ border-right: 0;
2890
+ border-bottom: 1px solid var(--border);
2891
+ }
2892
+ }
2893
+ }
2553
2894
  @layer components {
2554
2895
  .elb-quickstart {
2555
2896
  display: flex;
@@ -2834,51 +3175,6 @@
2834
3175
  }
2835
3176
  }
2836
3177
  @layer components {
2837
- .elb-viz-tok {
2838
- border-radius: var(--radius-xs);
2839
- transition: background var(--motion) var(--ease);
2840
- }
2841
- .elb-viz-tok--tag {
2842
- color: var(--viz-tag);
2843
- }
2844
- .elb-viz-tok--attr,
2845
- .elb-viz-tok--key {
2846
- color: var(--event-globals);
2847
- }
2848
- .elb-viz-tok--punct {
2849
- color: var(--viz-punct);
2850
- }
2851
- .elb-viz-tok--str {
2852
- color: var(--viz-string);
2853
- }
2854
- .elb-viz-tok--text {
2855
- color: var(--viz-fg);
2856
- }
2857
- .elb-viz-tok--kw,
2858
- .elb-viz-tok--fn {
2859
- color: var(--event-action);
2860
- }
2861
- .elb-viz-tok--num {
2862
- color: var(--viz-number);
2863
- }
2864
- .elb-viz-tok--value {
2865
- color: var(--event-entity);
2866
- }
2867
- .elb-viz-tok--mark-entity {
2868
- background: color-mix(in srgb, var(--event-entity) 16%, transparent);
2869
- }
2870
- .elb-viz-tok--mark-action {
2871
- background: color-mix(in srgb, var(--event-action) 16%, transparent);
2872
- }
2873
- .elb-viz-tok--mark-property {
2874
- background: color-mix(in srgb, var(--event-property) 16%, transparent);
2875
- }
2876
- .elb-viz-tok--mark-context {
2877
- background: color-mix(in srgb, var(--event-context) 16%, transparent);
2878
- }
2879
- .elb-viz-tok--mark-globals {
2880
- background: color-mix(in srgb, var(--event-globals) 16%, transparent);
2881
- }
2882
3178
  .elb-viz-line {
2883
3179
  display: flex;
2884
3180
  align-items: stretch;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@walkeros/explorer",
3
- "version": "4.8.0",
3
+ "version": "4.8.1-next-1792019907609",
4
4
  "description": "Interactive React components for walkerOS documentation and exploration",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -53,11 +53,11 @@
53
53
  "@rjsf/core": "^6.1.2",
54
54
  "@rjsf/utils": "^6.1.2",
55
55
  "@rjsf/validator-ajv8": "^6.1.2",
56
- "@walkeros/collector": "4.8.0",
57
- "@walkeros/core": "4.8.0",
58
- "@walkeros/web-core": "4.8.0",
59
- "@walkeros/web-source-browser": "4.8.0",
60
- "@walkeros/web-destination-gtag": "4.8.0",
56
+ "@walkeros/collector": "4.8.1-next-1792019907609",
57
+ "@walkeros/core": "4.8.1-next-1792019907609",
58
+ "@walkeros/web-core": "4.8.1-next-1792019907609",
59
+ "@walkeros/web-source-browser": "4.8.1-next-1792019907609",
60
+ "@walkeros/web-destination-gtag": "4.8.1-next-1792019907609",
61
61
  "clsx": "^2.1.1",
62
62
  "monaco-editor": "^0.55.1",
63
63
  "prettier": "^3.7.4",
@@ -83,7 +83,7 @@
83
83
  "@typescript-eslint/eslint-plugin": "^8.28.0",
84
84
  "@typescript-eslint/parser": "^8.28.0",
85
85
  "@vitejs/plugin-react": "^6.0.2",
86
- "@walkeros/config": "4.8.0",
86
+ "@walkeros/config": "4.8.1-next-1792019907609",
87
87
  "eslint": "^9.23.0",
88
88
  "eslint-plugin-jest": "^29.15.2",
89
89
  "eslint-plugin-storybook": "^10.1.11",