fractalstyler2 0.7.0 → 0.8.0

package/dist/styles/_03_containers.sass

@@ -103,3 +103,18 @@
 	position: fixed
 .sticky
 	position: sticky
+
+// Scroll containers. A panel that has to hold more than fits — a long option
+// list, a code block, a table — is a composition primitive, not a bespoke
+// widget. Without these the only way to express it was a hand-written rule,
+// which is the escape hatch the registry exists to avoid.
+// Pair with a height: .scroll-y needs one to have anything to scroll against.
+.scroll-y // Vertical scroll inside a bounded height; needs an .h-* or a constraining flex parent
+	overflow-y: auto
+	overflow-x: hidden
+	overscroll-behavior: contain
+
+.scroll-x // Horizontal scroll inside a bounded width; .reel adds snap points
+	overflow-x: auto
+	overflow-y: hidden
+	overscroll-behavior: contain

package/dist/styles/_04_layouts.sass

@@ -79,7 +79,7 @@ $frame-ratios: ('16-9': '16 / 9', '9-16': '9 / 16', '4-3': '4 / 3', '3-4': '3 /
 		aspect-ratio: #{$ratio}
 		overflow: hidden
 		position: relative
-		img, video, iframe
+		img, video, iframe, svg
 			width: 100%
 			height: 100%
 			object-fit: cover

package/dist/themes.d.ts

@@ -1,7 +1,9 @@
 export interface ThemeMeta {
     id: string;
     mode: 'light' | 'dark';
+    /** The same palette in the opposite mode, when one exists. */
+    twin?: string;
 }
-/** The 41 built-in palettes. Apply with setTheme(id).  */
+/** The 76 built-in palettes. Apply with setTheme(id).  */
 export declare const themes: readonly ThemeMeta[];
 export declare const themeIds: readonly string[];

package/dist/themes.js

@@ -1,45 +1,80 @@
-/** The 41 built-in palettes. Apply with setTheme(id).  */
+/** The 76 built-in palettes. Apply with setTheme(id).  */
 export const themes = [
-    { id: 'theme-light-default', mode: 'light' },
-    { id: 'theme-himalaya-light', mode: 'light' },
-    { id: 'theme-editorial-light', mode: 'light' },
-    { id: 'theme-space-light', mode: 'light' },
-    { id: 'theme-sun-light', mode: 'light' },
-    { id: 'theme-monochrono-light', mode: 'light' },
-    { id: 'theme-molly-light', mode: 'light' },
-    { id: 'theme-malana-light', mode: 'light' },
-    { id: 'theme-coresync-light', mode: 'light' },
-    { id: 'theme-studio-light', mode: 'light' },
-    { id: 'theme-matcha-light', mode: 'light' },
-    { id: 'theme-sakura-light', mode: 'light' },
-    { id: 'theme-nordic-frost-light', mode: 'light' },
-    { id: 'theme-desert-dune-light', mode: 'light' },
-    { id: 'theme-lavender-mist-light', mode: 'light' },
-    { id: 'theme-botanical-light', mode: 'light' },
-    { id: 'theme-clay-studio-light', mode: 'light' },
-    { id: 'theme-solaris-light', mode: 'light' },
-    { id: 'theme-cyberpunk-day-light', mode: 'light' },
-    { id: 'theme-copper-patina-light', mode: 'light' },
-    { id: 'theme-dracula-light', mode: 'light' },
-    { id: 'theme-lagoona-dark', mode: 'dark' },
-    { id: 'theme-frozen-dark', mode: 'dark' },
-    { id: 'theme-night-dark', mode: 'dark' },
-    { id: 'theme-inkworm-dark', mode: 'dark' },
-    { id: 'theme-monochrono-dark', mode: 'dark' },
-    { id: 'theme-fouram-dark', mode: 'dark' },
-    { id: 'theme-wintercame-dark', mode: 'dark' },
-    { id: 'theme-sun-dark', mode: 'dark' },
-    { id: 'theme-console-dark', mode: 'dark' },
-    { id: 'theme-dracula-dark', mode: 'dark' },
-    { id: 'theme-catppuccin-mocha', mode: 'light' },
-    { id: 'theme-nord-dark', mode: 'dark' },
-    { id: 'theme-gruvbox-dark', mode: 'dark' },
-    { id: 'theme-onedark-pro', mode: 'light' },
-    { id: 'theme-rose-pine-dark', mode: 'dark' },
-    { id: 'theme-midnight-emerald-dark', mode: 'dark' },
-    { id: 'theme-obsidian-crimson-dark', mode: 'dark' },
-    { id: 'theme-synthwave-dark', mode: 'dark' },
-    { id: 'theme-deep-ocean-dark', mode: 'dark' },
-    { id: 'theme-amethyst-void-dark', mode: 'dark' }
+    { id: 'theme-light-default', mode: 'light', twin: 'theme-dark-default' },
+    { id: 'theme-himalaya-light', mode: 'light', twin: 'theme-himalaya-dark' },
+    { id: 'theme-editorial-light', mode: 'light', twin: 'theme-editorial-dark' },
+    { id: 'theme-space-light', mode: 'light', twin: 'theme-space-dark' },
+    { id: 'theme-sun-light', mode: 'light', twin: 'theme-sun-dark' },
+    { id: 'theme-monochrono-light', mode: 'light', twin: 'theme-monochrono-dark' },
+    { id: 'theme-molly-light', mode: 'light', twin: 'theme-molly-dark' },
+    { id: 'theme-malana-light', mode: 'light', twin: 'theme-malana-dark' },
+    { id: 'theme-coresync-light', mode: 'light', twin: 'theme-coresync-dark' },
+    { id: 'theme-studio-light', mode: 'light', twin: 'theme-studio-dark' },
+    { id: 'theme-matcha-light', mode: 'light', twin: 'theme-matcha-dark' },
+    { id: 'theme-sakura-light', mode: 'light', twin: 'theme-sakura-dark' },
+    { id: 'theme-nordic-frost-light', mode: 'light', twin: 'theme-nordic-frost-dark' },
+    { id: 'theme-desert-dune-light', mode: 'light', twin: 'theme-desert-dune-dark' },
+    { id: 'theme-lavender-mist-light', mode: 'light', twin: 'theme-lavender-mist-dark' },
+    { id: 'theme-botanical-light', mode: 'light', twin: 'theme-botanical-dark' },
+    { id: 'theme-clay-studio-light', mode: 'light', twin: 'theme-clay-studio-dark' },
+    { id: 'theme-solaris-light', mode: 'light', twin: 'theme-solaris-dark' },
+    { id: 'theme-cyberpunk-day-light', mode: 'light', twin: 'theme-cyberpunk-day-dark' },
+    { id: 'theme-copper-patina-light', mode: 'light', twin: 'theme-copper-patina-dark' },
+    { id: 'theme-dracula-light', mode: 'light', twin: 'theme-dracula-dark' },
+    { id: 'theme-lagoona-dark', mode: 'dark', twin: 'theme-lagoona-light' },
+    { id: 'theme-frozen-dark', mode: 'dark', twin: 'theme-frozen-light' },
+    { id: 'theme-night-dark', mode: 'dark', twin: 'theme-night-light' },
+    { id: 'theme-inkworm-dark', mode: 'dark', twin: 'theme-inkworm-light' },
+    { id: 'theme-monochrono-dark', mode: 'dark', twin: 'theme-monochrono-light' },
+    { id: 'theme-fouram-dark', mode: 'dark', twin: 'theme-fouram-light' },
+    { id: 'theme-wintercame-dark', mode: 'dark', twin: 'theme-wintercame-light' },
+    { id: 'theme-sun-dark', mode: 'dark', twin: 'theme-sun-light' },
+    { id: 'theme-console-dark', mode: 'dark', twin: 'theme-console-light' },
+    { id: 'theme-dracula-dark', mode: 'dark', twin: 'theme-dracula-light' },
+    { id: 'theme-catppuccin-mocha', mode: 'dark', twin: 'theme-catppuccin-latte' },
+    { id: 'theme-nord-dark', mode: 'dark', twin: 'theme-nord-light' },
+    { id: 'theme-gruvbox-dark', mode: 'dark', twin: 'theme-gruvbox-light' },
+    { id: 'theme-onedark-pro', mode: 'dark', twin: 'theme-onelight-pro' },
+    { id: 'theme-rose-pine-dark', mode: 'dark', twin: 'theme-rose-pine-light' },
+    { id: 'theme-midnight-emerald-dark', mode: 'dark', twin: 'theme-midnight-emerald-light' },
+    { id: 'theme-obsidian-crimson-dark', mode: 'dark', twin: 'theme-obsidian-crimson-light' },
+    { id: 'theme-synthwave-dark', mode: 'dark', twin: 'theme-synthwave-light' },
+    { id: 'theme-deep-ocean-dark', mode: 'dark', twin: 'theme-deep-ocean-light' },
+    { id: 'theme-amethyst-void-dark', mode: 'dark', twin: 'theme-amethyst-void-light' },
+    { id: 'theme-dark-default', mode: 'dark', twin: 'theme-light-default' },
+    { id: 'theme-himalaya-dark', mode: 'dark', twin: 'theme-himalaya-light' },
+    { id: 'theme-editorial-dark', mode: 'dark', twin: 'theme-editorial-light' },
+    { id: 'theme-space-dark', mode: 'dark', twin: 'theme-space-light' },
+    { id: 'theme-molly-dark', mode: 'dark', twin: 'theme-molly-light' },
+    { id: 'theme-malana-dark', mode: 'dark', twin: 'theme-malana-light' },
+    { id: 'theme-coresync-dark', mode: 'dark', twin: 'theme-coresync-light' },
+    { id: 'theme-studio-dark', mode: 'dark', twin: 'theme-studio-light' },
+    { id: 'theme-matcha-dark', mode: 'dark', twin: 'theme-matcha-light' },
+    { id: 'theme-sakura-dark', mode: 'dark', twin: 'theme-sakura-light' },
+    { id: 'theme-nordic-frost-dark', mode: 'dark', twin: 'theme-nordic-frost-light' },
+    { id: 'theme-desert-dune-dark', mode: 'dark', twin: 'theme-desert-dune-light' },
+    { id: 'theme-lavender-mist-dark', mode: 'dark', twin: 'theme-lavender-mist-light' },
+    { id: 'theme-botanical-dark', mode: 'dark', twin: 'theme-botanical-light' },
+    { id: 'theme-clay-studio-dark', mode: 'dark', twin: 'theme-clay-studio-light' },
+    { id: 'theme-solaris-dark', mode: 'dark', twin: 'theme-solaris-light' },
+    { id: 'theme-cyberpunk-day-dark', mode: 'dark', twin: 'theme-cyberpunk-day-light' },
+    { id: 'theme-copper-patina-dark', mode: 'dark', twin: 'theme-copper-patina-light' },
+    { id: 'theme-lagoona-light', mode: 'light', twin: 'theme-lagoona-dark' },
+    { id: 'theme-frozen-light', mode: 'light', twin: 'theme-frozen-dark' },
+    { id: 'theme-night-light', mode: 'light', twin: 'theme-night-dark' },
+    { id: 'theme-inkworm-light', mode: 'light', twin: 'theme-inkworm-dark' },
+    { id: 'theme-fouram-light', mode: 'light', twin: 'theme-fouram-dark' },
+    { id: 'theme-wintercame-light', mode: 'light', twin: 'theme-wintercame-dark' },
+    { id: 'theme-console-light', mode: 'light', twin: 'theme-console-dark' },
+    { id: 'theme-catppuccin-latte', mode: 'light', twin: 'theme-catppuccin-mocha' },
+    { id: 'theme-nord-light', mode: 'light', twin: 'theme-nord-dark' },
+    { id: 'theme-gruvbox-light', mode: 'light', twin: 'theme-gruvbox-dark' },
+    { id: 'theme-onelight-pro', mode: 'light', twin: 'theme-onedark-pro' },
+    { id: 'theme-rose-pine-light', mode: 'light', twin: 'theme-rose-pine-dark' },
+    { id: 'theme-midnight-emerald-light', mode: 'light', twin: 'theme-midnight-emerald-dark' },
+    { id: 'theme-obsidian-crimson-light', mode: 'light', twin: 'theme-obsidian-crimson-dark' },
+    { id: 'theme-synthwave-light', mode: 'light', twin: 'theme-synthwave-dark' },
+    { id: 'theme-deep-ocean-light', mode: 'light', twin: 'theme-deep-ocean-dark' },
+    { id: 'theme-amethyst-void-light', mode: 'light', twin: 'theme-amethyst-void-dark' }
 ];
 export const themeIds = themes.map((t) => t.id);

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.7.0";
+export declare const version = "0.8.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 // Generated from package.json by scripts/update-registry.js — do not edit.
-export const version = '0.7.0';
+export const version = '0.8.0';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fractalstyler2",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"description": "A composition styling system, shipped as plain CSS and as editable SASS. The class registry is the public API: compose in markup, write no stylesheet.",
 	"bin": {
 		"fractalstyler2": "./dist/cli.js",
@@ -16,7 +16,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"validate:deck": "node scripts/validate-deck.js",
 		"css": "node scripts/build-css.js",
-		"version": "npm run registry && git add -A"
+		"version": "npm run registry && git add -A",
+		"pair": "node scripts/generate-pairs.mjs && node scripts/update-registry.js"
 	},
 	"files": [
 		"dist",
@@ -38,19 +39,37 @@
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
-		"./styles": "./dist/styles/index.sass",
+		"./styles": {
+			"types": "./dist/asset.d.ts",
+			"default": "./dist/styles/index.sass"
+		},
 		"./styles/*": "./dist/styles/*",
-		"./tokens": "./dist/styles/_00_tokens.sass",
+		"./tokens": {
+			"types": "./dist/asset.d.ts",
+			"default": "./dist/styles/_00_tokens.sass"
+		},
 		"./mcp": "./dist/mcp/server.js",
 		"./package.json": "./package.json",
-		"./themes": "./dist/styles/_00_themes.sass",
+		"./themes": {
+			"types": "./dist/asset.d.ts",
+			"default": "./dist/styles/_00_themes.sass"
+		},
 		"./presets": {
 			"types": "./dist/presets.core.d.ts",
 			"default": "./dist/presets.core.js"
 		},
-		"./css": "./dist/css/fractalstyler.css",
-		"./css/min": "./dist/css/fractalstyler.min.css",
-		"./styles/presets": "./dist/styles/_00_presets.sass"
+		"./css": {
+			"types": "./dist/asset.d.ts",
+			"default": "./dist/css/fractalstyler.css"
+		},
+		"./css/min": {
+			"types": "./dist/asset.d.ts",
+			"default": "./dist/css/fractalstyler.min.css"
+		},
+		"./styles/presets": {
+			"types": "./dist/asset.d.ts",
+			"default": "./dist/styles/_00_presets.sass"
+		}
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"

package/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "fractalstyler2",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Composition styling system and design token engine — plain CSS or SASS — for web projects and AI coding agents.",
   "author": {
     "name": "Amrit",

package/registry.json

@@ -631,6 +631,286 @@
     "description": "Built-in dark palette — pair with data-mode=\"dark\"",
     "example": "<html class=\"theme-amethyst-void-dark\" data-mode=\"dark\">"
   },
+  {
+    "class": ".theme-dark-default",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-dark-default\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-himalaya-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-himalaya-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-editorial-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-editorial-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-space-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-space-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-molly-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-molly-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-malana-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-malana-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-coresync-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-coresync-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-studio-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-studio-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-matcha-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-matcha-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-sakura-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-sakura-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-nordic-frost-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-nordic-frost-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-desert-dune-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-desert-dune-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-lavender-mist-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-lavender-mist-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-botanical-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-botanical-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-clay-studio-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-clay-studio-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-solaris-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-solaris-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-cyberpunk-day-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-cyberpunk-day-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-copper-patina-dark",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in dark palette — pair with data-mode=\"dark\"",
+    "example": "<html class=\"theme-copper-patina-dark\" data-mode=\"dark\">"
+  },
+  {
+    "class": ".theme-lagoona-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-lagoona-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-frozen-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-frozen-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-night-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-night-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-inkworm-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-inkworm-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-fouram-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-fouram-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-wintercame-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-wintercame-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-console-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-console-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-catppuccin-latte",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-catppuccin-latte\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-nord-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-nord-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-gruvbox-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-gruvbox-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-onelight-pro",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-onelight-pro\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-rose-pine-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-rose-pine-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-midnight-emerald-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-midnight-emerald-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-obsidian-crimson-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-obsidian-crimson-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-synthwave-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-synthwave-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-deep-ocean-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-deep-ocean-light\" data-mode=\"light\">"
+  },
+  {
+    "class": ".theme-amethyst-void-light",
+    "layer": "L0",
+    "property": "22 colour tokens",
+    "file": "_00_themes.sass",
+    "description": "Built-in light palette — pair with data-mode=\"light\"",
+    "example": "<html class=\"theme-amethyst-void-light\" data-mode=\"light\">"
+  },
   {
     "class": ".box",
     "layer": "L2",
@@ -975,6 +1255,22 @@
     "description": ".sticky component / container",
     "example": "<div class=\"sticky\">"
   },
+  {
+    "class": ".scroll-y",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Vertical scroll inside a bounded height; needs an .h-* or a constraining flex parent",
+    "example": "<div class=\"scroll-y\">"
+  },
+  {
+    "class": ".scroll-x",
+    "layer": "L2",
+    "property": "",
+    "file": "_03_containers.sass",
+    "description": "Horizontal scroll inside a bounded width; .reel adds snap points",
+    "example": "<div class=\"scroll-x\">"
+  },
   {
     "class": ".grid-1",
     "layer": "L3",

package/skills/fractal-styler/SKILL.md

@@ -9,7 +9,7 @@ description: Compose UI components and page layouts with the fractalstyler2 clas
 entire public API.** You compose in markup; you do not author CSS.
 
 It ships as plain CSS and as editable SASS, from one source. Which one a
-project took changes nothing you do: the classes, tokens, 41 themes and four
+project took changes nothing you do: the classes, tokens, 76 themes and four
 preset axes are identical either way. Check for `fractalstyler.css` or a
 `src/lib/styles/` directory to know which you are in — and never assume a SASS
 toolchain exists.
@@ -154,6 +154,14 @@ An absent attribute means that axis's default. Values are in
 `references/tokens.md`. Presets remap tokens only; they never require a markup
 change.
 
+To drive any of this from code — set a preset, toggle light/dark, apply one of
+the 76 palettes, or read what is currently active — use the package runtime
+rather than writing to `document.documentElement` yourself. It persists the
+choice and stamps it before first paint. `docs/14-api.md` is the complete
+reference; the short version is `initPresets()` once on mount, then
+`setPreset`, `toggleMode`, and `setTheme`. Prebuilt controls ship as
+`ModeToggle`, `ThemePicker`, and one picker per axis.
+
 ---
 
 ## MCP Tools

package/skills/fractal-styler/references/fractals.md

@@ -1,7 +1,7 @@
 # Fractalstyler2 — Class Reference
 
 GENERATED FILE — do not edit. Emitted by `scripts/update-registry.js` from the
-parsed stylesheet. 250 classes across 89 tokens.
+parsed stylesheet. 287 classes across 89 tokens.
 
 **The classes below are the entire public API.** The system defines no
 authoring mixins and no SASS functions — `+stack`, `+surface`, `space()` and
@@ -62,6 +62,41 @@ Raw values. Every token also exists as a class.
 | `.theme-synthwave-dark` | 22 colour tokens | `_00_themes.sass` |
 | `.theme-deep-ocean-dark` | 22 colour tokens | `_00_themes.sass` |
 | `.theme-amethyst-void-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-dark-default` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-himalaya-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-editorial-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-space-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-molly-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-malana-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-coresync-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-studio-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-matcha-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-sakura-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-nordic-frost-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-desert-dune-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-lavender-mist-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-botanical-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-clay-studio-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-solaris-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-cyberpunk-day-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-copper-patina-dark` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-lagoona-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-frozen-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-night-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-inkworm-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-fouram-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-wintercame-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-console-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-catppuccin-latte` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-nord-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-gruvbox-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-onelight-pro` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-rose-pine-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-midnight-emerald-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-obsidian-crimson-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-synthwave-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-deep-ocean-light` | 22 colour tokens | `_00_themes.sass` |
+| `.theme-amethyst-void-light` | 22 colour tokens | `_00_themes.sass` |
 
 ---
 
@@ -154,6 +189,8 @@ Flow and alignment. x* is ALWAYS horizontal, y* is ALWAYS vertical, in every con
 | `.absolute` | .absolute component / container | `_03_containers.sass` |
 | `.fixed` | .fixed component / container | `_03_containers.sass` |
 | `.sticky` | .sticky component / container | `_03_containers.sass` |
+| `.scroll-y` | Vertical scroll inside a bounded height; needs an .h-* or a constraining flex parent | `_03_containers.sass` |
+| `.scroll-x` | Horizontal scroll inside a bounded width; .reel adds snap points | `_03_containers.sass` |
 
 ---