@squadbase/vantage 0.6.2-dev1.42c4e48 → 0.6.2-dev1.83509f7

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 (151) hide show
  1. package/dist/{build-MFWRPYKW.js → build-X5NVCQKT.js} +4 -4
  2. package/dist/{build-MFWRPYKW.js.map → build-X5NVCQKT.js.map} +1 -1
  3. package/dist/{chunk-IBGOCWJB.js → chunk-2ICNHUG6.js} +186 -82
  4. package/dist/chunk-2ICNHUG6.js.map +1 -0
  5. package/dist/{chunk-5ZOP4SQR.js → chunk-2N72FKLB.js} +12 -7
  6. package/dist/chunk-2N72FKLB.js.map +1 -0
  7. package/dist/{chunk-OB6UBJXF.js → chunk-7S52M2SL.js} +127 -36
  8. package/dist/chunk-7S52M2SL.js.map +1 -0
  9. package/dist/chunk-MYHFZYS4.js +8005 -0
  10. package/dist/chunk-MYHFZYS4.js.map +1 -0
  11. package/dist/{chunk-PXRX5PEC.js → chunk-PDOBHMUQ.js} +3 -3
  12. package/dist/chunk-PDOBHMUQ.js.map +1 -0
  13. package/dist/{chunk-A2UUGASH.js → chunk-U736PVHY.js} +2 -2
  14. package/dist/chunk-U736PVHY.js.map +1 -0
  15. package/dist/{chunk-QEWCYW3I.js → chunk-WAMZWZJB.js} +13 -3
  16. package/dist/chunk-WAMZWZJB.js.map +1 -0
  17. package/dist/cli.js +3 -3
  18. package/dist/components/index.d.ts +1832 -100
  19. package/dist/components/index.js +4 -4
  20. package/dist/{dev-DCTOHQ6W.js → dev-4XEDTELV.js} +4 -4
  21. package/dist/{dev-DCTOHQ6W.js.map → dev-4XEDTELV.js.map} +1 -1
  22. package/dist/doc/index.js +2 -2
  23. package/dist/doc/index.js.map +1 -1
  24. package/dist/markdown/index.js +1 -1
  25. package/dist/markdown/index.js.map +1 -1
  26. package/dist/slide/index.js +2 -2
  27. package/dist/slide/index.js.map +1 -1
  28. package/dist/table/index.js +6 -6
  29. package/dist/table/index.js.map +1 -1
  30. package/dist/ui/index.d.ts +8 -2
  31. package/dist/ui/index.js +22 -112
  32. package/dist/ui/index.js.map +1 -1
  33. package/dist/{upgrade-DBBE6GIR.js → upgrade-JHXZBGQS.js} +3 -3
  34. package/dist/{upgrade-DBBE6GIR.js.map → upgrade-JHXZBGQS.js.map} +1 -1
  35. package/dist/vite/index.js +2 -2
  36. package/docs/en/components.md +29 -15
  37. package/docs/en/parts/data-table.md +22 -0
  38. package/docs/en/parts/delta.md +50 -0
  39. package/docs/en/parts/format.md +43 -0
  40. package/docs/en/parts/kpi-card.md +57 -0
  41. package/docs/en/parts/metric-value.md +3 -2
  42. package/docs/en/parts/sparkline.md +1 -1
  43. package/docs/en/parts/trend-indicator.md +17 -1
  44. package/docs/en/ui-and-theming.md +1 -1
  45. package/docs/index.json +92 -32
  46. package/docs/ja/components.md +27 -15
  47. package/docs/ja/parts/data-table.md +22 -0
  48. package/docs/ja/parts/delta.md +50 -0
  49. package/docs/ja/parts/format.md +44 -0
  50. package/docs/ja/parts/kpi-card.md +55 -0
  51. package/docs/ja/parts/metric-value.md +3 -2
  52. package/docs/ja/parts/sparkline.md +1 -1
  53. package/docs/ja/parts/trend-indicator.md +17 -1
  54. package/docs/ja/ui-and-theming.md +2 -2
  55. package/package.json +26 -24
  56. package/registry/ui/accordion.tsx +4 -2
  57. package/registry/ui/alert-dialog.tsx +3 -3
  58. package/registry/ui/alert.tsx +3 -1
  59. package/registry/ui/app-shell.tsx +7 -1
  60. package/registry/ui/area-chart.tsx +2852 -166
  61. package/registry/ui/attention-list.tsx +303 -0
  62. package/registry/ui/avatar.tsx +1 -1
  63. package/registry/ui/badge.tsx +3 -1
  64. package/registry/ui/bar-chart.tsx +2851 -166
  65. package/registry/ui/bar-list.tsx +3531 -90
  66. package/registry/ui/box-plot-chart.tsx +3906 -0
  67. package/registry/ui/breadcrumb.tsx +3 -1
  68. package/registry/ui/button.tsx +3 -1
  69. package/registry/ui/calendar.tsx +3 -1
  70. package/registry/ui/card.tsx +4 -2
  71. package/registry/ui/category-bar.tsx +1025 -16
  72. package/registry/ui/chart-frame.tsx +1393 -0
  73. package/registry/ui/checkbox.tsx +3 -1
  74. package/registry/ui/collapsible.tsx +3 -1
  75. package/registry/ui/combobox.tsx +2 -2
  76. package/registry/ui/command.tsx +3 -1
  77. package/registry/ui/dashboard-card.tsx +71 -28
  78. package/registry/ui/data-table.tsx +678 -56
  79. package/registry/ui/date-range-picker.tsx +245 -64
  80. package/registry/ui/delta.tsx +188 -0
  81. package/registry/ui/dialog.tsx +5 -3
  82. package/registry/ui/donut-chart.tsx +2929 -182
  83. package/registry/ui/drawer.tsx +1 -1
  84. package/registry/ui/dropdown-menu.tsx +5 -3
  85. package/registry/ui/echart.tsx +621 -67
  86. package/registry/ui/field.tsx +1 -1
  87. package/registry/ui/filter-bar.tsx +33 -6
  88. package/registry/ui/funnel-steps.tsx +3344 -49
  89. package/registry/ui/heatmap.tsx +1786 -0
  90. package/registry/ui/histogram-chart.tsx +3986 -0
  91. package/registry/ui/hover-card.tsx +2 -2
  92. package/registry/ui/input-group.tsx +3 -1
  93. package/registry/ui/input.tsx +3 -1
  94. package/registry/ui/kbd.tsx +3 -1
  95. package/registry/ui/kpi-card.tsx +699 -0
  96. package/registry/ui/label.tsx +3 -1
  97. package/registry/ui/legend.tsx +3563 -0
  98. package/registry/ui/line-chart.tsx +2852 -160
  99. package/registry/ui/metric-value.tsx +9 -1
  100. package/registry/ui/multi-select.tsx +11 -5
  101. package/registry/ui/page-shell.tsx +106 -51
  102. package/registry/ui/pagination.tsx +3 -1
  103. package/registry/ui/paired-chart.tsx +3827 -0
  104. package/registry/ui/placeholder.tsx +8 -2
  105. package/registry/ui/popover.tsx +4 -2
  106. package/registry/ui/progress-circle.tsx +607 -12
  107. package/registry/ui/progress.tsx +3 -1
  108. package/registry/ui/radio-group.tsx +1 -1
  109. package/registry/ui/sample-data.tsx +86 -0
  110. package/registry/ui/scatter-chart.tsx +4212 -0
  111. package/registry/ui/scroll-area.tsx +3 -2
  112. package/registry/ui/searchable-select.tsx +8 -3
  113. package/registry/ui/section-header.tsx +5 -3
  114. package/registry/ui/segmented-control.tsx +7 -2
  115. package/registry/ui/select.tsx +4 -2
  116. package/registry/ui/separator.tsx +3 -1
  117. package/registry/ui/sheet.tsx +4 -2
  118. package/registry/ui/sidebar.tsx +4 -2
  119. package/registry/ui/skeleton.tsx +4 -2
  120. package/registry/ui/slider.tsx +4 -2
  121. package/registry/ui/sparkline.tsx +84 -9
  122. package/registry/ui/spinner.tsx +3 -1
  123. package/registry/ui/states.tsx +34 -5
  124. package/registry/ui/status-badge.tsx +83 -41
  125. package/registry/ui/switch.tsx +3 -1
  126. package/registry/ui/table.tsx +4 -2
  127. package/registry/ui/tabs.tsx +5 -3
  128. package/registry/ui/textarea.tsx +3 -1
  129. package/registry/ui/toast.tsx +2 -2
  130. package/registry/ui/toggle-group.tsx +3 -1
  131. package/registry/ui/toggle.tsx +3 -1
  132. package/registry/ui/tooltip.tsx +10 -4
  133. package/registry/ui/tracker.tsx +632 -19
  134. package/registry/ui/trend-indicator.tsx +15 -3
  135. package/registry/ui/updated-at.tsx +122 -0
  136. package/registry/ui/waterfall-chart.tsx +4248 -0
  137. package/skills/vantage-design/SKILL.md +34 -24
  138. package/skills/vantage-design/references/extract.md +16 -14
  139. package/skills/vantage-design/references/format.md +6 -5
  140. package/skills/vantage-design/references/presets.md +60 -110
  141. package/templates/AGENTS.md +13 -1
  142. package/templates/agents/page.md +10 -0
  143. package/theme.css +244 -149
  144. package/dist/chunk-5ZOP4SQR.js.map +0 -1
  145. package/dist/chunk-A2UUGASH.js.map +0 -1
  146. package/dist/chunk-AG6RZ2RR.js +0 -3208
  147. package/dist/chunk-AG6RZ2RR.js.map +0 -1
  148. package/dist/chunk-IBGOCWJB.js.map +0 -1
  149. package/dist/chunk-OB6UBJXF.js.map +0 -1
  150. package/dist/chunk-PXRX5PEC.js.map +0 -1
  151. package/dist/chunk-QEWCYW3I.js.map +0 -1
package/theme.css CHANGED
@@ -1,3 +1,7 @@
1
+ /* GENERATED by scripts/gen-theme.mjs — do not edit. Sources:
2
+ * packages/squadkit/registry/theme/theme.css (UI part tokens)
3
+ * packages/vantage/src/theme/framework.css (slide / document styles) */
4
+
1
5
  /**
2
6
  * Vantage design tokens. Imported after `@import "tailwindcss"` by the
3
7
  * generated runtime.css. Defines CSS variables (light + dark), maps them to
@@ -18,123 +22,154 @@
18
22
  `<select>` popup. */
19
23
  color-scheme: light;
20
24
 
21
- --background: oklch(1 0 0);
22
- --foreground: oklch(0.145 0 0);
25
+ --background: oklch(0.975 0.004 255);
26
+ --foreground: oklch(0.21 0.02 260);
23
27
  --card: oklch(1 0 0);
24
- --card-foreground: oklch(0.145 0 0);
28
+ --card-foreground: oklch(0.21 0.02 260);
25
29
  --popover: oklch(1 0 0);
26
- --popover-foreground: oklch(0.145 0 0);
27
- --primary: oklch(0.205 0 0);
30
+ --popover-foreground: oklch(0.21 0.02 260);
31
+ --primary: oklch(0.55 0.2 262);
28
32
  --primary-foreground: oklch(0.985 0 0);
29
- --secondary: oklch(0.97 0 0);
30
- --secondary-foreground: oklch(0.205 0 0);
31
- --muted: oklch(0.97 0 0);
32
- --muted-foreground: oklch(0.556 0 0);
33
- --accent: oklch(0.97 0 0);
34
- --accent-foreground: oklch(0.205 0 0);
35
- --destructive: oklch(0.577 0.245 27.325);
33
+ --secondary: oklch(0.965 0.005 255);
34
+ --secondary-foreground: oklch(0.25 0.02 260);
35
+ --muted: oklch(0.965 0.005 255);
36
+ --muted-foreground: oklch(0.5 0.02 258);
37
+ --accent: oklch(0.955 0.01 255);
38
+ --accent-foreground: oklch(0.25 0.02 260);
39
+ --destructive: oklch(0.53 0.21 27.325);
36
40
  --destructive-foreground: oklch(0.985 0 0);
37
- --border: oklch(0.922 0 0);
38
- --input: oklch(0.922 0 0);
39
- --ring: oklch(0.708 0 0);
40
- --radius: 0.625rem;
41
-
42
- --chart-1: hsl(221 83% 53%);
43
- --chart-2: hsl(160 60% 45%);
44
- --chart-3: hsl(31 90% 55%);
45
- --chart-4: hsl(280 65% 60%);
46
- --chart-5: hsl(340 75% 55%);
47
-
48
- --sidebar: oklch(0.985 0 0);
49
- --sidebar-foreground: oklch(0.145 0 0);
50
- --sidebar-primary: oklch(0.205 0 0);
51
- --sidebar-primary-foreground: oklch(0.985 0 0);
52
- --sidebar-accent: oklch(0.97 0 0);
53
- --sidebar-accent-foreground: oklch(0.205 0 0);
54
- --sidebar-border: oklch(0.922 0 0);
55
- --sidebar-ring: oklch(0.708 0 0);
56
-
57
- /* Slides (@squadbase/vantage/slide).
58
- These are aliases, not values. Custom properties resolve lazily, so
59
- pointing them at the tokens above is enough for a deck to follow `.dark`
60
- and `[data-theme="dark"]` on its own — restating them in the dark block
61
- below would create two places to keep in step for no gain. A deck
62
- overrides any of them inline through `<SlideDeck theme>`. */
63
- --slide-bg: var(--background);
64
- --slide-fg: var(--foreground);
65
- --slide-accent: var(--primary);
66
- --slide-muted: var(--muted-foreground);
67
- --slide-radius: var(--radius);
68
- /* A system stack that includes Japanese. The pptx export rasterises through
69
- an SVG `foreignObject`, where locally installed families resolve by name
70
- but webfonts must be inlined — so a system default is what makes the
71
- common path export correctly with nothing embedded. */
72
- --slide-font-display:
73
- system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo,
41
+ --border: oklch(0.93 0.006 255);
42
+ --input: oklch(0.9 0.01 255);
43
+ --ring: oklch(0.7 0.12 262);
44
+ --radius: 0.5rem;
45
+
46
+ /* Card elevation: a hairline-soft shadow in light, none in dark (the border does the work there). */
47
+ --shadow-card: 0 1px 2px 0 oklch(0.2 0.02 260 / 0.06);
48
+
49
+ /* Body typeface: a system stack only (no web font is shipped). Presets may swap
50
+ it; `@theme inline` below points `font-sans` at this variable, so overriding
51
+ the variable also moves the utility (and the `html` rule in `@layer base`).
52
+ Latin system faces carry no kana/kanji, so without Japanese families here the
53
+ browser picks a per-locale fallback (lang="en" -> e.g. thin "Yu Gothic" Regular
54
+ on Windows, or a face without a 500 weight on macOS) and kana render thin.
55
+ List the Japanese system faces explicitly, after the Latin ones, and keep
56
+ `ui-sans-serif` / `system-ui` behind them: on Japanese Windows both resolve to
57
+ the menu font, Yu Gothic UI, which is condensed (made to avoid UI resizing)
58
+ and has kana, so it would take the kana before Meiryo is ever reached.
59
+ `-apple-system` is Safari/Firefox; Chrome on macOS needs `BlinkMacSystemFont`. */
60
+ --font-sans:
61
+ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui,
74
62
  sans-serif;
75
- --slide-font-body: var(--slide-font-display);
76
- /* Canvas pixels, on the 1920x1080 canvas — not rem: a slide is scaled as a
77
- whole, so its type must not also follow the browser's root font size. */
78
- --slide-size-hero: 168px;
79
- --slide-size-body: 36px;
80
63
 
81
- /* Documents (@squadbase/vantage/doc). Aliases, like --slide-*: they follow
82
- `.dark` through the tokens they point at, so they are not restated in the
83
- dark block. A document overrides any of them inline through
84
- `<Document theme>`, an app through its styles.css. */
85
- --doc-fg: var(--foreground);
86
- --doc-muted: var(--muted-foreground);
87
- --doc-accent: var(--primary);
88
- --doc-border: var(--border);
89
- --doc-subtle: var(--muted);
90
- --doc-font-body: inherit;
91
- --doc-font-heading: var(--doc-font-body);
92
- --doc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
93
- --doc-size-body: 1rem;
94
- --doc-line-height: 1.8;
95
- --doc-max-width: 48rem;
64
+ --chart-1: oklch(0.55 0.2 262);
65
+ --chart-2: oklch(0.62 0.17 118);
66
+ --chart-3: oklch(0.5 0.19 352);
67
+ --chart-4: oklch(0.62 0.1 195);
68
+ --chart-5: oklch(0.44 0.18 300);
69
+
70
+ /* Semantic status tokens — see the contract above the `@theme inline` block. */
71
+ --positive: oklch(0.52 0.14 150);
72
+ --positive-subtle: oklch(0.96 0.04 150);
73
+ --negative: oklch(0.53 0.19 25);
74
+ --negative-subtle: oklch(0.96 0.03 25);
75
+ --warning: oklch(0.53 0.12 70);
76
+ --warning-subtle: oklch(0.96 0.05 85);
77
+ --info: oklch(0.52 0.16 255);
78
+ --info-subtle: oklch(0.96 0.03 250);
79
+ --positive-fill: oklch(0.62 0.15 150);
80
+ --negative-fill: oklch(0.62 0.17 25);
81
+ --warning-fill: oklch(0.79 0.16 82);
82
+ --info-fill: oklch(0.62 0.15 250);
83
+ --neutral-fill: oklch(0.62 0 0);
84
+ --neutral: oklch(0.52 0 0);
85
+ --neutral-subtle: oklch(0.96 0 0);
86
+
87
+ --sidebar: oklch(0.985 0.003 255);
88
+ --sidebar-foreground: oklch(0.21 0.02 260);
89
+ --sidebar-primary: oklch(0.55 0.2 262);
90
+ --sidebar-primary-foreground: oklch(0.985 0 0);
91
+ --sidebar-accent: oklch(0.955 0.01 255);
92
+ --sidebar-accent-foreground: oklch(0.25 0.02 260);
93
+ --sidebar-border: oklch(0.915 0.008 255);
94
+ --sidebar-ring: oklch(0.7 0.12 262);
96
95
  }
97
96
 
98
97
  .dark,
99
98
  [data-theme="dark"] {
100
99
  color-scheme: dark;
101
100
 
102
- --background: oklch(0.145 0 0);
103
- --foreground: oklch(0.985 0 0);
104
- --card: oklch(0.205 0 0);
105
- --card-foreground: oklch(0.985 0 0);
106
- --popover: oklch(0.205 0 0);
107
- --popover-foreground: oklch(0.985 0 0);
108
- --primary: oklch(0.922 0 0);
109
- --primary-foreground: oklch(0.205 0 0);
110
- --secondary: oklch(0.269 0 0);
111
- --secondary-foreground: oklch(0.985 0 0);
112
- --muted: oklch(0.269 0 0);
113
- --muted-foreground: oklch(0.708 0 0);
114
- --accent: oklch(0.269 0 0);
115
- --accent-foreground: oklch(0.985 0 0);
101
+ --shadow-card: none;
102
+
103
+ --background: oklch(0.16 0.012 262);
104
+ --foreground: oklch(0.96 0.005 255);
105
+ --card: oklch(0.215 0.015 262);
106
+ --card-foreground: oklch(0.96 0.005 255);
107
+ --popover: oklch(0.235 0.016 262);
108
+ --popover-foreground: oklch(0.96 0.005 255);
109
+ --primary: oklch(0.68 0.19 262);
110
+ --primary-foreground: oklch(0.145 0.02 262);
111
+ --secondary: oklch(0.27 0.016 262);
112
+ --secondary-foreground: oklch(0.96 0.005 255);
113
+ --muted: oklch(0.27 0.016 262);
114
+ --muted-foreground: oklch(0.72 0.02 258);
115
+ --accent: oklch(0.3 0.02 262);
116
+ --accent-foreground: oklch(0.96 0.005 255);
116
117
  --destructive: oklch(0.704 0.191 22.216);
117
- --destructive-foreground: oklch(0.985 0 0);
118
+ --destructive-foreground: oklch(0.145 0.02 262);
118
119
  --border: oklch(1 0 0 / 10%);
119
120
  --input: oklch(1 0 0 / 15%);
120
- --ring: oklch(0.556 0 0);
121
-
122
- --chart-1: hsl(217 91% 60%);
123
- --chart-2: hsl(160 60% 45%);
124
- --chart-3: hsl(31 90% 55%);
125
- --chart-4: hsl(280 65% 65%);
126
- --chart-5: hsl(340 75% 60%);
127
-
128
- --sidebar: oklch(0.205 0 0);
129
- --sidebar-foreground: oklch(0.985 0 0);
130
- --sidebar-primary: oklch(0.488 0.243 264.376);
131
- --sidebar-primary-foreground: oklch(0.985 0 0);
132
- --sidebar-accent: oklch(0.269 0 0);
133
- --sidebar-accent-foreground: oklch(0.985 0 0);
121
+ --ring: oklch(0.6 0.15 262);
122
+
123
+ --chart-1: oklch(0.56 0.19 262);
124
+ --chart-2: oklch(0.75 0.17 118);
125
+ --chart-3: oklch(0.64 0.19 352);
126
+ --chart-4: oklch(0.78 0.105 195);
127
+ --chart-5: oklch(0.71 0.17 300);
128
+
129
+ --positive: oklch(0.76 0.15 150);
130
+ --positive-subtle: oklch(0.27 0.05 150);
131
+ --negative: oklch(0.74 0.15 22);
132
+ --negative-subtle: oklch(0.27 0.06 25);
133
+ --warning: oklch(0.8 0.14 80);
134
+ --warning-subtle: oklch(0.27 0.05 75);
135
+ --info: oklch(0.75 0.12 250);
136
+ --info-subtle: oklch(0.27 0.06 255);
137
+ --positive-fill: oklch(0.56 0.13 150);
138
+ --negative-fill: oklch(0.56 0.15 22);
139
+ --warning-fill: oklch(0.73 0.145 78);
140
+ --info-fill: oklch(0.56 0.13 250);
141
+ --neutral-fill: oklch(0.56 0 0);
142
+ --neutral: oklch(0.85 0 0);
143
+ --neutral-subtle: oklch(0.27 0 0);
144
+
145
+ --sidebar: oklch(0.2 0.014 262);
146
+ --sidebar-foreground: oklch(0.96 0.005 255);
147
+ --sidebar-primary: oklch(0.68 0.19 262);
148
+ --sidebar-primary-foreground: oklch(0.145 0.02 262);
149
+ --sidebar-accent: oklch(0.3 0.02 262);
150
+ --sidebar-accent-foreground: oklch(0.96 0.005 255);
134
151
  --sidebar-border: oklch(1 0 0 / 10%);
135
- --sidebar-ring: oklch(0.556 0 0);
152
+ --sidebar-ring: oklch(0.6 0.15 262);
136
153
  }
137
154
 
155
+ /* Semantic status tokens (increase/decrease/status). Every increase, decrease
156
+ and status colour in registry/ comes from these — never a Tailwind palette
157
+ colour like `green-500` (tests/raw-colors.test.ts enforces it).
158
+ --<tone> text colour on --background, --card and --<tone>-subtle
159
+ (>= 4.5:1), and dot / line / icon colour (>= 3:1).
160
+ --<tone>-subtle tinted background behind --<tone> text (badges, callouts).
161
+ --<tone>-fill (incl. --neutral-fill, the grey area) FILL colour for areas (bars, heatmap cells, tracker blocks). Not for
162
+ text or icons — use --<tone>. Same lightness step from the page in both
163
+ modes (light 0.62 / dark 0.56: ~0.36-0.40 OKLCH L away from --background,
164
+ >= 3:1 against --background and --card), so a fill is never strong in one
165
+ mode and faint in the other. Presets may tune hue and chroma within the
166
+ status bands while preserving contrast and fill strength (tests/theme-presets.test.ts).
167
+ --warning-fill is the exception: amber (light 0.79 / dark 0.73, ~#f5b324 / ~#d99a1e) is
168
+ a light colour by nature, so it is ~2:1 on the light page (still >= 0.18 L away)
169
+ and ~7-8:1 on the dark one; dark text (--foreground in light, --background in dark) sits on it at >= 4.5:1.
170
+ Tones: positive (green), negative (red), warning (amber), info (blue),
171
+ neutral (grey). Colour never carries the meaning alone — pair it with an
172
+ arrow or sign. `npm run contrast` prints the measured ratios. */
138
173
  @theme inline {
139
174
  --color-background: var(--background);
140
175
  --color-foreground: var(--foreground);
@@ -155,6 +190,21 @@
155
190
  --color-border: var(--border);
156
191
  --color-input: var(--input);
157
192
  --color-ring: var(--ring);
193
+ --color-positive: var(--positive);
194
+ --color-positive-subtle: var(--positive-subtle);
195
+ --color-negative: var(--negative);
196
+ --color-negative-subtle: var(--negative-subtle);
197
+ --color-warning: var(--warning);
198
+ --color-warning-subtle: var(--warning-subtle);
199
+ --color-info: var(--info);
200
+ --color-info-subtle: var(--info-subtle);
201
+ --color-positive-fill: var(--positive-fill);
202
+ --color-negative-fill: var(--negative-fill);
203
+ --color-warning-fill: var(--warning-fill);
204
+ --color-info-fill: var(--info-fill);
205
+ --color-neutral-fill: var(--neutral-fill);
206
+ --color-neutral: var(--neutral);
207
+ --color-neutral-subtle: var(--neutral-subtle);
158
208
  --color-chart-1: var(--chart-1);
159
209
  --color-chart-2: var(--chart-2);
160
210
  --color-chart-3: var(--chart-3);
@@ -168,10 +218,7 @@
168
218
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
169
219
  --color-sidebar-border: var(--sidebar-border);
170
220
  --color-sidebar-ring: var(--sidebar-ring);
171
- --color-slide-bg: var(--slide-bg);
172
- --color-slide-fg: var(--slide-fg);
173
- --color-slide-accent: var(--slide-accent);
174
- --color-slide-muted: var(--slide-muted);
221
+ --font-sans: var(--font-sans);
175
222
  --radius-sm: calc(var(--radius) - 4px);
176
223
  --radius-md: calc(var(--radius) - 2px);
177
224
  --radius-lg: var(--radius);
@@ -272,6 +319,100 @@
272
319
  }
273
320
  }
274
321
 
322
+ /* ------------------------------------------------------------ utilities */
323
+
324
+ @utility no-scrollbar {
325
+ -ms-overflow-style: none;
326
+ scrollbar-width: none;
327
+
328
+ &::-webkit-scrollbar {
329
+ display: none;
330
+ }
331
+ }
332
+
333
+ /* Icons that must point the other way when the document is right-to-left. */
334
+ .cn-rtl-flip {
335
+ &:where([dir="rtl"], [dir="rtl"] *) {
336
+ transform: scaleX(-1);
337
+ }
338
+ }
339
+
340
+ /* Page defaults live in `@layer base`, like shadcn's own init, so a project's
341
+ `html { @apply font-sans }`, its `next/font` setup and its own border rules
342
+ (all unlayered or later in the layer) win over them instead of losing to an
343
+ unlayered rule here. */
344
+ @layer base {
345
+ html {
346
+ font-family: var(--font-sans);
347
+ }
348
+
349
+ body {
350
+ background-color: var(--background);
351
+ color: var(--foreground);
352
+ -webkit-font-smoothing: antialiased;
353
+ }
354
+
355
+ * {
356
+ border-color: var(--border);
357
+ }
358
+ }
359
+
360
+ /**
361
+ * Vantage framework styles: the slide / document tokens and the document
362
+ * typesetting. The UI parts' tokens live in SquadKit
363
+ * (packages/squadkit/registry/theme/theme.css); scripts/gen-theme.mjs appends
364
+ * this file to them to produce packages/vantage/theme.css.
365
+ */
366
+
367
+ :root {
368
+ /* Slides (@squadbase/vantage/slide).
369
+ These are aliases, not values. Custom properties resolve lazily, so
370
+ pointing them at the tokens above is enough for a deck to follow `.dark`
371
+ and `[data-theme="dark"]` on its own — restating them in the dark block
372
+ below would create two places to keep in step for no gain. A deck
373
+ overrides any of them inline through `<SlideDeck theme>`. */
374
+ --slide-bg: var(--background);
375
+ --slide-fg: var(--foreground);
376
+ --slide-accent: var(--primary);
377
+ --slide-muted: var(--muted-foreground);
378
+ --slide-radius: var(--radius);
379
+ /* A system stack that includes Japanese. The pptx export rasterises through
380
+ an SVG `foreignObject`, where locally installed families resolve by name
381
+ but webfonts must be inlined — so a system default is what makes the
382
+ common path export correctly with nothing embedded. */
383
+ --slide-font-display:
384
+ -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo,
385
+ system-ui, sans-serif;
386
+ --slide-font-body: var(--slide-font-display);
387
+ /* Canvas pixels, on the 1920x1080 canvas — not rem: a slide is scaled as a
388
+ whole, so its type must not also follow the browser's root font size. */
389
+ --slide-size-hero: 168px;
390
+ --slide-size-body: 36px;
391
+
392
+ /* Documents (@squadbase/vantage/doc). Aliases, like --slide-*: they follow
393
+ `.dark` through the tokens they point at, so they are not restated in the
394
+ dark block. A document overrides any of them inline through
395
+ `<Document theme>`, an app through its styles.css. */
396
+ --doc-fg: var(--foreground);
397
+ --doc-muted: var(--muted-foreground);
398
+ --doc-accent: var(--primary);
399
+ --doc-border: var(--border);
400
+ --doc-subtle: var(--muted);
401
+ --doc-font-body: inherit;
402
+ --doc-font-heading: var(--doc-font-body);
403
+ --doc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
404
+ --doc-size-body: 1rem;
405
+ --doc-line-height: 1.8;
406
+ --doc-max-width: 48rem;
407
+ }
408
+
409
+ @theme inline {
410
+ --color-slide-bg: var(--slide-bg);
411
+ --color-slide-fg: var(--slide-fg);
412
+ --color-slide-accent: var(--slide-accent);
413
+ --color-slide-muted: var(--slide-muted);
414
+ }
415
+
275
416
  /* ------------------------------------------------------------ documents */
276
417
 
277
418
  /* Typesetting for `<Document>`. Plain elements inside it need no classes.
@@ -287,17 +428,6 @@
287
428
  line-height: var(--doc-line-height);
288
429
  overflow-wrap: break-word;
289
430
  }
290
- /* On screen the document sits in the app frame's unpadded `<main>`, so it
291
- brings its own gutter. `content-box` keeps `--doc-max-width` the width of
292
- the text: the side gutter shows only once the frame is narrower than that.
293
- The bottom leaves room for the fixed "Save as PDF" button. Paper takes its
294
- margin from the print rules below instead. */
295
- @media screen {
296
- :where([data-slot="document"]) {
297
- box-sizing: content-box;
298
- padding: 3rem 1.5rem 5rem;
299
- }
300
- }
301
431
  :where([data-slot="document"]) :where(h1, h2, h3, h4) {
302
432
  font-family: var(--doc-font-heading);
303
433
  font-weight: 700;
@@ -451,38 +581,3 @@
451
581
  overflow: visible;
452
582
  }
453
583
  }
454
-
455
- /* ------------------------------------------------------------ utilities */
456
-
457
- @utility no-scrollbar {
458
- -ms-overflow-style: none;
459
- scrollbar-width: none;
460
-
461
- &::-webkit-scrollbar {
462
- display: none;
463
- }
464
- }
465
-
466
- /* Icons that must point the other way when the document is right-to-left. */
467
- .cn-rtl-flip {
468
- &:where([dir="rtl"], [dir="rtl"] *) {
469
- transform: scaleX(-1);
470
- }
471
- }
472
-
473
- body {
474
- background-color: var(--background);
475
- color: var(--foreground);
476
- /* Latin system faces carry no kana/kanji, so without Japanese families here the
477
- browser picks a per-locale fallback (lang="en" → e.g. thin "Yu Gothic" Regular
478
- on Windows, or a face without a 500 weight on macOS) and kana render thin.
479
- List the Japanese system faces explicitly, after the Latin ones. */
480
- font-family:
481
- ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo,
482
- sans-serif;
483
- -webkit-font-smoothing: antialiased;
484
- }
485
-
486
- * {
487
- border-color: var(--border);
488
- }
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/ui/states.tsx"],"names":[],"mappings":";;;;AAGO,SAAS,OAAA,CAAQ,EAAE,KAAA,GAAQ,eAAA,EAAY,WAAU,EAA2C;AACjG,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,iDAAiD,SAAS,CAAA,EAAG,IAAA,EAAK,QAAA,EAAS,WAAA,EAAU,QAAA,EACtG,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uDAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,gFAAA,EAAiF,CAAA;AAAA,IAChG;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAEO,SAAS,KAAA,CAAM;AAAA,EACpB,KAAA,GAAQ,kBAAA;AAAA,EACR,WAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,kEAAA,EAAoE,SAAS,CAAA,EAC7F,QAAA,EAAA;AAAA,IAAA,IAAA,mBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAAkC,gBAAK,CAAA,GAAS,IAAA;AAAA,oBACvE,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACjC,8BAAc,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,wCAAA,EAA0C,uBAAY,CAAA,GAAO,IAAA;AAAA,IACxF,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAQ,kBAAO,CAAA,GAAS;AAAA,GAAA,EACnD,CAAA;AAEJ;AAEO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA,GAAQ,sBAAA;AAAA,EACR,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,8DAAA,EAAgE,SAAS,CAAA;AAAA,MACvF,IAAA,EAAK,OAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,gCAAA,EAAkC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACpD,0BAAU,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oCAAA,EAAsC,mBAAQ,CAAA,GAAO,IAAA;AAAA,QAC5E,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAQ,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,GACnD;AAEJ","file":"chunk-5ZOP4SQR.js","sourcesContent":["import type { ReactNode } from \"react\"\nimport { cn } from \"./cn\"\n\nexport function Loading({ label = \"Loading…\", className }: { label?: string; className?: string }) {\n return (\n <div className={cn(\"flex min-h-[30vh] items-center justify-center\", className)} role=\"status\" aria-live=\"polite\">\n <div className=\"flex items-center gap-3 text-sm text-muted-foreground\">\n <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n {label}\n </div>\n </div>\n )\n}\n\nexport function Empty({\n title = \"Nothing here yet\",\n description,\n icon,\n action,\n className,\n}: {\n title?: string\n description?: string\n icon?: ReactNode\n action?: ReactNode\n className?: string\n}) {\n return (\n <div className={cn(\"flex flex-col items-center justify-center gap-2 p-10 text-center\", className)}>\n {icon ? <div className=\"text-3xl text-muted-foreground\">{icon}</div> : null}\n <p className=\"font-medium\">{title}</p>\n {description ? <p className=\"max-w-sm text-sm text-muted-foreground\">{description}</p> : null}\n {action ? <div className=\"mt-2\">{action}</div> : null}\n </div>\n )\n}\n\nexport function ErrorState({\n title = \"Something went wrong\",\n message,\n action,\n className,\n}: {\n title?: string\n message?: ReactNode\n action?: ReactNode\n className?: string\n}) {\n return (\n <div\n className={cn(\"rounded-xl border border-destructive/30 bg-destructive/5 p-6\", className)}\n role=\"alert\"\n >\n <p className=\"font-semibold text-destructive\">{title}</p>\n {message ? <p className=\"mt-1 text-sm text-muted-foreground\">{message}</p> : null}\n {action ? <div className=\"mt-3\">{action}</div> : null}\n </div>\n )\n}\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/ui/cn.ts"],"names":[],"mappings":";;;;;AAUO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"chunk-A2UUGASH.js","sourcesContent":["/**\n * Class merger used by every component in the kit. `clsx` resolves conditional\n * class values, `tailwind-merge` drops the earlier of two conflicting Tailwind\n * utilities so a caller's `className` always wins over a component default.\n */\nimport { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport type { ClassValue }\n\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs))\n}\n"]}