fractalstyler2 0.4.0 → 0.7.0

package/dist/styles/canonical-markups.md

@@ -0,0 +1,160 @@
+---
+title: Canonical Markups
+description: Source of truth for shell and layout markups
+---
+
+> An L4 class without a canonical markup is an incomplete definition: the
+> stylesheet cannot hold up its end alone. These are the structures the shell
+> classes in `_05_shells.sass` assume — copy them verbatim and the responsive
+> behaviour follows.
+
+## 1 - Canonical App Shell and Children
+
+```html
+<div class="app-shell">
+	<header class="app-header"></header>
+	<main class="app-main">
+		<aside class="sidebar-left"></aside>
+		<section class="main-section">
+			<article class="content-shell"></article>
+		</section>
+		<aside class="sidebar-right"></aside>
+	</main>
+	<footer class="app-footer"></footer>
+</div>
+```
+
+| Class | Responsibility |
+|---|---|
+| `.app-shell` | min-height fill; column; publishes `--header-height` |
+| `.app-header` | fixed-height bar (sticky), `height: var(--header-height)` |
+| `.app-main` | the row below the header; `min-height: calc(100vh - var(--header-height))` |
+| `.sidebar-left` / `.sidebar-right` | sticky columns; `top: var(--header-height)`; width from `--sidebar-width`; dress your own bg |
+| `.main-section` | `min-width: 0`; owns horizontal padding via `.page-main` semantics |
+| `.content-shell` | max-width content column inside main-section |
+| `.app-footer` | full-width footer bar |
+
+Status: **implemented** — `_05_shells.sass`.
+
+## 2 - Canonical Shell with Nav + TOC (roles)
+
+One markup — the shell is role-bound (Amendment A1): `.sidebar-left` is the nav, `.sidebar-right` is the TOC. This single markup IS the definition of docs/navtree/toc; there is no `.docs` modifier.
+
+```html
+<div class="app-shell">
+	<header class="app-header">
+		<button class="button is-icon" aria-expanded="false" aria-label="Menu"></button>
+	</header>
+	<main class="app-main">
+		<aside class="sidebar-left">
+			<nav class="navtree">
+				<div class="accordion">
+					<div class="accordion-item open">
+						<button class="accordion-trigger" aria-expanded="true">Section title</button>
+						<div class="accordion-content">
+							<div class="accordion-panel box">
+								<a class="navtree-link active" href="…"></a>
+								<div class="navtree-sub">
+									<a class="navtree-link" href="…"></a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</nav>
+		</aside>
+		<section class="main-section">
+			<details class="mobile-toc">
+				<summary>On this page</summary>
+			</details>
+			<article class="content-shell"></article>
+		</section>
+		<aside class="sidebar-right">
+			<nav class="toc">
+				<div class="toc-title"></div>
+				<ul class="toc-list">
+					<li><a class="toc-link" href="…"></a></li>
+				</ul>
+				<div class="toc-footer"></div>
+			</nav>
+		</aside>
+	</main>
+	<footer class="app-footer"></footer>
+</div>
+```
+
+Retraction physics:
+
+| Rail | Visible | Below the seam |
+|---|---|---|
+| `.sidebar-left` (nav) | ≥ 1024px | off-canvas drawer — header menu toggles `.open` on `.app-shell` |
+| `.sidebar-right` (TOC) | ≥ 1280px | `.mobile-toc` dropdown at the top of `.main-section` |
+
+Tab strip, wherever it lives:
+
+```html
+<div class="tab-list" role="tablist">
+	<button class="tab-trigger active" role="tab" aria-selected="true"></button>
+</div>
+```
+
+Current tab = `.active`; triggers carry native `aria-selected`.
+
+Status: **implemented** — `_05_shells.sass` (Amendment A1 rails + `.navtree*`/`.toc*`/`.tab-*` role classes). Navtree groups ride the accordion family; `.navtree-title` is the flat-label variant for groups that don't collapse.
+
+## 3 - Canonical Sidebar with Accordions
+
+```html
+<aside class="page-sidebar">
+	<div class="accordion">
+		<div class="accordion-item open">
+			<button class="accordion-trigger" aria-expanded="true"></button>
+			<div class="accordion-content">
+				<div class="accordion-panel">
+					<a class="navtree-link" href="…"></a>
+				</div>
+			</div>
+		</div>
+		<div class="accordion-item">
+			<button class="accordion-trigger" aria-expanded="false"></button>
+			<div class="accordion-content">
+				<div class="accordion-panel"></div>
+			</div>
+		</div>
+	</div>
+</aside>
+```
+
+`.open` on `.accordion-item` shows the content; triggers carry native `aria-expanded`.
+
+`.accordion-panel` is required — it is the element that actually collapses, and
+it carries the `overflow` and `min-height` the grid transition needs. Without it
+the panel will not clip while closed.
+
+Status: accordion family **implemented** — `_05_shells.sass`.
+
+## 4 - Canonical Page Frames
+
+```html
+<!-- plain page: padded content frame -->
+<section class="page-shell"> … </section>
+
+<!-- sidebar page: full-bleed split, padding lives in .page-main -->
+<section class="page-split">
+	<aside class="page-sidebar"></aside>
+	<main class="page-main"></main>
+</section>
+```
+
+Status: **implemented** — `_05_shells.sass`.
+
+## 5 - Canonical Hero
+
+```html
+<section class="hero">
+	<h1 class="text-3xl"></h1>
+	<p class="text-lg text-muted"></p>
+</section>
+```
+
+Status: **implemented** — `_05_shells.sass` (documented sugar: `.box.ycenter` + `gap-lg` + `pad-y-xl`).

package/dist/styles/index.sass

@@ -1,18 +1,11 @@
-// =============================================================================
-// FRACTALSTYLER2 — Master Stylesheet & Public Mixin API
-// -----------------------------------------------------------------------------
-// 1. Public API: Forwards all pure mixins, functions, and atoms (0 bytes CSS)
-// 2. Cascade Order: Emits CSS rules in strict specificity sequence
-// =============================================================================
-
-// Public Sass API — available to any file that @uses this module
-@forward 'fractals'
-
-// Global Stylesheet Cascade
-@use '02_fonts' as *
-@use '00_tokens' as *
-@use '07_base' as *
-@use '08_blocks' as *
-@use '09_utilities' as *
-@use '10_layouts' as *
-@use '11_own' as *
+@forward '00_tokens'
+@forward '00_themes'
+@forward '00_presets'
+@use '01_config' as *
+@use '02_dimensions' as *
+@use '03_containers' as *
+@use '04_layouts' as *
+@use '05_shells' as *
+@use '06_visuals' as *
+@use '07_interactions' as *
+@use '08_own' as *

package/dist/themes.d.ts

@@ -0,0 +1,7 @@
+export interface ThemeMeta {
+    id: string;
+    mode: 'light' | 'dark';
+}
+/** The 41 built-in palettes. Apply with setTheme(id).  */
+export declare const themes: readonly ThemeMeta[];
+export declare const themeIds: readonly string[];

package/dist/themes.js

@@ -0,0 +1,45 @@
+/** The 41 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' }
+];
+export const themeIds = themes.map((t) => t.id);

package/dist/version.d.ts

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

package/dist/version.js

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

package/package.json

@@ -1,26 +1,28 @@
 {
 	"name": "fractalstyler2",
-	"version": "0.4.0",
-	"description": "A fractal-composition styling system for SvelteKit — every style unit is a SASS mixin, and components and layouts are recipes of smaller fractals.",
+	"version": "0.7.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",
 		"fractalstyler": "./dist/cli.js",
 		"fractalstyler2-mcp": "./dist/mcp/server.js"
 	},
 	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
+		"registry": "node scripts/update-registry.js",
+		"build": "npm run registry && npm run prepack",
 		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && chmod +x dist/cli.js && chmod +x dist/mcp/server.js && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+		"prepack": "npm run registry && svelte-kit sync && svelte-package && npm run css && chmod +x dist/cli.js && chmod +x dist/mcp/server.js && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && node scripts/validate-deck.js",
+		"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"
 	},
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*",
-		"templates",
+		"registry.json",
 		"skills",
 		"plugin.json",
 		"mcp.json"
@@ -38,10 +40,17 @@
 		},
 		"./styles": "./dist/styles/index.sass",
 		"./styles/*": "./dist/styles/*",
-		"./fractals": "./dist/styles/_fractals.sass",
 		"./tokens": "./dist/styles/_00_tokens.sass",
 		"./mcp": "./dist/mcp/server.js",
-		"./package.json": "./package.json"
+		"./package.json": "./package.json",
+		"./themes": "./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"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
@@ -60,12 +69,14 @@
 		"vite": "^8.0.16"
 	},
 	"keywords": [
-		"svelte",
-		"sveltekit",
-		"sass",
 		"css",
+		"sass",
 		"design-system",
-		"mixins",
+		"styling",
+		"svelte",
+		"sveltekit",
+		"utility-classes",
+		"design-tokens",
 		"fractal"
 	],
 	"dependencies": {

package/plugin.json

@@ -1,22 +1,23 @@
 {
   "name": "fractalstyler2",
-  "version": "0.3.0",
-  "description": "Fractal-composition styling system and design token engine for SvelteKit and AI design tools (OpenDesign, Pencil, Cursor).",
+  "version": "0.7.0",
+  "description": "Composition styling system and design token engine — plain CSS or SASS — for web projects and AI coding agents.",
   "author": {
     "name": "Amrit",
-    "url": "https://github.com/fractal-mandala"
+    "url": "https://github.com/fractalmandala"
   },
   "license": "MIT",
   "keywords": [
-    "svelte",
-    "sveltekit",
-    "sass",
     "css",
+    "sass",
     "design-system",
+    "styling",
+    "svelte",
+    "sveltekit",
     "mcp",
-    "tokens",
-    "fractals"
+    "design-tokens",
+    "fractal"
   ],
-  "homepage": "https://github.com/fractal-mandala/fractalstyler2",
-  "repository": "https://github.com/fractal-mandala/fractalstyler2"
+  "homepage": "https://github.com/fractalmandala/fractalstyler2",
+  "repository": "https://github.com/fractalmandala/fractalstyler2"
 }