@cloudflare/kumo 2.5.1 → 2.6.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 (193) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/ai/component-registry.json +176 -124
  3. package/ai/component-registry.md +171 -51
  4. package/ai/schemas.ts +23 -12
  5. package/dist/.build-complete +1 -1
  6. package/dist/ai/schemas.d.ts +75 -48
  7. package/dist/ai/schemas.d.ts.map +1 -1
  8. package/dist/ai/schemas.js +207 -197
  9. package/dist/ai/schemas.js.map +1 -1
  10. package/dist/chunks/SankeyChart-g1tng405ml2e0qg2.js +890 -0
  11. package/dist/chunks/SankeyChart-g1tng405ml2e0qg2.js.map +1 -0
  12. package/dist/chunks/{autocomplete-d0w42h1frdu03df6.js → autocomplete-hgprlcuf0ixbbo6d.js} +18 -18
  13. package/dist/chunks/{autocomplete-d0w42h1frdu03df6.js.map → autocomplete-hgprlcuf0ixbbo6d.js.map} +1 -1
  14. package/dist/chunks/{breadcrumbs-j214mimk5zj4ffp4.js → breadcrumbs-lyj8ljudrm2owx5y.js} +2 -2
  15. package/dist/chunks/{breadcrumbs-j214mimk5zj4ffp4.js.map → breadcrumbs-lyj8ljudrm2owx5y.js.map} +1 -1
  16. package/dist/chunks/button-gtdhvogt5rlrf1is.js +237 -0
  17. package/dist/chunks/button-gtdhvogt5rlrf1is.js.map +1 -0
  18. package/dist/chunks/{checkbox-dqih8tzzt3vhp870.js → checkbox-byg8t8r9vbmif696.js} +3 -3
  19. package/dist/chunks/{checkbox-dqih8tzzt3vhp870.js.map → checkbox-byg8t8r9vbmif696.js.map} +1 -1
  20. package/dist/chunks/{clipboard-text-mrut8z3dt1w0efxz.js → clipboard-text-lf909phvldd8rfk8.js} +4 -4
  21. package/dist/chunks/{clipboard-text-mrut8z3dt1w0efxz.js.map → clipboard-text-lf909phvldd8rfk8.js.map} +1 -1
  22. package/dist/chunks/{collapsible-nzqcf9zwnjkxqzr6.js → collapsible-dl61f8gd4j897hmv.js} +4 -4
  23. package/dist/chunks/{collapsible-nzqcf9zwnjkxqzr6.js.map → collapsible-dl61f8gd4j897hmv.js.map} +1 -1
  24. package/dist/chunks/{combobox-msvukodjsqzlvpqc.js → combobox-dxff22zxzq846nec.js} +4 -4
  25. package/dist/chunks/{combobox-msvukodjsqzlvpqc.js.map → combobox-dxff22zxzq846nec.js.map} +1 -1
  26. package/dist/chunks/{command-palette-fqhyacp33fhyf696.js → command-palette-i4r0402b838wiy0j.js} +21 -21
  27. package/dist/chunks/{command-palette-fqhyacp33fhyf696.js.map → command-palette-i4r0402b838wiy0j.js.map} +1 -1
  28. package/dist/chunks/{dialog-3mpu1i1wssrsz8i6.js → dialog-g1b8161nbyixdit0.js} +7 -7
  29. package/dist/chunks/{dialog-3mpu1i1wssrsz8i6.js.map → dialog-g1b8161nbyixdit0.js.map} +1 -1
  30. package/dist/chunks/{dropdown-g4sb4cw9ffqaw5gx.js → dropdown-irp18txvgz8590e9.js} +27 -27
  31. package/dist/chunks/{dropdown-g4sb4cw9ffqaw5gx.js.map → dropdown-irp18txvgz8590e9.js.map} +1 -1
  32. package/dist/chunks/{empty-n17inn1z67bpohkw.js → empty-daa6d7u9oleaw24a.js} +2 -2
  33. package/dist/chunks/{empty-n17inn1z67bpohkw.js.map → empty-daa6d7u9oleaw24a.js.map} +1 -1
  34. package/dist/chunks/{field-c8o7h3rlam4c9pcx.js → field-f1hy08um3jf9jos6.js} +3 -3
  35. package/dist/chunks/{field-c8o7h3rlam4c9pcx.js.map → field-f1hy08um3jf9jos6.js.map} +1 -1
  36. package/dist/chunks/{input-area-eurk3seud30ricwn.js → input-area-bwyujceeulpfkpxv.js} +4 -4
  37. package/dist/chunks/{input-area-eurk3seud30ricwn.js.map → input-area-bwyujceeulpfkpxv.js.map} +1 -1
  38. package/dist/chunks/{input-en8hhb14mmt3tfwn.js → input-f2ct7obgdzypjmp2.js} +3 -3
  39. package/dist/chunks/{input-en8hhb14mmt3tfwn.js.map → input-f2ct7obgdzypjmp2.js.map} +1 -1
  40. package/dist/chunks/{input-group-d09ocmjcbdai0gze.js → input-group-kcd3jin5pbdijmw8.js} +5 -5
  41. package/dist/chunks/{input-group-d09ocmjcbdai0gze.js.map → input-group-kcd3jin5pbdijmw8.js.map} +1 -1
  42. package/dist/chunks/{label-c8rz453pti66slki.js → label-himqjkdhh0hgfdsa.js} +3 -3
  43. package/dist/chunks/{label-c8rz453pti66slki.js.map → label-himqjkdhh0hgfdsa.js.map} +1 -1
  44. package/dist/chunks/{layer-card-er4flkcxmzfug8jw.js → layer-card-cshi5vydqg3phyfx.js} +2 -2
  45. package/dist/chunks/{layer-card-er4flkcxmzfug8jw.js.map → layer-card-cshi5vydqg3phyfx.js.map} +1 -1
  46. package/dist/chunks/{link-i6vnwyjcwvjz5btm.js → link-bw21ofmgg58igq5n.js} +4 -4
  47. package/dist/chunks/{link-i6vnwyjcwvjz5btm.js.map → link-bw21ofmgg58igq5n.js.map} +1 -1
  48. package/dist/chunks/{menubar-ng5if56amh1tto4j.js → menubar-m12wcbbucuszspw4.js} +2 -2
  49. package/dist/chunks/{menubar-ng5if56amh1tto4j.js.map → menubar-m12wcbbucuszspw4.js.map} +1 -1
  50. package/dist/chunks/{meter-d5igshkjqttl1fdj.js → meter-dn8vgc0smpk0du75.js} +4 -4
  51. package/dist/chunks/{meter-d5igshkjqttl1fdj.js.map → meter-dn8vgc0smpk0du75.js.map} +1 -1
  52. package/dist/chunks/{pagination-bw7vwca4wrfjm8vb.js → pagination-oafyxvdndm9m8250.js} +3 -3
  53. package/dist/chunks/{pagination-bw7vwca4wrfjm8vb.js.map → pagination-oafyxvdndm9m8250.js.map} +1 -1
  54. package/dist/chunks/{popover-ozf1j7oi7pxiudyz.js → popover-bbxr39l1lx175hum.js} +18 -18
  55. package/dist/chunks/{popover-ozf1j7oi7pxiudyz.js.map → popover-bbxr39l1lx175hum.js.map} +1 -1
  56. package/dist/chunks/radio-ffx05ih9nc764evh.js +226 -0
  57. package/dist/chunks/radio-ffx05ih9nc764evh.js.map +1 -0
  58. package/dist/chunks/{select-dw9iw35ug7yer3o3.js → select-kl1skfh3pmwc33rp.js} +6 -6
  59. package/dist/chunks/{select-dw9iw35ug7yer3o3.js.map → select-kl1skfh3pmwc33rp.js.map} +1 -1
  60. package/dist/chunks/{sensitive-input-dgoxjtoxl4zqa51v.js → sensitive-input-izmbyk1t7r56ciiq.js} +4 -4
  61. package/dist/chunks/{sensitive-input-dgoxjtoxl4zqa51v.js.map → sensitive-input-izmbyk1t7r56ciiq.js.map} +1 -1
  62. package/dist/chunks/{sidebar-nbdw4rgvuabxp5nj.js → sidebar-ior8rnhsd7gy5am5.js} +49 -49
  63. package/dist/chunks/sidebar-ior8rnhsd7gy5am5.js.map +1 -0
  64. package/dist/chunks/{surface-iyejjbqogjbo7ise.js → surface-g5a1buofz4erjov2.js} +2 -2
  65. package/dist/chunks/{surface-iyejjbqogjbo7ise.js.map → surface-g5a1buofz4erjov2.js.map} +1 -1
  66. package/dist/chunks/{switch-g8f77h69h34xld06.js → switch-kh8a6l3l0hszm9h4.js} +3 -3
  67. package/dist/chunks/{switch-g8f77h69h34xld06.js.map → switch-kh8a6l3l0hszm9h4.js.map} +1 -1
  68. package/dist/chunks/{table-e1te1im2tt2ez05y.js → table-dz2k55oab66h2vi9.js} +2 -2
  69. package/dist/chunks/{table-e1te1im2tt2ez05y.js.map → table-dz2k55oab66h2vi9.js.map} +1 -1
  70. package/dist/chunks/{tabs-ho9t1gkq22jb855l.js → tabs-kcw98wibdz4mhpkc.js} +2 -2
  71. package/dist/chunks/{tabs-ho9t1gkq22jb855l.js.map → tabs-kcw98wibdz4mhpkc.js.map} +1 -1
  72. package/dist/chunks/{toast-kvbgct0jvfmn4mas.js → toast-dkdo1lu72tnefya6.js} +7 -7
  73. package/dist/chunks/{toast-kvbgct0jvfmn4mas.js.map → toast-dkdo1lu72tnefya6.js.map} +1 -1
  74. package/dist/chunks/toolbar-o7xe6pd189evdd53.js +172 -0
  75. package/dist/chunks/toolbar-o7xe6pd189evdd53.js.map +1 -0
  76. package/dist/chunks/{tooltip-ken77ixya0qpidie.js → tooltip-eqnhjdbvwapy8gj4.js} +4 -4
  77. package/dist/chunks/{tooltip-ken77ixya0qpidie.js.map → tooltip-eqnhjdbvwapy8gj4.js.map} +1 -1
  78. package/dist/chunks/{vendor-base-ui-knphx7dts1vm1x37.js → vendor-base-ui-f9z44m829vvptrg0.js} +2209 -2207
  79. package/dist/chunks/{vendor-base-ui-knphx7dts1vm1x37.js.map → vendor-base-ui-f9z44m829vvptrg0.js.map} +1 -1
  80. package/dist/code.js +1 -1
  81. package/dist/components/autocomplete.js +1 -1
  82. package/dist/components/breadcrumbs.js +1 -1
  83. package/dist/components/button.js +1 -1
  84. package/dist/components/chart.js +1 -1
  85. package/dist/components/checkbox.js +1 -1
  86. package/dist/components/clipboard-text.js +1 -1
  87. package/dist/components/collapsible.js +1 -1
  88. package/dist/components/combobox.js +1 -1
  89. package/dist/components/command-palette.js +1 -1
  90. package/dist/components/dialog.js +1 -1
  91. package/dist/components/dropdown.js +1 -1
  92. package/dist/components/empty.js +1 -1
  93. package/dist/components/field.js +1 -1
  94. package/dist/components/input-group.js +1 -1
  95. package/dist/components/input.js +3 -3
  96. package/dist/components/label.js +1 -1
  97. package/dist/components/layer-card.js +1 -1
  98. package/dist/components/link.js +1 -1
  99. package/dist/components/menubar.js +1 -1
  100. package/dist/components/meter.js +1 -1
  101. package/dist/components/pagination.js +1 -1
  102. package/dist/components/popover.js +1 -1
  103. package/dist/components/radio.js +1 -1
  104. package/dist/components/select.js +1 -1
  105. package/dist/components/sensitive-input.js +1 -1
  106. package/dist/components/sidebar.js +1 -1
  107. package/dist/components/surface.js +1 -1
  108. package/dist/components/switch.js +1 -1
  109. package/dist/components/table.js +1 -1
  110. package/dist/components/tabs.js +1 -1
  111. package/dist/components/toast.js +2 -2
  112. package/dist/components/toolbar.js +8 -0
  113. package/dist/components/toolbar.js.map +1 -0
  114. package/dist/components/tooltip.js +1 -1
  115. package/dist/index.js +199 -195
  116. package/dist/index.js.map +1 -1
  117. package/dist/primitives/accordion.js +1 -1
  118. package/dist/primitives/alert-dialog.js +1 -1
  119. package/dist/primitives/autocomplete.js +1 -1
  120. package/dist/primitives/avatar.js +1 -1
  121. package/dist/primitives/button.js +1 -1
  122. package/dist/primitives/checkbox-group.js +1 -1
  123. package/dist/primitives/checkbox.js +1 -1
  124. package/dist/primitives/collapsible.js +1 -1
  125. package/dist/primitives/combobox.js +1 -1
  126. package/dist/primitives/context-menu.js +1 -1
  127. package/dist/primitives/csp-provider.js +1 -1
  128. package/dist/primitives/dialog.js +1 -1
  129. package/dist/primitives/direction-provider.js +1 -1
  130. package/dist/primitives/drawer.js +1 -1
  131. package/dist/primitives/field.js +1 -1
  132. package/dist/primitives/fieldset.js +1 -1
  133. package/dist/primitives/form.js +1 -1
  134. package/dist/primitives/input.js +1 -1
  135. package/dist/primitives/menu.js +1 -1
  136. package/dist/primitives/menubar.js +1 -1
  137. package/dist/primitives/meter.js +1 -1
  138. package/dist/primitives/navigation-menu.js +1 -1
  139. package/dist/primitives/number-field.js +1 -1
  140. package/dist/primitives/otp-field.js +1 -1
  141. package/dist/primitives/popover.js +1 -1
  142. package/dist/primitives/preview-card.js +1 -1
  143. package/dist/primitives/progress.js +1 -1
  144. package/dist/primitives/radio-group.js +1 -1
  145. package/dist/primitives/radio.js +1 -1
  146. package/dist/primitives/scroll-area.js +1 -1
  147. package/dist/primitives/select.js +1 -1
  148. package/dist/primitives/separator.js +1 -1
  149. package/dist/primitives/slider.js +1 -1
  150. package/dist/primitives/switch.js +1 -1
  151. package/dist/primitives/tabs.js +1 -1
  152. package/dist/primitives/toast.js +1 -1
  153. package/dist/primitives/toggle-group.js +1 -1
  154. package/dist/primitives/toggle.js +1 -1
  155. package/dist/primitives/toolbar.js +1 -1
  156. package/dist/primitives/tooltip.js +1 -1
  157. package/dist/primitives.js +1 -1
  158. package/dist/scripts/theme-generator/config.d.ts.map +1 -1
  159. package/dist/scripts/theme-generator/config.js +13 -2
  160. package/dist/scripts/theme-generator/config.js.map +1 -1
  161. package/dist/src/components/button/button.d.ts +5 -5
  162. package/dist/src/components/button/button.d.ts.map +1 -1
  163. package/dist/src/components/chart/EChart.d.ts +12 -4
  164. package/dist/src/components/chart/EChart.d.ts.map +1 -1
  165. package/dist/src/components/chart/Legend.d.ts +11 -2
  166. package/dist/src/components/chart/Legend.d.ts.map +1 -1
  167. package/dist/src/components/chart/TimeseriesChart.d.ts +15 -1
  168. package/dist/src/components/chart/TimeseriesChart.d.ts.map +1 -1
  169. package/dist/src/components/radio/index.d.ts +1 -1
  170. package/dist/src/components/radio/index.d.ts.map +1 -1
  171. package/dist/src/components/radio/radio.d.ts +49 -10
  172. package/dist/src/components/radio/radio.d.ts.map +1 -1
  173. package/dist/src/components/radio/radio.type-spec.d.ts +12 -0
  174. package/dist/src/components/radio/radio.type-spec.d.ts.map +1 -0
  175. package/dist/src/components/toolbar/index.d.ts +2 -0
  176. package/dist/src/components/toolbar/index.d.ts.map +1 -0
  177. package/dist/src/components/toolbar/toolbar.d.ts +50 -0
  178. package/dist/src/components/toolbar/toolbar.d.ts.map +1 -0
  179. package/dist/src/index.d.ts +2 -1
  180. package/dist/src/index.d.ts.map +1 -1
  181. package/dist/styles/kumo-standalone.css +1 -1
  182. package/dist/styles/theme-kumo.css +11 -4
  183. package/package.json +5 -1
  184. package/scripts/component-registry/discovery.ts +16 -11
  185. package/scripts/component-registry/metadata.ts +30 -0
  186. package/scripts/theme-generator/config.ts +14 -2
  187. package/dist/chunks/SankeyChart-i1m7zv0lys3j0iq6.js +0 -775
  188. package/dist/chunks/SankeyChart-i1m7zv0lys3j0iq6.js.map +0 -1
  189. package/dist/chunks/button-mnrxu6dud2x5js5b.js +0 -210
  190. package/dist/chunks/button-mnrxu6dud2x5js5b.js.map +0 -1
  191. package/dist/chunks/radio-gpg6kmzonr2cayq1.js +0 -218
  192. package/dist/chunks/radio-gpg6kmzonr2cayq1.js.map +0 -1
  193. package/dist/chunks/sidebar-nbdw4rgvuabxp5nj.js.map +0 -1
@@ -1,11 +1,11 @@
1
1
  "use client";
2
2
  import { jsx as n, jsxs as H, Fragment as Le } from "react/jsx-runtime";
3
- import _, { forwardRef as x, useState as P, useCallback as w, useMemo as Z, createContext as U, useRef as B, useEffect as $, useContext as z, useId as De } from "react";
3
+ import _, { forwardRef as x, useState as P, useCallback as w, useMemo as Z, createContext as U, useRef as B, useEffect as $, useContext as O, useId as De } from "react";
4
4
  import { CaretRightIcon as Be } from "@phosphor-icons/react";
5
5
  import { c as o } from "./cn-ct4n7r74mh8y0f48.js";
6
6
  import { u as ee } from "./link-provider-mn2voeohon7cj9o4.js";
7
- import { a as ze, T as Oe } from "./tooltip-ken77ixya0qpidie.js";
8
- import { bz as Fe, bA as Pe, bB as Ve, bC as We, bD as He } from "./vendor-base-ui-knphx7dts1vm1x37.js";
7
+ import { a as Oe, T as ze } from "./tooltip-eqnhjdbvwapy8gj4.js";
8
+ import { bC as Fe, bD as Pe, bE as Ve, bF as We, bG as He } from "./vendor-base-ui-f9z44m829vvptrg0.js";
9
9
  const st = {
10
10
  variant: {
11
11
  sidebar: {
@@ -67,7 +67,7 @@ function je(t = $e) {
67
67
  }
68
68
  const te = U(null);
69
69
  function V() {
70
- const t = z(te);
70
+ const t = O(te);
71
71
  if (!t)
72
72
  throw new Error("useSidebar must be used within a Sidebar.Provider");
73
73
  return t;
@@ -90,10 +90,10 @@ function ae({
90
90
  animationDuration: f = Ue,
91
91
  mobileBreakpoint: S,
92
92
  children: k,
93
- className: A,
93
+ className: R,
94
94
  style: h
95
95
  }) {
96
- const m = je(S), [y, L] = P(!1), [R, T] = P(u), [N, M] = P(!1), [O, C] = P(!1), F = m && a !== void 0 ? a : y, K = w(
96
+ const m = je(S), [y, L] = P(!1), [A, T] = P(u), [N, M] = P(!1), [z, C] = P(!1), F = m && a !== void 0 ? a : y, K = w(
97
97
  (E) => {
98
98
  L(E), m && a !== void 0 && e?.(E);
99
99
  },
@@ -116,7 +116,7 @@ function ae({
116
116
  v && !b && !m && C(!0);
117
117
  }, [v, b, m]), Ee = w(() => {
118
118
  C(!1);
119
- }, []), Y = O ? "peeking" : b ? "expanded" : "collapsed", Te = c ? `${R}px` : Ke, _e = Z(
119
+ }, []), Y = z ? "peeking" : b ? "expanded" : "collapsed", Te = c ? `${A}px` : Ke, _e = Z(
120
120
  () => ({
121
121
  state: Y,
122
122
  open: b,
@@ -128,21 +128,21 @@ function ae({
128
128
  variant: i,
129
129
  side: s,
130
130
  collapsible: g,
131
- width: R,
131
+ width: A,
132
132
  resizable: c,
133
133
  minWidth: l,
134
134
  maxWidth: d,
135
135
  isResizing: N,
136
136
  setIsResizing: M,
137
137
  setWidth: Q,
138
- isPeeking: O,
138
+ isPeeking: z,
139
139
  peekable: v,
140
140
  startPeek: I,
141
141
  stopPeek: Ee,
142
142
  contained: p,
143
143
  animationDuration: f
144
144
  }),
145
- [Y, b, F, m, R, N, O]
145
+ [Y, b, F, m, A, N, z]
146
146
  );
147
147
  return /* @__PURE__ */ n(te.Provider, { value: _e, children: /* @__PURE__ */ n(
148
148
  "div",
@@ -162,7 +162,7 @@ function ae({
162
162
  !p && !m && "min-h-svh",
163
163
  "has-data-[variant=inset]:bg-kumo-recessed",
164
164
  N && "select-none",
165
- A
165
+ R
166
166
  ),
167
167
  children: k
168
168
  }
@@ -183,7 +183,7 @@ const ie = x(
183
183
  isResizing: f,
184
184
  resizable: S,
185
185
  width: k,
186
- isPeeking: A,
186
+ isPeeking: R,
187
187
  startPeek: h,
188
188
  stopPeek: m,
189
189
  contained: y
@@ -192,7 +192,7 @@ const ie = x(
192
192
  b && (l ? b.removeAttribute("inert") : b.setAttribute("inert", ""));
193
193
  },
194
194
  [l]
195
- ), R = w(
195
+ ), A = w(
196
196
  (b) => {
197
197
  L(b), typeof s == "function" ? s(b) : s && (s.current = b);
198
198
  },
@@ -215,7 +215,7 @@ const ie = x(
215
215
  ) ?? N.current)?.focus();
216
216
  })) : M.current && T.current instanceof HTMLElement && (T.current.focus(), M.current = !1, T.current = null));
217
217
  }, [u, l]);
218
- const O = w(
218
+ const z = w(
219
219
  (b) => {
220
220
  b.currentTarget.contains(b.relatedTarget) || m();
221
221
  },
@@ -267,7 +267,7 @@ const ie = x(
267
267
  "nav",
268
268
  {
269
269
  ref: (b) => {
270
- R(b), N.current = b;
270
+ A(b), N.current = b;
271
271
  },
272
272
  tabIndex: -1,
273
273
  "aria-label": "Navigation",
@@ -294,7 +294,7 @@ const ie = x(
294
294
  }
295
295
  )
296
296
  ] });
297
- const C = v === "icon" ? "var(--sidebar-width-icon)" : "0px", F = S ? `${k}px` : "var(--sidebar-width)", K = c ? F : C, q = c || A ? F : C, j = p === "sidebar" ? r === "left" ? "border-r border-kumo-line" : "border-l border-kumo-line" : p === "floating" ? "border border-kumo-line" : "";
297
+ const C = v === "icon" ? "var(--sidebar-width-icon)" : "0px", F = S ? `${k}px` : "var(--sidebar-width)", K = c ? F : C, q = c || R ? F : C, j = p === "sidebar" ? r === "left" ? "border-r border-kumo-line" : "border-l border-kumo-line" : p === "floating" ? "border border-kumo-line" : "";
298
298
  return /* @__PURE__ */ n(
299
299
  "aside",
300
300
  {
@@ -316,7 +316,7 @@ const ie = x(
316
316
  t
317
317
  ),
318
318
  ...i,
319
- children: /* @__PURE__ */ n(ze, { children: (() => {
319
+ children: /* @__PURE__ */ n(Oe, { children: (() => {
320
320
  const b = _.Children.toArray(e), D = b.filter(
321
321
  (I) => _.isValidElement(I) && I.type?.displayName === "Sidebar.Footer"
322
322
  ), W = b.filter(
@@ -353,7 +353,7 @@ const ie = x(
353
353
  onMouseEnter: h,
354
354
  onMouseLeave: m,
355
355
  onFocus: h,
356
- onBlur: O,
356
+ onBlur: z,
357
357
  children: W
358
358
  }
359
359
  ),
@@ -396,7 +396,7 @@ const re = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ H(
396
396
  className: o(
397
397
  "h-full px-[11px] py-3 group-not-data-[state=collapsed]/sidebar:px-3.5",
398
398
  "transition-[padding] duration-(--sidebar-animation-duration)",
399
- "group-data-[state=collapsed]/sidebar:overflow-x-hidden!",
399
+ "overflow-x-hidden!",
400
400
  // Scroll fade via CSS mask driven by Base UI overflow CSS variables
401
401
  "[mask-image:linear-gradient(to_bottom,transparent_0,black_min(24px,var(--scroll-area-overflow-y-start,24px)),black_calc(100%-min(24px,var(--scroll-area-overflow-y-end,24px))),transparent_100%)]"
402
402
  ),
@@ -477,7 +477,7 @@ const de = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ n(
477
477
  "div",
478
478
  {
479
479
  className: o(
480
- "truncate px-3 mt-6 mb-2 text-sm font-medium text-kumo-subtle",
480
+ "truncate px-3 mt-4 mb-2 text-sm font-medium text-kumo-subtle",
481
481
  // First group: less top margin
482
482
  "[[data-sidebar=group]:first-child_&]:mt-2"
483
483
  ),
@@ -526,7 +526,7 @@ const me = x(
526
526
  children: u,
527
527
  ...l
528
528
  }, d) => {
529
- const { state: r, peekable: p } = V(), v = ee(), f = z(le), S = a ? _.isValidElement(a) ? a : /* @__PURE__ */ n(
529
+ const { state: r, peekable: p } = V(), v = ee(), f = O(le), S = a ? _.isValidElement(a) ? a : /* @__PURE__ */ n(
530
530
  a,
531
531
  {
532
532
  className: o(
@@ -558,7 +558,7 @@ const me = x(
558
558
  )
559
559
  ]
560
560
  }
561
- ), A = o(
561
+ ), R = o(
562
562
  // Layout
563
563
  "group/menu-button relative flex w-full min-w-0 items-center gap-2.5 rounded-lg outline-none cursor-pointer",
564
564
  "before:absolute before:inset-x-0 before:-inset-y-px",
@@ -581,7 +581,7 @@ const me = x(
581
581
  v,
582
582
  {
583
583
  ref: d,
584
- className: o(A, "no-underline!"),
584
+ className: o(R, "no-underline!"),
585
585
  href: s,
586
586
  to: s,
587
587
  target: g,
@@ -598,7 +598,7 @@ const me = x(
598
598
  {
599
599
  ref: d,
600
600
  type: "button",
601
- className: A,
601
+ className: R,
602
602
  "data-active": e || void 0,
603
603
  "data-sidebar": "menu-button",
604
604
  "data-kumo-component": "Sidebar",
@@ -608,7 +608,7 @@ const me = x(
608
608
  children: k
609
609
  }
610
610
  ), c && (h = /* @__PURE__ */ n(
611
- Oe,
611
+ ze,
612
612
  {
613
613
  content: r === "collapsed" && !p ? c : null,
614
614
  side: "right",
@@ -670,7 +670,7 @@ const ge = x(({ className: t, children: a, ...e }, i) => /* @__PURE__ */ n(ce.Pr
670
670
  ) }));
671
671
  ge.displayName = "Sidebar.MenuSubItem";
672
672
  const he = x(({ className: t, active: a = !1, href: e, children: i, ...s }, g) => {
673
- const c = ee(), u = z(ce), l = o(
673
+ const c = ee(), u = O(ce), l = o(
674
674
  "group/menu-button relative flex w-full min-w-0 items-center gap-2 rounded-lg min-h-8.5 px-3 py-0 text-sm font-medium outline-none cursor-pointer",
675
675
  "before:absolute before:inset-x-0 before:-inset-y-px",
676
676
  "text-kumo-default transition-[color] duration-150",
@@ -823,16 +823,16 @@ const ye = x(({ className: t, ...a }, e) => {
823
823
  maxWidth: p
824
824
  } = V(), v = B(0), f = B(0), S = B(!1);
825
825
  if (!s) return null;
826
- const k = 10, A = (m) => {
826
+ const k = 10, R = (m) => {
827
827
  m.preventDefault(), g(!0), v.current = m.clientX, S.current = !l;
828
828
  const L = m.currentTarget.closest(
829
829
  "[data-sidebar-wrapper]"
830
830
  )?.querySelector("[data-sidebar='sidebar']");
831
831
  f.current = L?.getBoundingClientRect().width ?? 0;
832
- const R = () => {
832
+ const A = () => {
833
833
  g(!1), document.removeEventListener("pointermove", T), document.removeEventListener("pointerup", N);
834
834
  }, T = (M) => {
835
- const O = i === "left" ? M.clientX - v.current : v.current - M.clientX, C = f.current + O;
835
+ const z = i === "left" ? M.clientX - v.current : v.current - M.clientX, C = f.current + z;
836
836
  if (S.current) {
837
837
  C >= d && (S.current = !1, u(!0), c(C));
838
838
  return;
@@ -843,7 +843,7 @@ const ye = x(({ className: t, ...a }, e) => {
843
843
  }
844
844
  c(C);
845
845
  }, N = () => {
846
- R();
846
+ A();
847
847
  };
848
848
  document.addEventListener("pointermove", T), document.addEventListener("pointerup", N);
849
849
  }, h = (m) => {
@@ -852,8 +852,8 @@ const ye = x(({ className: t, ...a }, e) => {
852
852
  m.preventDefault(), l ? c(Math.min(r + k, p)) : (u(!0), c(d));
853
853
  else if (m.key === L) {
854
854
  m.preventDefault();
855
- const R = r - k;
856
- R < d ? u(!1) : c(R);
855
+ const A = r - k;
856
+ A < d ? u(!1) : c(A);
857
857
  } else m.key === "Home" ? (m.preventDefault(), u(!1)) : m.key === "End" && (m.preventDefault(), u(!0), c(p));
858
858
  };
859
859
  return /* @__PURE__ */ n(
@@ -875,7 +875,7 @@ const ye = x(({ className: t, ...a }, e) => {
875
875
  i === "right" && "left-0 after:left-0",
876
876
  t
877
877
  ),
878
- onPointerDown: A,
878
+ onPointerDown: R,
879
879
  onKeyDown: h,
880
880
  ...a
881
881
  }
@@ -916,7 +916,7 @@ const G = U({
916
916
  !r && h.target.matches(":focus-visible") && (v.current = !0, d(!0), e?.(!0));
917
917
  },
918
918
  [r, e]
919
- ), A = w(
919
+ ), R = w(
920
920
  (h) => {
921
921
  v.current && !h.currentTarget.contains(h.relatedTarget) && !h.currentTarget.querySelector("[data-active]") && (v.current = !1, d(!1), e?.(!1));
922
922
  },
@@ -929,7 +929,7 @@ const G = U({
929
929
  "data-open": r || void 0,
930
930
  className: o("min-w-0", s),
931
931
  onFocus: k,
932
- onBlur: A,
932
+ onBlur: R,
933
933
  ...c,
934
934
  children: g
935
935
  }
@@ -938,7 +938,7 @@ const G = U({
938
938
  );
939
939
  ke.displayName = "Sidebar.Collapsible";
940
940
  function Ne({ render: t }) {
941
- const { contentId: a, isOpen: e, toggle: i } = z(G);
941
+ const { contentId: a, isOpen: e, toggle: i } = O(G);
942
942
  return _.cloneElement(t, {
943
943
  "aria-expanded": e,
944
944
  "aria-controls": a,
@@ -951,9 +951,9 @@ function Ne({ render: t }) {
951
951
  }
952
952
  Ne.displayName = "Sidebar.CollapsibleTrigger";
953
953
  const Me = x(({ className: t, children: a, ...e }, i) => {
954
- const { contentId: s, isOpen: g } = z(
954
+ const { contentId: s, isOpen: g } = O(
955
955
  G
956
- ), { state: c, animationDuration: u } = V(), { autoScrollOnOpen: l } = z(G), d = B(null), r = g && c !== "collapsed";
956
+ ), { state: c, animationDuration: u } = V(), { autoScrollOnOpen: l } = O(G), d = B(null), r = g && c !== "collapsed";
957
957
  $(() => {
958
958
  if (!r || !l) return;
959
959
  const f = window.setTimeout(() => {
@@ -999,7 +999,7 @@ const Me = x(({ className: t, children: a, ...e }, i) => {
999
999
  });
1000
1000
  Me.displayName = "Sidebar.CollapsibleContent";
1001
1001
  function Ce({ className: t }) {
1002
- const { isOpen: a, isCollapsible: e } = z(G);
1002
+ const { isOpen: a, isCollapsible: e } = O(G);
1003
1003
  return /* @__PURE__ */ n(
1004
1004
  Be,
1005
1005
  {
@@ -1016,7 +1016,7 @@ function Ce({ className: t }) {
1016
1016
  );
1017
1017
  }
1018
1018
  Ce.displayName = "Sidebar.MenuChevron";
1019
- const Ie = U(""), Ae = x(
1019
+ const Ie = U(""), Re = x(
1020
1020
  ({
1021
1021
  activeKey: t,
1022
1022
  direction: a = "left",
@@ -1052,10 +1052,10 @@ const Ie = U(""), Ae = x(
1052
1052
  ) });
1053
1053
  }
1054
1054
  );
1055
- Ae.displayName = "Sidebar.SlidingViews";
1056
- const Re = x(
1055
+ Re.displayName = "Sidebar.SlidingViews";
1056
+ const Ae = x(
1057
1057
  ({ value: t, className: a, children: e, ...i }, s) => {
1058
- const c = z(Ie) === t, u = w(
1058
+ const c = O(Ie) === t, u = w(
1059
1059
  (d) => {
1060
1060
  d && (c ? d.removeAttribute("inert") : d.setAttribute("inert", ""));
1061
1061
  },
@@ -1084,7 +1084,7 @@ const Re = x(
1084
1084
  );
1085
1085
  }
1086
1086
  );
1087
- Re.displayName = "Sidebar.SlidingView";
1087
+ Ae.displayName = "Sidebar.SlidingView";
1088
1088
  const dt = Object.assign(ie, {
1089
1089
  Provider: ae,
1090
1090
  Header: ne,
@@ -1107,8 +1107,8 @@ const dt = Object.assign(ie, {
1107
1107
  Collapsible: ke,
1108
1108
  CollapsibleTrigger: Ne,
1109
1109
  CollapsibleContent: Me,
1110
- SlidingViews: Ae,
1111
- SlidingView: Re
1110
+ SlidingViews: Re,
1111
+ SlidingView: Ae
1112
1112
  });
1113
1113
  export {
1114
1114
  ot as A,
@@ -1136,9 +1136,9 @@ export {
1136
1136
  ke as t,
1137
1137
  Ne as u,
1138
1138
  Me as v,
1139
- Ae as w,
1140
- Re as x,
1139
+ Re as w,
1140
+ Ae as x,
1141
1141
  V as y,
1142
1142
  J as z
1143
1143
  };
1144
- //# sourceMappingURL=sidebar-nbdw4rgvuabxp5nj.js.map
1144
+ //# sourceMappingURL=sidebar-ior8rnhsd7gy5am5.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar-ior8rnhsd7gy5am5.js","sources":["../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import React, {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type ReactNode,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport { ScrollArea as ScrollAreaBase } from \"@base-ui/react/scroll-area\";\n\nimport { CaretRightIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\n\n// ============================================================================\n// Variants (required by Kumo convention)\n// ============================================================================\n\n/** Sidebar variant definitions mapping layout, collapse, and side options. */\nexport const KUMO_SIDEBAR_VARIANTS = {\n variant: {\n sidebar: {\n classes: \"\",\n description: \"Standard sidebar with border separator\",\n },\n floating: {\n classes: \"\",\n description: \"Floating sidebar with shadow and rounded corners\",\n },\n inset: {\n classes: \"\",\n description: \"Inset sidebar within the content area\",\n },\n },\n collapsible: {\n icon: {\n classes: \"\",\n description: \"Collapses to show icons only\",\n },\n offcanvas: {\n classes: \"\",\n description: \"Slides off screen when collapsed\",\n },\n none: {\n classes: \"\",\n description: \"Cannot be collapsed\",\n },\n },\n side: {\n left: {\n classes: \"\",\n description: \"Left-aligned sidebar\",\n },\n right: {\n classes: \"\",\n description: \"Right-aligned sidebar\",\n },\n },\n} as const;\n\nexport const KUMO_SIDEBAR_DEFAULT_VARIANTS = {\n variant: \"sidebar\",\n collapsible: \"icon\",\n side: \"left\",\n} as const;\n\nexport const KUMO_SIDEBAR_STYLING = {\n width: {\n expanded: \"16.25rem\",\n icon: \"57px\",\n },\n mobile: {\n breakpoint: 768,\n },\n} as const;\n\nexport type SidebarSide = \"left\" | \"right\";\nexport type SidebarVariant = \"sidebar\" | \"floating\" | \"inset\";\nexport type SidebarCollapsible = \"icon\" | \"offcanvas\" | \"none\";\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst SIDEBAR_WIDTH = \"16.25rem\";\nconst SIDEBAR_WIDTH_ICON = \"57px\";\nconst SIDEBAR_EASING = \"cubic-bezier(0.77, 0, 0.175, 1)\";\nconst SIDEBAR_ANIMATION_DURATION_MS = 250;\nconst MOBILE_BREAKPOINT = 768;\nconst FOCUSABLE_SELECTOR =\n 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ============================================================================\n// Mobile detection hook\n// ============================================================================\n\nfunction useIsMobile(breakpoint: number = MOBILE_BREAKPOINT) {\n const [isMobile, setIsMobile] = useState(() => {\n if (typeof window === \"undefined\") return false;\n return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;\n });\n\n useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);\n const onChange = () => setIsMobile(mql.matches);\n mql.addEventListener(\"change\", onChange);\n setIsMobile(mql.matches);\n return () => mql.removeEventListener(\"change\", onChange);\n }, [breakpoint]);\n\n return isMobile;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nexport type SidebarState = \"expanded\" | \"collapsed\" | \"peeking\";\n\nexport interface SidebarContextValue {\n state: SidebarState;\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n variant: \"sidebar\" | \"floating\" | \"inset\";\n side: \"left\" | \"right\";\n collapsible: \"icon\" | \"offcanvas\" | \"none\";\n width: number;\n resizable: boolean;\n minWidth: number;\n maxWidth: number;\n isResizing: boolean;\n setIsResizing: (resizing: boolean) => void;\n setWidth: (width: number) => void;\n isPeeking: boolean;\n peekable: boolean;\n startPeek: () => void;\n stopPeek: () => void;\n contained: boolean;\n animationDuration: number;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Hook to access sidebar state and actions from any descendant component.\n *\n * @example\n * ```tsx\n * const { state, open, toggleSidebar, isMobile } = useSidebar();\n * ```\n *\n * @throws Error if used outside a `Sidebar.Provider`.\n */\nexport function useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error(\"useSidebar must be used within a Sidebar.Provider\");\n }\n return context;\n}\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport interface SidebarProviderProps {\n /** Initial open state when uncontrolled. @default true */\n defaultOpen?: boolean;\n /** Controlled open state. */\n open?: boolean;\n /** Callback when open state changes (controlled mode). */\n onOpenChange?: (open: boolean) => void;\n /** Sidebar layout variant. @default \"sidebar\" */\n variant?: SidebarVariant;\n /** Which side the sidebar is on. @default \"left\" */\n side?: SidebarSide;\n collapsible?: \"icon\" | \"offcanvas\" | \"none\";\n /** Enable drag-to-resize on the sidebar edge. @default false */\n resizable?: boolean;\n /** Initial width in pixels when resizable. @default 256 */\n defaultWidth?: number;\n /** Minimum width in pixels when resizing. @default 200 */\n minWidth?: number;\n /** Maximum width in pixels when resizing. @default 480 */\n maxWidth?: number;\n /** Callback when width changes during resize. */\n onWidthChange?: (width: number) => void;\n /**\n * When true, the collapsed sidebar uses absolute positioning instead of fixed,\n * keeping it scoped inside a bounded parent. Useful for demos and embedded sidebars.\n * @default false\n */\n contained?: boolean;\n /**\n * When true, hovering or focusing the collapsed sidebar temporarily expands it.\n * The `state` will be `\"peeking\"` during the peek. Moving away collapses it back.\n * @default false\n */\n peekable?: boolean;\n /**\n * Duration of sidebar expand/collapse animation in milliseconds.\n * @default 250\n */\n animationDuration?: number;\n /**\n * Viewport width (in px) below which the sidebar renders as a mobile dialog\n * sheet instead of the desktop aside rail.\n * @default 768\n */\n mobileBreakpoint?: number;\n /** Content — typically `<Sidebar>` + main content. */\n children: ReactNode;\n /** Additional CSS classes for the wrapper div. */\n className?: string;\n /** Inline styles for the wrapper div. */\n style?: CSSProperties;\n}\n\n/**\n * Sidebar context provider. Manages expand/collapse state and mobile detection.\n * Renders a flex wrapper div with CSS custom properties for sidebar width.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n * <Sidebar>{...}</Sidebar>\n * <main className=\"flex-1\">{...}</main>\n * </Sidebar.Provider>\n * ```\n */\nconst DEFAULT_WIDTH_PX = 256;\nconst MIN_WIDTH_PX = 200;\nconst MAX_WIDTH_PX = 480;\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n variant = KUMO_SIDEBAR_DEFAULT_VARIANTS.variant,\n side = KUMO_SIDEBAR_DEFAULT_VARIANTS.side,\n collapsible = KUMO_SIDEBAR_DEFAULT_VARIANTS.collapsible,\n resizable = false,\n defaultWidth = DEFAULT_WIDTH_PX,\n minWidth = MIN_WIDTH_PX,\n maxWidth = MAX_WIDTH_PX,\n onWidthChange,\n contained = false,\n peekable = false,\n animationDuration = SIDEBAR_ANIMATION_DURATION_MS,\n mobileBreakpoint,\n children,\n className,\n style,\n}: SidebarProviderProps) {\n const isMobile = useIsMobile(mobileBreakpoint);\n const [_openMobile, _setOpenMobile] = useState(false);\n const [width, setWidthState] = useState(defaultWidth);\n const [isResizing, setIsResizing] = useState(false);\n const [isPeeking, setIsPeeking] = useState(false);\n\n // When controlled (`openProp` provided), use it directly for mobile too.\n // When uncontrolled, use internal `_openMobile` state.\n const openMobile =\n isMobile && openProp !== undefined ? openProp : _openMobile;\n\n const setOpenMobile = useCallback(\n (next: boolean) => {\n _setOpenMobile(next);\n // In controlled mode on mobile, notify the consumer\n if (isMobile && openProp !== undefined) {\n setOpenProp?.(next);\n }\n },\n [isMobile, openProp, setOpenProp],\n );\n\n const setWidth = useCallback(\n (newWidth: number) => {\n const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));\n setWidthState(clamped);\n onWidthChange?.(clamped);\n },\n [minWidth, maxWidth, onWidthChange],\n );\n\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((prev: boolean) => boolean)) => {\n const next = typeof value === \"function\" ? value(open) : value;\n setOpenProp?.(next);\n _setOpen(next);\n },\n [setOpenProp, open],\n );\n\n const toggleSidebar = useCallback(() => {\n if (isMobile) {\n setOpenMobile(!openMobile);\n } else {\n setIsPeeking(false);\n setOpen((prev: boolean) => !prev);\n }\n }, [isMobile, openMobile, setOpenMobile, setOpen]);\n\n const startPeek = useCallback(() => {\n if (peekable && !open && !isMobile) {\n setIsPeeking(true);\n }\n }, [peekable, open, isMobile]);\n\n const stopPeek = useCallback(() => {\n setIsPeeking(false);\n }, []);\n\n const state: SidebarState = isPeeking\n ? \"peeking\"\n : open\n ? \"expanded\"\n : \"collapsed\";\n\n const sidebarWidthValue = resizable ? `${width}px` : SIDEBAR_WIDTH;\n\n // eslint-disable-next-line react-hooks/exhaustive-deps -- all values are\n // either stable (props, setters) or derived from state that triggers re-render\n const contextValue = useMemo<SidebarContextValue>(\n () => ({\n state,\n open,\n setOpen,\n openMobile,\n setOpenMobile,\n isMobile,\n toggleSidebar,\n variant,\n side,\n collapsible,\n width,\n resizable,\n minWidth,\n maxWidth,\n isResizing,\n setIsResizing,\n setWidth,\n isPeeking,\n peekable,\n startPeek,\n stopPeek,\n contained,\n animationDuration,\n }),\n [state, open, openMobile, isMobile, width, isResizing, isPeeking],\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n data-sidebar-wrapper=\"\"\n data-state={state}\n data-side={side}\n style={\n {\n \"--sidebar-width\": sidebarWidthValue,\n \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n \"--sidebar-animation-duration\": `${animationDuration}ms`,\n \"--sidebar-easing\": SIDEBAR_EASING,\n ...style,\n } as CSSProperties\n }\n className={cn(\n \"group/sidebar-wrapper relative isolate flex w-full [--sidebar-bg:var(--color-kumo-base)] [--sidebar-active-bg:var(--color-kumo-tint)]\",\n !contained && !isMobile && \"min-h-svh\",\n \"has-data-[variant=inset]:bg-kumo-recessed\",\n isResizing && \"select-none\",\n className,\n )}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nSidebarProvider.displayName = \"Sidebar.Provider\";\n\n// ============================================================================\n// Sidebar Root\n// ============================================================================\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n /** Additional CSS classes for the sidebar element. */\n className?: string;\n /** Additional CSS classes for the inner content container. */\n contentClassName?: string;\n /** Sidebar content — Header, Content, Footer, etc. */\n children: ReactNode;\n}\n\n/**\n * Main sidebar container. Renders as `<aside>` on desktop, modal sidebar sheet on mobile.\n * Must be used inside `Sidebar.Provider`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider>\n * <Sidebar>\n * <Sidebar.Header>...</Sidebar.Header>\n * <Sidebar.Content>...</Sidebar.Content>\n * <Sidebar.Footer>...</Sidebar.Footer>\n * </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nconst SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(\n ({ className, contentClassName, children, ...props }, ref) => {\n const {\n state,\n open,\n isMobile,\n openMobile,\n setOpenMobile,\n side,\n variant,\n collapsible,\n isResizing,\n resizable,\n width,\n isPeeking,\n startPeek,\n stopPeek,\n contained,\n } = useSidebar();\n\n // --- Mobile a11y hooks (must be before early returns) ---\n\n // Imperatively set inert on the mobile sidebar — React 18 doesn't\n // reliably forward the inert attribute as a JSX prop on initial mount.\n const mobileAsideRef = useCallback(\n (node: HTMLElement | null) => {\n if (node) {\n if (!openMobile) {\n node.setAttribute(\"inert\", \"\");\n } else {\n node.removeAttribute(\"inert\");\n }\n }\n },\n [openMobile],\n );\n\n // Merge forwarded ref with inert ref for the mobile aside\n const mergedMobileRef = useCallback(\n (node: HTMLElement | null) => {\n mobileAsideRef(node);\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLElement | null>).current = node;\n }\n },\n [ref, mobileAsideRef],\n );\n\n // Refs for mobile focus management (declared before effects that use them)\n const triggerRef = useRef<Element | null>(null);\n const mobileNodeRef = useRef<HTMLElement | null>(null);\n const shouldRestoreFocusRef = useRef(false);\n\n // Escape key and focus-leave close the mobile sidebar\n useEffect(() => {\n if (!isMobile || !openMobile) return;\n const node = mobileNodeRef.current;\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n shouldRestoreFocusRef.current = true;\n setOpenMobile(false);\n }\n };\n const handleFocusOut = (e: FocusEvent) => {\n if (node && !node.contains(e.relatedTarget as Node)) {\n shouldRestoreFocusRef.current = false;\n setOpenMobile(false);\n }\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n node?.addEventListener(\"focusout\", handleFocusOut);\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n node?.removeEventListener(\"focusout\", handleFocusOut);\n };\n }, [isMobile, openMobile, setOpenMobile]);\n\n // When the mobile sidebar opens, move focus into it;\n // when it closes, return focus to the element that opened it.\n useEffect(() => {\n if (!isMobile) return;\n if (openMobile) {\n triggerRef.current = document.activeElement;\n shouldRestoreFocusRef.current = false;\n // Wait a frame so the aside is no longer inert before focusing\n requestAnimationFrame(() => {\n const firstFocusable = mobileNodeRef.current?.querySelector<HTMLElement>(\n FOCUSABLE_SELECTOR,\n );\n (firstFocusable ?? mobileNodeRef.current)?.focus();\n });\n } else if (\n shouldRestoreFocusRef.current &&\n triggerRef.current instanceof HTMLElement\n ) {\n triggerRef.current.focus();\n shouldRestoreFocusRef.current = false;\n triggerRef.current = null;\n }\n }, [isMobile, openMobile]);\n\n const handlePeekBlur = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n stopPeek();\n }\n },\n [stopPeek],\n );\n\n if (collapsible === \"none\") {\n return (\n <aside\n ref={ref}\n data-state=\"expanded\"\n data-side={side}\n data-variant={variant}\n data-sidebar=\"sidebar\"\n style={{\n width: \"var(--sidebar-width)\",\n minWidth: \"var(--sidebar-width)\",\n maxWidth: \"var(--sidebar-width)\",\n }}\n className={cn(\n \"relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-(--sidebar-bg) text-kumo-default\",\n variant === \"sidebar\" &&\n (side === \"left\"\n ? \"border-r border-kumo-line\"\n : \"border-l border-kumo-line\"),\n variant === \"floating\" &&\n \"m-2 rounded-lg border border-kumo-line shadow-lg\",\n className,\n )}\n {...props}\n >\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <>\n {/* Backdrop — click to close */}\n <div\n data-sidebar-backdrop=\"\"\n className={cn(\n contained ? \"absolute inset-0 z-40 bg-kumo-recessed\" : \"fixed inset-0 z-40 bg-kumo-recessed\",\n \"transition-opacity duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n openMobile ? \"opacity-80\" : \"opacity-0 pointer-events-none\",\n )}\n onClick={() => {\n shouldRestoreFocusRef.current = true;\n setOpenMobile(false);\n }}\n aria-hidden=\"true\"\n />\n\n {/* Mobile sidebar — navigation landmark with focus management */}\n <nav\n ref={(node) => {\n mergedMobileRef(node);\n mobileNodeRef.current = node;\n }}\n tabIndex={-1}\n aria-label=\"Navigation\"\n aria-hidden={!openMobile}\n data-state={openMobile ? \"expanded\" : \"collapsed\"}\n data-side={side}\n data-variant={variant}\n data-collapsible={collapsible}\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className={cn(\n contained\n ? \"group/sidebar absolute inset-y-0 z-50 flex w-(--sidebar-width) flex-col overflow-hidden\"\n : \"group/sidebar fixed inset-y-0 z-50 flex w-(--sidebar-width) flex-col overflow-hidden\",\n \"border-r border-kumo-line bg-(--sidebar-bg) text-kumo-default\",\n \"transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n side === \"left\" && \"left-0\",\n side === \"right\" && \"right-0\",\n side === \"left\" &&\n (openMobile ? \"translate-x-0\" : \"-translate-x-full\"),\n side === \"right\" &&\n (openMobile ? \"translate-x-0\" : \"translate-x-full\"),\n className,\n )}\n {...props}\n >\n {children}\n </nav>\n </>\n );\n }\n\n // --- Desktop two-layer architecture ---\n // Rail: the <aside> whose width drives layout (stays collapsed during peek).\n // Content container: holds actual sidebar content, can overlay when peeking.\n\n // Rail width: based on open state only (not peeking)\n const collapsedWidth =\n collapsible === \"icon\" ? \"var(--sidebar-width-icon)\" : \"0px\";\n const expandedWidth = resizable ? `${width}px` : \"var(--sidebar-width)\";\n const railWidth = open ? expandedWidth : collapsedWidth;\n\n // Content container width: expanded during peek\n const contentExpanded = open || isPeeking;\n const contentWidth = contentExpanded ? expandedWidth : collapsedWidth;\n\n const borderClasses =\n variant === \"sidebar\"\n ? side === \"left\"\n ? \"border-r border-kumo-line\"\n : \"border-l border-kumo-line\"\n : variant === \"floating\"\n ? \"border border-kumo-line\"\n : \"\";\n\n return (\n <aside\n ref={ref}\n data-state={state}\n data-side={side}\n data-variant={variant}\n data-collapsible={collapsible}\n data-sidebar=\"sidebar\"\n style={{ width: railWidth }}\n className={cn(\n \"group/sidebar relative h-full shrink-0 grow-0\",\n \"overflow-visible\", // allow content container to overlay when peeking\n \"transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n isResizing && \"transition-none!\",\n variant === \"floating\" && \"m-2 rounded-lg shadow-lg\",\n className,\n )}\n {...props}\n >\n <TooltipProvider>\n {(() => {\n // Separate footer children from the rest so hovering the footer\n // doesn't trigger peeking. Footer is rendered outside the peek zone.\n const childArray = React.Children.toArray(children);\n const footerChildren = childArray.filter(\n (child) =>\n React.isValidElement(child) &&\n (child.type as { displayName?: string })?.displayName ===\n \"Sidebar.Footer\",\n );\n const nonFooterChildren = childArray.filter(\n (child) =>\n !React.isValidElement(child) ||\n (child.type as { displayName?: string })?.displayName !==\n \"Sidebar.Footer\",\n );\n\n return (\n <div\n data-sidebar=\"content-container\"\n style={{ width: contentWidth }}\n className={cn(\n \"flex h-full flex-col\",\n \"min-w-0 overflow-hidden whitespace-nowrap\",\n \"bg-(--sidebar-bg) text-kumo-default\",\n borderClasses,\n \"transition-[width] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n isResizing && \"transition-none!\",\n !open &&\n cn(\n contained ? \"absolute\" : \"fixed\",\n \"inset-y-0 z-40\",\n side === \"left\" && \"left-0\",\n side === \"right\" && \"right-0\",\n ),\n open && \"relative\",\n contentClassName,\n )}\n >\n {/* Peek zone — header + content (not footer) */}\n <div\n data-sidebar=\"peek-zone\"\n className=\"flex flex-1 flex-col min-h-0\"\n onMouseEnter={startPeek}\n onMouseLeave={stopPeek}\n onFocus={startPeek}\n onBlur={handlePeekBlur}\n >\n {nonFooterChildren}\n </div>\n {/* Footer — outside peek zone */}\n {footerChildren}\n </div>\n );\n })()}\n </TooltipProvider>\n </aside>\n );\n },\n);\n\nSidebarRoot.displayName = \"Sidebar\";\n\n// ============================================================================\n// Sidebar Header\n// ============================================================================\n\n/**\n * Top section of the sidebar. Typically contains a logo, title, and action button.\n *\n * @example\n * ```tsx\n * <Sidebar.Header>\n * <CloudflareLogo />\n * <span>Design Engineering</span>\n * <Button shape=\"square\" icon={CaretUpDownIcon} aria-label=\"Switch\" />\n * </Sidebar.Header>\n * ```\n */\nconst SidebarHeader = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"header\"\n className={cn(\n \"flex h-[58px] shrink-0 items-center gap-1 border-b border-kumo-line\",\n \"px-3 overflow-hidden\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarHeader.displayName = \"Sidebar.Header\";\n\n// ============================================================================\n// Sidebar Content\n// ============================================================================\n\n/**\n * Scrollable middle section of the sidebar. Contains nav groups and menus.\n *\n * @example\n * ```tsx\n * <Sidebar.Content>\n * <Sidebar.Group>...</Sidebar.Group>\n * </Sidebar.Content>\n * ```\n */\nconst SidebarContent = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => (\n <ScrollAreaBase.Root\n ref={ref}\n data-sidebar=\"content\"\n className={cn(\"relative min-w-0 flex-1 overflow-hidden\", className)}\n {...props}\n >\n <ScrollAreaBase.Viewport\n tabIndex={-1}\n className={cn(\n \"h-full px-[11px] py-3 group-not-data-[state=collapsed]/sidebar:px-3.5\",\n \"transition-[padding] duration-(--sidebar-animation-duration)\",\n \"overflow-x-hidden!\",\n // Scroll fade via CSS mask driven by Base UI overflow CSS variables\n \"[mask-image:linear-gradient(to_bottom,transparent_0,black_min(24px,var(--scroll-area-overflow-y-start,24px)),black_calc(100%-min(24px,var(--scroll-area-overflow-y-end,24px))),transparent_100%)]\",\n )}\n >\n <ScrollAreaBase.Content className=\"flex min-w-0! flex-col\">\n {children}\n </ScrollAreaBase.Content>\n </ScrollAreaBase.Viewport>\n <ScrollAreaBase.Scrollbar\n orientation=\"vertical\"\n className={cn(\n \"flex w-1.5 touch-none select-none p-px\",\n \"opacity-0 transition-opacity duration-150\",\n \"data-[scrolling]:opacity-100 data-[hovering]:opacity-100\",\n )}\n >\n <ScrollAreaBase.Thumb className=\"flex-1 rounded-full bg-kumo-line\" />\n </ScrollAreaBase.Scrollbar>\n </ScrollAreaBase.Root>\n));\n\nSidebarContent.displayName = \"Sidebar.Content\";\n\n// ============================================================================\n// Sidebar Footer\n// ============================================================================\n\n/**\n * Bottom-pinned section of the sidebar. Rendered outside the peek zone\n * so hovering the footer doesn't trigger a peek. Tracks sidebar width\n * to stay aligned with the content container.\n *\n * @example\n * ```tsx\n * <Sidebar.Footer>\n * <Sidebar.Trigger />\n * </Sidebar.Footer>\n * ```\n */\nconst SidebarFooter = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"footer\"\n className={cn(\n \"flex h-12 shrink-0 items-center gap-4 overflow-hidden whitespace-nowrap border-t border-kumo-line\",\n \"px-[11px] group-not-data-[state=collapsed]/sidebar:px-4\",\n \"bg-(--sidebar-bg)\",\n \"w-(--sidebar-width)\",\n \"transition-[width,padding] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n \"sticky bottom-0\",\n \"group-data-[state=collapsed]/sidebar:w-(--sidebar-width-icon) bg-clip-padding\",\n \"group-data-[state=collapsed]/sidebar:border-r group-data-[state=collapsed]/sidebar:border-kumo-line\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarFooter.displayName = \"Sidebar.Footer\";\n\n// ============================================================================\n// Sidebar Group\n// ============================================================================\n\n/**\n * Groups related menu items with an optional label.\n *\n * @example\n * ```tsx\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroup = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"group\"\n className={cn(\"flex min-w-0 flex-col gap-y-px\", className)}\n {...props}\n >\n {children}\n </div>\n));\n\nSidebarGroup.displayName = \"Sidebar.Group\";\n\n// ============================================================================\n// Sidebar GroupLabel\n// ============================================================================\n\n/**\n * Section label for a sidebar group (e.g., \"Build\", \"Protect & Connect\").\n * When the sidebar is collapsed, renders as a thin horizontal divider.\n * When it's the first group, the divider is hidden (nothing above to separate from).\n *\n * @example\n * ```tsx\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * ```\n */\nconst SidebarGroupLabel = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"group-label\"\n className={cn(\n // Grid-rows for smooth collapse animation\n \"grid overflow-hidden\",\n \"transition-[grid-template-rows,margin,border-color] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n // Mobile: no collapse animation — sidebar is always expanded\n \"group-data-[mobile=true]/sidebar:transition-none\",\n // Collapsed: spacer with divider line between icon groups\n \"grid-rows-[0fr] my-3 border-b border-kumo-line\",\n // First group: no spacer or divider needed\n \"[[data-sidebar=group]:first-child_&]:my-0 [[data-sidebar=group]:first-child_&]:border-transparent\",\n // Expanded: reveal the label text\n \"group-not-data-[state=collapsed]/sidebar:grid-rows-[1fr] group-not-data-[state=collapsed]/sidebar:my-0 group-not-data-[state=collapsed]/sidebar:border-transparent\",\n // Mobile: always show labels (sidebar content is always expanded on mobile)\n \"group-data-[mobile=true]/sidebar:grid-rows-[1fr] group-data-[mobile=true]/sidebar:my-0 group-data-[mobile=true]/sidebar:border-transparent\",\n className,\n )}\n {...props}\n >\n <div className=\"min-h-0 min-w-0\">\n <div\n className={cn(\n \"truncate px-3 mt-4 mb-2 text-sm font-medium text-kumo-subtle\",\n // First group: less top margin\n \"[[data-sidebar=group]:first-child_&]:mt-2\",\n )}\n >\n {children}\n </div>\n </div>\n </div>\n));\n\nSidebarGroupLabel.displayName = \"Sidebar.GroupLabel\";\n\n// ============================================================================\n// MenuItem / MenuSubItem auto-wrap contexts\n// ============================================================================\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuItem` `<li>`.\n * `MenuButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuItemContext = createContext(false);\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuSubItem` `<li>`.\n * `MenuSubButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuSubItemContext = createContext(false);\n\n// ============================================================================\n// Sidebar Menu\n// ============================================================================\n\n/**\n * Navigation menu list. Renders as `<ul>`.\n *\n * `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.\n *\n * @example Simple usage\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With explicit MenuItem (needed for Collapsible wrapper)\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuItem>\n * <Sidebar.Collapsible>...</Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * </Sidebar.Menu>\n * ```\n */\nconst SidebarMenu = forwardRef<\n HTMLUListElement,\n ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu\"\n className={cn(\n \"m-0 flex min-w-0 list-none flex-col items-stretch gap-y-px p-0\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarMenu.displayName = \"Sidebar.Menu\";\n\n// ============================================================================\n// Sidebar MenuItem\n// ============================================================================\n\n/**\n * Individual menu list item. Renders as `<li>`.\n *\n * **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`\n * explicitly when wrapping a `Collapsible`.\n *\n * @example Explicit usage (wrapping a Collapsible)\n * ```tsx\n * <Sidebar.MenuItem>\n * <Sidebar.Collapsible>...</Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuItem = forwardRef<\n HTMLLIElement,\n ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n <MenuItemContext.Provider value={true}>\n <li\n ref={ref}\n data-sidebar=\"menu-item\"\n className={cn(\n \"relative group-data-[state=collapsed]/sidebar:overflow-hidden\",\n className,\n )}\n {...props}\n >\n {children}\n </li>\n </MenuItemContext.Provider>\n));\n\nSidebarMenuItem.displayName = \"Sidebar.MenuItem\";\n\n// ============================================================================\n// Sidebar MenuButton\n// ============================================================================\n\nexport type SidebarMenuButtonSize = \"base\" | \"sm\";\n\nexport interface SidebarMenuButtonProps\n extends Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"className\" | \"children\"\n > {\n icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n active?: boolean;\n /**\n * Button size.\n * - `\"base\"` — Standard nav item\n * - `\"sm\"` — Compact nav item\n * @default \"base\"\n */\n size?: SidebarMenuButtonSize;\n href?: string;\n /** Link target — only meaningful when `href` is provided. */\n target?: React.HTMLAttributeAnchorTarget;\n tooltip?: string;\n className?: string;\n children?: ReactNode;\n}\n\n/**\n * Primary interactive element inside a menu item. Renders as a `<button>` or link.\n * Supports icons, active state, and auto-tooltip when the sidebar is collapsed.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.\n * Use `MenuItem` explicitly only when wrapping a `Collapsible`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={ClockIcon} href=\"/recents\">Recents</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With Collapsible (explicit MenuItem needed)\n * ```tsx\n * <Sidebar.MenuItem>\n * <Sidebar.Collapsible>\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>} />\n * <Sidebar.CollapsibleContent>...</Sidebar.CollapsibleContent>\n * </Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n (\n {\n className,\n icon: IconProp,\n active = false,\n size = \"base\",\n href,\n target,\n tooltip,\n children,\n ...props\n },\n ref,\n ) => {\n const { state, peekable } = useSidebar();\n const LinkComponent = useLinkComponent();\n const isInsideMenuItem = useContext(MenuItemContext);\n\n // Render icon — supports both component types and React elements\n const iconNode = (() => {\n if (!IconProp) return null;\n if (React.isValidElement(IconProp)) return IconProp;\n const Comp = IconProp as React.ComponentType<{ className?: string }>;\n return (\n <Comp\n className={cn(\n \"shrink-0 opacity-40\",\n size === \"base\" ? \"size-4\" : \"size-3.5\",\n )}\n />\n );\n })();\n\n const content = (\n <div\n className={cn(\n \"flex flex-1 items-center min-w-0 gap-3\",\n \"translate-x-[-3px] group-not-data-[state=collapsed]/sidebar:translate-x-0\",\n \"transition-transform duration-(--sidebar-animation-duration)\",\n )}\n >\n {iconNode}\n <span\n className={cn(\n \"flex flex-1 items-center gap-2 min-w-0 text-left overflow-hidden\",\n )}\n >\n {React.Children.map(children, (child) =>\n typeof child === \"string\" || typeof child === \"number\" ? (\n <span className=\"truncate\">{child}</span>\n ) : (\n child\n ),\n )}\n </span>\n </div>\n );\n\n const buttonClasses = cn(\n // Layout\n \"group/menu-button relative flex w-full min-w-0 items-center gap-2.5 rounded-lg outline-none cursor-pointer\",\n \"before:absolute before:inset-x-0 before:-inset-y-px\",\n // Sizing\n size === \"base\" && \"min-h-8.5 px-3 py-0 text-sm font-medium\",\n size === \"sm\" && \"min-h-7 px-2 py-0 text-sm\",\n \"text-kumo-default\",\n \"transition-[color,box-shadow,outline] duration-(--sidebar-animation-duration)\",\n !active && \"hover:bg-(--sidebar-active-bg)\",\n // Active state\n active && \"bg-(--sidebar-active-bg)\",\n // When a child sub-button is active, don't show active styling on the parent trigger\n \"has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-(--sidebar-active-bg)\",\n // Focus\n \"focus:outline-none focus-visible:text-kumo-strong focus-visible:bg-(--sidebar-active-bg)\",\n className,\n );\n\n let button: React.ReactNode;\n\n if (href) {\n button = (\n <LinkComponent\n ref={ref as React.Ref<HTMLAnchorElement>}\n className={cn(buttonClasses, \"no-underline!\")}\n href={href}\n to={href}\n target={target}\n data-active={active || undefined}\n data-sidebar=\"menu-button\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"menu-button-link\"\n data-size={size}\n onClick={\n props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n }\n >\n {content}\n </LinkComponent>\n );\n } else {\n button = (\n <button\n ref={ref}\n type=\"button\"\n className={buttonClasses}\n data-active={active || undefined}\n data-sidebar=\"menu-button\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"menu-button\"\n data-size={size}\n {...props}\n >\n {content}\n </button>\n );\n }\n\n // Always wrap in Tooltip when tooltip text is provided so the DOM\n // structure stays stable across expand/collapse — preventing React from\n // remounting the button (which would kill CSS transitions).\n // The tooltip popup only shows when collapsed and peeking is disabled —\n // when peekable, hovering reveals the full sidebar so tooltips are redundant.\n const showTooltip = state === \"collapsed\" && !peekable;\n if (tooltip) {\n button = (\n <Tooltip\n content={showTooltip ? tooltip : null}\n side=\"right\"\n render={button}\n />\n );\n }\n\n // Auto-wrap in <li> when not already inside a MenuItem\n if (!isInsideMenuItem) {\n return (\n <li\n data-sidebar=\"menu-item\"\n className=\"relative group-data-[state=collapsed]/sidebar:overflow-hidden\"\n >\n {button}\n </li>\n );\n }\n\n return button;\n },\n);\n\nSidebarMenuButton.displayName = \"Sidebar.MenuButton\";\n\n// ============================================================================\n// Sidebar MenuBadge\n// ============================================================================\n\n/**\n * Badge pill displayed inside a menu button (e.g., \"Beta\", \"New\").\n * Uses dashed border styling matching the Cloudflare design system.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSubButton>\n * Containers\n * <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n * </Sidebar.MenuSubButton>\n * ```\n */\nconst SidebarMenuBadge = forwardRef<\n HTMLSpanElement,\n ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n <span\n ref={ref}\n data-sidebar=\"menu-badge\"\n className={cn(\n \"inline-flex shrink-0 items-center rounded-full border border-dashed border-kumo-line\",\n \"select-none px-1.5 py-0.5 text-[11px]/none font-medium text-kumo-strong\",\n // Hidden when collapsed\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarMenuBadge.displayName = \"Sidebar.MenuBadge\";\n\n// ============================================================================\n// Sidebar MenuSub\n// ============================================================================\n\n/**\n * Indented sub-menu container for child navigation items. Renders as `<ul>` with\n * a left border accent for visual hierarchy.\n *\n * `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSub>\n * <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n * <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSub = forwardRef<\n HTMLUListElement,\n ComponentPropsWithoutRef<\"ul\">\n>(({ className, children, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu-sub\"\n className={cn(\n \"relative m-0 flex min-w-0 list-none flex-col gap-y-px p-0 pl-7 pr-0 overflow-hidden\",\n className,\n )}\n {...props}\n >\n <div className=\"absolute left-[19px] inset-y-px w-px bg-kumo-line z-10\" />\n {children}\n </ul>\n));\n\nSidebarMenuSub.displayName = \"Sidebar.MenuSub\";\n\n// ============================================================================\n// Sidebar MenuSubItem\n// ============================================================================\n\n/**\n * Individual item inside a sub-menu. Renders as `<li>`.\n *\n * **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuSubItem`.\n */\nconst SidebarMenuSubItem = forwardRef<\n HTMLLIElement,\n ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n <MenuSubItemContext.Provider value={true}>\n <li\n ref={ref}\n data-sidebar=\"menu-sub-item\"\n className={cn(\"relative\", className)}\n {...props}\n >\n {children}\n </li>\n </MenuSubItemContext.Provider>\n));\n\nSidebarMenuSubItem.displayName = \"Sidebar.MenuSubItem\";\n\n// ============================================================================\n// Sidebar MenuSubButton\n// ============================================================================\n\nexport interface SidebarMenuSubButtonProps\n extends ComponentPropsWithoutRef<\"button\"> {\n /** Marks this sub-item as currently active/selected. @default false */\n active?: boolean;\n /** Navigation URL. When set, renders as a link via LinkProvider. */\n href?: string;\n}\n\n/**\n * Button inside a sub-menu item. Does not render an icon (sub-items are\n * indented instead). Supports active state and link rendering.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.MenuSub>\n * <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n * <Sidebar.MenuSubButton href=\"/observability\">Observability</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSubButton = forwardRef<\n HTMLButtonElement,\n SidebarMenuSubButtonProps\n>(({ className, active = false, href, children, ...props }, ref) => {\n const LinkComponent = useLinkComponent();\n const isInsideMenuSubItem = useContext(MenuSubItemContext);\n\n const buttonClasses = cn(\n \"group/menu-button relative flex w-full min-w-0 items-center gap-2 rounded-lg min-h-8.5 px-3 py-0 text-sm font-medium outline-none cursor-pointer\",\n \"before:absolute before:inset-x-0 before:-inset-y-px\",\n \"text-kumo-default transition-[color] duration-150\",\n !active && \"hover:bg-(--sidebar-active-bg)\",\n active && \"bg-(--sidebar-active-bg)\",\n \"focus:outline-none focus-visible:text-kumo-strong focus-visible:bg-(--sidebar-active-bg)\",\n className,\n );\n\n const content = (\n <span className=\"flex flex-1 items-center gap-2 min-w-0 text-left overflow-hidden\">\n {React.Children.map(children, (child) =>\n typeof child === \"string\" || typeof child === \"number\" ? (\n <span className=\"truncate\">{child}</span>\n ) : (\n child\n ),\n )}\n </span>\n );\n\n let button: React.ReactNode;\n\n if (href) {\n button = (\n <LinkComponent\n ref={ref as React.Ref<HTMLAnchorElement>}\n className={cn(buttonClasses, \"no-underline!\")}\n href={href}\n to={href}\n data-active={active || undefined}\n data-sidebar=\"menu-sub-button\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"menu-sub-button-link\"\n onClick={\n props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n }\n >\n {content}\n </LinkComponent>\n );\n } else {\n button = (\n <button\n ref={ref}\n type=\"button\"\n className={buttonClasses}\n data-active={active || undefined}\n data-sidebar=\"menu-sub-button\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"menu-sub-button\"\n {...props}\n >\n {content}\n </button>\n );\n }\n\n // Auto-wrap in <li> when not already inside a MenuSubItem\n if (!isInsideMenuSubItem) {\n return (\n <li data-sidebar=\"menu-sub-item\" className=\"relative\">\n {button}\n </li>\n );\n }\n\n return button;\n});\n\nSidebarMenuSubButton.displayName = \"Sidebar.MenuSubButton\";\n\n// ============================================================================\n// Sidebar Separator\n// ============================================================================\n\n/**\n * Horizontal divider line between sidebar sections.\n */\nconst SidebarSeparator = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"separator\"\n className={cn(\"my-3 px-2\", className)}\n {...props}\n >\n <div className=\"border-b border-kumo-line\" />\n </div>\n));\n\nSidebarSeparator.displayName = \"Sidebar.Separator\";\n\n// ============================================================================\n// Sidebar Trigger\n// ============================================================================\n\n// ============================================================================\n// Sidebar PanelIcon\n// ============================================================================\n\n/**\n * Animated sidebar panel icon. The vertical divider line slides based\n * on the sidebar's open/closed state.\n */\nfunction SidebarPanelIcon({ className }: { className?: string }) {\n const { open } = useSidebar();\n\n return (\n <svg\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n focusable=\"false\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n className={cn(\"shrink-0\", className)}\n >\n <path d=\"M21.25 6.72v10.56a2.97 2.97 0 0 1-2.97 2.97H5.72a2.97 2.97 0 0 1-2.97-2.97V6.72a2.97 2.97 0 0 1 2.97-2.97h12.56a2.97 2.97 0 0 1 2.97 2.97\" />\n <path\n d=\"M6.25 7.25v9.5\"\n className={cn(\n \"transition-transform duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n open ? \"translate-x-px\" : \"translate-x-[10.5px]\",\n )}\n />\n </svg>\n );\n}\n\nSidebarPanelIcon.displayName = \"Sidebar.PanelIcon\";\n\n/**\n * Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.\n * Defaults to an animated `SidebarPanelIcon`.\n *\n * @example\n * ```tsx\n * <Sidebar.Trigger />\n * ```\n */\nconst SidebarTrigger = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, children, onClick, ...props }, ref) => {\n const { open, toggleSidebar } = useSidebar();\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"trigger\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"trigger\"\n aria-expanded={open}\n aria-label={open ? \"Collapse sidebar\" : \"Expand sidebar\"}\n className={cn(\n \"flex shrink-0 size-8.5 justify-center items-center rounded-lg cursor-pointer\",\n \"text-kumo-subtle hover:text-kumo-default hover:bg-(--sidebar-active-bg)\",\n \"focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand\",\n className,\n )}\n onClick={(e) => {\n onClick?.(e);\n toggleSidebar();\n }}\n {...props}\n >\n {children ?? <SidebarPanelIcon />}\n </button>\n );\n});\n\nSidebarTrigger.displayName = \"Sidebar.Trigger\";\n\n// ============================================================================\n// Sidebar Rail\n// ============================================================================\n\n/**\n * Invisible interaction strip at the sidebar edge for click-to-toggle.\n * Renders a thin hover-sensitive area between the sidebar and main content.\n */\nconst SidebarRail = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"rail\"\n data-kumo-component=\"Sidebar\"\n data-kumo-part=\"rail\"\n aria-label=\"Toggle sidebar\"\n tabIndex={-1}\n className={cn(\n \"absolute inset-y-0 z-1 hidden w-4 -translate-x-1/2 cursor-pointer transition-all\",\n \"after:absolute after:inset-y-0 after:left-1/2 after:w-0.5\",\n \"hover:after:bg-kumo-brand/20\",\n \"group-data-[side=left]/sidebar-wrapper:right-0\",\n \"group-data-[side=right]/sidebar-wrapper:left-0\",\n \"sm:flex\",\n className,\n )}\n onClick={toggleSidebar}\n {...props}\n />\n );\n});\n\nSidebarRail.displayName = \"Sidebar.Rail\";\n\n// ============================================================================\n// Sidebar ResizeHandle\n// ============================================================================\n\n/**\n * Drag handle for resizing the sidebar. Renders when `resizable` is true in\n * both expanded and collapsed states.\n *\n * - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.\n * - **Collapsed → drag outward past `minWidth`**: auto-expands and begins\n * tracking width from `minWidth`.\n */\nconst SidebarResizeHandle = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n const {\n side,\n resizable,\n setIsResizing,\n setWidth,\n setOpen,\n open,\n minWidth,\n width: currentWidth,\n maxWidth,\n } = useSidebar();\n const startX = useRef(0);\n const startWidth = useRef(0);\n const wasCollapsed = useRef(false);\n\n if (!resizable) return null;\n\n const KEYBOARD_STEP = 10;\n\n const handlePointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n e.preventDefault();\n setIsResizing(true);\n startX.current = e.clientX;\n wasCollapsed.current = !open;\n\n const wrapper = (e.currentTarget as HTMLElement).closest(\n \"[data-sidebar-wrapper]\",\n );\n const sidebar = wrapper?.querySelector(\"[data-sidebar='sidebar']\");\n startWidth.current = sidebar?.getBoundingClientRect().width ?? 0;\n\n const cleanup = () => {\n setIsResizing(false);\n document.removeEventListener(\"pointermove\", handlePointerMove);\n document.removeEventListener(\"pointerup\", handlePointerUp);\n };\n\n const handlePointerMove = (moveEvent: PointerEvent) => {\n const delta =\n side === \"left\"\n ? moveEvent.clientX - startX.current\n : startX.current - moveEvent.clientX;\n const rawWidth = startWidth.current + delta;\n\n if (wasCollapsed.current) {\n // Dragging outward from collapsed — expand once past minWidth\n if (rawWidth >= minWidth) {\n wasCollapsed.current = false;\n setOpen(true);\n setWidth(rawWidth);\n }\n return;\n }\n\n // Dragging inward while expanded — collapse when below minWidth\n if (rawWidth < minWidth) {\n setOpen(false);\n wasCollapsed.current = true;\n return;\n }\n\n setWidth(rawWidth);\n };\n\n const handlePointerUp = () => {\n cleanup();\n };\n\n document.addEventListener(\"pointermove\", handlePointerMove);\n document.addEventListener(\"pointerup\", handlePointerUp);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n const grow = side === \"left\" ? \"ArrowRight\" : \"ArrowLeft\";\n const shrink = side === \"left\" ? \"ArrowLeft\" : \"ArrowRight\";\n\n if (e.key === grow) {\n e.preventDefault();\n if (!open) {\n setOpen(true);\n setWidth(minWidth);\n } else {\n setWidth(Math.min(currentWidth + KEYBOARD_STEP, maxWidth));\n }\n } else if (e.key === shrink) {\n e.preventDefault();\n const next = currentWidth - KEYBOARD_STEP;\n if (next < minWidth) {\n setOpen(false);\n } else {\n setWidth(next);\n }\n } else if (e.key === \"Home\") {\n e.preventDefault();\n setOpen(false);\n } else if (e.key === \"End\") {\n e.preventDefault();\n setOpen(true);\n setWidth(maxWidth);\n }\n };\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-label=\"Resize sidebar\"\n tabIndex={0}\n data-sidebar=\"resize-handle\"\n className={cn(\n // Hit area inside the sidebar edge; thin visual line pinned to the edge via ::after\n \"absolute inset-y-0 z-2 hidden w-3 cursor-col-resize sm:block\",\n \"after:absolute after:inset-y-0 after:w-0.5\",\n \"after:bg-transparent after:transition-colors\",\n \"hover:after:bg-kumo-hairline active:after:bg-kumo-hairline focus-visible:after:bg-kumo-hairline\",\n \"focus:outline-none\",\n side === \"left\" && \"right-0 after:right-0\",\n side === \"right\" && \"left-0 after:left-0\",\n className,\n )}\n onPointerDown={handlePointerDown}\n onKeyDown={handleKeyDown}\n {...props}\n />\n );\n});\n\nSidebarResizeHandle.displayName = \"Sidebar.ResizeHandle\";\n\n// ============================================================================\n// Collapsible context + components (custom implementation, no Base UI dep)\n// ============================================================================\n\ninterface SidebarCollapseContextValue {\n contentId: string;\n isOpen: boolean;\n isCollapsible: boolean;\n autoScrollOnOpen: boolean;\n toggle: () => void;\n}\n\nconst SidebarCollapseContext = createContext<SidebarCollapseContextValue>({\n contentId: \"\",\n isOpen: true,\n isCollapsible: false,\n autoScrollOnOpen: false,\n toggle: () => {},\n});\n\nexport interface SidebarCollapsibleProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /** Initial open state (uncontrolled). @default false */\n defaultOpen?: boolean;\n /** Controlled open state. */\n open?: boolean;\n /** Callback when open state changes. */\n onOpenChange?: (open: boolean) => void;\n /** Scroll the expanded content into view after opening. @default false */\n autoScrollOnOpen?: boolean;\n}\n\n/**\n * Collapsible wrapper for sidebar sub-menu expand/collapse.\n * Manages open/close state and provides context to Trigger and Content children.\n *\n * Keyboard behaviour: when a child receives keyboard focus (`focus-visible`)\n * while collapsed, the section auto-expands. It collapses again on blur\n * unless it was explicitly opened via click or a child has `data-active`.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuItem>\n * <Sidebar.Collapsible defaultOpen>\n * <Sidebar.CollapsibleTrigger\n * render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>}\n * />\n * <Sidebar.CollapsibleContent>\n * <Sidebar.MenuSub>...</Sidebar.MenuSub>\n * </Sidebar.CollapsibleContent>\n * </Sidebar.Collapsible>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarCollapsible = forwardRef<HTMLDivElement, SidebarCollapsibleProps>(\n (\n {\n defaultOpen = false,\n open: openProp,\n onOpenChange,\n autoScrollOnOpen = false,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isOpen = openProp ?? internalOpen;\n const contentId = useId();\n const keyboardExpandedRef = useRef(false);\n\n const toggle = useCallback(() => {\n const next = !isOpen;\n setInternalOpen(next);\n onOpenChange?.(next);\n // If user explicitly clicks, clear the keyboard-expanded flag\n keyboardExpandedRef.current = false;\n }, [isOpen, onOpenChange]);\n\n const contextValue = useMemo<SidebarCollapseContextValue>(\n () => ({\n contentId,\n isOpen,\n isCollapsible: true,\n autoScrollOnOpen,\n toggle,\n }),\n [contentId, isOpen, autoScrollOnOpen, toggle],\n );\n\n const handleFocusIn = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n // Auto-expand on keyboard focus (focus-visible) when collapsed\n if (!isOpen && (e.target as HTMLElement).matches(\":focus-visible\")) {\n keyboardExpandedRef.current = true;\n setInternalOpen(true);\n onOpenChange?.(true);\n }\n },\n [isOpen, onOpenChange],\n );\n\n const handleFocusOut = useCallback(\n (e: React.FocusEvent<HTMLDivElement>) => {\n // Auto-collapse on blur if it was keyboard-expanded (not click-expanded)\n // and no child has data-active\n if (\n keyboardExpandedRef.current &&\n !e.currentTarget.contains(e.relatedTarget as Node) &&\n !e.currentTarget.querySelector(\"[data-active]\")\n ) {\n keyboardExpandedRef.current = false;\n setInternalOpen(false);\n onOpenChange?.(false);\n }\n },\n [onOpenChange],\n );\n\n return (\n <SidebarCollapseContext.Provider value={contextValue}>\n <div\n ref={ref}\n data-open={isOpen || undefined}\n className={cn(\"min-w-0\", className)}\n onFocus={handleFocusIn}\n onBlur={handleFocusOut}\n {...props}\n >\n {children}\n </div>\n </SidebarCollapseContext.Provider>\n );\n },\n);\n\nSidebarCollapsible.displayName = \"Sidebar.Collapsible\";\n\nexport interface SidebarCollapsibleTriggerProps {\n /** Element to render as the trigger. Gets aria-expanded, aria-controls, and onClick merged. */\n render: React.ReactElement;\n}\n\n/**\n * Trigger for a sidebar collapsible section. Uses `render` prop to compose\n * with `Sidebar.MenuButton` or `Sidebar.MenuSubButton`.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger\n * render={\n * <Sidebar.MenuButton icon={CodeIcon}>\n * Compute\n * <Sidebar.MenuChevron />\n * </Sidebar.MenuButton>\n * }\n * />\n * ```\n */\nfunction SidebarCollapsibleTrigger({ render }: SidebarCollapsibleTriggerProps) {\n const { contentId, isOpen, toggle } = useContext(SidebarCollapseContext);\n\n return React.cloneElement(render, {\n \"aria-expanded\": isOpen,\n \"aria-controls\": contentId,\n \"data-open\": isOpen || undefined,\n onClick: (e: React.MouseEvent) => {\n // Call any existing onClick on the render element\n const existingOnClick = (\n render.props as { onClick?: (e: React.MouseEvent) => void }\n ).onClick;\n existingOnClick?.(e);\n toggle();\n },\n } as Record<string, unknown>);\n}\n\nSidebarCollapsibleTrigger.displayName = \"Sidebar.CollapsibleTrigger\";\n\n/**\n * Animated collapsible content panel. Uses CSS grid-rows for smooth\n * height transitions without measuring DOM height.\n *\n * Always mounted (no unmount on close) so exit animations play.\n */\nconst SidebarCollapsibleContent = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n const { contentId, isOpen: isCollapsibleOpen } = useContext(\n SidebarCollapseContext,\n );\n const { state, animationDuration } = useSidebar();\n const { autoScrollOnOpen } = useContext(SidebarCollapseContext);\n const contentRef = useRef<HTMLDivElement | null>(null);\n\n const isOpen = isCollapsibleOpen && state !== \"collapsed\";\n\n useEffect(() => {\n if (!isOpen || !autoScrollOnOpen) return;\n\n const timeout = window.setTimeout(() => {\n const prefersReducedMotion = window.matchMedia(\n \"(prefers-reduced-motion: reduce)\",\n ).matches;\n contentRef.current?.scrollIntoView({\n block: \"nearest\",\n behavior: prefersReducedMotion ? \"auto\" : \"smooth\",\n });\n }, animationDuration);\n\n return () => window.clearTimeout(timeout);\n }, [isOpen, autoScrollOnOpen, animationDuration]);\n\n // Imperatively set inert — React 18 doesn't reliably forward\n // the inert attribute as a JSX prop on initial mount.\n const inertRef = useCallback(\n (node: HTMLDivElement | null) => {\n if (node) {\n if (!isOpen) {\n node.setAttribute(\"inert\", \"\");\n } else {\n node.removeAttribute(\"inert\");\n }\n }\n },\n [isOpen],\n );\n\n const mergedRef = useCallback(\n (node: HTMLDivElement | null) => {\n contentRef.current = node;\n inertRef(node);\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [ref, inertRef],\n );\n\n return (\n <div\n ref={mergedRef}\n id={contentId}\n role=\"region\"\n aria-hidden={!isOpen}\n className={cn(\n \"grid\",\n \"transition-[grid-template-rows] duration-(--sidebar-animation-duration) ease-(--sidebar-easing)\",\n \"motion-reduce:transition-none\",\n isOpen ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n className,\n )}\n {...props}\n >\n <div className=\"overflow-hidden\">{children}</div>\n </div>\n );\n});\n\nSidebarCollapsibleContent.displayName = \"Sidebar.CollapsibleContent\";\n\n// ============================================================================\n// Sidebar MenuChevron\n// ============================================================================\n\n/**\n * Auto-rotating chevron for collapsible menu items. Reads open state from\n * the nearest `SidebarCollapseContext` and rotates accordingly.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger\n * render={<Sidebar.MenuButton icon={CodeIcon}>Compute<Sidebar.MenuChevron /></Sidebar.MenuButton>}\n * />\n * ```\n */\nfunction SidebarMenuChevron({ className }: { className?: string }) {\n const { isOpen, isCollapsible } = useContext(SidebarCollapseContext);\n\n return (\n <CaretRightIcon\n size={12}\n weight=\"bold\"\n className={cn(\n \"ml-auto shrink-0 opacity-40 group-hover/menu-button:opacity-100 transition-[transform,rotate,opacity] duration-200\",\n isCollapsible && isOpen && \"rotate-90\",\n // Hidden when sidebar is collapsed\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className,\n )}\n />\n );\n}\n\nSidebarMenuChevron.displayName = \"Sidebar.MenuChevron\";\n\n// ============================================================================\n// SlidingViews — animated horizontal transitions between navigation surfaces\n// ============================================================================\n\nconst SlidingViewActiveContext = createContext<string>(\"\");\n\nexport interface SidebarSlidingViewsProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /** Key of the currently active view. Must match a child `SlidingView` value. */\n activeKey: string;\n /**\n * Slide direction for the transition.\n * - `\"left\"`: new view slides in from the right\n * - `\"right\"`: new view slides in from the left\n * @default \"left\"\n */\n direction?: \"left\" | \"right\";\n}\n\n/**\n * Container for animated horizontal transitions between navigation surfaces\n * (e.g., account ↔ zone). Inactive views are marked `aria-hidden` and `inert`.\n *\n * Animation respects `prefers-reduced-motion`.\n *\n * @example\n * ```tsx\n * <Sidebar.SlidingViews activeKey={surface} direction=\"left\">\n * <Sidebar.SlidingView value=\"account\">\n * <Sidebar.Content>...account nav...</Sidebar.Content>\n * </Sidebar.SlidingView>\n * <Sidebar.SlidingView value=\"zone\">\n * <Sidebar.Content>...zone nav...</Sidebar.Content>\n * </Sidebar.SlidingView>\n * </Sidebar.SlidingViews>\n * ```\n */\nconst SidebarSlidingViews = forwardRef<\n HTMLDivElement,\n SidebarSlidingViewsProps\n>(\n (\n {\n activeKey,\n direction: _direction = \"left\",\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const childArray = React.Children.toArray(children);\n const activeIndex = childArray.findIndex(\n (child) =>\n React.isValidElement(child) &&\n (child.props as { value?: string }).value === activeKey,\n );\n const prefersReducedMotion =\n typeof window !== \"undefined\" &&\n window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n const translateX = activeIndex > 0 ? `-${activeIndex * 100}%` : \"0%\";\n\n return (\n <SlidingViewActiveContext.Provider value={activeKey}>\n <div\n ref={ref}\n data-sidebar=\"sliding-views\"\n className={cn(\n \"flex flex-1 min-h-0 max-w-(--sidebar-width) overflow-hidden\",\n className,\n )}\n {...props}\n >\n <div\n className=\"flex min-h-0 w-full shrink-0\"\n style={{\n transform: `translateX(${translateX})`,\n transition: prefersReducedMotion\n ? \"none\"\n : `transform var(--sidebar-animation-duration) var(--sidebar-easing)`,\n }}\n >\n {children}\n </div>\n </div>\n </SlidingViewActiveContext.Provider>\n );\n },\n);\n\nSidebarSlidingViews.displayName = \"Sidebar.SlidingViews\";\n\nexport interface SidebarSlidingViewProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /** Unique key matching this view. Must correspond to `activeKey` on `SlidingViews`. */\n value: string;\n}\n\n/**\n * Individual panel inside `SlidingViews`. Inactive views are automatically\n * marked `aria-hidden` and `inert` so they're unreachable by keyboard/screen readers.\n */\nconst SidebarSlidingView = forwardRef<HTMLDivElement, SidebarSlidingViewProps>(\n ({ value, className, children, ...props }, ref) => {\n const activeKey = useContext(SlidingViewActiveContext);\n const isActive = activeKey === value;\n\n // Imperatively set inert — React 18.2 doesn't reliably forward the inert\n // attribute to the DOM when set as a JSX prop on initial mount.\n const inertRef = useCallback(\n (node: HTMLDivElement | null) => {\n if (node) {\n if (!isActive) {\n node.setAttribute(\"inert\", \"\");\n } else {\n node.removeAttribute(\"inert\");\n }\n }\n },\n [isActive],\n );\n\n // Merge forwarded ref with inert ref\n const mergedRef = useCallback(\n (node: HTMLDivElement | null) => {\n inertRef(node);\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [ref, inertRef],\n );\n\n return (\n <div\n ref={mergedRef}\n data-sidebar=\"sliding-view\"\n data-value={value}\n aria-hidden={!isActive}\n className={cn(\n \"flex w-full shrink-0 flex-col min-h-0\",\n !isActive && \"pointer-events-none\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nSidebarSlidingView.displayName = \"Sidebar.SlidingView\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Sidebar — responsive navigation panel with expand/collapse support.\n *\n * Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,\n * `.Content`, `.Footer`, `.Group`, `.GroupLabel`,\n * `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuBadge`,\n * `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,\n * `.Trigger`, `.Rail`, `.MenuChevron`,\n * `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n * <Sidebar>\n * <Sidebar.Content>\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * </Sidebar.Group>\n * </Sidebar.Content>\n * <Sidebar.Footer>\n * <Sidebar.Trigger />\n * </Sidebar.Footer>\n * </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nexport const Sidebar = Object.assign(SidebarRoot, {\n Provider: SidebarProvider,\n Header: SidebarHeader,\n Content: SidebarContent,\n Footer: SidebarFooter,\n Group: SidebarGroup,\n GroupLabel: SidebarGroupLabel,\n Menu: SidebarMenu,\n MenuItem: SidebarMenuItem,\n MenuButton: SidebarMenuButton,\n MenuBadge: SidebarMenuBadge,\n MenuSub: SidebarMenuSub,\n MenuSubItem: SidebarMenuSubItem,\n MenuSubButton: SidebarMenuSubButton,\n Separator: SidebarSeparator,\n Trigger: SidebarTrigger,\n Rail: SidebarRail,\n ResizeHandle: SidebarResizeHandle,\n MenuChevron: SidebarMenuChevron,\n Collapsible: SidebarCollapsible,\n CollapsibleTrigger: SidebarCollapsibleTrigger,\n CollapsibleContent: SidebarCollapsibleContent,\n SlidingViews: SidebarSlidingViews,\n SlidingView: SidebarSlidingView,\n});\n\nexport {\n SidebarProvider,\n SidebarRoot,\n SidebarHeader,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuItem,\n SidebarMenuButton,\n SidebarMenuBadge,\n SidebarMenuSub,\n SidebarMenuSubItem,\n SidebarMenuSubButton,\n SidebarSeparator,\n SidebarTrigger,\n SidebarRail,\n SidebarResizeHandle,\n SidebarMenuChevron,\n SidebarCollapsible,\n SidebarCollapsibleTrigger,\n SidebarCollapsibleContent,\n SidebarSlidingViews,\n SidebarSlidingView,\n};\n"],"names":["KUMO_SIDEBAR_VARIANTS","KUMO_SIDEBAR_DEFAULT_VARIANTS","KUMO_SIDEBAR_STYLING","SIDEBAR_WIDTH","SIDEBAR_WIDTH_ICON","SIDEBAR_EASING","SIDEBAR_ANIMATION_DURATION_MS","MOBILE_BREAKPOINT","FOCUSABLE_SELECTOR","useIsMobile","breakpoint","isMobile","setIsMobile","useState","useEffect","mql","onChange","SidebarContext","createContext","useSidebar","context","useContext","DEFAULT_WIDTH_PX","MIN_WIDTH_PX","MAX_WIDTH_PX","SidebarProvider","defaultOpen","openProp","setOpenProp","variant","side","collapsible","resizable","defaultWidth","minWidth","maxWidth","onWidthChange","contained","peekable","animationDuration","mobileBreakpoint","children","className","style","_openMobile","_setOpenMobile","width","setWidthState","isResizing","setIsResizing","isPeeking","setIsPeeking","openMobile","setOpenMobile","useCallback","next","setWidth","newWidth","clamped","_open","_setOpen","open","setOpen","value","toggleSidebar","prev","startPeek","stopPeek","state","sidebarWidthValue","contextValue","useMemo","jsx","cn","SidebarRoot","forwardRef","contentClassName","props","ref","mobileAsideRef","node","mergedMobileRef","triggerRef","useRef","mobileNodeRef","shouldRestoreFocusRef","handleKeyDown","e","handleFocusOut","handlePeekBlur","jsxs","Fragment","collapsedWidth","expandedWidth","railWidth","contentWidth","borderClasses","TooltipProvider","childArray","React","footerChildren","child","nonFooterChildren","SidebarHeader","SidebarContent","ScrollAreaBase.Root","ScrollAreaBase.Viewport","ScrollAreaBase.Content","ScrollAreaBase.Scrollbar","ScrollAreaBase.Thumb","SidebarFooter","SidebarGroup","SidebarGroupLabel","MenuItemContext","MenuSubItemContext","SidebarMenu","SidebarMenuItem","SidebarMenuButton","IconProp","active","size","href","target","tooltip","LinkComponent","useLinkComponent","isInsideMenuItem","iconNode","content","buttonClasses","button","Tooltip","SidebarMenuBadge","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton","isInsideMenuSubItem","SidebarSeparator","SidebarPanelIcon","SidebarTrigger","onClick","SidebarRail","SidebarResizeHandle","currentWidth","startX","startWidth","wasCollapsed","KEYBOARD_STEP","handlePointerDown","sidebar","cleanup","handlePointerMove","handlePointerUp","moveEvent","delta","rawWidth","grow","shrink","SidebarCollapseContext","SidebarCollapsible","onOpenChange","autoScrollOnOpen","internalOpen","setInternalOpen","isOpen","contentId","useId","keyboardExpandedRef","toggle","handleFocusIn","SidebarCollapsibleTrigger","render","existingOnClick","SidebarCollapsibleContent","isCollapsibleOpen","contentRef","timeout","prefersReducedMotion","inertRef","mergedRef","SidebarMenuChevron","isCollapsible","CaretRightIcon","SlidingViewActiveContext","SidebarSlidingViews","activeKey","_direction","activeIndex","translateX","SidebarSlidingView","isActive","Sidebar"],"mappings":"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"}
@@ -2,7 +2,7 @@
2
2
  import { jsx as n } from "react/jsx-runtime";
3
3
  import { createElement as s } from "react";
4
4
  import { c as d } from "./cn-ct4n7r74mh8y0f48.js";
5
- import { L as m } from "./layer-card-er4flkcxmzfug8jw.js";
5
+ import { L as m } from "./layer-card-cshi5vydqg3phyfx.js";
6
6
  const f = function({
7
7
  color: r = "primary",
8
8
  className: a,
@@ -26,4 +26,4 @@ f.displayName = "Surface";
26
26
  export {
27
27
  f as S
28
28
  };
29
- //# sourceMappingURL=surface-iyejjbqogjbo7ise.js.map
29
+ //# sourceMappingURL=surface-g5a1buofz4erjov2.js.map