@veluai/velu 0.1.11 → 0.1.13

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.
@@ -1,138 +1,138 @@
1
- import React from 'react';
2
-
3
- /**
4
- * ErrorCard — a branded, self-contained card that renders ONE Velu "issue"
5
- * (an MDX or velu.json problem). Used by the dev server's per-page error
6
- * boundary. Deliberately presentational and dependency-free (no other Velu
7
- * components, no effects) so it can never fail while reporting a failure.
8
- *
9
- * Styled with inline styles + design tokens (with hard fallbacks), so it looks
10
- * right even when the page's own CSS hasn't loaded.
11
- */
12
- const DANGER = 'var(--danger-stroke-color, #ef4444)';
13
- const DANGER_BG =
14
- 'var(--danger-bg-color, color-mix(in srgb, #ef4444 7%, transparent))';
15
- const MUTED = 'var(--muted-color, #6b7280)';
16
- const TEXT = 'var(--text-color, #111827)';
17
-
18
- export default function ErrorCard({
19
- label,
20
- title,
21
- file,
22
- line,
23
- column,
24
- frame,
25
- detail,
26
- hint,
27
- suggestion,
28
- }) {
29
- const loc = file
30
- ? `${file}${line ? `:${line}${column ? `:${column}` : ''}` : ''}`
31
- : null;
32
-
33
- return (
34
- <div
35
- role="alert"
36
- style={{
37
- border: `1px solid ${DANGER}`,
38
- borderRadius: 'var(--radius-md, 10px)',
39
- background: DANGER_BG,
40
- padding: 'var(--s2, 1rem)',
41
- margin: 'var(--s2, 1rem) 0',
42
- fontFamily: 'var(--font-sans, system-ui, sans-serif)',
43
- color: TEXT,
44
- lineHeight: 1.5,
45
- }}
46
- >
47
- <div
48
- style={{
49
- display: 'flex',
50
- gap: '0.6rem',
51
- alignItems: 'center',
52
- flexWrap: 'wrap',
53
- }}
54
- >
55
- <span
56
- style={{
57
- fontFamily: 'var(--font-mono, ui-monospace, monospace)',
58
- fontSize: 11,
59
- textTransform: 'uppercase',
60
- letterSpacing: '0.06em',
61
- fontWeight: 600,
62
- color: DANGER,
63
- border: `1px solid ${DANGER}`,
64
- borderRadius: 999,
65
- padding: '2px 9px',
66
- whiteSpace: 'nowrap',
67
- }}
68
- >
69
- {label}
70
- </span>
71
- </div>
72
-
73
- {title && (
74
- <div style={{ marginTop: '0.6rem', fontWeight: 600, fontSize: '1.05rem' }}>
75
- {title}
76
- </div>
77
- )}
78
-
79
- {loc && (
80
- <div
81
- style={{
82
- display: 'inline-block',
83
- marginTop: '0.7rem',
84
- fontFamily: 'var(--font-mono, ui-monospace, monospace)',
85
- fontSize: 15,
86
- fontWeight: 600,
87
- letterSpacing: '0.01em',
88
- color: DANGER,
89
- background: 'var(--danger-bg-color, rgba(239,68,68,0.12))',
90
- border: `1px solid ${DANGER}`,
91
- borderRadius: 7,
92
- padding: '7px 11px',
93
- }}
94
- >
95
- {loc}
96
- </div>
97
- )}
98
- {detail && (
99
- <div style={{ marginTop: '0.25rem', color: MUTED }}>{detail}</div>
100
- )}
101
-
102
- {frame && (
103
- <pre
104
- style={{
105
- marginTop: '0.75rem',
106
- marginBottom: 0,
107
- padding: '0.75rem 0.9rem',
108
- overflow: 'auto',
109
- background: 'var(--code-bg-color, rgba(0,0,0,0.05))',
110
- borderRadius: 'var(--radius-sm, 6px)',
111
- fontFamily: 'var(--font-mono, ui-monospace, monospace)',
112
- fontSize: 12.5,
113
- lineHeight: 1.5,
114
- color: TEXT,
115
- }}
116
- >
117
- {frame}
118
- </pre>
119
- )}
120
-
121
- {suggestion && (
122
- <div style={{ marginTop: '0.75rem' }}>
123
- Did you mean{' '}
124
- <code style={{ fontWeight: 600, color: DANGER }}>
125
- {`<${suggestion}>`}
126
- </code>
127
- ?
128
- </div>
129
- )}
130
-
131
- {hint && (
132
- <div style={{ marginTop: '0.6rem', color: MUTED, fontSize: '0.92rem' }}>
133
- {hint}
134
- </div>
135
- )}
136
- </div>
137
- );
138
- }
1
+ import React from 'react';
2
+
3
+ /**
4
+ * ErrorCard — a branded, self-contained card that renders ONE Velu "issue"
5
+ * (an MDX or velu.json problem). Used by the dev server's per-page error
6
+ * boundary. Deliberately presentational and dependency-free (no other Velu
7
+ * components, no effects) so it can never fail while reporting a failure.
8
+ *
9
+ * Styled with inline styles + design tokens (with hard fallbacks), so it looks
10
+ * right even when the page's own CSS hasn't loaded.
11
+ */
12
+ const DANGER = 'var(--danger-stroke-color, #ef4444)';
13
+ const DANGER_BG =
14
+ 'var(--danger-bg-color, color-mix(in srgb, #ef4444 7%, transparent))';
15
+ const MUTED = 'var(--muted-color, #6b7280)';
16
+ const TEXT = 'var(--text-color, #111827)';
17
+
18
+ export default function ErrorCard({
19
+ label,
20
+ title,
21
+ file,
22
+ line,
23
+ column,
24
+ frame,
25
+ detail,
26
+ hint,
27
+ suggestion,
28
+ }) {
29
+ const loc = file
30
+ ? `${file}${line ? `:${line}${column ? `:${column}` : ''}` : ''}`
31
+ : null;
32
+
33
+ return (
34
+ <div
35
+ role="alert"
36
+ style={{
37
+ border: `1px solid ${DANGER}`,
38
+ borderRadius: 'var(--radius-md, 10px)',
39
+ background: DANGER_BG,
40
+ padding: 'var(--s2, 1rem)',
41
+ margin: 'var(--s2, 1rem) 0',
42
+ fontFamily: 'var(--font-sans, system-ui, sans-serif)',
43
+ color: TEXT,
44
+ lineHeight: 1.5,
45
+ }}
46
+ >
47
+ <div
48
+ style={{
49
+ display: 'flex',
50
+ gap: '0.6rem',
51
+ alignItems: 'center',
52
+ flexWrap: 'wrap',
53
+ }}
54
+ >
55
+ <span
56
+ style={{
57
+ fontFamily: 'var(--font-mono, ui-monospace, monospace)',
58
+ fontSize: 11,
59
+ textTransform: 'uppercase',
60
+ letterSpacing: '0.06em',
61
+ fontWeight: 600,
62
+ color: DANGER,
63
+ border: `1px solid ${DANGER}`,
64
+ borderRadius: 999,
65
+ padding: '2px 9px',
66
+ whiteSpace: 'nowrap',
67
+ }}
68
+ >
69
+ {label}
70
+ </span>
71
+ </div>
72
+
73
+ {title && (
74
+ <div style={{ marginTop: '0.6rem', fontWeight: 600, fontSize: '1.05rem' }}>
75
+ {title}
76
+ </div>
77
+ )}
78
+
79
+ {loc && (
80
+ <div
81
+ style={{
82
+ display: 'inline-block',
83
+ marginTop: '0.7rem',
84
+ fontFamily: 'var(--font-mono, ui-monospace, monospace)',
85
+ fontSize: 15,
86
+ fontWeight: 600,
87
+ letterSpacing: '0.01em',
88
+ color: DANGER,
89
+ background: 'var(--danger-bg-color, rgba(239,68,68,0.12))',
90
+ border: `1px solid ${DANGER}`,
91
+ borderRadius: 7,
92
+ padding: '7px 11px',
93
+ }}
94
+ >
95
+ {loc}
96
+ </div>
97
+ )}
98
+ {detail && (
99
+ <div style={{ marginTop: '0.25rem', color: MUTED }}>{detail}</div>
100
+ )}
101
+
102
+ {frame && (
103
+ <pre
104
+ style={{
105
+ marginTop: '0.75rem',
106
+ marginBottom: 0,
107
+ padding: '0.75rem 0.9rem',
108
+ overflow: 'auto',
109
+ background: 'var(--code-bg-color, rgba(0,0,0,0.05))',
110
+ borderRadius: 'var(--radius-sm, 6px)',
111
+ fontFamily: 'var(--font-mono, ui-monospace, monospace)',
112
+ fontSize: 12.5,
113
+ lineHeight: 1.5,
114
+ color: TEXT,
115
+ }}
116
+ >
117
+ {frame}
118
+ </pre>
119
+ )}
120
+
121
+ {suggestion && (
122
+ <div style={{ marginTop: '0.75rem' }}>
123
+ Did you mean{' '}
124
+ <code style={{ fontWeight: 600, color: DANGER }}>
125
+ {`<${suggestion}>`}
126
+ </code>
127
+ ?
128
+ </div>
129
+ )}
130
+
131
+ {hint && (
132
+ <div style={{ marginTop: '0.6rem', color: MUTED, fontSize: '0.92rem' }}>
133
+ {hint}
134
+ </div>
135
+ )}
136
+ </div>
137
+ );
138
+ }
@@ -1,70 +1,101 @@
1
- /* ThemeToggle — circular button with a sun/moon glyph; click flips
2
- the theme. Geometry is a 32 × 32 circle with an 18 × 18 glyph
3
- centred inside. The pill-with-slider design was replaced earlier;
4
- only the circle survives now.
5
-
6
- In light mode: --page-bg circle, sun glyph.
7
- In dark mode: --page-bg circle, moon glyph.
8
-
9
- Visibility model: BOTH icons are always rendered, stacked at the
10
- same `position: absolute` slot inside the button. Opacity controls
11
- which one is visible. We use opacity (not display: none) because:
12
-
13
- 1. Stacked icons render at the exact same point — no layout
14
- shift when the theme flips.
15
- 2. Opacity is not touched anywhere else for these elements, so
16
- the cascade is trivial — no risk of a stray rule (preflight,
17
- utility class, dev-time fallback) overriding `display: none`
18
- and revealing the wrong icon.
19
- 3. Identical markup on server + client → SSR-safe, no hydration
20
- mismatch and no icon flash.
21
-
22
- All values are tokens. */
23
-
24
- .velu-theme-toggle {
25
- /* `relative` so the absolutely-positioned icons inside are
26
- anchored to this button, not the page. */
27
- position: relative;
28
- display: inline-flex;
29
- align-items: center;
30
- justify-content: center;
31
- inline-size: 2rem;
32
- block-size: 2rem;
33
- border: var(--border-width) solid var(--border-color);
34
- border-radius: 999px;
35
- padding: 0;
36
- background: var(--page-bg);
37
- cursor: pointer;
38
- transition: border-color 0.12s ease, background 0.12s ease;
39
- }
40
- .velu-theme-toggle:hover {
41
- border-color: var(--accent-color);
42
- }
43
-
44
- /* Both icons stack here, centred. Default opacity 0 — the per-theme
45
- rules below switch one on. */
46
- .velu-theme-toggle__icon {
47
- position: absolute;
48
- inset-block-start: 50%;
49
- inset-inline-start: 50%;
50
- inline-size: 1.125rem;
51
- block-size: 1.125rem;
52
- margin-block-start: -0.5625rem; /* half of block-size */
53
- margin-inline-start: -0.5625rem; /* half of inline-size */
54
- color: var(--text-color);
55
- opacity: 0;
56
- transition: opacity 0.2s ease;
57
- pointer-events: none;
58
- }
59
-
60
- /* Default (light) sun on. */
61
- .velu-theme-toggle__icon--sun {
62
- opacity: 1;
63
- }
64
- /* Dark theme → moon on, sun off. */
65
- [data-theme='dark'] .velu-theme-toggle__icon--sun {
66
- opacity: 0;
67
- }
68
- [data-theme='dark'] .velu-theme-toggle__icon--moon {
69
- opacity: 1;
70
- }
1
+ /* ThemeToggle — circular button with a sun/moon glyph; click flips
2
+ the theme. Geometry is a 32 × 32 circle with an 18 × 18 glyph
3
+ centred inside. The pill-with-slider design was replaced earlier;
4
+ only the circle survives now.
5
+
6
+ In light mode: --page-bg circle, sun glyph.
7
+ In dark mode: --page-bg circle, moon glyph.
8
+
9
+ Visibility model: BOTH icons are always rendered, stacked at the
10
+ same `position: absolute` slot inside the button. Opacity controls
11
+ which one is visible. We use opacity (not display: none) because:
12
+
13
+ 1. Stacked icons render at the exact same point — no layout
14
+ shift when the theme flips.
15
+ 2. Opacity is not touched anywhere else for these elements, so
16
+ the cascade is trivial — no risk of a stray rule (preflight,
17
+ utility class, dev-time fallback) overriding `display: none`
18
+ and revealing the wrong icon.
19
+ 3. Identical markup on server + client → SSR-safe, no hydration
20
+ mismatch and no icon flash.
21
+
22
+ All values are tokens. */
23
+
24
+ .velu-theme-toggle {
25
+ /* `relative` so the absolutely-positioned icons inside are
26
+ anchored to this button, not the page. */
27
+ position: relative;
28
+ display: inline-flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ inline-size: 2rem;
32
+ block-size: 2rem;
33
+ border: var(--border-width) solid var(--border-color);
34
+ border-radius: 999px;
35
+ padding: 0;
36
+ background: var(--page-bg);
37
+ cursor: pointer;
38
+ transition: border-color 0.12s ease, background 0.12s ease,
39
+ transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
40
+ }
41
+ .velu-theme-toggle:hover {
42
+ border-color: var(--accent-color);
43
+ }
44
+ /* Tactile press feedback on click. */
45
+ .velu-theme-toggle:active {
46
+ transform: scale(0.9);
47
+ }
48
+
49
+ /* Both icons stack here, centred. Each animates in/out on a theme flip:
50
+ the hidden glyph is faded, shrunk, and rotated off its axis; the active
51
+ one springs to full size at 0deg. Centring is done with margins (above),
52
+ so `transform` is free to drive the rotate/scale animation. */
53
+ .velu-theme-toggle__icon {
54
+ position: absolute;
55
+ inset-block-start: 50%;
56
+ inset-inline-start: 50%;
57
+ inline-size: 1.125rem;
58
+ block-size: 1.125rem;
59
+ margin-block-start: -0.5625rem; /* half of block-size */
60
+ margin-inline-start: -0.5625rem; /* half of inline-size */
61
+ color: var(--text-color);
62
+ opacity: 0;
63
+ transition: opacity 0.28s ease,
64
+ transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
65
+ pointer-events: none;
66
+ }
67
+
68
+ /* Hidden state per glyph — sun spins out clockwise, moon anti-clockwise,
69
+ so the swap reads as one rotating through the other. */
70
+ .velu-theme-toggle__icon--sun {
71
+ transform: rotate(90deg) scale(0.4);
72
+ }
73
+ .velu-theme-toggle__icon--moon {
74
+ transform: rotate(-90deg) scale(0.4);
75
+ }
76
+
77
+ /* Exactly one glyph is shown — the sun in light, the moon in dark — at full
78
+ size, upright. Higher specificity than the hidden defaults above, so it
79
+ wins for whichever glyph the active theme selects. */
80
+ :root:not([data-theme='dark']) .velu-theme-toggle__icon--sun,
81
+ [data-theme='dark'] .velu-theme-toggle__icon--moon {
82
+ opacity: 1;
83
+ transform: rotate(0deg) scale(1);
84
+ }
85
+
86
+ /* Honour reduced-motion: keep a plain crossfade — no spin, scale, or press. */
87
+ @media (prefers-reduced-motion: reduce) {
88
+ .velu-theme-toggle {
89
+ transition: border-color 0.12s ease, background 0.12s ease;
90
+ }
91
+ .velu-theme-toggle:active {
92
+ transform: none;
93
+ }
94
+ .velu-theme-toggle__icon {
95
+ transition: opacity 0.2s ease;
96
+ }
97
+ .velu-theme-toggle__icon--sun,
98
+ .velu-theme-toggle__icon--moon {
99
+ transform: none;
100
+ }
101
+ }
@@ -1,46 +1,46 @@
1
- export { default as Stack } from './primitives/Stack.jsx';
2
- export { default as Switcher } from './primitives/Switcher.jsx';
3
- export { default as Cluster } from './primitives/Cluster.jsx';
4
- export { default as ThemeToggle } from './components/ThemeToggle.jsx';
5
- export { default as Sidebar } from './components/Sidebar.jsx';
6
- export { default as NavSelect } from './components/NavSelect.jsx';
7
- export { default as Toc } from './components/Toc.jsx';
8
- export { default as TocBar } from './components/TocBar.jsx';
9
- export { default as Callout } from './components/Callout.jsx';
10
- export { default as ErrorCard } from './components/ErrorCard.jsx';
11
- export {
12
- default as Accordion,
13
- AccordionGroup,
14
- } from './components/Accordion.jsx';
15
- export { default as Card, CardGroup } from './components/Card.jsx';
16
- export { default as Columns } from './components/Columns.jsx';
17
- export { default as Field } from './components/Field.jsx';
18
- export { default as Prompt } from './components/Prompt.jsx';
19
- export { default as Steps, Step } from './components/Steps.jsx';
20
- export { default as Tree, Folder, File } from './components/Tree.jsx';
21
- export { default as MethodBadge } from './components/MethodBadge.jsx';
22
- export { default as ApiPath } from './components/ApiPath.jsx';
23
- export { default as TryItBar } from './components/TryItBar.jsx';
24
- export { default as ApiField } from './components/ApiField.jsx';
25
- export { default as ApiClient } from './components/ApiClient.jsx';
26
- export { default as ApiSidebar } from './components/ApiSidebar.jsx';
27
- export { default as AskBar } from './components/AskBar.jsx';
28
- export { default as Chatbot } from './components/Chatbot.jsx';
29
- export { default as PageFeedback } from './components/PageFeedback.jsx';
30
- export { default as PageNav } from './components/PageNav.jsx';
31
- export { default as PageFooter } from './components/PageFooter.jsx';
32
- export { default as PoweredBy } from './components/PoweredBy.jsx';
33
- export { default as resolveIcon } from './lib/resolveIcon.jsx';
34
- export {
35
- default as PageHeader,
36
- VeluMark,
37
- } from './components/PageHeader.jsx';
38
- export { default as Search } from './components/Search.jsx';
39
- export { default as Image } from './components/Image.jsx';
40
- export {
41
- default as CodeBlock,
42
- CodeGroup,
43
- } from './components/CodeBlock.jsx';
44
- export {
45
- default as defaultMdxComponents,
46
- } from './mdx-components.jsx';
1
+ export { default as Stack } from './primitives/Stack.jsx';
2
+ export { default as Switcher } from './primitives/Switcher.jsx';
3
+ export { default as Cluster } from './primitives/Cluster.jsx';
4
+ export { default as ThemeToggle } from './components/ThemeToggle.jsx';
5
+ export { default as Sidebar } from './components/Sidebar.jsx';
6
+ export { default as NavSelect } from './components/NavSelect.jsx';
7
+ export { default as Toc } from './components/Toc.jsx';
8
+ export { default as TocBar } from './components/TocBar.jsx';
9
+ export { default as Callout } from './components/Callout.jsx';
10
+ export { default as ErrorCard } from './components/ErrorCard.jsx';
11
+ export {
12
+ default as Accordion,
13
+ AccordionGroup,
14
+ } from './components/Accordion.jsx';
15
+ export { default as Card, CardGroup } from './components/Card.jsx';
16
+ export { default as Columns } from './components/Columns.jsx';
17
+ export { default as Field } from './components/Field.jsx';
18
+ export { default as Prompt } from './components/Prompt.jsx';
19
+ export { default as Steps, Step } from './components/Steps.jsx';
20
+ export { default as Tree, Folder, File } from './components/Tree.jsx';
21
+ export { default as MethodBadge } from './components/MethodBadge.jsx';
22
+ export { default as ApiPath } from './components/ApiPath.jsx';
23
+ export { default as TryItBar } from './components/TryItBar.jsx';
24
+ export { default as ApiField } from './components/ApiField.jsx';
25
+ export { default as ApiClient } from './components/ApiClient.jsx';
26
+ export { default as ApiSidebar } from './components/ApiSidebar.jsx';
27
+ export { default as AskBar } from './components/AskBar.jsx';
28
+ export { default as Chatbot } from './components/Chatbot.jsx';
29
+ export { default as PageFeedback } from './components/PageFeedback.jsx';
30
+ export { default as PageNav } from './components/PageNav.jsx';
31
+ export { default as PageFooter } from './components/PageFooter.jsx';
32
+ export { default as PoweredBy } from './components/PoweredBy.jsx';
33
+ export { default as resolveIcon } from './lib/resolveIcon.jsx';
34
+ export {
35
+ default as PageHeader,
36
+ VeluMark,
37
+ } from './components/PageHeader.jsx';
38
+ export { default as Search } from './components/Search.jsx';
39
+ export { default as Image } from './components/Image.jsx';
40
+ export {
41
+ default as CodeBlock,
42
+ CodeGroup,
43
+ } from './components/CodeBlock.jsx';
44
+ export {
45
+ default as defaultMdxComponents,
46
+ } from './mdx-components.jsx';