@fragments-sdk/ui 0.15.1 → 0.16.1

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 (43) hide show
  1. package/dist/assets/ui.css +197 -180
  2. package/dist/codeblock.cjs +3 -1
  3. package/dist/codeblock.js +3 -1
  4. package/dist/components/AppShell/AppShell.module.scss.cjs +15 -21
  5. package/dist/components/AppShell/AppShell.module.scss.js +15 -21
  6. package/dist/components/AppShell/index.cjs +52 -13
  7. package/dist/components/AppShell/index.d.ts +55 -27
  8. package/dist/components/AppShell/index.d.ts.map +1 -1
  9. package/dist/components/AppShell/index.js +52 -13
  10. package/dist/components/CodeBlock/CodeBlock.module.scss.cjs +23 -20
  11. package/dist/components/CodeBlock/CodeBlock.module.scss.js +23 -20
  12. package/dist/components/CodeBlock/index.d.ts +2 -0
  13. package/dist/components/CodeBlock/index.d.ts.map +1 -1
  14. package/dist/components/DatePicker/index.d.ts.map +1 -1
  15. package/dist/components/Form/index.cjs +1 -1
  16. package/dist/components/Form/index.d.ts +1 -1
  17. package/dist/components/Form/index.d.ts.map +1 -1
  18. package/dist/components/Form/index.js +1 -1
  19. package/dist/components/Markdown/Markdown.module.scss.cjs +1 -1
  20. package/dist/components/Markdown/Markdown.module.scss.js +1 -1
  21. package/dist/components/Menu/index.d.ts +1 -2
  22. package/dist/components/Menu/index.d.ts.map +1 -1
  23. package/dist/components/NavigationMenu/useNavigationMenu.cjs +6 -3
  24. package/dist/components/NavigationMenu/useNavigationMenu.d.ts.map +1 -1
  25. package/dist/components/NavigationMenu/useNavigationMenu.js +6 -3
  26. package/dist/index.d.ts +1 -1
  27. package/dist/index.d.ts.map +1 -1
  28. package/dist/utils/seed-derivation.d.ts.map +1 -1
  29. package/dist/utils/theme-presets.d.ts.map +1 -1
  30. package/fragments.json +1 -1
  31. package/package.json +2 -2
  32. package/src/components/AppShell/AppShell.module.scss +29 -20
  33. package/src/components/AppShell/index.tsx +123 -36
  34. package/src/components/CodeBlock/CodeBlock.module.scss +58 -35
  35. package/src/components/CodeBlock/index.tsx +7 -2
  36. package/src/components/DatePicker/index.tsx +1 -1
  37. package/src/components/Form/index.tsx +1 -1
  38. package/src/components/Menu/index.tsx +1 -1
  39. package/src/components/NavigationMenu/useNavigationMenu.ts +6 -3
  40. package/src/index.ts +1 -0
  41. package/src/tokens/_variables.scss +30 -30
  42. package/src/utils/seed-derivation.ts +0 -9
  43. package/src/utils/theme-presets.ts +0 -1
@@ -6511,7 +6511,7 @@
6511
6511
  overflow: visible;
6512
6512
  outline: none;
6513
6513
  box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
6514
- }._root_1vko5_1 {
6514
+ }._root_1cmf1_1 {
6515
6515
  display: grid;
6516
6516
  min-height: 100vh;
6517
6517
  min-height: 100dvh;
@@ -6522,7 +6522,7 @@
6522
6522
  transition: grid-template-columns var(--fui-transition-normal, 200ms) ease;
6523
6523
  }
6524
6524
  @media (max-width: 767px) {
6525
- ._root_1vko5_1 {
6525
+ ._root_1cmf1_1 {
6526
6526
  grid-template-areas: "header" "main" "aside";
6527
6527
  grid-template-columns: 1fr;
6528
6528
  grid-template-rows: var(--appshell-header-height, 56px) 1fr auto;
@@ -6530,21 +6530,17 @@
6530
6530
  }
6531
6531
  }
6532
6532
 
6533
- ._sidebarLayout_1vko5_20 {
6533
+ ._sidebarLayout_1cmf1_20 {
6534
6534
  grid-template-areas: "sidebar header header" "sidebar main aside";
6535
6535
  }
6536
6536
  @media (max-width: 767px) {
6537
- ._sidebarLayout_1vko5_20 {
6537
+ ._sidebarLayout_1cmf1_20 {
6538
6538
  grid-template-areas: "header" "main" "aside";
6539
6539
  grid-template-columns: 1fr;
6540
6540
  }
6541
6541
  }
6542
6542
 
6543
- ._sidebarFloatingLayout_1vko5_30 {
6544
- background-color: var(--fui-bg-primary, #ffffff);
6545
- }
6546
-
6547
- ._header_1vko5_34 {
6543
+ ._header_1cmf1_30 {
6548
6544
  grid-area: header;
6549
6545
  position: sticky;
6550
6546
  top: 0;
@@ -6553,11 +6549,7 @@
6553
6549
  background-color: var(--fui-bg-primary, #ffffff);
6554
6550
  }
6555
6551
 
6556
- ._headerFloating_1vko5_43 {
6557
- background-color: var(--fui-bg-primary, #ffffff);
6558
- }
6559
-
6560
- ._sidebar_1vko5_20 {
6552
+ ._sidebar_1cmf1_20 {
6561
6553
  grid-area: sidebar;
6562
6554
  position: sticky;
6563
6555
  top: var(--appshell-header-height, 56px);
@@ -6567,7 +6559,7 @@
6567
6559
  overflow: hidden;
6568
6560
  }
6569
6561
  @media (max-width: 767px) {
6570
- ._sidebar_1vko5_20 {
6562
+ ._sidebar_1cmf1_20 {
6571
6563
  position: fixed;
6572
6564
  top: 0;
6573
6565
  left: 0;
@@ -6577,76 +6569,74 @@
6577
6569
  height: 100dvh;
6578
6570
  z-index: 51;
6579
6571
  }
6580
- ._sidebar_1vko5_20 > .root {
6572
+ ._sidebar_1cmf1_20 > .root {
6581
6573
  width: var(--appshell-sidebar-expanded-width, 240px);
6582
6574
  }
6583
6575
  }
6584
- ._sidebar_1vko5_20 .root {
6576
+ ._sidebar_1cmf1_20 .root {
6585
6577
  height: 100%;
6586
6578
  }
6587
6579
  @media (max-width: 767px) {
6588
- ._sidebar_1vko5_20 .root {
6580
+ ._sidebar_1cmf1_20 .root {
6589
6581
  height: 100vh;
6590
6582
  height: 100dvh;
6591
6583
  }
6592
6584
  }
6593
6585
 
6594
- ._sidebarFullHeight_1vko5_81 {
6586
+ ._sidebarFullHeight_1cmf1_73 {
6595
6587
  top: 0;
6596
6588
  height: 100vh;
6597
6589
  height: 100dvh;
6598
6590
  z-index: var(--fui-header-z-index, 40);
6599
6591
  }
6600
- ._sidebarFullHeight_1vko5_81 .root {
6592
+ ._sidebarFullHeight_1cmf1_73 .root {
6601
6593
  height: 100%;
6602
6594
  }
6603
6595
 
6604
- ._sidebarFloating_1vko5_30 .root {
6605
- background-color: var(--fui-bg-primary, #ffffff);
6606
- }
6607
-
6608
- ._main_1vko5_95 {
6596
+ ._main_1cmf1_83 {
6609
6597
  grid-area: main;
6610
6598
  min-height: 0;
6611
6599
  min-width: 0;
6612
6600
  background-color: var(--fui-bg-primary, #ffffff);
6613
6601
  }
6614
6602
 
6615
- ._mainFloating_1vko5_102 {
6603
+ ._mainFloating_1cmf1_90 {
6604
+ margin: var(--fui-space-2, 1rem) var(--fui-space-2, 1rem) var(--fui-space-2, 1rem) 0;
6616
6605
  border-radius: var(--fui-radius-xl, 0.857rem);
6617
6606
  background-color: var(--fui-bg-secondary, #f4f4f5);
6618
6607
  overflow: hidden;
6619
6608
  }
6620
6609
  @media (max-width: 767px) {
6621
- ._mainFloating_1vko5_102 {
6610
+ ._mainFloating_1cmf1_90 {
6611
+ margin: var(--fui-space-2, 1rem) 0;
6622
6612
  border-radius: var(--fui-radius-lg, 0.571rem);
6623
6613
  width: 100%;
6624
6614
  }
6625
6615
  }
6626
6616
 
6627
- ._paddingSm_1vko5_114 {
6617
+ ._paddingSm_1cmf1_104 {
6628
6618
  padding: var(--fui-space-3);
6629
6619
  }
6630
6620
 
6631
- ._paddingMd_1vko5_118 {
6621
+ ._paddingMd_1cmf1_108 {
6632
6622
  padding: var(--fui-space-4);
6633
6623
  }
6634
6624
  @media (min-width: 768px) {
6635
- ._paddingMd_1vko5_118 {
6625
+ ._paddingMd_1cmf1_108 {
6636
6626
  padding: var(--fui-space-6);
6637
6627
  }
6638
6628
  }
6639
6629
 
6640
- ._paddingLg_1vko5_127 {
6630
+ ._paddingLg_1cmf1_117 {
6641
6631
  padding: var(--fui-space-6);
6642
6632
  }
6643
6633
  @media (min-width: 768px) {
6644
- ._paddingLg_1vko5_127 {
6634
+ ._paddingLg_1cmf1_117 {
6645
6635
  padding: var(--fui-space-8);
6646
6636
  }
6647
6637
  }
6648
6638
 
6649
- ._aside_1vko5_136 {
6639
+ ._aside_1cmf1_126 {
6650
6640
  grid-area: aside;
6651
6641
  position: sticky;
6652
6642
  top: var(--appshell-header-height, 56px);
@@ -6659,12 +6649,30 @@
6659
6649
  overflow: hidden;
6660
6650
  }
6661
6651
  @media (max-width: 767px) {
6662
- ._aside_1vko5_136 {
6652
+ ._aside_1cmf1_126 {
6663
6653
  position: static;
6664
6654
  width: 100%;
6665
6655
  height: auto;
6666
6656
  border-top: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
6667
6657
  }
6658
+ }
6659
+
6660
+ ._asideFloating_1cmf1_147 {
6661
+ width: auto;
6662
+ height: calc(100vh - var(--appshell-header-height, 56px) - var(--fui-space-2, 1rem) * 2);
6663
+ height: calc(100dvh - var(--appshell-header-height, 56px) - var(--fui-space-2, 1rem) * 2);
6664
+ margin: var(--fui-space-2, 1rem) var(--fui-space-2, 1rem) var(--fui-space-2, 1rem) 0;
6665
+ border-radius: var(--fui-radius-xl, 0.857rem);
6666
+ background-color: var(--fui-bg-secondary, #f4f4f5);
6667
+ overflow: hidden;
6668
+ }
6669
+ @media (max-width: 767px) {
6670
+ ._asideFloating_1cmf1_147 {
6671
+ margin: var(--fui-space-2, 1rem) 0;
6672
+ border-radius: var(--fui-radius-lg, 0.571rem);
6673
+ width: 100%;
6674
+ height: auto;
6675
+ }
6668
6676
  }._stack_ixv42_1 {
6669
6677
  display: flex;
6670
6678
  }
@@ -8039,11 +8047,11 @@
8039
8047
 
8040
8048
  ._submitSpinner_1y1s8_260 {
8041
8049
  line-height: 0;
8042
- }._container_1s1j8_1 {
8050
+ }._container_g93qj_1 {
8043
8051
  width: 100%;
8044
8052
  }
8045
8053
 
8046
- ._title_1s1j8_5 {
8054
+ ._title_g93qj_5 {
8047
8055
  font-size: var(--fui-font-size-xs, 0.857rem);
8048
8056
  font-weight: var(--fui-font-weight-medium, 500);
8049
8057
  color: var(--fui-text-tertiary, rgb(87.2247978437, 87.2247978437, 94.5752021563));
@@ -8052,32 +8060,32 @@
8052
8060
  margin-bottom: var(--fui-space-1, 0.5rem);
8053
8061
  }
8054
8062
 
8055
- ._wrapper_1s1j8_14 {
8063
+ ._wrapper_g93qj_14 {
8056
8064
  position: relative;
8057
8065
  border-radius: var(--fui-radius-lg, 0.571rem);
8058
8066
  overflow: hidden;
8059
- background-color: var(--fui-code-bg, #000000);
8060
- border: 1px solid var(--fui-code-border, rgba(255, 255, 255, 0.1));
8067
+ background-color: var(--fui-code-bg, #0c0c0e);
8061
8068
  }
8062
8069
 
8063
- ._header_1s1j8_22 {
8070
+ ._header_g93qj_21 {
8064
8071
  display: flex;
8065
8072
  align-items: center;
8066
8073
  justify-content: space-between;
8067
- padding: 0 var(--fui-space-3);
8068
- background-color: var(--fui-code-header-bg, #1c1c1f);
8069
- border-bottom: 1px solid var(--fui-code-border, rgba(255, 255, 255, 0.1));
8074
+ padding: 0 var(--fui-space-4, 2rem);
8075
+ background-color: transparent;
8076
+ border-bottom: 1px solid var(--fui-code-border, rgba(255, 255, 255, 0.06));
8070
8077
  min-height: var(--fui-input-height, 2.8571428571rem);
8071
8078
  }
8072
8079
 
8073
- ._filename_1s1j8_32 {
8080
+ ._filename_g93qj_31 {
8074
8081
  font-family: var(--fui-font-mono, "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace);
8075
8082
  font-size: var(--fui-font-size-xs, 0.857rem);
8076
8083
  font-weight: var(--fui-font-weight-normal, 400);
8077
- color: var(--fui-code-text, #d4d4d4);
8084
+ color: var(--fui-code-text-muted, #5a5a6e);
8085
+ letter-spacing: 0.01em;
8078
8086
  }
8079
8087
 
8080
- ._copyButton_1s1j8_39 {
8088
+ ._copyButton_g93qj_39 {
8081
8089
  appearance: none;
8082
8090
  background: transparent;
8083
8091
  border: none;
@@ -8087,10 +8095,10 @@
8087
8095
  color: inherit;
8088
8096
  cursor: pointer;
8089
8097
  }
8090
- ._copyButton_1s1j8_39:disabled {
8098
+ ._copyButton_g93qj_39:disabled {
8091
8099
  cursor: not-allowed;
8092
8100
  }
8093
- ._copyButton_1s1j8_39 {
8101
+ ._copyButton_g93qj_39 {
8094
8102
  min-width: var(--fui-target-size-min, 1.714rem);
8095
8103
  min-height: var(--fui-target-size-min, 1.714rem);
8096
8104
  display: inline-flex;
@@ -8100,64 +8108,76 @@
8100
8108
  align-items: center;
8101
8109
  justify-content: center;
8102
8110
  padding: var(--fui-space-1, 0.5rem);
8103
- color: var(--fui-code-text-muted, #6b7280);
8111
+ color: var(--fui-code-text-muted, #5a5a6e);
8104
8112
  background: transparent;
8105
8113
  border: none;
8106
- border-radius: var(--fui-radius-md, 0.429rem);
8114
+ border-radius: var(--fui-radius-sm, 0.25rem);
8107
8115
  cursor: pointer;
8108
- transition: background var(--fui-transition-fast, 150ms ease), color var(--fui-transition-fast, 150ms ease);
8116
+ transition: background var(--fui-transition-fast, 150ms ease), color var(--fui-transition-fast, 150ms ease), opacity var(--fui-transition-fast, 150ms ease);
8109
8117
  }
8110
- ._copyButton_1s1j8_39:hover {
8111
- color: var(--fui-code-tab-text-active, #e5e7eb);
8112
- background: var(--fui-code-copy-bg-hover, rgba(255, 255, 255, 0.15));
8118
+ ._copyButton_g93qj_39:hover {
8119
+ color: var(--fui-code-tab-text-active, #e2e2e5);
8120
+ background: var(--fui-code-copy-bg-hover, rgba(255, 255, 255, 0.12));
8113
8121
  }
8114
- ._copyButton_1s1j8_39:focus-visible {
8122
+ ._copyButton_g93qj_39:focus-visible {
8115
8123
  outline: none;
8116
8124
  box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
8117
8125
  }
8118
- ._copyButton_1s1j8_39._copied_1s1j8_77 {
8126
+ ._copyButton_g93qj_39._copied_g93qj_77 {
8119
8127
  color: var(--fui-color-success, #22c55e);
8128
+ opacity: 1;
8120
8129
  }
8121
8130
 
8122
- ._copyOverlay_1s1j8_81 {
8131
+ ._copyOverlay_g93qj_82 {
8123
8132
  position: absolute;
8124
8133
  top: var(--fui-space-2, 1rem);
8125
8134
  right: var(--fui-space-2, 1rem);
8126
8135
  z-index: 2;
8127
- background: var(--fui-code-copy-bg, rgba(255, 255, 255, 0.1));
8128
- border: 1px solid var(--fui-code-border, rgba(255, 255, 255, 0.1));
8129
- border-radius: var(--fui-radius-md, 0.429rem);
8130
- box-shadow: var(--fui-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.03));
8136
+ background: var(--fui-code-copy-bg, rgba(255, 255, 255, 0.06));
8137
+ border-radius: var(--fui-radius-sm, 0.25rem);
8138
+ opacity: 0;
8139
+ transition: opacity var(--fui-transition-fast, 150ms ease), background var(--fui-transition-fast, 150ms ease), color var(--fui-transition-fast, 150ms ease);
8131
8140
  }
8132
8141
 
8133
- ._withCopyOverlay_1s1j8_92 ._codeContainer_1s1j8_92 .shiki,
8134
- ._withCopyOverlay_1s1j8_92 ._loading_1s1j8_93 pre {
8142
+ ._withCopyOverlay_g93qj_93:hover ._copyOverlay_g93qj_82,
8143
+ ._withCopyOverlay_g93qj_93 ._copyOverlay_g93qj_82:focus-visible {
8144
+ opacity: 1;
8145
+ }
8146
+ ._withCopyOverlay_g93qj_93 ._copyOverlay_g93qj_82._copied_g93qj_77 {
8147
+ opacity: 1;
8148
+ }
8149
+ ._withCopyOverlay_g93qj_93 ._codeContainer_g93qj_100 .shiki,
8150
+ ._withCopyOverlay_g93qj_93 ._loading_g93qj_101 pre {
8135
8151
  padding-right: calc(var(--fui-space-4, 2rem) + var(--fui-target-size-min, 1.714rem) + var(--fui-space-3, 1.5rem));
8136
8152
  }
8137
8153
 
8138
- ._icon_1s1j8_97 {
8154
+ ._icon_g93qj_105 {
8139
8155
  flex-shrink: 0;
8140
8156
  }
8141
8157
 
8142
- ._persistentCopy_1s1j8_101 {
8158
+ ._persistentCopy_g93qj_109 {
8143
8159
  top: 50%;
8144
8160
  transform: translateY(-50%);
8161
+ opacity: 1;
8162
+ }
8163
+
8164
+ ._persistentCopyWrapper_g93qj_115 ._copyOverlay_g93qj_82 {
8165
+ opacity: 1;
8145
8166
  }
8146
8167
 
8147
- ._loading_1s1j8_93 pre {
8168
+ ._loading_g93qj_101 pre {
8148
8169
  margin: 0;
8149
- padding: var(--fui-space-3);
8150
- padding-right: var(--fui-space-3);
8170
+ padding: var(--fui-space-4, 2rem);
8151
8171
  background-color: transparent !important;
8152
8172
  border: none !important;
8153
8173
  border-radius: 0 !important;
8154
8174
  font-family: var(--fui-font-mono, "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace);
8155
8175
  font-size: var(--fui-font-size-sm, 1rem);
8156
- line-height: 1.7;
8157
- color: var(--fui-code-text, #d4d4d4);
8176
+ line-height: 1.6;
8177
+ color: var(--fui-code-text, #e2e2e5);
8158
8178
  overflow-x: auto;
8159
8179
  }
8160
- ._loading_1s1j8_93 code {
8180
+ ._loading_g93qj_101 code {
8161
8181
  background: none !important;
8162
8182
  padding: 0;
8163
8183
  border: none;
@@ -8166,20 +8186,19 @@
8166
8186
  font-size: inherit;
8167
8187
  }
8168
8188
 
8169
- ._codeContainer_1s1j8_92 .shiki {
8189
+ ._codeContainer_g93qj_100 .shiki {
8170
8190
  background-color: transparent !important;
8171
8191
  margin: 0;
8172
- padding: var(--fui-space-3);
8173
- padding-right: var(--fui-space-3);
8192
+ padding: var(--fui-space-4, 2rem);
8174
8193
  border: none !important;
8175
8194
  border-radius: 0 !important;
8176
8195
  font-family: var(--fui-font-mono, "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace);
8177
8196
  font-size: var(--fui-font-size-sm, 1rem);
8178
- line-height: 1.7;
8197
+ line-height: 1.6;
8179
8198
  overflow-x: auto;
8180
8199
  tab-size: 2;
8181
8200
  }
8182
- ._codeContainer_1s1j8_92 .shiki code {
8201
+ ._codeContainer_g93qj_100 .shiki code {
8183
8202
  background: none !important;
8184
8203
  padding: 0;
8185
8204
  border: none;
@@ -8188,104 +8207,103 @@
8188
8207
  font-size: inherit;
8189
8208
  counter-reset: line;
8190
8209
  }
8191
- ._codeContainer_1s1j8_92 .line {
8210
+ ._codeContainer_g93qj_100 .line {
8192
8211
  display: inline-block;
8193
8212
  width: 100%;
8194
8213
  min-height: 1.6em;
8195
8214
  }
8196
- ._codeContainer_1s1j8_92 .line.highlighted {
8197
- background-color: var(--fui-code-highlight-bg, rgba(255, 255, 255, 0.08));
8198
- margin: 0 calc(-1 * var(--fui-space-3, 1.5rem));
8199
- padding: 0 var(--fui-space-3, 1.5rem);
8200
- border-left: 3px solid var(--fui-color-info, #3b82f6);
8215
+ ._codeContainer_g93qj_100 .line.highlighted {
8216
+ background-color: var(--fui-code-highlight-bg, rgba(255, 255, 255, 0.06));
8217
+ margin: 0 calc(-1 * var(--fui-space-4, 2rem));
8218
+ padding: 0 var(--fui-space-4, 2rem);
8219
+ border-left: 2px solid var(--fui-color-info, #3b82f6);
8201
8220
  }
8202
- ._codeContainer_1s1j8_92 .line-number {
8221
+ ._codeContainer_g93qj_100 .line-number {
8203
8222
  display: inline-block;
8204
8223
  width: 2.5em;
8205
8224
  padding-right: 1em;
8206
8225
  text-align: right;
8207
- color: var(--fui-code-text-muted, #6b7280);
8226
+ color: var(--fui-code-text-muted, #5a5a6e);
8208
8227
  user-select: none;
8228
+ opacity: 0.6;
8209
8229
  }
8210
- ._codeContainer_1s1j8_92 *::selection {
8211
- background: var(--fui-code-selection-bg, rgba(59, 130, 246, 0.4));
8212
- color: var(--fui-code-tab-text-active, #e5e7eb);
8230
+ ._codeContainer_g93qj_100 *::selection {
8231
+ background: var(--fui-code-selection-bg, rgba(59, 130, 246, 0.3));
8232
+ color: var(--fui-code-tab-text-active, #e2e2e5);
8213
8233
  }
8214
- ._codeContainer_1s1j8_92 .shiki::-webkit-scrollbar {
8215
- height: 6px;
8234
+ ._codeContainer_g93qj_100 .shiki::-webkit-scrollbar {
8235
+ height: 4px;
8216
8236
  }
8217
- ._codeContainer_1s1j8_92 .shiki::-webkit-scrollbar-track {
8218
- background: var(--fui-code-scrollbar-track, rgba(255, 255, 255, 0.05));
8219
- border-radius: var(--fui-radius-sm, 0.25rem);
8237
+ ._codeContainer_g93qj_100 .shiki::-webkit-scrollbar-track {
8238
+ background: transparent;
8220
8239
  }
8221
- ._codeContainer_1s1j8_92 .shiki::-webkit-scrollbar-thumb {
8222
- background: var(--fui-code-scrollbar-thumb, rgba(255, 255, 255, 0.15));
8223
- border-radius: var(--fui-radius-sm, 0.25rem);
8240
+ ._codeContainer_g93qj_100 .shiki::-webkit-scrollbar-thumb {
8241
+ background: var(--fui-code-scrollbar-thumb, rgba(255, 255, 255, 0.1));
8242
+ border-radius: var(--fui-radius-full, 9999px);
8224
8243
  }
8225
- ._codeContainer_1s1j8_92 .shiki::-webkit-scrollbar-thumb:hover {
8226
- background: var(--fui-code-scrollbar-thumb-hover, rgba(255, 255, 255, 0.25));
8244
+ ._codeContainer_g93qj_100 .shiki::-webkit-scrollbar-thumb:hover {
8245
+ background: var(--fui-code-scrollbar-thumb-hover, rgba(255, 255, 255, 0.2));
8227
8246
  }
8228
8247
 
8229
- ._withLineNumbers_1s1j8_188 ._codeContainer_1s1j8_92 .shiki {
8248
+ ._withLineNumbers_g93qj_199 ._codeContainer_g93qj_100 .shiki {
8230
8249
  padding-left: var(--fui-space-2, 1rem);
8231
8250
  }
8232
8251
 
8233
- ._withDiff_1s1j8_192 .diff-marker {
8252
+ ._withDiff_g93qj_203 .diff-marker {
8234
8253
  display: inline-block;
8235
8254
  width: 1.5em;
8236
8255
  text-align: center;
8237
8256
  user-select: none;
8238
- color: var(--fui-code-text-muted, #6b7280);
8257
+ color: var(--fui-code-text-muted, #5a5a6e);
8239
8258
  }
8240
- ._withDiff_1s1j8_192 .diff-added {
8259
+ ._withDiff_g93qj_203 .diff-added {
8241
8260
  background-color: var(--fui-color-success-bg, rgba(34, 197, 94, 0.1));
8242
- margin: 0 calc(-1 * var(--fui-space-3, 1.5rem));
8243
- padding: 0 var(--fui-space-3, 1.5rem);
8261
+ margin: 0 calc(-1 * var(--fui-space-4, 2rem));
8262
+ padding: 0 var(--fui-space-4, 2rem);
8244
8263
  }
8245
- ._withDiff_1s1j8_192 .diff-added .diff-marker {
8264
+ ._withDiff_g93qj_203 .diff-added .diff-marker {
8246
8265
  color: var(--fui-color-success, #22c55e);
8247
8266
  }
8248
- ._withDiff_1s1j8_192 .diff-removed {
8267
+ ._withDiff_g93qj_203 .diff-removed {
8249
8268
  background-color: var(--fui-color-danger-bg, rgba(239, 68, 68, 0.1));
8250
- margin: 0 calc(-1 * var(--fui-space-3, 1.5rem));
8251
- padding: 0 var(--fui-space-3, 1.5rem);
8269
+ margin: 0 calc(-1 * var(--fui-space-4, 2rem));
8270
+ padding: 0 var(--fui-space-4, 2rem);
8252
8271
  }
8253
- ._withDiff_1s1j8_192 .diff-removed .diff-marker {
8272
+ ._withDiff_g93qj_203 .diff-removed .diff-marker {
8254
8273
  color: var(--fui-color-danger, #ef4444);
8255
8274
  }
8256
8275
 
8257
- ._compact_1s1j8_216 ._wrapper_1s1j8_14 {
8276
+ ._compact_g93qj_227 ._wrapper_g93qj_14 {
8258
8277
  border-radius: var(--fui-radius-md, 0.429rem);
8259
8278
  }
8260
- ._compact_1s1j8_216 ._codeContainer_1s1j8_92 .shiki,
8261
- ._compact_1s1j8_216 ._loading_1s1j8_93 pre {
8262
- padding: var(--fui-space-2) var(--fui-space-3);
8279
+ ._compact_g93qj_227 ._codeContainer_g93qj_100 .shiki,
8280
+ ._compact_g93qj_227 ._loading_g93qj_101 pre {
8281
+ padding: var(--fui-space-2, 1rem) var(--fui-space-3, 1.5rem);
8263
8282
  font-size: var(--fui-font-size-sm, 1rem);
8264
8283
  line-height: 1.5;
8265
8284
  }
8266
- ._compact_1s1j8_216 ._withCopyOverlay_1s1j8_92 ._codeContainer_1s1j8_92 .shiki,
8267
- ._compact_1s1j8_216 ._withCopyOverlay_1s1j8_92 ._loading_1s1j8_93 pre {
8285
+ ._compact_g93qj_227 ._withCopyOverlay_g93qj_93 ._codeContainer_g93qj_100 .shiki,
8286
+ ._compact_g93qj_227 ._withCopyOverlay_g93qj_93 ._loading_g93qj_101 pre {
8268
8287
  padding-right: calc(var(--fui-space-3, 1.5rem) + var(--fui-target-size-min, 1.714rem) + var(--fui-space-3, 1.5rem));
8269
8288
  }
8270
8289
 
8271
- ._wordWrap_1s1j8_230 ._codeContainer_1s1j8_92 .shiki,
8272
- ._wordWrap_1s1j8_230 ._loading_1s1j8_93 pre {
8290
+ ._wordWrap_g93qj_241 ._codeContainer_g93qj_100 .shiki,
8291
+ ._wordWrap_g93qj_241 ._loading_g93qj_101 pre {
8273
8292
  white-space: pre-wrap;
8274
8293
  word-break: break-word;
8275
8294
  }
8276
- ._wordWrap_1s1j8_230 .line {
8295
+ ._wordWrap_g93qj_241 .line {
8277
8296
  display: block;
8278
8297
  width: auto;
8279
8298
  }
8280
8299
 
8281
- ._caption_1s1j8_240 {
8300
+ ._caption_g93qj_251 {
8282
8301
  font-size: var(--fui-font-size-xs, 0.857rem);
8283
8302
  color: var(--fui-text-tertiary, rgb(87.2247978437, 87.2247978437, 94.5752021563));
8284
8303
  margin-top: var(--fui-space-2, 1rem);
8285
- font-style: italic;
8286
8304
  }
8287
8305
 
8288
- ._collapseButton_1s1j8_247 {
8306
+ ._collapseButton_g93qj_257 {
8289
8307
  appearance: none;
8290
8308
  background: transparent;
8291
8309
  border: none;
@@ -8295,41 +8313,40 @@
8295
8313
  color: inherit;
8296
8314
  cursor: pointer;
8297
8315
  }
8298
- ._collapseButton_1s1j8_247:disabled {
8316
+ ._collapseButton_g93qj_257:disabled {
8299
8317
  cursor: not-allowed;
8300
8318
  }
8301
- ._collapseButton_1s1j8_247 {
8319
+ ._collapseButton_g93qj_257 {
8302
8320
  display: flex;
8303
8321
  align-items: center;
8304
8322
  justify-content: center;
8305
8323
  gap: var(--fui-space-1, 0.5rem);
8306
8324
  width: 100%;
8307
- padding: 0 var(--fui-space-2);
8325
+ padding: var(--fui-space-1, 0.5rem) var(--fui-space-2, 1rem);
8308
8326
  font-size: var(--fui-font-size-xs, 0.857rem);
8309
8327
  font-weight: var(--fui-font-weight-medium, 500);
8310
8328
  font-family: var(--fui-font-sans, "Geist Sans", "Geist", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
8311
- color: var(--fui-code-text-muted, #6b7280);
8312
- background: var(--fui-code-header-bg, #1c1c1f);
8313
- border-top: 1px solid var(--fui-code-border, rgba(255, 255, 255, 0.1));
8329
+ color: var(--fui-code-text-muted, #5a5a6e);
8330
+ background: linear-gradient(to bottom, transparent, var(--fui-code-bg, #0c0c0e) 40%);
8331
+ border-top: none;
8314
8332
  cursor: pointer;
8315
- transition: background var(--fui-transition-fast, 150ms ease), color var(--fui-transition-fast, 150ms ease);
8333
+ transition: color var(--fui-transition-fast, 150ms ease);
8316
8334
  }
8317
- ._collapseButton_1s1j8_247:hover {
8318
- background: var(--fui-code-copy-bg, rgba(255, 255, 255, 0.1));
8319
- color: var(--fui-code-tab-text-active, #e5e7eb);
8335
+ ._collapseButton_g93qj_257:hover {
8336
+ color: var(--fui-code-tab-text-active, #e2e2e5);
8320
8337
  }
8321
- ._collapseButton_1s1j8_247:focus-visible {
8338
+ ._collapseButton_g93qj_257:focus-visible {
8322
8339
  outline: var(--fui-focus-ring-width, 2px) solid var(--fui-focus-ring-color, #18181b);
8323
8340
  outline-offset: calc(-1 * var(--fui-focus-ring-offset, 2px));
8324
8341
  }
8325
8342
 
8326
8343
  @media (max-width: 768px) {
8327
- ._codeContainer_1s1j8_92 .shiki {
8344
+ ._codeContainer_g93qj_100 .shiki {
8328
8345
  font-size: var(--fui-font-size-2xs, 0.714rem);
8329
- padding: var(--fui-space-2, 1rem);
8346
+ padding: var(--fui-space-3, 1.5rem);
8330
8347
  }
8331
8348
  }
8332
- ._tabbedPanel_1s1j8_291 {
8349
+ ._tabbedPanel_g93qj_300 {
8333
8350
  margin-top: 0;
8334
8351
  }._icon_18crx_1 {
8335
8352
  display: inline-flex;
@@ -9442,7 +9459,7 @@
9442
9459
  clip: rect(0, 0, 0, 0);
9443
9460
  white-space: nowrap;
9444
9461
  border-width: 0;
9445
- }._markdown_1c6js_1 {
9462
+ }._markdown_u8zb6_1 {
9446
9463
  font-family: var(--fui-font-sans, Geist Sans, Geist, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);
9447
9464
  font-size: var(--fui-font-size-sm, 1rem);
9448
9465
  line-height: var(--fui-line-height-normal, 1.5);
@@ -9455,140 +9472,140 @@
9455
9472
  word-wrap: break-word;
9456
9473
  color: var(--fui-text-secondary, #52525b);
9457
9474
  }
9458
- ._markdown_1c6js_1 h1,
9459
- ._markdown_1c6js_1 h2,
9460
- ._markdown_1c6js_1 h3,
9461
- ._markdown_1c6js_1 h4,
9462
- ._markdown_1c6js_1 h5,
9463
- ._markdown_1c6js_1 h6 {
9475
+ ._markdown_u8zb6_1 h1,
9476
+ ._markdown_u8zb6_1 h2,
9477
+ ._markdown_u8zb6_1 h3,
9478
+ ._markdown_u8zb6_1 h4,
9479
+ ._markdown_u8zb6_1 h5,
9480
+ ._markdown_u8zb6_1 h6 {
9464
9481
  margin-top: var(--fui-space-4, 2rem);
9465
9482
  margin-bottom: var(--fui-space-2, 1rem);
9466
9483
  font-weight: var(--fui-font-weight-semibold, 600);
9467
9484
  line-height: var(--fui-line-height-tight, 1.25);
9468
9485
  color: var(--fui-text-primary, #18181b);
9469
9486
  }
9470
- ._markdown_1c6js_1 h1:first-child,
9471
- ._markdown_1c6js_1 h2:first-child,
9472
- ._markdown_1c6js_1 h3:first-child,
9473
- ._markdown_1c6js_1 h4:first-child,
9474
- ._markdown_1c6js_1 h5:first-child,
9475
- ._markdown_1c6js_1 h6:first-child {
9487
+ ._markdown_u8zb6_1 h1:first-child,
9488
+ ._markdown_u8zb6_1 h2:first-child,
9489
+ ._markdown_u8zb6_1 h3:first-child,
9490
+ ._markdown_u8zb6_1 h4:first-child,
9491
+ ._markdown_u8zb6_1 h5:first-child,
9492
+ ._markdown_u8zb6_1 h6:first-child {
9476
9493
  margin-top: 0;
9477
9494
  }
9478
- ._markdown_1c6js_1 h1 {
9495
+ ._markdown_u8zb6_1 h1 {
9479
9496
  font-size: var(--fui-font-size-2xl, 2.143rem);
9480
9497
  }
9481
- ._markdown_1c6js_1 h2 {
9498
+ ._markdown_u8zb6_1 h2 {
9482
9499
  font-size: var(--fui-font-size-xl, 1.714rem);
9483
9500
  margin-top: var(--fui-space-8, 4rem);
9484
9501
  }
9485
- ._markdown_1c6js_1 h3 {
9502
+ ._markdown_u8zb6_1 h3 {
9486
9503
  font-size: var(--fui-font-size-lg, 1.286rem);
9487
9504
  }
9488
- ._markdown_1c6js_1 h4 {
9505
+ ._markdown_u8zb6_1 h4 {
9489
9506
  font-size: var(--fui-font-size-base, 1.143rem);
9490
9507
  }
9491
- ._markdown_1c6js_1 h5,
9492
- ._markdown_1c6js_1 h6 {
9508
+ ._markdown_u8zb6_1 h5,
9509
+ ._markdown_u8zb6_1 h6 {
9493
9510
  font-size: var(--fui-font-size-sm, 1rem);
9494
9511
  }
9495
- ._markdown_1c6js_1 p {
9512
+ ._markdown_u8zb6_1 p {
9496
9513
  margin: 0;
9497
9514
  }
9498
- ._markdown_1c6js_1 p + p {
9515
+ ._markdown_u8zb6_1 p + p {
9499
9516
  margin-top: var(--fui-space-3, 1.5rem);
9500
9517
  }
9501
- ._markdown_1c6js_1 a {
9518
+ ._markdown_u8zb6_1 a {
9502
9519
  color: var(--fui-color-accent, #18181b);
9503
9520
  text-decoration: underline;
9504
9521
  text-underline-offset: 2px;
9505
9522
  }
9506
- ._markdown_1c6js_1 a:hover {
9523
+ ._markdown_u8zb6_1 a:hover {
9507
9524
  opacity: 0.8;
9508
9525
  }
9509
- ._markdown_1c6js_1 ul,
9510
- ._markdown_1c6js_1 ol {
9526
+ ._markdown_u8zb6_1 ul,
9527
+ ._markdown_u8zb6_1 ol {
9511
9528
  margin: var(--fui-space-2, 1rem) 0;
9512
9529
  padding-left: var(--fui-space-4, 2rem);
9513
9530
  }
9514
- ._markdown_1c6js_1 li {
9531
+ ._markdown_u8zb6_1 li {
9515
9532
  margin-bottom: var(--fui-space-1, 0.5rem);
9516
9533
  }
9517
- ._markdown_1c6js_1 li:last-child {
9534
+ ._markdown_u8zb6_1 li:last-child {
9518
9535
  margin-bottom: 0;
9519
9536
  }
9520
- ._markdown_1c6js_1 li > ul,
9521
- ._markdown_1c6js_1 li > ol {
9537
+ ._markdown_u8zb6_1 li > ul,
9538
+ ._markdown_u8zb6_1 li > ol {
9522
9539
  margin-top: var(--fui-space-1, 0.5rem);
9523
9540
  margin-bottom: 0;
9524
9541
  }
9525
- ._markdown_1c6js_1 code {
9542
+ ._markdown_u8zb6_1 code {
9526
9543
  font-family: var(--fui-font-mono, "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace);
9527
9544
  font-size: 0.9em;
9528
9545
  padding: 0.125em 0.375em;
9529
9546
  border-radius: var(--fui-radius-sm, 0.25rem);
9530
9547
  background-color: var(--fui-bg-tertiary, #f4f4f5);
9531
9548
  }
9532
- ._markdown_1c6js_1 pre {
9549
+ ._markdown_u8zb6_1 pre {
9533
9550
  margin: var(--fui-space-2, 1rem) 0;
9534
9551
  padding: var(--fui-space-2);
9535
9552
  border-radius: var(--fui-radius-md, 0.429rem);
9536
- background-color: var(--fui-code-bg, #000000);
9553
+ background-color: var(--fui-code-bg, #0c0c0e);
9537
9554
  overflow-x: auto;
9538
9555
  }
9539
- ._markdown_1c6js_1 pre code {
9556
+ ._markdown_u8zb6_1 pre code {
9540
9557
  padding: 0;
9541
9558
  background: none;
9542
9559
  font-size: var(--fui-font-size-xs, 0.857rem);
9543
9560
  }
9544
- ._markdown_1c6js_1 div:has(> div > div > pre) {
9561
+ ._markdown_u8zb6_1 div:has(> div > div > pre) {
9545
9562
  margin: var(--fui-space-3, 1.5rem) 0;
9546
9563
  }
9547
- ._markdown_1c6js_1 blockquote {
9564
+ ._markdown_u8zb6_1 blockquote {
9548
9565
  margin: var(--fui-space-2, 1rem) 0;
9549
9566
  padding: var(--fui-space-1) var(--fui-space-3);
9550
9567
  border-left: 3px solid var(--fui-border, rgba(0, 0, 0, 0.08));
9551
9568
  color: var(--fui-text-secondary, #52525b);
9552
9569
  }
9553
- ._markdown_1c6js_1 blockquote p {
9570
+ ._markdown_u8zb6_1 blockquote p {
9554
9571
  margin: 0;
9555
9572
  }
9556
- ._markdown_1c6js_1 hr {
9573
+ ._markdown_u8zb6_1 hr {
9557
9574
  margin: var(--fui-space-4, 2rem) 0;
9558
9575
  border: none;
9559
9576
  border-top: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
9560
9577
  }
9561
- ._markdown_1c6js_1 table {
9578
+ ._markdown_u8zb6_1 table {
9562
9579
  width: 100%;
9563
9580
  margin: var(--fui-space-2, 1rem) 0;
9564
9581
  border-collapse: collapse;
9565
9582
  font-size: var(--fui-font-size-sm, 1rem);
9566
9583
  }
9567
- ._markdown_1c6js_1 th,
9568
- ._markdown_1c6js_1 td {
9584
+ ._markdown_u8zb6_1 th,
9585
+ ._markdown_u8zb6_1 td {
9569
9586
  padding: var(--fui-space-1) var(--fui-space-2);
9570
9587
  border: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
9571
9588
  text-align: left;
9572
9589
  }
9573
- ._markdown_1c6js_1 th {
9590
+ ._markdown_u8zb6_1 th {
9574
9591
  font-weight: var(--fui-font-weight-semibold, 600);
9575
9592
  background-color: var(--fui-bg-secondary, #f4f4f5);
9576
9593
  }
9577
- ._markdown_1c6js_1 img {
9594
+ ._markdown_u8zb6_1 img {
9578
9595
  max-width: 100%;
9579
9596
  height: auto;
9580
9597
  border-radius: var(--fui-radius-md, 0.429rem);
9581
9598
  }
9582
- ._markdown_1c6js_1 input[type=checkbox] {
9599
+ ._markdown_u8zb6_1 input[type=checkbox] {
9583
9600
  margin-right: var(--fui-space-1, 0.5rem);
9584
9601
  }
9585
- ._markdown_1c6js_1 strong {
9602
+ ._markdown_u8zb6_1 strong {
9586
9603
  font-weight: var(--fui-font-weight-semibold, 600);
9587
9604
  }
9588
- ._markdown_1c6js_1 > *:first-child {
9605
+ ._markdown_u8zb6_1 > *:first-child {
9589
9606
  margin-top: 0;
9590
9607
  }
9591
- ._markdown_1c6js_1 > *:last-child {
9608
+ ._markdown_u8zb6_1 > *:last-child {
9592
9609
  margin-bottom: 0;
9593
9610
  }._message_7tbia_1 {
9594
9611
  display: flex;