cursedbelt 5.69.0 → 5.70.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/react/index.d.ts +1 -0
  2. package/dist/react/index.d.ts.map +1 -1
  3. package/dist/react/index.js +1 -0
  4. package/dist/react/index.js.map +1 -1
  5. package/dist/react/look/AppearanceFields.d.ts +10 -0
  6. package/dist/react/look/AppearanceFields.d.ts.map +1 -0
  7. package/dist/react/look/AppearanceFields.js +18 -0
  8. package/dist/react/look/AppearanceFields.js.map +1 -0
  9. package/dist/react/look/AppearancePanel.d.ts.map +1 -1
  10. package/dist/react/look/AppearancePanel.js +3 -10
  11. package/dist/react/look/AppearancePanel.js.map +1 -1
  12. package/dist/react/look/AppearanceSheet.d.ts +26 -0
  13. package/dist/react/look/AppearanceSheet.d.ts.map +1 -0
  14. package/dist/react/look/AppearanceSheet.js +32 -0
  15. package/dist/react/look/AppearanceSheet.js.map +1 -0
  16. package/dist/react/look/AppearanceSheetPanel.d.ts +14 -0
  17. package/dist/react/look/AppearanceSheetPanel.d.ts.map +1 -0
  18. package/dist/react/look/AppearanceSheetPanel.js +12 -0
  19. package/dist/react/look/AppearanceSheetPanel.js.map +1 -0
  20. package/dist/styles-areas/analytics.css +13 -19
  21. package/dist/styles-areas/auth.css +3 -3
  22. package/dist/styles-areas/calendar.css +12 -12
  23. package/dist/styles-areas/core.css +43 -39
  24. package/dist/styles-areas/data-table.css +13 -18
  25. package/dist/styles-areas/fields.css +16 -21
  26. package/dist/styles-areas/filter-rail.css +2 -2
  27. package/dist/styles-areas/nav.css +10 -14
  28. package/dist/styles-areas/overlays.css +3 -8
  29. package/dist/styles-areas/place-bar.css +3 -8
  30. package/dist/styles-areas/problem-detail.css +3 -3
  31. package/dist/styles-areas/sharing.css +3 -7
  32. package/dist/styles-areas/test-report.css +2 -7
  33. package/dist/styles-areas/wizard.css +6 -10
  34. package/dist/styles-areas/workbench.css +10 -14
  35. package/package.json +1 -1
  36. package/src/react/index.ts +1 -0
  37. package/src/react/look/AppearanceFields.tsx +33 -0
  38. package/src/react/look/AppearanceMenu.spec.tsx +45 -1
  39. package/src/react/look/AppearancePanel.tsx +2 -22
  40. package/src/react/look/AppearanceSheet.tsx +45 -0
  41. package/src/react/look/AppearanceSheetPanel.tsx +23 -0
  42. package/src/styles-areas/analytics.css +13 -19
  43. package/src/styles-areas/auth.css +3 -3
  44. package/src/styles-areas/calendar.css +12 -12
  45. package/src/styles-areas/core.css +43 -39
  46. package/src/styles-areas/data-table.css +13 -18
  47. package/src/styles-areas/fields.css +16 -21
  48. package/src/styles-areas/filter-rail.css +2 -2
  49. package/src/styles-areas/nav.css +10 -14
  50. package/src/styles-areas/overlays.css +3 -8
  51. package/src/styles-areas/place-bar.css +3 -8
  52. package/src/styles-areas/problem-detail.css +3 -3
  53. package/src/styles-areas/sharing.css +3 -7
  54. package/src/styles-areas/test-report.css +2 -7
  55. package/src/styles-areas/wizard.css +6 -10
  56. package/src/styles-areas/workbench.css +10 -14
@@ -15,7 +15,7 @@
15
15
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
16
16
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
17
17
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
18
- * 905 candidate(s).
18
+ * 920 candidate(s).
19
19
  *
20
20
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
21
21
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -62,11 +62,11 @@
62
62
  @source inline("border-accent/50 border-b border-b-0 border-b-2 border-b-[length:var(--status-glyph-h)]");
63
63
  @source inline("border-b-current border-border border-border! border-border-strong border-border/60");
64
64
  @source inline("border-collapse border-current border-destructive/30 border-destructive/40 border-destructive/50");
65
- @source inline("border-field-border border-rule border-success/30 border-success/40 border-success/50 border-t");
66
- @source inline("border-tone-sky-fg/30 border-tone-slate-fg/30 border-transparent border-warning/30");
67
- @source inline("border-warning/40 border-warning/50 border-x-4 border-x-transparent bot bottom bottom-0 break");
68
- @source inline("break-all break-words c ca cap capitalize co col-span-full com contain container content");
69
- @source inline("contents cursor cursor-col-resize cursor-default cursor-ew-resize cursor-not-allowed");
65
+ @source inline("border-field-border border-l border-r border-rule border-success/30 border-success/40");
66
+ @source inline("border-success/50 border-t border-tone-sky-fg/30 border-tone-slate-fg/30 border-transparent");
67
+ @source inline("border-warning/30 border-warning/40 border-warning/50 border-x-4 border-x-transparent bot bottom");
68
+ @source inline("bottom-0 break break-all break-words c ca cap capitalize co col-span-full com contain container");
69
+ @source inline("content contents cursor cursor-col-resize cursor-default cursor-ew-resize cursor-not-allowed");
70
70
  @source inline("cursor-pointer cursor-row-resize d dark dark:bg-card-overlay dark:bg-card-raised");
71
71
  @source inline("dark:bg-gray-800 data data-[disabled]:hover:bg-border data-[disabled]:opacity-50");
72
72
  @source inline("data-[disabled]:pointer-events-none data-[interactive=true]:duration-[var(--duration-base)]");
@@ -86,12 +86,15 @@
86
86
  @source inline("data-[state=checked]:ring-accent data-[state=checked]:text-white");
87
87
  @source inline("data-[state=checked]:translate-x-4 data-[state=closed]:animate-collapsible-up");
88
88
  @source inline("data-[state=closed]:animate-out data-[state=closed]:fade-out-0");
89
- @source inline("data-[state=closed]:zoom-out-[0.985] data-[state=delayed-open]:animate-in");
90
- @source inline("data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-[0.985]");
91
- @source inline("data-[state=indeterminate]:bg-accent-solid data-[state=indeterminate]:border-accent-solid");
92
- @source inline("data-[state=indeterminate]:text-white data-[state=open]:animate-collapsible-down");
93
- @source inline("data-[state=open]:animate-in data-[state=open]:fade-in-0");
94
- @source inline("data-[state=open]:slide-in-from-bottom-2 data-[state=open]:zoom-in-[0.985]");
89
+ @source inline("data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");
90
+ @source inline("data-[state=closed]:slide-out-to-right data-[state=closed]:zoom-out-[0.985]");
91
+ @source inline("data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0");
92
+ @source inline("data-[state=delayed-open]:zoom-in-[0.985] data-[state=indeterminate]:bg-accent-solid");
93
+ @source inline("data-[state=indeterminate]:border-accent-solid data-[state=indeterminate]:text-white");
94
+ @source inline("data-[state=open]:animate-collapsible-down data-[state=open]:animate-in");
95
+ @source inline("data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom");
96
+ @source inline("data-[state=open]:slide-in-from-bottom-2 data-[state=open]:slide-in-from-left");
97
+ @source inline("data-[state=open]:slide-in-from-right data-[state=open]:zoom-in-[0.985]");
95
98
  @source inline("data-[state=unchecked]:bg-muted data-[state=unchecked]:translate-x-0 disable disabled");
96
99
  @source inline("disabled:active:scale-100 disabled:bg-muted disabled:border-transparent");
97
100
  @source inline("disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-border");
@@ -135,33 +138,34 @@
135
138
  @source inline("leading-tight left left-0 left-1/2 left-2 lg lg:px-8 line line-clamp-2 low lower lowercase m m-0");
136
139
  @source inline("max max-h max-h-[80vh] max-h-[calc(var(--radix-popper-available-height,100dvh)-1rem)]");
137
140
  @source inline("max-h-[var(--guide-popover-max-h)] max-h-[var(--radix-select-content-available-height)]");
138
- @source inline("max-sm:border-b-0 max-sm:border-x-0 max-sm:bottom-0");
139
- @source inline("max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=open]:slide-in-from-bottom");
140
- @source inline("max-sm:h-dvh max-sm:hidden max-sm:inset-x-0 max-sm:max-h-[var(--sheet-h-phone)] max-sm:max-h-dvh");
141
- @source inline("max-sm:max-w-none max-sm:pt-6 max-sm:rounded-b-none max-sm:rounded-none max-sm:rounded-t-2xl");
142
- @source inline("max-sm:touch-none max-sm:w-full max-w-(--radix-popover-content-available-width) max-w-2xl");
143
- @source inline("max-w-40 max-w-[var(--modal-w-sm)] max-w-[var(--page-w-dashboard)] max-w-[var(--page-w-form)]");
144
- @source inline("max-w-[var(--page-w-wide)] max-w-[var(--reading-width)] max-w-full max-w-lg max-w-md max-w-xl");
145
- @source inline("max-w-xs mb-0.5 mb-1 mb-3 md md:divide-border md:divide-x md:flex-none md:flex-row");
146
- @source inline("md:grid-cols-4 md:inline md:w-1/3 md:w-2/5 min min-h-0 min-h-11 min-h-14 min-h-[1lh]");
147
- @source inline("min-h-[var(--control-h-lg)] min-h-[var(--control-h-md)] min-h-[var(--control-h-sm)] min-h-row");
148
- @source inline("min-w-0 min-w-11 min-w-32 min-w-[var(--radix-select-trigger-width)] ml-1 ml-auto motion");
149
- @source inline("motion-reduce:active:scale-100 motion-reduce:animate-none motion-reduce:duration-0");
150
- @source inline("motion-reduce:transition-none mt-0.5 mt-1 mt-2 mx-auto my my-1 object object-cover opacity");
151
- @source inline("opacity-0 opacity-30 opacity-40 opacity-50 opacity-60 opacity-70 out outline outline-none over");
152
- @source inline("overflow overflow-auto overflow-hidden overflow-x-auto overflow-x-clip overflow-y-auto");
153
- @source inline("overscroll-contain p p-0 p-0.5 p-1 p-1.5 p-2 p-3 p-4 p-6 p-[7px] p-[var(--panel-pad)] pause");
154
- @source inline("paused pb-0 pb-1 pb-2 pb-3 pb-4 pb-[max(env(safe-area-inset-bottom,0px),0.75rem)]");
155
- @source inline("pb-[var(--empty-lift)] pl-4 pl-8 place placeholder placeholder:text-field-placeholder point");
156
- @source inline("pointer pointer-coarse pointer-coarse:-m-2 pointer-coarse:data-[state=checked]:translate-x-8");
157
- @source inline("pointer-coarse:h-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11 pointer-coarse:opacity-100");
158
- @source inline("pointer-coarse:size-5 pointer-coarse:size-9 pointer-coarse:w-11 pointer-coarse:w-18");
159
- @source inline("pointer-events pointer-events-auto pointer-events-none pr-8 pt-2 pt-3 px px-0 px-1 px-1.5 px-2");
160
- @source inline("px-2.5 px-3 px-4 px-5 px-6 px-row-x py-0 py-0.5 py-1 py-1.5 py-12 py-2 py-2.5 py-3 py-4 py-6");
161
- @source inline("py-[var(--panel-pad)] py-px py-row-y r re relative res resize right right-0 right-2 ring ring-2");
162
- @source inline("ring-background ro rotate-90 round rounded rounded-[calc(var(--radius-md)-0.25rem)]");
163
- @source inline("rounded-field rounded-full rounded-l-full rounded-lg rounded-md rounded-none rounded-r-full");
164
- @source inline("rounded-sm rounded-xl ru run running s select select-all select-none self-start shadow");
141
+ @source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-sm:border-b-0");
142
+ @source inline("max-sm:border-x-0 max-sm:bottom-0 max-sm:data-[state=closed]:slide-out-to-bottom");
143
+ @source inline("max-sm:data-[state=open]:slide-in-from-bottom max-sm:h-dvh max-sm:hidden max-sm:inset-x-0");
144
+ @source inline("max-sm:max-h-[var(--sheet-h-phone)] max-sm:max-h-dvh max-sm:max-w-none max-sm:pt-6");
145
+ @source inline("max-sm:rounded-b-none max-sm:rounded-none max-sm:rounded-t-2xl max-sm:touch-none max-sm:w-full");
146
+ @source inline("max-w-(--radix-popover-content-available-width) max-w-2xl max-w-40 max-w-[var(--modal-w-sm)]");
147
+ @source inline("max-w-[var(--page-w-dashboard)] max-w-[var(--page-w-form)] max-w-[var(--page-w-wide)]");
148
+ @source inline("max-w-[var(--reading-width)] max-w-full max-w-lg max-w-md max-w-sm max-w-xl max-w-xs mb-0.5 mb-1");
149
+ @source inline("mb-3 md md:divide-border md:divide-x md:flex-none md:flex-row md:grid-cols-4 md:inline md:w-1/3");
150
+ @source inline("md:w-2/5 min min-h-0 min-h-11 min-h-14 min-h-[1lh] min-h-[var(--control-h-lg)]");
151
+ @source inline("min-h-[var(--control-h-md)] min-h-[var(--control-h-sm)] min-h-row min-w-0 min-w-11 min-w-32");
152
+ @source inline("min-w-[var(--radix-select-trigger-width)] ml-1 ml-auto motion motion-reduce:active:scale-100");
153
+ @source inline("motion-reduce:animate-none motion-reduce:duration-0 motion-reduce:transition-none mt-0.5 mt-1");
154
+ @source inline("mt-2 mx-auto my my-1 object object-cover opacity opacity-0 opacity-30 opacity-40 opacity-50");
155
+ @source inline("opacity-60 opacity-70 out outline outline-none over overflow overflow-auto overflow-hidden");
156
+ @source inline("overflow-x-auto overflow-x-clip overflow-y-auto overscroll-contain p p-0 p-0.5 p-1 p-1.5 p-2 p-3");
157
+ @source inline("p-4 p-6 p-[7px] p-[var(--panel-pad)] pause paused pb-0 pb-1 pb-2 pb-3 pb-4");
158
+ @source inline("pb-[max(env(safe-area-inset-bottom,0px),0.75rem)] pb-[var(--empty-lift)] pl-4 pl-8 place");
159
+ @source inline("placeholder placeholder:text-field-placeholder point pointer pointer-coarse pointer-coarse:-m-2");
160
+ @source inline("pointer-coarse:data-[state=checked]:translate-x-8 pointer-coarse:h-11 pointer-coarse:min-h-11");
161
+ @source inline("pointer-coarse:min-w-11 pointer-coarse:opacity-100 pointer-coarse:size-5 pointer-coarse:size-9");
162
+ @source inline("pointer-coarse:w-11 pointer-coarse:w-18 pointer-events pointer-events-auto pointer-events-none");
163
+ @source inline("pr-8 pt-2 pt-3 px px-0 px-1 px-1.5 px-2 px-2.5 px-3 px-4 px-5 px-6 px-row-x py-0 py-0.5 py-1");
164
+ @source inline("py-1.5 py-12 py-2 py-2.5 py-3 py-4 py-6 py-[var(--panel-pad)] py-px py-row-y r re relative res");
165
+ @source inline("resize right right-0 right-2 ring ring-2 ring-background ro rotate-90 round rounded");
166
+ @source inline("rounded-[calc(var(--radius-md)-0.25rem)] rounded-field rounded-full rounded-l-full rounded-l-xl");
167
+ @source inline("rounded-lg rounded-md rounded-none rounded-r-full rounded-r-xl rounded-sm rounded-t-xl");
168
+ @source inline("rounded-xl ru run running s select select-all select-none self-start shadow");
165
169
  @source inline("shadow-[var(--shadow-overlay)] shadow-[var(--shadow-popover)] shadow-none shadow-overlay");
166
170
  @source inline("shadow-raised shadow-sm shrink shrink-0 size size-0 size-1.5 size-10 size-12 size-14 size-2");
167
171
  @source inline("size-2.5 size-20 size-3 size-3.5 size-4 size-5 size-6 size-8 slid slide slide-in-from-left sm");
@@ -18,7 +18,7 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 161 candidate(s).
21
+ * 146 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -32,24 +32,19 @@
32
32
  @source inline("@max-6xl:p-0! @max-6xl:w-0! @max-xl:contents @xl:basis-auto @xl:block @xl:hidden [&>*]:hidden");
33
33
  @source inline("[&>*]:max-w-none [&>svg]:size-3.5 [&_svg]:size-3 [overflow-wrap:anywhere] active:cursor-grabbing");
34
34
  @source inline("appearance-none basis-full bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30");
35
- @source inline("bg-muted/50 border-accent-solid border-accent/60 border-field-error border-l border-r");
36
- @source inline("border-solid border-t-2 col collapse cursor-grab data-[ending-style]:opacity-0");
37
- @source inline("data-[ending-style]:scale-95 data-[highlighted]:bg-accent/10");
38
- @source inline("data-[highlighted]:text-accent-strong data-[starting-style]:opacity-0");
39
- @source inline("data-[starting-style]:scale-95 data-[state=closed]:slide-out-to-bottom");
40
- @source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
41
- @source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
42
- @source inline("data-[state=open]:slide-in-from-right disabled:opacity-40 duration-100 fade-in");
43
- @source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
35
+ @source inline("bg-muted/50 border-accent-solid border-accent/60 border-field-error border-solid border-t-2 col");
36
+ @source inline("collapse cursor-grab data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
37
+ @source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
38
+ @source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95 disabled:opacity-40 duration-100");
39
+ @source inline("fade-in focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
44
40
  @source inline("focus-within:ring-field-ring/30 from-card gap-x-6 h-105");
45
41
  @source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-background hover:bg-muted/40");
46
42
  @source inline("hover:border-field-ring hover:text-warning justify-self-end last:border-0 left-11 left-2.5");
47
- @source inline("list-none max-h-64 max-h-88 max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)]");
48
- @source inline("max-h-[var(--sheet-h-sm)] max-sm:flex-1 max-sm:flex-wrap max-sm:min-w-0 max-sm:min-w-24");
43
+ @source inline("list-none max-h-64 max-h-88 max-sm:flex-1 max-sm:flex-wrap max-sm:min-w-0 max-sm:min-w-24");
49
44
  @source inline("max-sm:min-w-32 max-sm:ml-13.5 max-sm:w-auto max-w-32 max-w-36 max-w-45 max-w-48 max-w-60");
50
- @source inline("max-w-sm min-h-20 min-h-dvh min-w-0! min-w-24 min-w-52 min-w-[var(--anchor-width)] min-w-max");
51
- @source inline("ml-1.5 mr-2 mt-1.5 mt-3 mt-4 not-italic ordinal p-0! pb-1.5 pl-1.5 pl-2 pr-0.5 pr-1 pr-10 pr-16");
52
- @source inline("pr-3 pr-9 pt-1 resize-none resize-y right-3 ring-field-error/30 rounded-l-xl rounded-r-xl");
53
- @source inline("rounded-t-xl self self-stretch shadow-[1px_0_0_0_var(--color-border)] size-7 slide-in-from-top-1");
54
- @source inline("table-fixed text-accent-solid-foreground text-field-placeholder text-success text-xl");
55
- @source inline("to-transparent top-3 transition-[transform,opacity] w-0! w-11 w-12 w-20 w-32 w-36 w-40 w-88");
45
+ @source inline("min-h-20 min-h-dvh min-w-0! min-w-24 min-w-52 min-w-[var(--anchor-width)] min-w-max ml-1.5 mr-2");
46
+ @source inline("mt-1.5 mt-3 mt-4 not-italic ordinal p-0! pb-1.5 pl-1.5 pl-2 pr-0.5 pr-1 pr-10 pr-16 pr-3 pr-9");
47
+ @source inline("pt-1 resize-none resize-y right-3 ring-field-error/30 self self-stretch");
48
+ @source inline("shadow-[1px_0_0_0_var(--color-border)] size-7 slide-in-from-top-1 table-fixed");
49
+ @source inline("text-accent-solid-foreground text-field-placeholder text-success text-xl to-transparent top-3");
50
+ @source inline("transition-[transform,opacity] w-0! w-11 w-12 w-20 w-32 w-36 w-40 w-88");
@@ -18,7 +18,7 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 119 candidate(s).
21
+ * 104 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -27,28 +27,23 @@
27
27
  @source inline("-mx-1 [&::-webkit-scrollbar]:hidden [&_svg]:size-3");
28
28
  @source inline("[background:var(--cb-swatch-fill,var(--muted))] [scrollbar-width:none] appearance-none");
29
29
  @source inline("aria-checked:ring-2 aria-checked:ring-foreground aria-checked:ring-offset-1 bg-accent/15");
30
- @source inline("bg-surface-sunken/80 bg-warning/10 border-border/40 border-field-error border-l border-r");
31
- @source inline("caret-transparent cursor-text data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
30
+ @source inline("bg-surface-sunken/80 bg-warning/10 border-border/40 border-field-error caret-transparent");
31
+ @source inline("cursor-text data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
32
32
  @source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
33
33
  @source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95");
34
- @source inline("data-[state=checked]:ring-foreground data-[state=checked]:ring-offset-1");
35
- @source inline("data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");
36
- @source inline("data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-bottom");
37
- @source inline("data-[state=open]:slide-in-from-left data-[state=open]:slide-in-from-right");
38
- @source inline("disabled:hover:scale-100 disabled:opacity-40 duration-100 focus-visible:border-border-strong");
39
- @source inline("focus-visible:ring-0 focus-visible:ring-field-ring/40 focus-within:border-field-ring");
40
- @source inline("focus-within:ring-2 focus-within:ring-field-ring/30 focus-within:ring-offset-1");
41
- @source inline("focus-within:ring-ring group-focus-within:opacity-100 h-105 h-12 h-3.5");
42
- @source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-muted/50 hover:border-field-ring");
43
- @source inline("hover:scale-110 hover:text-warning italic left-2.5 li list-none max-h-64");
44
- @source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm");
45
- @source inline("md:flex-col md:gap-0.5 md:justify-start md:overflow-visible md:text-left md:w-full min-h-20");
46
- @source inline("min-w-24 min-w-64 min-w-[var(--anchor-width)] min-w-full min-w-max mix-blend-difference mr-2");
47
- @source inline("pl-1.5 pl-2 pl-2.5 pointer-coarse:before:-left-1 pointer-coarse:before:-right-1");
48
- @source inline("pointer-coarse:before:absolute pointer-coarse:before:bottom-[calc(var(--hit-slop-y)*-1)]");
34
+ @source inline("data-[state=checked]:ring-foreground data-[state=checked]:ring-offset-1 disabled:hover:scale-100");
35
+ @source inline("disabled:opacity-40 duration-100 focus-visible:border-border-strong focus-visible:ring-0");
36
+ @source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
37
+ @source inline("focus-within:ring-field-ring/30 focus-within:ring-offset-1 focus-within:ring-ring");
38
+ @source inline("group-focus-within:opacity-100 h-105 h-12 h-3.5 has-[[aria-invalid=true]]:border-field-error");
39
+ @source inline("hover:bg-muted/50 hover:border-field-ring hover:scale-110 hover:text-warning italic left-2.5 li");
40
+ @source inline("list-none max-h-64 md:flex-col md:gap-0.5 md:justify-start md:overflow-visible md:text-left");
41
+ @source inline("md:w-full min-h-20 min-w-24 min-w-64 min-w-[var(--anchor-width)] min-w-full min-w-max");
42
+ @source inline("mix-blend-difference mr-2 pl-1.5 pl-2 pl-2.5 pointer-coarse:before:-left-1");
43
+ @source inline("pointer-coarse:before:-right-1 pointer-coarse:before:absolute");
44
+ @source inline("pointer-coarse:before:bottom-[calc(var(--hit-slop-y)*-1)]");
49
45
  @source inline("pointer-coarse:before:top-[calc(var(--hit-slop-y)*-1)] pointer-coarse:items-center pr-1 pr-16");
50
46
  @source inline("pr-2 pr-3 pr-9 pt-1 resize-none resize-y right-1.5 right-3 ring-accent/30 ring-field-error/30");
51
- @source inline("rounded-l-xl rounded-r-xl rounded-t-xl self-stretch size-7 size-9 size-full sm:w-11 sm:w-56");
52
- @source inline("text-field-placeholder text-success text-xl top-1.5 transition-[transform,opacity] w-20 w-32");
53
- @source inline("w-36 w-40 w-88 w-fit w-max whitespace-pre");
47
+ @source inline("self-stretch size-7 size-9 size-full sm:w-11 sm:w-56 text-field-placeholder text-success text-xl");
48
+ @source inline("top-1.5 transition-[transform,opacity] w-20 w-32 w-36 w-40 w-88 w-fit w-max whitespace-pre");
54
49
  @source inline('pointer-coarse:before:content-[""]');
@@ -18,14 +18,14 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 30 candidate(s).
21
+ * 29 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
25
25
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
26
26
  */
27
27
  @source inline("-mx-2 -outline-offset-2 [&_button]:min-h-0 [&_button]:min-w-0 [&_button]:p-0 [&_button]:size-7");
28
- @source inline("bg-card-overlay border-r duration-150 group-data-[state=open]/rail-section:rotate-90");
28
+ @source inline("bg-card-overlay duration-150 group-data-[state=open]/rail-section:rotate-90");
29
29
  @source inline("group-focus-within/rail-row:opacity-100 group-hover/rail-row:opacity-100 group/rail-row");
30
30
  @source inline("group/rail-section last:mb-0 mx-2 opacity-100 outline-2 outline-accent outline-dashed");
31
31
  @source inline("place-items-center pointer-coarse:[&_button]:min-h-11 pointer-coarse:[&_button]:min-w-11");
@@ -18,7 +18,7 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 141 candidate(s).
21
+ * 126 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -32,25 +32,21 @@
32
32
  @source inline("[&_[data-cb-banner-icon]]:text-destructive [&_[data-cb-banner-icon]]:text-warning");
33
33
  @source inline("[&_svg]:size-3.5 [scrollbar-width:none] aria-checked:ring-2 aria-checked:ring-foreground");
34
34
  @source inline("aria-checked:ring-offset-1 bg-accent/15 bg-destructive/10 bg-warning/10 border-border/40");
35
- @source inline("border-dashed border-l border-r collapse cursor-grab data-[disabled=true]:opacity-50");
35
+ @source inline("border-dashed collapse cursor-grab data-[disabled=true]:opacity-50");
36
36
  @source inline("data-[disabled=true]:pointer-events-none data-[selected=true]:bg-muted");
37
- @source inline("data-[selected=true]:text-foreground data-[state=closed]:slide-out-to-bottom");
38
- @source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
39
- @source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
40
- @source inline("data-[state=open]:slide-in-from-right disabled:hover:scale-100 disabled:opacity-40");
37
+ @source inline("data-[selected=true]:text-foreground disabled:hover:scale-100 disabled:opacity-40");
41
38
  @source inline("focus-within:opacity-100 g grid-cols-4 group-hover/navitem:opacity-100");
42
39
  @source inline("group-hover/tile:opacity-100 group/navitem group/tile h-12 h-[var(--header-h)]");
43
40
  @source inline("h-[var(--header-h-dense)] h-[var(--header-h-roomy)] h-dvh hover:border-foreground/20");
44
41
  @source inline("hover:decoration-border hover:scale-110 hover:underline-offset-4 inset-x-2 inset-x-3 inset-y-1");
45
42
  @source inline("inset-y-1.5 items-stretch justify-around left-3 lg:flex lg:flex-col lg:hidden lg:shrink-0");
46
- @source inline("list-none max-h-72 max-h-[inherit] max-h-[var(--palette-max-h)] max-h-[var(--sheet-h-lg)]");
47
- @source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-md:-right-0.5 max-md:-top-0.5");
48
- @source inline("max-md:absolute max-md:hidden max-sm:flex-none max-sm:justify-center max-sm:px-0 max-sm:w-10");
49
- @source inline("max-w max-w-48 max-w-64 max-w-80 max-w-sm md:flex md:flex-col md:gap-4 md:hidden");
43
+ @source inline("list-none max-h-72 max-h-[inherit] max-h-[var(--palette-max-h)] max-md:-right-0.5");
44
+ @source inline("max-md:-top-0.5 max-md:absolute max-md:hidden max-sm:flex-none max-sm:justify-center max-sm:px-0");
45
+ @source inline("max-sm:w-10 max-w max-w-48 max-w-64 max-w-80 md:flex md:flex-col md:gap-4 md:hidden");
50
46
  @source inline("md:pointer-coarse:w-auto md:px-3 md:px-6 md:shrink-0 min-h-10 min-h-12 min-h-dvh min-w-3.5");
51
47
  @source inline("min-w-8 min-w-9 mix-blend-difference mt-auto mx-1 no-underline opacity-55 opacity-80");
52
48
  @source inline("pb-[env(safe-area-inset-bottom,0px)] pl-11 pl-9 place-items-center");
53
- @source inline("placeholder:text-muted-foreground pr-3 pr-9 pt-0 pt-1 px-0.5 py-8 right-1 rotate-180");
54
- @source inline("rounded-l-xl rounded-r-xl rounded-t-xl shadow-lg size-7 size-9 sm:inline sm:inline-block");
55
- @source inline("sm:inline-flex space-y-0.5 space-y-2 top-[var(--palette-top)] w-52 w-56 w-60 w-[calc(100%-2rem)]");
56
- @source inline("w-[var(--rail-w)] w-[var(--rail-w-collapsed)] w-max");
49
+ @source inline("placeholder:text-muted-foreground pr-3 pr-9 pt-0 pt-1 px-0.5 py-8 right-1 rotate-180 shadow-lg");
50
+ @source inline("size-7 size-9 sm:inline sm:inline-block sm:inline-flex space-y-0.5 space-y-2");
51
+ @source inline("top-[var(--palette-top)] w-52 w-56 w-60 w-[calc(100%-2rem)] w-[var(--rail-w)]");
52
+ @source inline("w-[var(--rail-w-collapsed)] w-max");
@@ -18,16 +18,11 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 23 candidate(s).
21
+ * 8 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
25
25
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
26
26
  */
27
- @source inline("accent-[var(--accent-solid)] bg-accent/15 bg-warning/10 border-dashed border-l border-r");
28
- @source inline("data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");
29
- @source inline("data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-bottom");
30
- @source inline("data-[state=open]:slide-in-from-left data-[state=open]:slide-in-from-right hover:border-border");
31
- @source inline("max-h-[var(--radix-popover-content-available-height)] max-h-[var(--sheet-h-lg)]");
32
- @source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-[var(--overlay-max-w)] max-w-sm");
33
- @source inline("rounded-l-xl rounded-r-xl rounded-t-xl w-64");
27
+ @source inline("accent-[var(--accent-solid)] bg-accent/15 bg-warning/10 border-dashed hover:border-border");
28
+ @source inline("max-h-[var(--radix-popover-content-available-height)] max-w-[var(--overlay-max-w)] w-64");
@@ -18,16 +18,11 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 29 candidate(s).
21
+ * 14 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
25
25
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
26
26
  */
27
- @source inline("-mt-5 -top-1 bg-accent/15 border-l border-r data-[state=closed]:slide-out-to-bottom");
28
- @source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
29
- @source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
30
- @source inline("data-[state=open]:slide-in-from-right inset-x-3 items-stretch justify-around list-none");
31
- @source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm min-h-12");
32
- @source inline("min-w-3.5 no-underline place-items-center pt-0 px-0.5 rounded-l-xl rounded-r-xl rounded-t-xl");
33
- @source inline("shadow-lg");
27
+ @source inline("-mt-5 -top-1 bg-accent/15 inset-x-3 items-stretch justify-around list-none min-h-12 min-w-3.5");
28
+ @source inline("no-underline place-items-center pt-0 px-0.5 shadow-lg");
@@ -18,11 +18,11 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 11 candidate(s).
21
+ * 10 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
25
25
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
26
26
  */
27
- @source inline("-left-[calc(0.75rem+3px)] bg-card/50 bg-muted/30 border-accent/30 border-l mb-1.5 mb-2 pl-3");
28
- @source inline("select-text sm:grid-cols-2 top-1.5");
27
+ @source inline("-left-[calc(0.75rem+3px)] bg-card/50 bg-muted/30 border-accent/30 mb-1.5 mb-2 pl-3 select-text");
28
+ @source inline("sm:grid-cols-2 top-1.5");
@@ -18,15 +18,11 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 29 candidate(s).
21
+ * 14 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
25
25
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
26
26
  */
27
- @source inline("bg-accent/15 border-[var(--border)] border-l border-r data-[state=closed]:slide-out-to-bottom");
28
- @source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
29
- @source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
30
- @source inline("data-[state=open]:slide-in-from-right disabled:opacity-100 hover:opacity-90 left-3 max-h-56");
31
- @source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm min-w-48");
32
- @source inline("ml-2 mt-4 pl-9 right-3 rounded-l-xl rounded-r-xl rounded-t-xl size-9 space-y-4 w-32");
27
+ @source inline("bg-accent/15 border-[var(--border)] disabled:opacity-100 hover:opacity-90 left-3 max-h-56");
28
+ @source inline("min-w-48 ml-2 mt-4 pl-9 right-3 size-9 space-y-4 w-32");
@@ -18,15 +18,10 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 23 candidate(s).
21
+ * 8 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
25
25
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
26
26
  */
27
- @source inline("border-l border-r data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");
28
- @source inline("data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-bottom");
29
- @source inline("data-[state=open]:slide-in-from-left data-[state=open]:slide-in-from-right h-80");
30
- @source inline("hover:bg-muted/60 hover:no-underline last:border-0 max-h-72 max-h-96 max-h-[var(--sheet-h-lg)]");
31
- @source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm no-underline rounded-l-xl");
32
- @source inline("rounded-r-xl rounded-t-xl w-2");
27
+ @source inline("h-80 hover:bg-muted/60 hover:no-underline last:border-0 max-h-72 max-h-96 no-underline w-2");
@@ -18,23 +18,19 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 57 candidate(s).
21
+ * 42 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
25
25
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
26
26
  */
27
- @source inline("[&_svg]:size-3 border-field-error border-l border-r collapse data-[ending-style]:opacity-0");
27
+ @source inline("[&_svg]:size-3 border-field-error collapse data-[ending-style]:opacity-0");
28
28
  @source inline("data-[ending-style]:scale-95 data-[highlighted]:bg-accent/10");
29
29
  @source inline("data-[highlighted]:text-accent-strong data-[starting-style]:opacity-0");
30
- @source inline("data-[starting-style]:scale-95 data-[state=closed]:slide-out-to-bottom");
31
- @source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
32
- @source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
33
- @source inline("data-[state=open]:slide-in-from-right disabled:bg-transparent disabled:opacity-100 duration-100");
30
+ @source inline("data-[starting-style]:scale-95 disabled:bg-transparent disabled:opacity-100 duration-100");
34
31
  @source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
35
32
  @source inline("focus-within:ring-field-ring/30 h-105 has-[[aria-invalid=true]]:border-field-error");
36
- @source inline("hover:border-field-ring hover:text-warning max-h-64 max-h-[var(--sheet-h-lg)]");
37
- @source inline("max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-w-sm min-h-20 min-w-24");
33
+ @source inline("hover:border-field-ring hover:text-warning max-h-64 min-h-20 min-w-24");
38
34
  @source inline("min-w-[var(--anchor-width)] mr-1.5 mr-2 pl-1.5 pl-2 pr-1 pr-16 pr-3 resize-none resize-y");
39
- @source inline("ring-field-error/30 rounded-l-xl rounded-r-xl rounded-t-xl self-stretch size-7 sm:inline");
40
- @source inline("text-field-placeholder text-xl transition-[transform,opacity] w-36 w-88");
35
+ @source inline("ring-field-error/30 self-stretch size-7 sm:inline text-field-placeholder text-xl");
36
+ @source inline("transition-[transform,opacity] w-36 w-88");
@@ -18,7 +18,7 @@
18
18
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
19
19
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
20
20
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
21
- * 107 candidate(s).
21
+ * 92 candidate(s).
22
22
  *
23
23
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
24
24
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -27,20 +27,16 @@
27
27
  @source inline("-my-0.5 [&::-webkit-scrollbar]:hidden [&_svg]:size-3.5 [scrollbar-width:none] bg-accent/15");
28
28
  @source inline("bg-accent/40 bg-accent/8 bg-card-overlay/85 bg-muted/30 bg-muted/60 bg-success/8 border-2");
29
29
  @source inline("border-8 border-accent-solid border-accent/70 border-border-strong/60 border-border/50");
30
- @source inline("border-dashed border-l border-r border-solid bottom-6 data-[state=closed]:slide-out-to-bottom");
31
- @source inline("data-[state=closed]:slide-out-to-left data-[state=closed]:slide-out-to-right");
32
- @source inline("data-[state=open]:slide-in-from-bottom data-[state=open]:slide-in-from-left");
33
- @source inline("data-[state=open]:slide-in-from-right disabled:opacity-0 duration-150 first:pt-1 flex-row");
30
+ @source inline("border-dashed border-solid bottom-6 disabled:opacity-0 duration-150 first:pt-1 flex-row");
34
31
  @source inline("group-hover:disabled:opacity-50 h-105 h-40 hover:bg-card-overlay hover:bg-muted-foreground/10");
35
- @source inline("hover:bg-muted/80 hover:border-field-ring hover:shadow-popover italic left-2.5");
36
- @source inline("max-h-[var(--sheet-h-lg)] max-h-[var(--sheet-h-md)] max-h-[var(--sheet-h-sm)] max-h-full");
37
- @source inline("max-w-sm min-h min-h-20 min-h-8 min-h-9 min-h-dvh min-h-full min-w-20 min-w-40 opacity-100");
38
- @source inline("pb-0.5 pb-[max(env(safe-area-inset-bottom,0px),0.5rem)] peer-focus peer-focus:outline-none");
32
+ @source inline("hover:bg-muted/80 hover:border-field-ring hover:shadow-popover italic left-2.5 max-h-full min-h");
33
+ @source inline("min-h-20 min-h-8 min-h-9 min-h-dvh min-h-full min-w-20 min-w-40 opacity-100 pb-0.5");
34
+ @source inline("pb-[max(env(safe-area-inset-bottom,0px),0.5rem)] peer-focus peer-focus:outline-none");
39
35
  @source inline("peer-focus:ring-2 peer-focus:ring-field-ring/40 peer-focus:rounded-lg pl-1 pl-3");
40
36
  @source inline("pointer-coarse:disabled:opacity-50 pointer-coarse:h-12 pointer-coarse:w-12 pr-16 pr-9");
41
37
  @source inline("resize-none right-4 ring-1 ring-4 ring-accent/20 ring-accent/30 ring-accent/40 ring-border");
42
- @source inline("ring-inset ring-ring rounded-[var(--radius-device)] rounded-l-xl rounded-r-xl rounded-t-xl");
43
- @source inline("scale-[1.01] self-stretch shrink-[2] size-7 sm:flex-1 sm:flex-nowrap sm:shrink-0 sm:w-56");
44
- @source inline("text-muted-foreground/60 text-tone-amber-ink text-tone-cyan-ink text-tone-emerald-ink");
45
- @source inline("text-tone-orange-ink text-tone-purple-ink text-tone-rose-ink text-tone-sky-ink");
46
- @source inline("text-tone-slate-ink text-xl transition-[opacity,transform] translate-y-0 translate-y-2 w-0 w-88");
38
+ @source inline("ring-inset ring-ring rounded-[var(--radius-device)] scale-[1.01] self-stretch shrink-[2] size-7");
39
+ @source inline("sm:flex-1 sm:flex-nowrap sm:shrink-0 sm:w-56 text-muted-foreground/60 text-tone-amber-ink");
40
+ @source inline("text-tone-cyan-ink text-tone-emerald-ink text-tone-orange-ink text-tone-purple-ink");
41
+ @source inline("text-tone-rose-ink text-tone-sky-ink text-tone-slate-ink text-xl transition-[opacity,transform]");
42
+ @source inline("translate-y-0 translate-y-2 w-0 w-88");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cursedbelt",
3
- "version": "5.69.0",
3
+ "version": "5.70.0",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
@@ -40,6 +40,7 @@ export {
40
40
  export { ThemeToggle, type ThemeToggleProps } from './colorScheme/ThemeToggle.js';
41
41
  export { type UseColorScheme, useColorScheme } from './colorScheme/useColorScheme.js';
42
42
  export { AppearanceMenu, type AppearanceMenuProps } from './look/AppearanceMenu.js';
43
+ export { AppearanceSheet, type AppearanceSheetProps, preloadAppearanceSheet } from './look/AppearanceSheet.js';
43
44
  export { LookPicker, type LookPickerProps } from './look/LookPicker.js';
44
45
  export {
45
46
  applyLookToDocument,
@@ -0,0 +1,33 @@
1
+ import { useColorScheme } from '../colorScheme/useColorScheme.js';
2
+ import { SegmentedControl } from '../components/SegmentedControl.js';
3
+ import { LookPicker } from './LookPicker.js';
4
+ import type { LookId } from './lookStore.js';
5
+
6
+ /**
7
+ * What every appearance surface asks — the look cards, then Light / Dark / System — so the
8
+ * TopBar's popover (`AppearancePanel`) and the phone's bottom sheet (`AppearanceSheetPanel`) are
9
+ * one control in two containers. Reached only through those lazy modules: never the entry chunk.
10
+ */
11
+ export function AppearanceFields({ looks }: { looks?: readonly LookId[] }) {
12
+ const { mode, setMode } = useColorScheme();
13
+ return (
14
+ <div className='flex flex-col gap-4' data-cb-appearance-menu=''>
15
+ <LookPicker looks={looks} label='Look' columns={2} />
16
+ <div className='flex flex-col gap-1.5'>
17
+ <span className='text-sm font-medium text-foreground'>Light or dark</span>
18
+ <SegmentedControl
19
+ size='sm'
20
+ aria-label='Light or dark'
21
+ value={mode}
22
+ onChange={setMode}
23
+ options={[
24
+ { value: 'light', label: 'Light' },
25
+ { value: 'dark', label: 'Dark' },
26
+ { value: 'system', label: 'System' },
27
+ ]}
28
+ />
29
+ </div>
30
+ <p className='text-xs text-muted-foreground'>Kept on this device.</p>
31
+ </div>
32
+ );
33
+ }
@@ -3,6 +3,7 @@ import { cleanup, fireEvent, render } from '@testing-library/react';
3
3
  import { readFileSync } from 'node:fs';
4
4
  import { colorSchemeStore, initColorScheme } from 'cursedbelt-core/color-scheme';
5
5
  import { AppearanceMenu } from './AppearanceMenu.js';
6
+ import { AppearanceSheet } from './AppearanceSheet.js';
6
7
  import { initLook, LOOK_STORAGE_KEY, LOOKS, lookClass, resetLook } from './lookStore.js';
7
8
 
8
9
  afterEach(() => {
@@ -65,6 +66,34 @@ describe('AppearanceMenu', () => {
65
66
  });
66
67
  });
67
68
 
69
+ describe('AppearanceSheet', () => {
70
+ test('draws nothing while closed; opened, the same looks and scheme in a sheet named Appearance', async () => {
71
+ initLook({ fallback: 'obsidian' });
72
+ initColorScheme();
73
+ const closed = render(<AppearanceSheet open={false} onClose={() => {}} />);
74
+ expect(closed.container.innerHTML).toBe('');
75
+ expect(closed.queryByRole('dialog')).toBeNull();
76
+ closed.unmount();
77
+
78
+ const { findByRole, getByRole, getAllByRole } = render(<AppearanceSheet open onClose={() => {}} />);
79
+ expect(await findByRole('dialog', { name: 'Appearance' })).not.toBeNull();
80
+ const radios = getAllByRole('radio').map((r) => r.textContent ?? '');
81
+ for (const look of LOOKS) expect(radios.some((t) => t.includes(look.label))).toBe(true);
82
+ expect(getByRole('tablist', { name: 'Light or dark' })).not.toBeNull();
83
+ });
84
+
85
+ test('a look picked in the sheet is worn and kept; Close hands back to the caller', async () => {
86
+ initLook({ fallback: 'obsidian' });
87
+ let closes = 0;
88
+ const { findByRole, getByRole } = render(<AppearanceSheet open onClose={() => closes++} />);
89
+ fireEvent.click(await findByRole('radio', { name: /Dracula/ }));
90
+ expect(document.documentElement.classList.contains('cb-dracula')).toBe(true);
91
+ expect(localStorage.getItem(LOOK_STORAGE_KEY)).toBe('dracula');
92
+ fireEvent.click(getByRole('button', { name: 'Close' }));
93
+ expect(closes).toBe(1);
94
+ });
95
+ });
96
+
68
97
  // 🔴 The panel's Popover, RadioGroup and Tabs cost every app ~21 kB gzip of ENTRY chunk when this
69
98
  // file imported them (arch, 2026-10-07: 157,950 B with the menu vs 136,443 B with ThemeToggle).
70
99
  // They may reach the button only through the dynamic import of ./AppearancePanel.
@@ -72,7 +101,15 @@ const STATIC_IMPORT = /^import\s[^;]*?from\s+'([^']+)'/gms;
72
101
  function staticImportsOf(source: string): string[] {
73
102
  return [...source.matchAll(STATIC_IMPORT)].filter((m) => !m[0].startsWith('import type')).map((m) => m[1] ?? '');
74
103
  }
75
- const PANEL_ONLY = ['./AppearancePanel.js', '../components/Popover.js', '../components/SegmentedControl.js', './LookPicker.js'];
104
+ const PANEL_ONLY = [
105
+ './AppearancePanel.js',
106
+ './AppearanceSheetPanel.js',
107
+ './AppearanceFields.js',
108
+ '../components/Popover.js',
109
+ '../components/Drawer.js',
110
+ '../components/SegmentedControl.js',
111
+ './LookPicker.js',
112
+ ];
76
113
 
77
114
  describe('AppearanceMenu stays out of the entry chunk', () => {
78
115
  test('its module imports none of the panel statically', () => {
@@ -83,6 +120,13 @@ describe('AppearanceMenu stays out of the entry chunk', () => {
83
120
  expect(source).toContain("import('./AppearancePanel.js')");
84
121
  });
85
122
 
123
+ test('nor does the sheet: its Drawer and fields arrive through the dynamic import', () => {
124
+ const source = readFileSync(new URL('./AppearanceSheet.tsx', import.meta.url), 'utf8');
125
+ const imported = staticImportsOf(source);
126
+ for (const heavy of PANEL_ONLY) expect(imported).not.toContain(heavy);
127
+ expect(source).toContain("import('./AppearanceSheetPanel.js')");
128
+ });
129
+
86
130
  test('🔴 the failure path: a static import of the panel is caught', () => {
87
131
  const regressed = "import { Popover } from '../components/Popover.js';\nimport { IconButton } from '../components/IconButton.js';";
88
132
  expect(PANEL_ONLY.some((heavy) => staticImportsOf(regressed).includes(heavy))).toBe(true);