@x-wave/blog 1.0.3 → 1.0.5

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 (7) hide show
  1. package/README.md +26 -24
  2. package/package.json +2 -2
  3. package/styles/index.css +217 -0
  4. package/styles/_variables.scss +0 -61
  5. package/styles/global.scss +0 -169
  6. package/styles/main.scss +0 -77
  7. package/styles/mixins.scss +0 -129
package/README.md CHANGED
@@ -65,14 +65,14 @@ Import the i18n setup and framework styles in your app entry point:
65
65
  ```ts
66
66
  // src/main.tsx
67
67
  import '@x-wave/blog/locales' // Initialises i18next with en, es, zh
68
- import '@x-wave/blog/styles' // Framework styles (required)
68
+ import '@x-wave/blog/styles' // Compiled CSS with variables and component styles (required)
69
69
  import { createRoot } from 'react-dom/client'
70
70
  import App from './App'
71
71
 
72
72
  createRoot(document.getElementById('root')!).render(<App />)
73
73
  ```
74
74
 
75
- > **The styles import is required** for the UI components and layout to render correctly.
75
+ > **The styles import is required** for the UI components and layout to render correctly. This imports a single compiled CSS file (`index.css`) that contains all framework styles, CSS variables, and component styles.
76
76
 
77
77
  **Add custom translations:**
78
78
 
@@ -348,34 +348,36 @@ import type { NavigationEntry, BlogConfig, HeaderLink } from '@x-wave/blog/types
348
348
 
349
349
  ### CSS variables
350
350
 
351
- The framework exports SCSS variable files. Import and override them in your own stylesheets:
351
+ The framework uses CSS custom properties (`--xw-*` prefix) for theming. These are automatically injected when the framework initializes, but you can override them:
352
352
 
353
- ```scss
354
- // In your app.scss
355
- @use '~@x-wave/blog/styles/_variables' as vars;
356
-
357
- // Override the color palette
358
- $color-primary: #007bff;
359
- $color-background: #fafafa;
360
-
361
- // Your custom styles here
353
+ ```css
354
+ /* In your app.css */
355
+ .xw-blog-root {
356
+ --xw-primary: #007bff;
357
+ --xw-background: #fafafa;
358
+ --xw-foreground: #1a1a1a;
359
+ /* ... other variables */
360
+ }
362
361
  ```
363
362
 
364
- Or import directly from the framework package:
363
+ Or in JavaScript:
365
364
 
366
- ```scss
367
- @import 'node_modules/@x-wave/blog/dist/styles/_variables.scss';
368
-
369
- $color-primary: #007bff;
370
- $color-background: #fafafa;
365
+ ```javascript
366
+ const blogRoot = document.querySelector('.xw-blog-root')
367
+ blogRoot.style.setProperty('--xw-primary', '#007bff')
368
+ blogRoot.style.setProperty('--xw-background', '#fafafa')
371
369
  ```
372
370
 
373
- Available variables include:
374
- - `$color-primary`, `$color-secondary`
375
- - `$color-background`, `$color-text`
376
- - `$spacing-xs`, `$spacing-sm`, `$spacing-md`, `$spacing-lg`, `$spacing-xl`
377
- - `$font-family-sans`, `$font-family-mono`
378
- - And more—see [styles/_variables.scss](packages/styles/_variables.scss)
371
+ Available CSS variables include:
372
+ - `--xw-primary`, `--xw-secondary`
373
+ - `--xw-background`, `--xw-foreground`
374
+ - `--xw-card`, `--xw-card-foreground`
375
+ - `--xw-muted`, `--xw-muted-foreground`
376
+ - `--xw-accent`, `--xw-accent-foreground`
377
+ - `--xw-border`, `--xw-ring`
378
+ - And more—defined in `packages/styles/main.scss`
379
+
380
+ All CSS variables are scoped to `.xw-blog-root` for isolation and to prevent conflicts with your application styles.
379
381
 
380
382
  ### Config options
381
383
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-wave/blog",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -20,7 +20,7 @@
20
20
  "types": "./types/index.d.ts"
21
21
  },
22
22
  "./styles": {
23
- "import": "./styles/main.scss"
23
+ "import": "./styles/index.css"
24
24
  }
25
25
  },
26
26
  "scripts": {
package/styles/index.css ADDED
@@ -0,0 +1,217 @@
1
+ /*
2
+ Main styles entry point - imports all required stylesheets*/
3
+ .xw-blog-root {
4
+ width: 100%;
5
+ height: 100%;
6
+ line-height: 1.5;
7
+ -webkit-font-smoothing: antialiased;
8
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
9
+ background-color: var(--xw-background);
10
+ color: var(--xw-foreground);
11
+ }
12
+ .xw-blog-root *,
13
+ .xw-blog-root *::before,
14
+ .xw-blog-root *::after {
15
+ box-sizing: border-box;
16
+ }
17
+ .xw-blog-root img,
18
+ .xw-blog-root picture,
19
+ .xw-blog-root video,
20
+ .xw-blog-root canvas,
21
+ .xw-blog-root svg {
22
+ display: block;
23
+ max-width: 100%;
24
+ }
25
+ .xw-blog-root p,
26
+ .xw-blog-root h1,
27
+ .xw-blog-root h2,
28
+ .xw-blog-root h3,
29
+ .xw-blog-root h4,
30
+ .xw-blog-root h5,
31
+ .xw-blog-root h6 {
32
+ overflow-wrap: break-word;
33
+ }
34
+ .xw-blog-root h1 {
35
+ font-size: 1.875rem;
36
+ font-weight: 600;
37
+ line-height: 1.2;
38
+ letter-spacing: -0.025em;
39
+ margin-bottom: 1.5rem;
40
+ }
41
+ .xw-blog-root h2 {
42
+ font-size: 1.5rem;
43
+ font-weight: 500;
44
+ line-height: 1.3;
45
+ letter-spacing: -0.02em;
46
+ margin-bottom: 1rem;
47
+ margin-top: 2.5rem;
48
+ }
49
+ .xw-blog-root h3 {
50
+ font-size: 1.25rem;
51
+ font-weight: 500;
52
+ line-height: 1.4;
53
+ letter-spacing: -0.015em;
54
+ margin-bottom: 0.75rem;
55
+ margin-top: 2rem;
56
+ }
57
+ .xw-blog-root h4 {
58
+ font-size: 1.125rem;
59
+ font-weight: 500;
60
+ line-height: 1.4;
61
+ letter-spacing: -0.01em;
62
+ margin-bottom: 0.5rem;
63
+ margin-top: 1.5rem;
64
+ }
65
+ .xw-blog-root h5 {
66
+ font-size: 1rem;
67
+ font-weight: 500;
68
+ line-height: 1.5;
69
+ margin-bottom: 0.5rem;
70
+ margin-top: 1.25rem;
71
+ }
72
+ .xw-blog-root h6 {
73
+ font-size: 0.875rem;
74
+ font-weight: 500;
75
+ line-height: 1.5;
76
+ margin-bottom: 0.5rem;
77
+ margin-top: 1rem;
78
+ }
79
+ .xw-blog-root p {
80
+ font-size: 1rem;
81
+ line-height: 1.65;
82
+ margin-bottom: 1rem;
83
+ }
84
+ .xw-blog-root code {
85
+ font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
86
+ font-size: 0.875rem;
87
+ background-color: var(--xw-muted);
88
+ padding: 0.1875rem 0.4375rem;
89
+ border-radius: 0.25rem;
90
+ font-weight: 500;
91
+ }
92
+ .xw-blog-root pre {
93
+ font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
94
+ background-color: var(--xw-muted);
95
+ padding: 1.25rem;
96
+ border-radius: 0.75rem;
97
+ overflow-x: auto;
98
+ margin: 1.5rem 0;
99
+ border: 1px solid var(--xw-border);
100
+ }
101
+ .xw-blog-root pre code {
102
+ background-color: transparent;
103
+ padding: 0;
104
+ font-weight: 400;
105
+ }
106
+ .xw-blog-root :focus-visible {
107
+ outline: 2px solid var(--xw-ring);
108
+ outline-offset: 2px;
109
+ }
110
+ .xw-blog-root ::selection {
111
+ background-color: var(--xw-accent);
112
+ color: var(--xw-accent-foreground);
113
+ }
114
+ .xw-blog-root .sr-only {
115
+ position: absolute !important;
116
+ width: 1px !important;
117
+ height: 1px !important;
118
+ padding: 0 !important;
119
+ margin: -1px !important;
120
+ overflow: hidden !important;
121
+ clip: rect(0, 0, 0, 0) !important;
122
+ white-space: nowrap !important;
123
+ border: 0 !important;
124
+ }
125
+ .xw-blog-root .text-muted {
126
+ color: var(--xw-muted-foreground);
127
+ }
128
+ .xw-blog-root .text-destructive {
129
+ color: var(--xw-destructive);
130
+ }
131
+ .xw-blog-root .bg-muted {
132
+ background-color: var(--xw-muted);
133
+ }
134
+ .xw-blog-root .border {
135
+ border: 1px solid var(--xw-border);
136
+ }
137
+ .xw-blog-root .rounded {
138
+ border-radius: 0.5rem;
139
+ }
140
+ .xw-blog-root .shadow {
141
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
142
+ }
143
+
144
+ :root {
145
+ --xw-radius: 0.625rem;
146
+ --xw-background: oklch(1 0 0);
147
+ --xw-foreground: oklch(0.145 0 0);
148
+ --xw-card: oklch(1 0 0);
149
+ --xw-card-foreground: oklch(0.145 0 0);
150
+ --xw-popover: oklch(1 0 0);
151
+ --xw-popover-foreground: oklch(0.145 0 0);
152
+ --xw-primary: oklch(0.205 0 0);
153
+ --xw-primary-foreground: oklch(0.985 0 0);
154
+ --xw-secondary: oklch(0.97 0 0);
155
+ --xw-secondary-foreground: oklch(0.205 0 0);
156
+ --xw-muted: oklch(0.97 0 0);
157
+ --xw-muted-foreground: oklch(0.556 0 0);
158
+ --xw-accent: oklch(0.97 0 0);
159
+ --xw-accent-foreground: oklch(0.205 0 0);
160
+ --xw-destructive: oklch(0.577 0.245 27.325);
161
+ --xw-border: oklch(0.922 0 0);
162
+ --xw-input: oklch(0.922 0 0);
163
+ --xw-ring: oklch(0.708 0 0);
164
+ --xw-link: rgb(211, 48, 121);
165
+ --xw-chart-1: oklch(0.646 0.222 41.116);
166
+ --xw-chart-2: oklch(0.6 0.118 184.704);
167
+ --xw-chart-3: oklch(0.398 0.07 227.392);
168
+ --xw-chart-4: oklch(0.828 0.189 84.429);
169
+ --xw-chart-5: oklch(0.769 0.188 70.08);
170
+ --xw-sidebar: oklch(0.97 0 0);
171
+ --xw-sidebar-foreground: oklch(0.145 0 0);
172
+ --xw-sidebar-primary: oklch(0.205 0 0);
173
+ --xw-sidebar-primary-foreground: oklch(0.985 0 0);
174
+ --xw-sidebar-accent: oklch(0.97 0 0);
175
+ --xw-sidebar-accent-foreground: oklch(0.205 0 0);
176
+ --xw-sidebar-border: oklch(0.922 0 0);
177
+ --xw-sidebar-ring: oklch(0.708 0 0);
178
+ }
179
+
180
+ /*
181
+ Dark mode
182
+ */
183
+ .dark {
184
+ --xw-background: oklch(0.145 0 0);
185
+ --xw-foreground: oklch(0.985 0 0);
186
+ --xw-card: oklch(0.205 0 0);
187
+ --xw-card-foreground: oklch(0.985 0 0);
188
+ --xw-popover: oklch(0.205 0 0);
189
+ --xw-popover-foreground: oklch(0.985 0 0);
190
+ --xw-primary: oklch(0.922 0 0);
191
+ --xw-primary-foreground: oklch(0.205 0 0);
192
+ --xw-secondary: oklch(0.269 0 0);
193
+ --xw-secondary-foreground: oklch(0.985 0 0);
194
+ --xw-muted: oklch(0.269 0 0);
195
+ --xw-muted-foreground: oklch(0.708 0 0);
196
+ --xw-accent: oklch(0.269 0 0);
197
+ --xw-accent-foreground: oklch(0.985 0 0);
198
+ --xw-destructive: oklch(0.704 0.191 22.216);
199
+ --xw-border: oklch(1 0 0 / 10%);
200
+ --xw-input: oklch(1 0 0 / 15%);
201
+ --xw-ring: oklch(0.556 0 0);
202
+ --xw-link: rgb(211, 48, 121);
203
+ --xw-chart-1: oklch(0.488 0.243 264.376);
204
+ --xw-chart-2: oklch(0.696 0.17 162.48);
205
+ --xw-chart-3: oklch(0.769 0.188 70.08);
206
+ --xw-chart-4: oklch(0.627 0.265 303.9);
207
+ --xw-chart-5: oklch(0.645 0.246 16.439);
208
+ --xw-sidebar: oklch(0.205 0 0);
209
+ --xw-sidebar-foreground: oklch(0.985 0 0);
210
+ --xw-sidebar-primary: oklch(0.488 0.243 264.376);
211
+ --xw-sidebar-primary-foreground: oklch(0.985 0 0);
212
+ --xw-sidebar-accent: oklch(0.269 0 0);
213
+ --xw-sidebar-accent-foreground: oklch(0.985 0 0);
214
+ --xw-sidebar-border: oklch(1 0 0 / 10%);
215
+ --xw-sidebar-ring: oklch(0.556 0 0);
216
+ }
217
+ ._tabContainer_zk6h4_1{display:inline-flex;background-color:var(--xw-card);border:1px solid var(--xw-border);border-radius:.5rem;margin-bottom:2rem;overflow:hidden}._tab_zk6h4_1{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:.15s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;outline:none}._tab_zk6h4_1:focus-visible{outline:2px solid var(--xw-ring);outline-offset:2px}._tab_zk6h4_1:disabled{pointer-events:none;opacity:.5}._tab_zk6h4_1{padding:.5rem 1rem;font-size:.87rem;font-weight:500;background-color:transparent;border:none;border-radius:0;color:var(--xw-muted-foreground);cursor:pointer;white-space:nowrap}._tab_zk6h4_1:not(:last-child){border-right:1px solid var(--xw-border)}._tab_zk6h4_1._active_zk6h4_45{background-color:var(--xw-accent);color:var(--xw-accent-foreground)}._tab_zk6h4_1:hover:not(._active_zk6h4_45){background-color:var(--xw-muted);color:var(--xw-foreground)}._tab_zk6h4_1:focus-visible{outline:2px solid var(--xw-accent);outline-offset:-2px}._tableOfContents_11q9u_1{position:sticky;top:5rem;align-self:flex-start;height:fit-content;max-height:calc(100vh - 8rem);overflow-y:auto;padding:2rem 0 2rem 1.5rem;margin-left:2rem;background:transparent;border-left:1px solid var(--xw-border);flex-shrink:0}@media(max-width:1024px){._tableOfContents_11q9u_1{display:none}}._header_11q9u_20{margin-bottom:1rem}._title_11q9u_24{font-size:.75rem;font-weight:500;color:var(--xw-muted-foreground);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}._nav_11q9u_33 ul{margin:0;padding:0;list-style:none}._list_11q9u_39{display:flex;flex-direction:column;gap:.125rem;margin:0}._link_11q9u_46{display:block;width:100%;padding:.25rem 0;text-align:left;background:none;border:none;cursor:pointer;font-size:.875rem;line-height:1.4;color:var(--xw-muted-foreground);text-decoration:none;border-radius:.25rem;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;font-family:inherit}._link_11q9u_46:hover{color:var(--xw-foreground)}._link_11q9u_46:focus{outline:none;color:var(--xw-foreground)}._link_11q9u_46._active_11q9u_70{color:var(--xw-primary);font-weight:500}._link_11q9u_46._active_11q9u_70:before{content:"";position:absolute;left:-1.5rem;top:50%;transform:translateY(-50%);width:1px;height:1rem;background-color:var(--xw-primary);border-radius:.5px}._level1_11q9u_86{font-weight:500;padding-left:0;margin-bottom:.125rem}._level2_11q9u_92{padding-left:.5rem;margin-bottom:.0625rem}._level3_11q9u_97{padding-left:1rem;font-size:.8125rem;margin-bottom:.0625rem}._level4_11q9u_103{padding-left:1.5rem;font-size:.8125rem;margin-bottom:.0625rem}._level5_11q9u_109{padding-left:2rem;font-size:.75rem;margin-bottom:.0625rem}._level6_11q9u_115{padding-left:2.5rem;font-size:.75rem;margin-bottom:.0625rem}._tableOfContents_11q9u_1::-webkit-scrollbar{width:4px}._tableOfContents_11q9u_1::-webkit-scrollbar-track{background:transparent}._tableOfContents_11q9u_1::-webkit-scrollbar-thumb{background:var(--xw-border);border-radius:2px}._tableOfContents_11q9u_1::-webkit-scrollbar-thumb:hover{background:var(--xw-muted-foreground)}._overlay_1e1d4_1{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:10vh;animation:_fadeIn_1e1d4_1 .2s ease;height:100vh}@keyframes _fadeIn_1e1d4_1{0%{opacity:0}to{opacity:1}}._modal_1e1d4_26{width:90%;max-width:600px;background:var(--xw-card);border:1px solid var(--xw-border);border-radius:.75rem;box-shadow:0 20px 60px #0000004d;animation:_slideIn_1e1d4_1 .2s ease;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}@keyframes _slideIn_1e1d4_1{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}._header_1e1d4_50{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--xw-border)}._title_1e1d4_58{font-size:1.125rem;font-weight:600;color:var(--xw-foreground);margin:0}._closeButton_1e1d4_65{background:none;border:none;color:var(--xw-muted-foreground);cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:.25rem;transition:all .2s ease}._closeButton_1e1d4_65 svg{width:1.25rem;height:1.25rem}._closeButton_1e1d4_65:hover{background:var(--xw-secondary);color:var(--xw-foreground)}._results_1e1d4_86{flex:1;overflow-y:auto;padding:.5rem;min-height:200px;max-height:400px}._resultsList_1e1d4_94{list-style:none;padding:0;margin:0}._resultItem_1e1d4_100{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;width:100%;padding:.75rem 1rem;background:none;border:none;border-radius:.5rem;cursor:pointer;text-align:left;transition:all .15s ease;color:var(--xw-foreground)}._resultItem_1e1d4_100:hover{background:var(--xw-secondary)}._resultTitle_1e1d4_119{font-weight:500;font-size:.95rem}._resultSlug_1e1d4_124{font-size:.8rem;color:var(--xw-muted-foreground);opacity:.8}._noResults_1e1d4_130{padding:3rem 1rem;text-align:center;color:var(--xw-muted-foreground);font-size:.9rem}._tags_11t8a_1{display:flex;align-items:center;gap:.75rem;margin:2rem 0 1rem;padding:1rem 0 0;border-top:1px solid var(--xw-border)}._tags_11t8a_1._compact_11t8a_9{margin:2rem 0 1rem;padding:1rem 0 0;border-top:1px solid var(--xw-border)}._tagLabel_11t8a_15{display:flex;align-items:center;gap:.5rem;color:var(--xw-muted-foreground);font-size:.875rem;font-weight:500;white-space:nowrap}._tagIcon_11t8a_25{width:1.125rem;height:1.125rem}._tagList_11t8a_30{display:flex;flex-wrap:wrap;gap:.5rem}._tag_11t8a_1{display:inline-flex;align-items:center;padding:.25rem .75rem;background:none;border:1px solid var(--xw-border);border-radius:.75rem;color:var(--xw-muted-foreground);font-size:.8rem;font-weight:400;cursor:pointer;transition:all .2s ease}._tag_11t8a_1:hover{color:var(--xw-foreground);border-color:var(--xw-ring)}._contentPage_1nxj5_1{flex:1;max-width:48rem;margin:0;padding:0 0 2rem}@media(max-width:767px){._contentPage_1nxj5_1{padding:1.5rem;max-width:none}}@media(max-width:1024px){._contentPage_1nxj5_1{max-width:none;padding:2rem}}._metadata_1nxj5_20{display:flex;gap:1rem;align-items:center;padding:.5rem 0 1rem;color:var(--xw-muted-foreground);font-size:.875rem;border-bottom:1px solid var(--xw-border);margin-bottom:1rem}._metadata_1nxj5_20 ._author_1nxj5_30,._metadata_1nxj5_20 ._date_1nxj5_31{display:flex;align-items:center;gap:.5rem}._metadata_1nxj5_20 ._author_1nxj5_30{font-weight:500;color:var(--xw-foreground)}@media(max-width:767px){._metadata_1nxj5_20{flex-direction:column;align-items:flex-start;gap:.25rem}}._loadingContainer_1nxj5_48,._errorContainer_1nxj5_49{display:flex;align-items:center;justify-content:center;height:16rem}._loadingContainer_1nxj5_48{flex-direction:column;align-items:flex-start;gap:1.5rem;padding:2rem 0}@keyframes _shimmer_1nxj5_1{0%{background-position:-1000px 0}to{background-position:1000px 0}}._skeletonTitle_1nxj5_71{width:60%;height:2.5rem;background:linear-gradient(90deg,var(--xw-muted) 0%,color-mix(in oklch,var(--xw-muted) 50%,white) 50%,var(--xw-muted) 100%);background-size:1000px 100%;animation:_shimmer_1nxj5_1 2s infinite linear;border-radius:.5rem}._skeletonParagraph_1nxj5_80{width:100%;height:1rem;background:linear-gradient(90deg,var(--xw-muted) 0%,color-mix(in oklch,var(--xw-muted) 50%,white) 50%,var(--xw-muted) 100%);background-size:1000px 100%;animation:_shimmer_1nxj5_1 2s infinite linear;border-radius:.25rem;margin-bottom:.5rem}._skeletonParagraph_1nxj5_80:not(:last-child){margin-bottom:1rem}._skeletonParagraphShort_1nxj5_93{width:70%;height:1rem;background:linear-gradient(90deg,var(--xw-muted) 0%,color-mix(in oklch,var(--xw-muted) 50%,white) 50%,var(--xw-muted) 100%);background-size:1000px 100%;animation:_shimmer_1nxj5_1 2s infinite linear;border-radius:.25rem}._loadingText_1nxj5_102{color:var(--xw-muted-foreground);font-size:1rem}._errorText_1nxj5_107{color:var(--xw-destructive);font-size:1rem}._mdxContent_1nxj5_112{max-width:none}._mdxContent_1nxj5_112 h1{font-size:1.875rem;font-weight:600;letter-spacing:-.025em;margin-bottom:1.5rem;border-bottom:1px solid var(--xw-border);padding-bottom:.75rem;line-height:1.2;scroll-margin-top:5rem}._mdxContent_1nxj5_112 h1._withMetadata_1nxj5_125{border-bottom:none;padding-bottom:0;margin-bottom:.5rem}._mdxContent_1nxj5_112 h1 a{color:inherit;text-decoration:none;border:none;position:relative}._mdxContent_1nxj5_112 h1 a:hover{color:inherit;border:none}._mdxContent_1nxj5_112 h1 a:hover:before{content:"#";position:absolute;left:-1.5rem;color:var(--xw-link);opacity:.7;font-weight:400}._mdxContent_1nxj5_112 h2{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;margin-bottom:1rem;margin-top:2.5rem;border-bottom:1px solid var(--xw-border);padding-bottom:.5rem;line-height:1.3;scroll-margin-top:5rem}._mdxContent_1nxj5_112 h2 a{color:inherit;text-decoration:none;border:none;position:relative}._mdxContent_1nxj5_112 h2 a:hover{color:inherit;border:none}._mdxContent_1nxj5_112 h2 a:hover:before{content:"#";position:absolute;left:-1.5rem;color:var(--xw-link);opacity:.7;font-weight:400}._mdxContent_1nxj5_112 h3{font-size:1.25rem;font-weight:500;letter-spacing:-.015em;margin-bottom:.75rem;margin-top:2rem;line-height:1.4;scroll-margin-top:5rem}._mdxContent_1nxj5_112 h3 a{color:inherit;text-decoration:none;border:none;position:relative}._mdxContent_1nxj5_112 h3 a:hover{color:inherit;border:none}._mdxContent_1nxj5_112 h3 a:hover:before{content:"#";position:absolute;left:-1.5rem;color:var(--xw-link);opacity:.7;font-weight:400}._mdxContent_1nxj5_112 h4{font-size:1.125rem;font-weight:500;letter-spacing:-.01em;margin-bottom:.5rem;margin-top:1.5rem;line-height:1.4;scroll-margin-top:5rem}._mdxContent_1nxj5_112 h4 a{color:inherit;text-decoration:none;border:none;position:relative}._mdxContent_1nxj5_112 h4 a:hover{color:inherit;border:none}._mdxContent_1nxj5_112 h4 a:hover:before{content:"#";position:absolute;left:-1.5rem;color:var(--xw-link);opacity:.7;font-weight:400}._mdxContent_1nxj5_112 h5{font-size:1rem;font-weight:500;margin-bottom:.5rem;margin-top:1.25rem;line-height:1.5}._mdxContent_1nxj5_112 h6{font-size:.875rem;font-weight:500;margin-bottom:.5rem;margin-top:1rem;line-height:1.5}._mdxContent_1nxj5_112 p{font-size:1rem;line-height:1.65;margin-bottom:1rem;color:var(--xw-foreground)}._mdxContent_1nxj5_112 ul,._mdxContent_1nxj5_112 ol{margin-bottom:1rem;padding-left:1.5rem}._mdxContent_1nxj5_112 ul li,._mdxContent_1nxj5_112 ol li{font-size:1rem;line-height:1.65;margin-bottom:.375rem}._mdxContent_1nxj5_112 ul ul,._mdxContent_1nxj5_112 ul ol,._mdxContent_1nxj5_112 ol ul,._mdxContent_1nxj5_112 ol ol{margin-top:.375rem;margin-bottom:.375rem}._mdxContent_1nxj5_112 ul{list-style-type:disc}._mdxContent_1nxj5_112 ol{list-style-type:decimal}._mdxContent_1nxj5_112 code{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.875rem;background-color:var(--xw-muted);padding:.1875rem .4375rem;border-radius:.25rem;color:var(--xw-foreground);font-weight:500}._mdxContent_1nxj5_112 pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;background-color:var(--xw-muted);padding:1.25rem;border-radius:.75rem;overflow-x:auto;margin:1.5rem 0;position:relative;border:1px solid var(--xw-border)}._mdxContent_1nxj5_112 pre code{background-color:transparent;padding:0;color:inherit;font-weight:400}._mdxContent_1nxj5_112 ._codeBlock_1nxj5_300{position:relative;margin-bottom:1.5rem}._mdxContent_1nxj5_112 ._codeLanguage_1nxj5_304{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;color:var(--xw-muted-foreground);background-color:var(--xw-background);padding:.25rem .5rem;border-radius:.25rem;border:1px solid var(--xw-border)}._mdxContent_1nxj5_112 blockquote{border-left:3px solid var(--xw-accent);padding-left:1rem;font-style:italic;color:var(--xw-muted-foreground);margin-bottom:1rem;margin-top:1rem}._mdxContent_1nxj5_112 blockquote p{margin-bottom:.5rem}._mdxContent_1nxj5_112 blockquote p:last-child{margin-bottom:0}._mdxContent_1nxj5_112 a{color:var(--xw-link);text-decoration:none;transition:color .15s cubic-bezier(.4,0,.2,1);border-bottom:1px solid transparent}._mdxContent_1nxj5_112 a:hover{color:color-mix(in oklch,var(--xw-link) 80%,transparent);border-bottom-color:currentColor}._mdxContent_1nxj5_112 strong{font-weight:600}._mdxContent_1nxj5_112 em{font-style:italic}._mdxContent_1nxj5_112 table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem}._mdxContent_1nxj5_112 table th,._mdxContent_1nxj5_112 table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--xw-border);line-height:1.4}._mdxContent_1nxj5_112 table th{font-weight:500;background-color:var(--xw-muted);font-size:.875rem;letter-spacing:.025em}._mdxContent_1nxj5_112 table tbody tr:hover{background-color:color-mix(in oklch,var(--xw-muted) 50%,transparent)}._mdxContent_1nxj5_112 img{max-width:100%;height:auto;border-radius:.5rem;margin:1.5rem 0;border:1px solid var(--xw-border)}._mdxContent_1nxj5_112 hr{border:none;border-top:1px solid var(--xw-border);margin:2rem 0}._searchButton_1k9sl_1{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.375rem;background:none;border:none;color:var(--xw-muted-foreground);cursor:pointer;transition:all .2s ease;font-size:.875rem}._searchButton_1k9sl_1:hover{border-color:var(--xw-input)}._searchButton_1k9sl_1 ._searchIcon_1k9sl_17{width:1rem;height:1rem;opacity:.6}@media(max-width:768px){._searchButton_1k9sl_1 ._searchHint_1k9sl_23{display:none}}._searchButton_1k9sl_1 ._kbd_1k9sl_27{display:none;padding:.125rem .375rem;background:var(--xw-card);border:1px solid var(--xw-border);border-radius:.25rem;font-size:.75rem;font-family:monospace}@media(min-width:768px){._searchButton_1k9sl_1 ._kbd_1k9sl_27{display:block}}._searchOverlay_1k9sl_42{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:10vh;animation:_fadeIn_1k9sl_1 .2s ease;height:100vh}@keyframes _fadeIn_1k9sl_1{0%{opacity:0}to{opacity:1}}._searchModal_1k9sl_67{width:90%;max-width:600px;background:var(--xw-card);border:1px solid var(--xw-border);border-radius:.75rem;box-shadow:0 20px 60px #0000004d;animation:_slideIn_1k9sl_1 .2s ease;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}@keyframes _slideIn_1k9sl_1{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}._searchHeader_1k9sl_91{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--xw-border)}._searchHeader_1k9sl_91 ._searchIcon_1k9sl_17{width:1.25rem;height:1.25rem;opacity:.5;flex-shrink:0}._searchInput_1k9sl_105{flex:1;border:none;background:transparent;color:var(--xw-foreground);font-size:1rem;outline:none}._searchInput_1k9sl_105:focus{border:none;outline:none;box-shadow:none}._searchInput_1k9sl_105::placeholder{color:var(--xw-muted-foreground);opacity:.6}._closeButton_1k9sl_123{background:none;border:none;color:var(--xw-muted-foreground);cursor:pointer;padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:.25rem;transition:all .2s ease}._closeButton_1k9sl_123 svg{width:1.25rem;height:1.25rem}._closeButton_1k9sl_123:hover{background:var(--xw-secondary);color:var(--xw-foreground)}._searchResults_1k9sl_144{flex:1;overflow-y:auto;padding:.5rem;min-height:200px;max-height:400px}._resultsList_1k9sl_152{list-style:none;padding:0;margin:0}._resultItem_1k9sl_158{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;width:100%;padding:.75rem 1rem;background:none;border:none;border-radius:.5rem;cursor:pointer;text-align:left;transition:all .15s ease;color:var(--xw-foreground)}._resultItem_1k9sl_158:hover,._resultItem_1k9sl_158._selected_1k9sl_173{background:var(--xw-secondary)}._resultItem_1k9sl_158 ._resultTitle_1k9sl_176{font-weight:500;font-size:.95rem}._resultItem_1k9sl_158 ._resultSlug_1k9sl_180{font-size:.8rem;color:var(--xw-muted-foreground);opacity:.8}._noResults_1k9sl_186{padding:3rem 1rem;text-align:center;color:var(--xw-muted-foreground);font-size:.9rem}._searchHints_1k9sl_193{display:flex;align-items:center;gap:1.5rem;padding:.75rem 1.25rem;border-top:1px solid var(--xw-border);background:var(--xw-secondary);font-size:.8rem;color:var(--xw-muted-foreground)}@media(max-width:768px){._searchHints_1k9sl_193{flex-direction:column;align-items:flex-start;gap:.5rem}}._searchHints_1k9sl_193 ._hint_1k9sl_210{display:flex;align-items:center;gap:.5rem}._searchHints_1k9sl_193 ._hint_1k9sl_210 kbd{padding:.125rem .375rem;background:var(--xw-card);border:1px solid var(--xw-border);border-radius:.25rem;font-size:.75rem;font-family:monospace;min-width:1.5rem;text-align:center}._header_jrobc_1{position:sticky;top:0;z-index:1020;background-color:#fffc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);height:3.5rem;padding-left:16rem}.dark ._header_jrobc_1{background-color:#2020201a}@supports not (backdrop-filter: blur(12px)){._header_jrobc_1{background-color:var(--xw-background)}}@media(max-width:767px){._header_jrobc_1{padding:0}}._container_jrobc_24{width:100%;max-width:1400px;margin:0 auto;padding:0 1.5rem}@media(max-width:767px){._container_jrobc_24{padding:0 1rem}}._content_jrobc_36{display:flex;align-items:center;justify-content:space-between;height:3.5rem}._leftSection_jrobc_43{display:flex;align-items:center;gap:1rem}._mobileMenuButton_jrobc_49{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:.15s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;outline:none}._mobileMenuButton_jrobc_49:focus-visible{outline:2px solid var(--xw-ring);outline-offset:2px}._mobileMenuButton_jrobc_49:disabled{pointer-events:none;opacity:.5}._mobileMenuButton_jrobc_49{padding:.5rem;background-color:transparent;color:var(--xw-muted-foreground);border-radius:.5rem;display:none}._mobileMenuButton_jrobc_49:hover{background-color:var(--xw-muted);color:var(--xw-foreground)}@media(max-width:767px){._mobileMenuButton_jrobc_49{display:flex}}._burgerIcon_jrobc_87{width:1.25rem;height:1.25rem}._logo_jrobc_92,._nav_jrobc_98{display:flex;align-items:center;gap:.5rem}@media(max-width:767px){._nav_jrobc_98{gap:.25rem}}._navLink_jrobc_109{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:var(--xw-muted-foreground);text-decoration:none;transition:all .15s cubic-bezier(.4,0,.2,1)}._navLink_jrobc_109:hover{color:var(--xw-foreground)}._navLink_jrobc_109:focus{outline:none}._githubIcon_jrobc_128{width:1rem;height:1rem;flex-shrink:0;transition:transform .15s cubic-bezier(.4,0,.2,1)}._externalIcon_jrobc_135{width:1rem;height:1rem;flex-shrink:0}._supportDropdown_jrobc_141,._themeDropdown_jrobc_145{position:relative}._themeButton_jrobc_149{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:var(--xw-muted-foreground);background:none;border:none;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}._themeButton_jrobc_149:hover{color:var(--xw-foreground);background-color:var(--xw-muted)}._themeButton_jrobc_149:focus{outline:none}._themeIcon_jrobc_171{width:1.125rem;height:1.125rem;flex-shrink:0}._supportButton_jrobc_177{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:var(--xw-muted-foreground);background:none;border:none;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}._supportButton_jrobc_177:hover{color:var(--xw-foreground)}._supportButton_jrobc_177:focus{outline:none}._caretIcon_jrobc_198{width:.875rem;height:.875rem;flex-shrink:0;transition:transform .15s cubic-bezier(.4,0,.2,1)}button[aria-expanded=true] ._caretIcon_jrobc_198{transform:rotate(180deg)}._dropdownMenu_jrobc_208{position:absolute;top:calc(100% + .25rem);right:0;min-width:10rem;background-color:var(--xw-popover);border:1px solid var(--xw-border);border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;z-index:1000;overflow:hidden}._dropdownItem_jrobc_221{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem 1rem;font-size:.875rem;color:var(--xw-popover-foreground);text-decoration:none;background:none;border:none;cursor:pointer;text-align:left;transition:background-color .15s cubic-bezier(.4,0,.2,1)}._dropdownItem_jrobc_221:hover{background-color:var(--xw-muted)}._dropdownItem_jrobc_221:focus{outline:none;background-color:var(--xw-muted)}._dropdownIcon_jrobc_244{width:1rem;height:1rem;flex-shrink:0}@media(max-width:767px){._logoText_jrobc_251{font-size:1rem}._navLink_jrobc_109{padding:.25rem .5rem;font-size:.8rem;gap:.25rem}._githubIcon_jrobc_128{width:.875rem;height:.875rem}}._backdrop_1a7pu_1{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1040;opacity:0;visibility:hidden;transition:all .15s cubic-bezier(.4,0,.2,1)}._backdrop_1a7pu_1._open_1a7pu_13{opacity:1;visibility:visible}._mobileMenu_1a7pu_18{position:fixed;top:0;left:0;width:320px;height:100vh;background-color:var(--xw-background);border-right:1px solid var(--xw-border);z-index:1050;transform:translate(-100%);transition:transform .15s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}._mobileMenu_1a7pu_18._open_1a7pu_13{transform:translate(0)}._header_1a7pu_37{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--xw-border);flex-shrink:0}._brand_1a7pu_46{flex:1;display:flex;align-items:center;gap:.5rem}._cloudIcon_1a7pu_53{width:1.5rem;height:1.5rem;flex-shrink:0}._cloudIcon_1a7pu_53 .accent{fill:#d33079}._title_1a7pu_62{font-size:1.125rem;font-weight:600;color:var(--xw-foreground);margin:0}._closeButton_1a7pu_69{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:.15s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;outline:none}._closeButton_1a7pu_69:focus-visible{outline:2px solid var(--xw-ring);outline-offset:2px}._closeButton_1a7pu_69:disabled{pointer-events:none;opacity:.5}._closeButton_1a7pu_69{padding:.5rem;background-color:transparent;color:var(--xw-muted-foreground);border-radius:.5rem}._closeButton_1a7pu_69:hover{background-color:var(--xw-muted);color:var(--xw-foreground)}._closeIcon_1a7pu_101{width:1.25rem;height:1.25rem}._languageSection_1a7pu_106{padding:1.5rem;border-bottom:1px solid var(--xw-border);flex-shrink:0}._languageSelect_1a7pu_112{position:relative;width:100%}._languageButton_1a7pu_117{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:.15s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;outline:none}._languageButton_1a7pu_117:focus-visible{outline:2px solid var(--xw-ring);outline-offset:2px}._languageButton_1a7pu_117:disabled{pointer-events:none;opacity:.5}._languageButton_1a7pu_117{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem 1rem;background-color:var(--xw-background);border:1px solid var(--xw-border);color:var(--xw-foreground);gap:.5rem}._languageButton_1a7pu_117:hover,._languageButton_1a7pu_117[aria-expanded=true]{background-color:var(--xw-muted)}._icon_1a7pu_156{width:1rem;height:1rem;flex-shrink:0}._chevron_1a7pu_162{width:1rem;height:1rem;transition:transform .15s cubic-bezier(.4,0,.2,1);margin-left:auto}._languageButton_1a7pu_117[aria-expanded=true] ._chevron_1a7pu_162{transform:rotate(180deg)}._languageDropdown_1a7pu_172{position:absolute;top:100%;left:0;right:0;background-color:var(--xw-popover);border:1px solid var(--xw-border);border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;z-index:1000;margin-top:.25rem}._languageOption_1a7pu_185{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:.15s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;outline:none}._languageOption_1a7pu_185:focus-visible{outline:2px solid var(--xw-ring);outline-offset:2px}._languageOption_1a7pu_185:disabled{pointer-events:none;opacity:.5}._languageOption_1a7pu_185{width:100%;padding:.5rem 1rem;background-color:transparent;color:var(--xw-foreground);text-align:left;justify-content:flex-start;border-radius:0}._languageOption_1a7pu_185:first-child{border-top-left-radius:.5rem;border-top-right-radius:.5rem}._languageOption_1a7pu_185:last-child{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}._languageOption_1a7pu_185:hover{background-color:var(--xw-muted)}._languageOption_1a7pu_185._selected_1a7pu_226{background-color:var(--xw-accent);color:var(--xw-accent-foreground)}._scrollArea_1a7pu_231{flex:1;overflow-y:auto;padding:1.5rem 0}._navigation_1a7pu_237{padding:0 1.5rem}._section_1a7pu_241{margin-bottom:1rem}._sectionButton_1a7pu_245{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:.15s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;outline:none}._sectionButton_1a7pu_245:focus-visible{outline:2px solid var(--xw-ring);outline-offset:2px}._sectionButton_1a7pu_245:disabled{pointer-events:none;opacity:.5}._sectionButton_1a7pu_245{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem 1rem;background-color:transparent;color:var(--xw-foreground);font-weight:600;gap:.5rem;border-radius:.5rem}._sectionButton_1a7pu_245:hover{background-color:var(--xw-muted)}._sectionButton_1a7pu_245 ._icon_1a7pu_156{transition:transform .15s cubic-bezier(.4,0,.2,1);margin-left:auto}._sectionButton_1a7pu_245._expanded_1a7pu_285 ._icon_1a7pu_156{transform:rotate(90deg)}._sectionItems_1a7pu_289{margin-top:.5rem;margin-left:1rem;display:flex;flex-direction:column;gap:.25rem}._navItem_1a7pu_297{display:block;padding:.5rem 1rem;border-radius:.5rem;color:var(--xw-muted-foreground);text-decoration:none;transition:all .15s cubic-bezier(.4,0,.2,1);font-size:.875rem}._navItem_1a7pu_297:hover{background-color:var(--xw-muted);color:var(--xw-foreground)}._navItem_1a7pu_297._active_1a7pu_310{background-color:var(--xw-accent);color:var(--xw-accent-foreground);font-weight:500}._navItemContent_1a7pu_316{display:flex;align-items:center;gap:.5rem}._navItemTitle_1a7pu_322{flex:1}@media(min-width:1024px){._mobileMenu_1a7pu_18,._backdrop_1a7pu_1{display:none}}._sidebar_1tdxt_1{position:fixed;top:0;left:0;width:16rem;height:100vh;background-color:var(--xw-sidebar);overflow-y:auto;z-index:1020}@media(max-width:767px){._sidebar_1tdxt_1{display:none}}._header_1tdxt_17{position:sticky;top:0;z-index:1020;padding:1rem;background-color:var(--xw-sidebar);display:flex;flex-direction:column;gap:.5rem;padding-bottom:0}._brand_1tdxt_29{display:flex;align-items:center;gap:.5rem}._cloudIcon_1tdxt_35{width:1.5rem;height:1.5rem;flex-shrink:0}._cloudIcon_1tdxt_35 .accent{fill:#d33079}._title_1tdxt_44{font-size:1rem;font-weight:600;line-height:1.5;margin:0;letter-spacing:-.02em;color:var(--xw-foreground)}._languageSelect_1tdxt_55{position:relative;margin-top:.25rem;width:100%}._languageButton_1tdxt_61{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:.15s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;outline:none}._languageButton_1tdxt_61:focus-visible{outline:2px solid var(--xw-ring);outline-offset:2px}._languageButton_1tdxt_61:disabled{pointer-events:none;opacity:.5}._languageButton_1tdxt_61{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;width:100%;gap:.25rem;font-size:.8rem;background:transparent;border:1px solid var(--xw-border);border-radius:.25rem;color:var(--xw-muted-foreground)}._languageButton_1tdxt_61:hover{background-color:var(--xw-muted);color:var(--xw-foreground)}._languageButton_1tdxt_61 ._icon_1tdxt_99{width:.875rem;height:.875rem;flex-shrink:0}._languageButton_1tdxt_61 ._chevron_1tdxt_104{width:.875rem;height:.875rem;flex-shrink:0;transition:transform .15s cubic-bezier(.4,0,.2,1)}._languageButton_1tdxt_61[aria-expanded=true] ._chevron_1tdxt_104{transform:rotate(180deg)}._languageDropdown_1tdxt_114{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background-color:var(--xw-popover);border:1px solid var(--xw-border);border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;z-index:1000;overflow:hidden}._languageOption_1tdxt_128{display:block;width:100%;padding:.25rem .5rem;text-align:left;background:none;border:none;color:var(--xw-popover-foreground);font-size:.85rem;cursor:pointer;transition:background-color .15s cubic-bezier(.4,0,.2,1)}._languageOption_1tdxt_128:hover{background-color:var(--xw-muted)}._languageOption_1tdxt_128:focus{outline:none;background-color:var(--xw-muted)}._languageOption_1tdxt_128._selected_1tdxt_147{background-color:var(--xw-muted);color:var(--xw-foreground)}._scrollArea_1tdxt_152{height:calc(100vh - 120px);padding:1rem .5rem 1rem 1rem;overflow-y:auto}._navigation_1tdxt_158{display:flex;flex-direction:column;gap:.125rem}._section_1tdxt_164{display:flex;flex-direction:column;gap:0}._sectionButton_1tdxt_170{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:.5rem;font-size:.875rem;font-weight:500;transition:.15s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;outline:none}._sectionButton_1tdxt_170:focus-visible{outline:2px solid var(--xw-ring);outline-offset:2px}._sectionButton_1tdxt_170:disabled{pointer-events:none;opacity:.5}._sectionButton_1tdxt_170{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.25rem .5rem;font-weight:500;font-size:.85rem;color:var(--xw-muted-foreground);background:transparent;text-align:left;letter-spacing:-.01em;border:none}._sectionButton_1tdxt_170:hover{color:var(--xw-foreground)}._sectionButton_1tdxt_170 ._icon_1tdxt_99{width:.875rem;height:.875rem;transition:transform .15s cubic-bezier(.4,0,.2,1)}._sectionButton_1tdxt_170._expanded_1tdxt_213 ._icon_1tdxt_99{transform:rotate(90deg)}._sectionItems_1tdxt_217{margin-top:.25rem;padding-left:1rem;display:flex;flex-direction:column;gap:.125rem}._navItem_1tdxt_225{display:block;width:100%;padding:.25rem .5rem;border-radius:.25rem;font-size:.85rem;color:var(--xw-muted-foreground);text-decoration:none;transition:color .15s cubic-bezier(.4,0,.2,1)}._navItem_1tdxt_225:hover{color:var(--xw-foreground)}._navItem_1tdxt_225._active_1tdxt_238{color:var(--xw-foreground);font-weight:500}._navItemContent_1tdxt_243{display:flex;align-items:center;justify-content:space-between;width:100%}._sidebar_1tdxt_1::-webkit-scrollbar{width:6px}._sidebar_1tdxt_1::-webkit-scrollbar-track{background:transparent}._sidebar_1tdxt_1::-webkit-scrollbar-thumb{background:var(--xw-muted-foreground);border-radius:9999px;opacity:.3}._sidebar_1tdxt_1::-webkit-scrollbar-thumb:hover{opacity:.6}._app_1v4z4_1{min-height:100vh;background-color:var(--xw-background);color:var(--xw-foreground);display:flex;flex-direction:column}._layout_1v4z4_9{display:flex;flex:1;min-height:calc(100vh - 3.5rem)}._main_1v4z4_15{flex:1;display:flex;flex-direction:column;margin-left:16rem}@media(max-width:767px){._main_1v4z4_15{margin-left:0}}._contentWrapper_1v4z4_27{display:flex;flex:1;position:relative;width:100%;max-width:80rem;margin:0 auto;padding:2rem}@media(max-width:1024px){._contentWrapper_1v4z4_27{padding:1.5rem}}@media(max-width:767px){._contentWrapper_1v4z4_27{padding:1rem}}
package/styles/_variables.scss DELETED
@@ -1,61 +0,0 @@
1
- // Color Variables - Using CSS custom properties for theme support
2
- // All variables use xw- prefix to avoid conflicts with consuming applications
3
- $color-background: var(--xw-background);
4
- $color-foreground: var(--xw-foreground);
5
- $color-primary: var(--xw-primary);
6
- $color-card: var(--xw-card);
7
- $color-card-foreground: var(--xw-card-foreground);
8
- $color-popover: var(--xw-popover);
9
- $color-popover-foreground: var(--xw-popover-foreground);
10
- $color-muted: var(--xw-muted);
11
- $color-muted-foreground: var(--xw-muted-foreground);
12
- $color-accent: var(--xw-accent);
13
- $color-accent-foreground: var(--xw-accent-foreground);
14
- $color-destructive: var(--xw-destructive);
15
- $color-border: var(--xw-border);
16
- $color-input: var(--xw-input);
17
- $color-ring: var(--xw-ring);
18
- $color-secondary: var(--xw-secondary);
19
- $color-secondary-foreground: var(--xw-secondary-foreground);
20
- $color-link: var(--xw-link);
21
- $color-sidebar: var(--xw-sidebar);
22
- $color-sidebar-foreground: var(--xw-sidebar-foreground);
23
-
24
- // Border Radius
25
- $radius-base: 0.5rem;
26
- $radius-sm: calc($radius-base * 0.5);
27
- $radius-md: $radius-base;
28
- $radius-lg: calc($radius-base * 1.5);
29
- $radius-full: 9999px;
30
-
31
- // Typography
32
- $font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
33
- $font-family-mono: ui-monospace, 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
34
-
35
- // Spacing
36
- $spacing-xs: 0.25rem;
37
- $spacing-sm: 0.5rem;
38
- $spacing-md: 1rem;
39
- $spacing-lg: 1.5rem;
40
- $spacing-xl: 2rem;
41
-
42
- // Breakpoints
43
- $breakpoint-md: 768px;
44
- $breakpoint-lg: 1024px;
45
- $breakpoint-xl: 1280px;
46
-
47
- // Z-index
48
- $z-index-dropdown: 1000;
49
- $z-index-sticky: 1020;
50
- $z-index-mobile-menu-backdrop: 1040;
51
- $z-index-mobile-menu: 1050;
52
- $z-index-search-overlay: 2000;
53
- $z-index-search-modal: 2200;
54
-
55
- // Shadows
56
- $shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
57
- $shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
58
- $shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
59
-
60
- // Transitions
61
- $transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
package/styles/global.scss DELETED
@@ -1,169 +0,0 @@
1
- @use './variables' as *;
2
-
3
-
4
- .xw-blog-root {
5
- width: 100%;
6
- height: 100%;
7
- line-height: 1.5;
8
- -webkit-font-smoothing: antialiased;
9
- font-family: $font-family-sans;
10
- background-color: $color-background;
11
- color: $color-foreground;
12
-
13
- *,
14
- *::before,
15
- *::after {
16
- box-sizing: border-box;
17
- }
18
-
19
- img,
20
- picture,
21
- video,
22
- canvas,
23
- svg {
24
- display: block;
25
- max-width: 100%;
26
- }
27
-
28
- p,
29
- h1,
30
- h2,
31
- h3,
32
- h4,
33
- h5,
34
- h6 {
35
- overflow-wrap: break-word;
36
- }
37
-
38
- // Typography - scoped to xw-blog-root
39
- h1 {
40
- font-size: 1.875rem;
41
- font-weight: 600;
42
- line-height: 1.2;
43
- letter-spacing: -0.025em;
44
- margin-bottom: 1.5rem;
45
- }
46
-
47
- h2 {
48
- font-size: 1.5rem;
49
- font-weight: 500;
50
- line-height: 1.3;
51
- letter-spacing: -0.02em;
52
- margin-bottom: 1rem;
53
- margin-top: 2.5rem;
54
- }
55
-
56
- h3 {
57
- font-size: 1.25rem;
58
- font-weight: 500;
59
- line-height: 1.4;
60
- letter-spacing: -0.015em;
61
- margin-bottom: 0.75rem;
62
- margin-top: 2rem;
63
- }
64
-
65
- h4 {
66
- font-size: 1.125rem;
67
- font-weight: 500;
68
- line-height: 1.4;
69
- letter-spacing: -0.01em;
70
- margin-bottom: 0.5rem;
71
- margin-top: 1.5rem;
72
- }
73
-
74
- h5 {
75
- font-size: 1rem;
76
- font-weight: 500;
77
- line-height: 1.5;
78
- margin-bottom: 0.5rem;
79
- margin-top: 1.25rem;
80
- }
81
-
82
- h6 {
83
- font-size: 0.875rem;
84
- font-weight: 500;
85
- line-height: 1.5;
86
- margin-bottom: 0.5rem;
87
- margin-top: 1rem;
88
- }
89
-
90
- p {
91
- font-size: 1rem;
92
- line-height: 1.65;
93
- margin-bottom: 1rem;
94
- }
95
-
96
- code {
97
- font-family: $font-family-mono;
98
- font-size: 0.875rem;
99
- background-color: $color-muted;
100
- padding: 0.1875rem 0.4375rem;
101
- border-radius: $radius-sm;
102
- font-weight: 500;
103
- }
104
-
105
- pre {
106
- font-family: $font-family-mono;
107
- background-color: $color-muted;
108
- padding: 1.25rem;
109
- border-radius: $radius-lg;
110
- overflow-x: auto;
111
- margin: 1.5rem 0;
112
- border: 1px solid $color-border;
113
-
114
- code {
115
- background-color: transparent;
116
- padding: 0;
117
- font-weight: 400;
118
- }
119
- }
120
-
121
- // Focus styles
122
- :focus-visible {
123
- outline: 2px solid $color-ring;
124
- outline-offset: 2px;
125
- }
126
-
127
- // Selection styles
128
- ::selection {
129
- background-color: $color-accent;
130
- color: $color-accent-foreground;
131
- }
132
-
133
- // Utility classes
134
- .sr-only {
135
- position: absolute !important;
136
- width: 1px !important;
137
- height: 1px !important;
138
- padding: 0 !important;
139
- margin: -1px !important;
140
- overflow: hidden !important;
141
- clip: rect(0, 0, 0, 0) !important;
142
- white-space: nowrap !important;
143
- border: 0 !important;
144
- }
145
-
146
- .text-muted {
147
- color: $color-muted-foreground;
148
- }
149
-
150
- .text-destructive {
151
- color: $color-destructive;
152
- }
153
-
154
- .bg-muted {
155
- background-color: $color-muted;
156
- }
157
-
158
- .border {
159
- border: 1px solid $color-border;
160
- }
161
-
162
- .rounded {
163
- border-radius: $radius-md;
164
- }
165
-
166
- .shadow {
167
- box-shadow: $shadow-md;
168
- }
169
- }
package/styles/main.scss DELETED
@@ -1,77 +0,0 @@
1
- /*
2
- Main styles entry point - imports all required stylesheets*/
3
- @use './global.scss';
4
-
5
- :root {
6
- --xw-radius: 0.625rem;
7
- --xw-background: oklch(1 0 0);
8
- --xw-foreground: oklch(0.145 0 0);
9
- --xw-card: oklch(1 0 0);
10
- --xw-card-foreground: oklch(0.145 0 0);
11
- --xw-popover: oklch(1 0 0);
12
- --xw-popover-foreground: oklch(0.145 0 0);
13
- --xw-primary: oklch(0.205 0 0);
14
- --xw-primary-foreground: oklch(0.985 0 0);
15
- --xw-secondary: oklch(0.97 0 0);
16
- --xw-secondary-foreground: oklch(0.205 0 0);
17
- --xw-muted: oklch(0.97 0 0);
18
- --xw-muted-foreground: oklch(0.556 0 0);
19
- --xw-accent: oklch(0.97 0 0);
20
- --xw-accent-foreground: oklch(0.205 0 0);
21
- --xw-destructive: oklch(0.577 0.245 27.325);
22
- --xw-border: oklch(0.922 0 0);
23
- --xw-input: oklch(0.922 0 0);
24
- --xw-ring: oklch(0.708 0 0);
25
- --xw-link: rgb(211, 48, 121);
26
- --xw-chart-1: oklch(0.646 0.222 41.116);
27
- --xw-chart-2: oklch(0.6 0.118 184.704);
28
- --xw-chart-3: oklch(0.398 0.07 227.392);
29
- --xw-chart-4: oklch(0.828 0.189 84.429);
30
- --xw-chart-5: oklch(0.769 0.188 70.08);
31
- --xw-sidebar: oklch(0.97 0 0);
32
- --xw-sidebar-foreground: oklch(0.145 0 0);
33
- --xw-sidebar-primary: oklch(0.205 0 0);
34
- --xw-sidebar-primary-foreground: oklch(0.985 0 0);
35
- --xw-sidebar-accent: oklch(0.97 0 0);
36
- --xw-sidebar-accent-foreground: oklch(0.205 0 0);
37
- --xw-sidebar-border: oklch(0.922 0 0);
38
- --xw-sidebar-ring: oklch(0.708 0 0);
39
- }
40
-
41
- /*
42
- Dark mode
43
- */
44
- .dark {
45
- --xw-background: oklch(0.145 0 0);
46
- --xw-foreground: oklch(0.985 0 0);
47
- --xw-card: oklch(0.205 0 0);
48
- --xw-card-foreground: oklch(0.985 0 0);
49
- --xw-popover: oklch(0.205 0 0);
50
- --xw-popover-foreground: oklch(0.985 0 0);
51
- --xw-primary: oklch(0.922 0 0);
52
- --xw-primary-foreground: oklch(0.205 0 0);
53
- --xw-secondary: oklch(0.269 0 0);
54
- --xw-secondary-foreground: oklch(0.985 0 0);
55
- --xw-muted: oklch(0.269 0 0);
56
- --xw-muted-foreground: oklch(0.708 0 0);
57
- --xw-accent: oklch(0.269 0 0);
58
- --xw-accent-foreground: oklch(0.985 0 0);
59
- --xw-destructive: oklch(0.704 0.191 22.216);
60
- --xw-border: oklch(1 0 0 / 10%);
61
- --xw-input: oklch(1 0 0 / 15%);
62
- --xw-ring: oklch(0.556 0 0);
63
- --xw-link: rgb(211, 48, 121);
64
- --xw-chart-1: oklch(0.488 0.243 264.376);
65
- --xw-chart-2: oklch(0.696 0.17 162.48);
66
- --xw-chart-3: oklch(0.769 0.188 70.08);
67
- --xw-chart-4: oklch(0.627 0.265 303.9);
68
- --xw-chart-5: oklch(0.645 0.246 16.439);
69
- --xw-sidebar: oklch(0.205 0 0);
70
- --xw-sidebar-foreground: oklch(0.985 0 0);
71
- --xw-sidebar-primary: oklch(0.488 0.243 264.376);
72
- --xw-sidebar-primary-foreground: oklch(0.985 0 0);
73
- --xw-sidebar-accent: oklch(0.269 0 0);
74
- --xw-sidebar-accent-foreground: oklch(0.985 0 0);
75
- --xw-sidebar-border: oklch(1 0 0 / 10%);
76
- --xw-sidebar-ring: oklch(0.556 0 0);
77
- }
package/styles/mixins.scss DELETED
@@ -1,129 +0,0 @@
1
- @use './variables' as *;
2
-
3
- // Mixins for common patterns
4
- @mixin button-base {
5
- display: inline-flex;
6
- align-items: center;
7
- justify-content: center;
8
- white-space: nowrap;
9
- border-radius: $radius-md;
10
- font-size: 0.875rem;
11
- font-weight: 500;
12
- transition: $transition-fast;
13
- cursor: pointer;
14
- border: none;
15
- outline: none;
16
-
17
- &:focus-visible {
18
- outline: 2px solid $color-ring;
19
- outline-offset: 2px;
20
- }
21
-
22
- &:disabled {
23
- pointer-events: none;
24
- opacity: 0.5;
25
- }
26
- }
27
-
28
- @mixin button-variant($bg, $color, $hover-bg: null) {
29
- background-color: $bg;
30
- color: $color;
31
-
32
- @if $hover-bg {
33
- &:hover {
34
- background-color: $hover-bg;
35
- }
36
- } @else {
37
- &:hover {
38
- opacity: 0.9;
39
- }
40
- }
41
- }
42
-
43
- @mixin input-base {
44
- display: flex;
45
- width: 100%;
46
- border-radius: $radius-md;
47
- border: 1px solid $color-input;
48
- background-color: $color-background;
49
- padding: $spacing-sm $spacing-md;
50
- font-size: 0.875rem;
51
- transition: $transition-fast;
52
-
53
- &:focus {
54
- outline: none;
55
- box-shadow: 0 0 0 2px $color-ring;
56
- }
57
-
58
- &:disabled {
59
- cursor: not-allowed;
60
- opacity: 0.5;
61
- }
62
-
63
- &::placeholder {
64
- color: $color-muted-foreground;
65
- }
66
- }
67
-
68
- @mixin card {
69
- border-radius: $radius-lg;
70
- border: 1px solid $color-border;
71
- background-color: $color-card;
72
- color: $color-card-foreground;
73
- box-shadow: $shadow-sm;
74
- }
75
-
76
- @mixin flex-center {
77
- display: flex;
78
- align-items: center;
79
- justify-content: center;
80
- }
81
-
82
- @mixin flex-between {
83
- display: flex;
84
- align-items: center;
85
- justify-content: space-between;
86
- }
87
-
88
- @mixin text-truncate {
89
- overflow: hidden;
90
- text-overflow: ellipsis;
91
- white-space: nowrap;
92
- }
93
-
94
- @mixin visually-hidden {
95
- position: absolute !important;
96
- width: 1px !important;
97
- height: 1px !important;
98
- padding: 0 !important;
99
- margin: -1px !important;
100
- overflow: hidden !important;
101
- clip: rect(0, 0, 0, 0) !important;
102
- white-space: nowrap !important;
103
- border: 0 !important;
104
- }
105
-
106
- // Responsive mixins
107
- @mixin mobile {
108
- @media (max-width: #{$breakpoint-md - 1px}) {
109
- @content;
110
- }
111
- }
112
-
113
- @mixin tablet {
114
- @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg - 1px}) {
115
- @content;
116
- }
117
- }
118
-
119
- @mixin desktop {
120
- @media (min-width: #{$breakpoint-lg}) {
121
- @content;
122
- }
123
- }
124
-
125
- @mixin large-desktop {
126
- @media (min-width: #{$breakpoint-xl}) {
127
- @content;
128
- }
129
- }