stablekit.ts 0.2.0 → 0.2.2

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 (4) hide show
  1. package/dist/index.cjs +1 -179
  2. package/dist/index.js +1 -179
  3. package/dist/styles.css +3 -7
  4. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -43,185 +43,7 @@ module.exports = __toCommonJS(index_exports);
43
43
  var import_react = require("react");
44
44
 
45
45
  // src/styles.css
46
- var styles_default = `/* stablekit \u2014 layout stability toolkit for React
47
- *
48
- * CSS class prefix: sk-
49
- * All animations use CSS custom properties for themability.
50
- * Styles are auto-injected at import time (opt-out via meta tag).
51
- */
52
-
53
- /* \u2500\u2500 LayoutGroup / LayoutView \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
54
-
55
- /* All children overlap in the same grid cell.
56
- Grid auto-sizes to the largest child.
57
- Block-level groups use flex-column so content stretches to fill
58
- the reserved width. Inline groups (data-inline) skip this \u2014 their
59
- children are inline content that shouldn't be forced vertical. */
60
- .sk-layout-group {
61
- display: grid;
62
- }
63
- .sk-layout-group[data-inline] {
64
- display: inline-grid;
65
- }
66
- .sk-layout-group > * {
67
- grid-area: 1 / 1;
68
- }
69
- .sk-layout-group:not([data-inline]) > * {
70
- display: flex;
71
- flex-direction: column;
72
- }
73
- /* Inline groups: children inherit the parent's inline flow.
74
- Without this, grid items default to block and stack content. */
75
- .sk-layout-group[data-inline] > * {
76
- display: inline;
77
- }
78
-
79
- /* Inactive LayoutView hiding \u2014 CSS-driven via data-state attribute.
80
- LayoutView sets data-state="active"|"inactive" so consumers can
81
- override transitions on .sk-layout-view without specificity fights.
82
- [inert] handles accessibility (non-focusable, non-interactive). */
83
- .sk-layout-view[data-state="inactive"] {
84
- opacity: 0;
85
- visibility: hidden;
86
- }
87
-
88
- /* \u2500\u2500 SizeRatchet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
89
-
90
- /* contain isolates internal reflow from ancestors. */
91
- .sk-size-ratchet {
92
- contain: layout style;
93
- }
94
-
95
- /* \u2500\u2500 Shimmer / Skeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
96
-
97
- .sk-skeleton-grid {
98
- display: grid;
99
- gap: var(--sk-skeleton-gap, 0.75rem);
100
- contain: layout style;
101
- }
102
-
103
- .sk-skeleton-bone {
104
- display: flex;
105
- flex-direction: column;
106
- gap: var(--sk-skeleton-bone-gap, 0.125rem);
107
- padding: var(--sk-skeleton-bone-padding, 0.375rem 0.5rem);
108
- }
109
-
110
- .sk-shimmer-line {
111
- height: 1lh;
112
- border-radius: var(--sk-shimmer-radius, 0.125rem);
113
- background: linear-gradient(
114
- 90deg,
115
- var(--sk-shimmer-color, #e5e7eb) 25%,
116
- var(--sk-shimmer-highlight, #f3f4f6) 50%,
117
- var(--sk-shimmer-color, #e5e7eb) 75%
118
- );
119
- background-size: 200% 100%;
120
- animation: sk-shimmer var(--sk-shimmer-duration, 1.5s) ease-in-out infinite;
121
- }
122
-
123
- /* Inert ghost inside a shimmer-line \u2014 sizes the shimmer to match
124
- content width exactly. Invisible and non-interactive via [inert]. */
125
- .sk-shimmer-line > [inert] {
126
- visibility: hidden;
127
- }
128
-
129
- @keyframes sk-shimmer {
130
- 0% { background-position: 200% 0; }
131
- 100% { background-position: -200% 0; }
132
- }
133
-
134
- /* \u2500\u2500 MediaSkeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
135
-
136
- /* Loading-aware media container.
137
- Reserves space via aspect-ratio (set inline by the component).
138
- Child constraints enforced via React.cloneElement inline styles. */
139
- .sk-media {
140
- overflow: hidden;
141
- }
142
- .sk-media-shimmer {
143
- position: absolute;
144
- inset: 0;
145
- border-radius: var(--sk-shimmer-radius, 0.125rem);
146
- background: linear-gradient(
147
- 90deg,
148
- var(--sk-shimmer-color, #e5e7eb) 25%,
149
- var(--sk-shimmer-highlight, #f3f4f6) 50%,
150
- var(--sk-shimmer-color, #e5e7eb) 75%
151
- );
152
- background-size: 200% 100%;
153
- animation: sk-shimmer var(--sk-shimmer-duration, 1.5s) ease-in-out infinite;
154
- transition: opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate);
155
- }
156
-
157
- /* \u2500\u2500 Shared easing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
158
-
159
- /* Decelerate: fast start, gentle finish \u2014 for elements entering view. */
160
- /* Standard: balanced ease \u2014 for general-purpose transitions. */
161
- /* Accelerate: gentle start, fast finish \u2014 for elements leaving view. */
162
- :root {
163
- --sk-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
164
- --sk-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
165
- --sk-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
166
- }
167
-
168
- /* \u2500\u2500 FadeTransition \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
169
-
170
- .sk-fade {
171
- --sk-fade-duration: 400ms;
172
- }
173
-
174
- .sk-fade-entering {
175
- animation: sk-emerge var(--sk-fade-duration) var(--sk-ease-decelerate) forwards;
176
- }
177
-
178
- .sk-fade-exiting {
179
- animation: sk-collapse var(--sk-fade-duration) var(--sk-ease-accelerate) forwards;
180
- }
181
-
182
- @keyframes sk-emerge {
183
- from {
184
- opacity: 0;
185
- transform: translateY(var(--sk-fade-offset-y, -12px)) scale(var(--sk-fade-offset-scale, 0.98));
186
- }
187
- to {
188
- opacity: 1;
189
- transform: translateY(0) scale(1);
190
- }
191
- }
192
-
193
- @keyframes sk-collapse {
194
- from { opacity: 1; transform: scaleY(1); transform-origin: top; }
195
- to { opacity: 0; transform: scaleY(0); transform-origin: top; }
196
- }
197
-
198
- /* \u2500\u2500 Loading layers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
199
-
200
- /* Shared by shimmer and content layers inside skeleton components.
201
- Both layers permanently occupy the same grid cell; only opacity
202
- and interactivity change. CSS transitions handle the crossfade. */
203
- .sk-loading-layer {
204
- grid-area: 1 / 1;
205
- transition: opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate);
206
- }
207
-
208
- /* \u2500\u2500 Reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
209
-
210
- /* Disables all animations \u2014 shimmer, fade, and loading exit.
211
- Layout changes still happen instantly so functionality is preserved. */
212
- @media (prefers-reduced-motion: reduce) {
213
- .sk-fade-entering,
214
- .sk-fade-exiting,
215
- .sk-shimmer-line,
216
- .sk-media-shimmer {
217
- animation-duration: 0s !important;
218
- }
219
- .sk-loading-layer,
220
- .sk-media-shimmer {
221
- transition-duration: 0s !important;
222
- }
223
- }
224
- `;
46
+ var styles_default = '/* stablekit \u2014 layout stability toolkit for React\n *\n * CSS class prefix: sk-\n * All animations use CSS custom properties for themability.\n * Styles are auto-injected at import time (opt-out via meta tag).\n */\n\n/* \u2500\u2500 LayoutGroup / LayoutView \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* All children overlap in the same grid cell.\n Grid auto-sizes to the largest child.\n Views use flex-column so their content stretches to fill\n the reserved width \u2014 the visual footprint is constant.\n Inline groups (StateSwap) use inline-grid for inline contexts. */\n.sk-layout-group {\n display: grid;\n}\n.sk-layout-group[data-inline] {\n display: inline-grid;\n}\n.sk-layout-group > * {\n grid-area: 1 / 1;\n display: flex;\n flex-direction: column;\n}\n.sk-layout-group[data-inline] > * {\n display: inline;\n}\n\n/* Inactive LayoutView hiding \u2014 CSS-driven via data-state attribute.\n LayoutView sets data-state="active"|"inactive" so consumers can\n override transitions on .sk-layout-view without specificity fights.\n [inert] handles accessibility (non-focusable, non-interactive). */\n.sk-layout-view[data-state="inactive"] {\n opacity: 0;\n visibility: hidden;\n}\n\n/* \u2500\u2500 SizeRatchet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* contain isolates internal reflow from ancestors. */\n.sk-size-ratchet {\n contain: layout style;\n}\n\n/* \u2500\u2500 Shimmer / Skeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sk-skeleton-grid {\n display: grid;\n gap: var(--sk-skeleton-gap, 0.75rem);\n contain: layout style;\n}\n\n.sk-skeleton-bone {\n display: flex;\n flex-direction: column;\n gap: var(--sk-skeleton-bone-gap, 0.125rem);\n padding: var(--sk-skeleton-bone-padding, 0.375rem 0.5rem);\n}\n\n.sk-shimmer-line {\n height: 1lh;\n border-radius: var(--sk-shimmer-radius, 0.125rem);\n background: linear-gradient(\n 90deg,\n var(--sk-shimmer-color, #e5e7eb) 25%,\n var(--sk-shimmer-highlight, #f3f4f6) 50%,\n var(--sk-shimmer-color, #e5e7eb) 75%\n );\n background-size: 200% 100%;\n animation: sk-shimmer var(--sk-shimmer-duration, 1.5s) ease-in-out infinite;\n}\n\n/* Inert ghost inside a shimmer-line \u2014 sizes the shimmer to match\n content width exactly. Invisible and non-interactive via [inert]. */\n.sk-shimmer-line > [inert] {\n visibility: hidden;\n}\n\n@keyframes sk-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* \u2500\u2500 MediaSkeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Loading-aware media container.\n Reserves space via aspect-ratio (set inline by the component).\n Child constraints enforced via React.cloneElement inline styles. */\n.sk-media {\n overflow: hidden;\n}\n.sk-media-shimmer {\n position: absolute;\n inset: 0;\n border-radius: var(--sk-shimmer-radius, 0.125rem);\n background: linear-gradient(\n 90deg,\n var(--sk-shimmer-color, #e5e7eb) 25%,\n var(--sk-shimmer-highlight, #f3f4f6) 50%,\n var(--sk-shimmer-color, #e5e7eb) 75%\n );\n background-size: 200% 100%;\n animation: sk-shimmer var(--sk-shimmer-duration, 1.5s) ease-in-out infinite;\n transition: opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate);\n}\n\n/* \u2500\u2500 Shared easing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Decelerate: fast start, gentle finish \u2014 for elements entering view. */\n/* Standard: balanced ease \u2014 for general-purpose transitions. */\n/* Accelerate: gentle start, fast finish \u2014 for elements leaving view. */\n:root {\n --sk-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);\n --sk-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n --sk-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);\n}\n\n/* \u2500\u2500 FadeTransition \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sk-fade {\n --sk-fade-duration: 400ms;\n}\n\n.sk-fade-entering {\n animation: sk-emerge var(--sk-fade-duration) var(--sk-ease-decelerate) forwards;\n}\n\n.sk-fade-exiting {\n animation: sk-collapse var(--sk-fade-duration) var(--sk-ease-accelerate) forwards;\n}\n\n@keyframes sk-emerge {\n from {\n opacity: 0;\n transform: translateY(var(--sk-fade-offset-y, -12px)) scale(var(--sk-fade-offset-scale, 0.98));\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes sk-collapse {\n from { opacity: 1; transform: scaleY(1); transform-origin: top; }\n to { opacity: 0; transform: scaleY(0); transform-origin: top; }\n}\n\n/* \u2500\u2500 Loading layers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Shared by shimmer and content layers inside skeleton components.\n Both layers permanently occupy the same grid cell; only opacity\n and interactivity change. CSS transitions handle the crossfade. */\n.sk-loading-layer {\n grid-area: 1 / 1;\n transition: opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate);\n}\n\n/* \u2500\u2500 Reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Disables all animations \u2014 shimmer, fade, and loading exit.\n Layout changes still happen instantly so functionality is preserved. */\n@media (prefers-reduced-motion: reduce) {\n .sk-fade-entering,\n .sk-fade-exiting,\n .sk-shimmer-line,\n .sk-media-shimmer {\n animation-duration: 0s !important;\n }\n .sk-loading-layer,\n .sk-media-shimmer {\n transition-duration: 0s !important;\n }\n}\n';
225
47
 
226
48
  // src/internal/inject-styles.ts
227
49
  var injected = false;
package/dist/index.js CHANGED
@@ -9,185 +9,7 @@ import {
9
9
  } from "react";
10
10
 
11
11
  // src/styles.css
12
- var styles_default = `/* stablekit \u2014 layout stability toolkit for React
13
- *
14
- * CSS class prefix: sk-
15
- * All animations use CSS custom properties for themability.
16
- * Styles are auto-injected at import time (opt-out via meta tag).
17
- */
18
-
19
- /* \u2500\u2500 LayoutGroup / LayoutView \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
20
-
21
- /* All children overlap in the same grid cell.
22
- Grid auto-sizes to the largest child.
23
- Block-level groups use flex-column so content stretches to fill
24
- the reserved width. Inline groups (data-inline) skip this \u2014 their
25
- children are inline content that shouldn't be forced vertical. */
26
- .sk-layout-group {
27
- display: grid;
28
- }
29
- .sk-layout-group[data-inline] {
30
- display: inline-grid;
31
- }
32
- .sk-layout-group > * {
33
- grid-area: 1 / 1;
34
- }
35
- .sk-layout-group:not([data-inline]) > * {
36
- display: flex;
37
- flex-direction: column;
38
- }
39
- /* Inline groups: children inherit the parent's inline flow.
40
- Without this, grid items default to block and stack content. */
41
- .sk-layout-group[data-inline] > * {
42
- display: inline;
43
- }
44
-
45
- /* Inactive LayoutView hiding \u2014 CSS-driven via data-state attribute.
46
- LayoutView sets data-state="active"|"inactive" so consumers can
47
- override transitions on .sk-layout-view without specificity fights.
48
- [inert] handles accessibility (non-focusable, non-interactive). */
49
- .sk-layout-view[data-state="inactive"] {
50
- opacity: 0;
51
- visibility: hidden;
52
- }
53
-
54
- /* \u2500\u2500 SizeRatchet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
55
-
56
- /* contain isolates internal reflow from ancestors. */
57
- .sk-size-ratchet {
58
- contain: layout style;
59
- }
60
-
61
- /* \u2500\u2500 Shimmer / Skeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
62
-
63
- .sk-skeleton-grid {
64
- display: grid;
65
- gap: var(--sk-skeleton-gap, 0.75rem);
66
- contain: layout style;
67
- }
68
-
69
- .sk-skeleton-bone {
70
- display: flex;
71
- flex-direction: column;
72
- gap: var(--sk-skeleton-bone-gap, 0.125rem);
73
- padding: var(--sk-skeleton-bone-padding, 0.375rem 0.5rem);
74
- }
75
-
76
- .sk-shimmer-line {
77
- height: 1lh;
78
- border-radius: var(--sk-shimmer-radius, 0.125rem);
79
- background: linear-gradient(
80
- 90deg,
81
- var(--sk-shimmer-color, #e5e7eb) 25%,
82
- var(--sk-shimmer-highlight, #f3f4f6) 50%,
83
- var(--sk-shimmer-color, #e5e7eb) 75%
84
- );
85
- background-size: 200% 100%;
86
- animation: sk-shimmer var(--sk-shimmer-duration, 1.5s) ease-in-out infinite;
87
- }
88
-
89
- /* Inert ghost inside a shimmer-line \u2014 sizes the shimmer to match
90
- content width exactly. Invisible and non-interactive via [inert]. */
91
- .sk-shimmer-line > [inert] {
92
- visibility: hidden;
93
- }
94
-
95
- @keyframes sk-shimmer {
96
- 0% { background-position: 200% 0; }
97
- 100% { background-position: -200% 0; }
98
- }
99
-
100
- /* \u2500\u2500 MediaSkeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
101
-
102
- /* Loading-aware media container.
103
- Reserves space via aspect-ratio (set inline by the component).
104
- Child constraints enforced via React.cloneElement inline styles. */
105
- .sk-media {
106
- overflow: hidden;
107
- }
108
- .sk-media-shimmer {
109
- position: absolute;
110
- inset: 0;
111
- border-radius: var(--sk-shimmer-radius, 0.125rem);
112
- background: linear-gradient(
113
- 90deg,
114
- var(--sk-shimmer-color, #e5e7eb) 25%,
115
- var(--sk-shimmer-highlight, #f3f4f6) 50%,
116
- var(--sk-shimmer-color, #e5e7eb) 75%
117
- );
118
- background-size: 200% 100%;
119
- animation: sk-shimmer var(--sk-shimmer-duration, 1.5s) ease-in-out infinite;
120
- transition: opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate);
121
- }
122
-
123
- /* \u2500\u2500 Shared easing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
124
-
125
- /* Decelerate: fast start, gentle finish \u2014 for elements entering view. */
126
- /* Standard: balanced ease \u2014 for general-purpose transitions. */
127
- /* Accelerate: gentle start, fast finish \u2014 for elements leaving view. */
128
- :root {
129
- --sk-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
130
- --sk-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
131
- --sk-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
132
- }
133
-
134
- /* \u2500\u2500 FadeTransition \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
135
-
136
- .sk-fade {
137
- --sk-fade-duration: 400ms;
138
- }
139
-
140
- .sk-fade-entering {
141
- animation: sk-emerge var(--sk-fade-duration) var(--sk-ease-decelerate) forwards;
142
- }
143
-
144
- .sk-fade-exiting {
145
- animation: sk-collapse var(--sk-fade-duration) var(--sk-ease-accelerate) forwards;
146
- }
147
-
148
- @keyframes sk-emerge {
149
- from {
150
- opacity: 0;
151
- transform: translateY(var(--sk-fade-offset-y, -12px)) scale(var(--sk-fade-offset-scale, 0.98));
152
- }
153
- to {
154
- opacity: 1;
155
- transform: translateY(0) scale(1);
156
- }
157
- }
158
-
159
- @keyframes sk-collapse {
160
- from { opacity: 1; transform: scaleY(1); transform-origin: top; }
161
- to { opacity: 0; transform: scaleY(0); transform-origin: top; }
162
- }
163
-
164
- /* \u2500\u2500 Loading layers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
165
-
166
- /* Shared by shimmer and content layers inside skeleton components.
167
- Both layers permanently occupy the same grid cell; only opacity
168
- and interactivity change. CSS transitions handle the crossfade. */
169
- .sk-loading-layer {
170
- grid-area: 1 / 1;
171
- transition: opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate);
172
- }
173
-
174
- /* \u2500\u2500 Reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
175
-
176
- /* Disables all animations \u2014 shimmer, fade, and loading exit.
177
- Layout changes still happen instantly so functionality is preserved. */
178
- @media (prefers-reduced-motion: reduce) {
179
- .sk-fade-entering,
180
- .sk-fade-exiting,
181
- .sk-shimmer-line,
182
- .sk-media-shimmer {
183
- animation-duration: 0s !important;
184
- }
185
- .sk-loading-layer,
186
- .sk-media-shimmer {
187
- transition-duration: 0s !important;
188
- }
189
- }
190
- `;
12
+ var styles_default = '/* stablekit \u2014 layout stability toolkit for React\n *\n * CSS class prefix: sk-\n * All animations use CSS custom properties for themability.\n * Styles are auto-injected at import time (opt-out via meta tag).\n */\n\n/* \u2500\u2500 LayoutGroup / LayoutView \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* All children overlap in the same grid cell.\n Grid auto-sizes to the largest child.\n Views use flex-column so their content stretches to fill\n the reserved width \u2014 the visual footprint is constant.\n Inline groups (StateSwap) use inline-grid for inline contexts. */\n.sk-layout-group {\n display: grid;\n}\n.sk-layout-group[data-inline] {\n display: inline-grid;\n}\n.sk-layout-group > * {\n grid-area: 1 / 1;\n display: flex;\n flex-direction: column;\n}\n.sk-layout-group[data-inline] > * {\n display: inline;\n}\n\n/* Inactive LayoutView hiding \u2014 CSS-driven via data-state attribute.\n LayoutView sets data-state="active"|"inactive" so consumers can\n override transitions on .sk-layout-view without specificity fights.\n [inert] handles accessibility (non-focusable, non-interactive). */\n.sk-layout-view[data-state="inactive"] {\n opacity: 0;\n visibility: hidden;\n}\n\n/* \u2500\u2500 SizeRatchet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* contain isolates internal reflow from ancestors. */\n.sk-size-ratchet {\n contain: layout style;\n}\n\n/* \u2500\u2500 Shimmer / Skeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sk-skeleton-grid {\n display: grid;\n gap: var(--sk-skeleton-gap, 0.75rem);\n contain: layout style;\n}\n\n.sk-skeleton-bone {\n display: flex;\n flex-direction: column;\n gap: var(--sk-skeleton-bone-gap, 0.125rem);\n padding: var(--sk-skeleton-bone-padding, 0.375rem 0.5rem);\n}\n\n.sk-shimmer-line {\n height: 1lh;\n border-radius: var(--sk-shimmer-radius, 0.125rem);\n background: linear-gradient(\n 90deg,\n var(--sk-shimmer-color, #e5e7eb) 25%,\n var(--sk-shimmer-highlight, #f3f4f6) 50%,\n var(--sk-shimmer-color, #e5e7eb) 75%\n );\n background-size: 200% 100%;\n animation: sk-shimmer var(--sk-shimmer-duration, 1.5s) ease-in-out infinite;\n}\n\n/* Inert ghost inside a shimmer-line \u2014 sizes the shimmer to match\n content width exactly. Invisible and non-interactive via [inert]. */\n.sk-shimmer-line > [inert] {\n visibility: hidden;\n}\n\n@keyframes sk-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* \u2500\u2500 MediaSkeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Loading-aware media container.\n Reserves space via aspect-ratio (set inline by the component).\n Child constraints enforced via React.cloneElement inline styles. */\n.sk-media {\n overflow: hidden;\n}\n.sk-media-shimmer {\n position: absolute;\n inset: 0;\n border-radius: var(--sk-shimmer-radius, 0.125rem);\n background: linear-gradient(\n 90deg,\n var(--sk-shimmer-color, #e5e7eb) 25%,\n var(--sk-shimmer-highlight, #f3f4f6) 50%,\n var(--sk-shimmer-color, #e5e7eb) 75%\n );\n background-size: 200% 100%;\n animation: sk-shimmer var(--sk-shimmer-duration, 1.5s) ease-in-out infinite;\n transition: opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate);\n}\n\n/* \u2500\u2500 Shared easing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Decelerate: fast start, gentle finish \u2014 for elements entering view. */\n/* Standard: balanced ease \u2014 for general-purpose transitions. */\n/* Accelerate: gentle start, fast finish \u2014 for elements leaving view. */\n:root {\n --sk-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);\n --sk-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n --sk-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);\n}\n\n/* \u2500\u2500 FadeTransition \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.sk-fade {\n --sk-fade-duration: 400ms;\n}\n\n.sk-fade-entering {\n animation: sk-emerge var(--sk-fade-duration) var(--sk-ease-decelerate) forwards;\n}\n\n.sk-fade-exiting {\n animation: sk-collapse var(--sk-fade-duration) var(--sk-ease-accelerate) forwards;\n}\n\n@keyframes sk-emerge {\n from {\n opacity: 0;\n transform: translateY(var(--sk-fade-offset-y, -12px)) scale(var(--sk-fade-offset-scale, 0.98));\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes sk-collapse {\n from { opacity: 1; transform: scaleY(1); transform-origin: top; }\n to { opacity: 0; transform: scaleY(0); transform-origin: top; }\n}\n\n/* \u2500\u2500 Loading layers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Shared by shimmer and content layers inside skeleton components.\n Both layers permanently occupy the same grid cell; only opacity\n and interactivity change. CSS transitions handle the crossfade. */\n.sk-loading-layer {\n grid-area: 1 / 1;\n transition: opacity var(--sk-loading-exit-duration, 400ms) var(--sk-ease-decelerate);\n}\n\n/* \u2500\u2500 Reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Disables all animations \u2014 shimmer, fade, and loading exit.\n Layout changes still happen instantly so functionality is preserved. */\n@media (prefers-reduced-motion: reduce) {\n .sk-fade-entering,\n .sk-fade-exiting,\n .sk-shimmer-line,\n .sk-media-shimmer {\n animation-duration: 0s !important;\n }\n .sk-loading-layer,\n .sk-media-shimmer {\n transition-duration: 0s !important;\n }\n}\n';
191
13
 
192
14
  // src/internal/inject-styles.ts
193
15
  var injected = false;
package/dist/styles.css CHANGED
@@ -9,9 +9,9 @@
9
9
 
10
10
  /* All children overlap in the same grid cell.
11
11
  Grid auto-sizes to the largest child.
12
- Block-level groups use flex-column so content stretches to fill
13
- the reserved width. Inline groups (data-inline) skip this — their
14
- children are inline content that shouldn't be forced vertical. */
12
+ Views use flex-column so their content stretches to fill
13
+ the reserved width — the visual footprint is constant.
14
+ Inline groups (StateSwap) use inline-grid for inline contexts. */
15
15
  .sk-layout-group {
16
16
  display: grid;
17
17
  }
@@ -20,13 +20,9 @@
20
20
  }
21
21
  .sk-layout-group > * {
22
22
  grid-area: 1 / 1;
23
- }
24
- .sk-layout-group:not([data-inline]) > * {
25
23
  display: flex;
26
24
  flex-direction: column;
27
25
  }
28
- /* Inline groups: children inherit the parent's inline flow.
29
- Without this, grid items default to block and stack content. */
30
26
  .sk-layout-group[data-inline] > * {
31
27
  display: inline;
32
28
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stablekit.ts",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "description": "React toolkit for layout stability — zero-shift components for loading states, content swaps, and spatial containers.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",