fractalstyler2 0.0.1 → 0.1.0

package/dist/{components → styles}/_blocks.sass

@@ -4,7 +4,7 @@
 // State is expressed with data-*/aria-*, never modifier classes.
 // =============================================================================
 
-@use '../fractals' as *
+@use 'fractals' as *
 
 .card
 	+surface(surface, s, 12)

package/dist/{fractals/index.sass → styles/_fractals.sass}

@@ -1,7 +1,9 @@
 // =============================================================================
 // FRACTALS — the pure API barrel. Emits NO css on its own.
 // -----------------------------------------------------------------------------
-// In any component partial:  @use '../fractals' as *
+// In any component partial or Svelte component:
+//   @use '$lib/styles/fractals' as *
+//   (or @use './fractals' as *)
 // then call fractals freely:  +surface(...)  +stack(...)  space(m) ...
 // =============================================================================
 

package/dist/{components → styles}/_layouts.sass

@@ -4,7 +4,7 @@
 // hero, a holy-grail, a docs template. Each is a short composition of fractals.
 // =============================================================================
 
-@use '../fractals' as *
+@use 'fractals' as *
 
 // 1. Responsive grid of 3 columns — 1 → 2 → 3 across breakpoints.
 .grid-3

package/dist/styles/index.sass

@@ -2,18 +2,19 @@
 // STYLES ENTRY — the full emitted stylesheet in cascade order.
 // -----------------------------------------------------------------------------
 //   1. tokens      the CSS custom properties (only literal values)
-//   2. utilities   atom fractals projected to markup classes (optional layer)
-//   3. blocks      components composed from fractals
-//   4. layouts     page templates composed from fractals
+//   2. base        fluid reset
+//   3. utilities   atom fractals projected to markup classes (optional layer)
+//   4. blocks      components composed from fractals
+//   5. layouts     page templates composed from fractals
 //
-// Consume from a SvelteKit app:  import 'fractalstyler2/styles'
-// or, from SASS:                 @use 'fractalstyler2/styles'
+// Consume from a SvelteKit app:  import '$lib/styles/index.sass'
+// or from package:               import 'fractalstyler2/styles'
 // The fractal mixins/functions themselves emit nothing until called, so output
 // contains only what you use.
 // =============================================================================
 
-@use '../fractals/tokens'
-@use '../fractals/base'
-@use '../fractals/utilities'
-@use '../components/blocks'
-@use '../components/layouts'
+@use './tokens'
+@use './base'
+@use './utilities'
+@use './blocks'
+@use './layouts'

package/package.json

@@ -1,20 +1,26 @@
 {
 	"name": "fractalstyler2",
-	"version": "0.0.1",
+	"version": "0.1.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.",
+	"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",
 		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
+		"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"
 	},
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
+		"!dist/**/*.spec.*",
+		"templates"
 	],
 	"sideEffects": [
 		"**/*.css"
@@ -28,8 +34,10 @@
 			"svelte": "./dist/index.js"
 		},
 		"./styles": "./dist/styles/index.sass",
-		"./fractals": "./dist/fractals/index.sass",
-		"./tokens": "./dist/fractals/_tokens.sass",
+		"./styles/*": "./dist/styles/*",
+		"./fractals": "./dist/styles/_fractals.sass",
+		"./tokens": "./dist/styles/_tokens.sass",
+		"./mcp": "./dist/mcp/server.js",
 		"./package.json": "./package.json"
 	},
 	"peerDependencies": {
@@ -40,6 +48,7 @@
 		"@sveltejs/kit": "^2.63.0",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@types/node": "^26.2.0",
 		"publint": "^0.3.21",
 		"sass": "^1.102.0",
 		"svelte": "^5.56.1",
@@ -55,5 +64,8 @@
 		"design-system",
 		"mixins",
 		"fractal"
-	]
+	],
+	"dependencies": {
+		"@modelcontextprotocol/sdk": "^1.30.0"
+	}
 }

package/templates/_atoms.sass

@@ -0,0 +1,155 @@
+// =============================================================================
+// ATOM FRACTALS — the indivisible units. One visual decision each.
+// -----------------------------------------------------------------------------
+// Every atom is a mixin. Call it inside a class to compose, or let
+// _utilities.sass project it to a utility class. Same fractal, two consumers.
+// =============================================================================
+
+@use 'config' as *
+
+// --- Flow: the two axes of layout ------------------------------------------
+// A box is a vertical stack, a row is horizontal. Optional semantic alignment:
+//   +box(center)          → items centered on the cross axis
+//   +row(between, center) → spread on main axis, centered on cross axis
+=box($x: null, $y: null)
+	display: flex
+	flex-direction: column
+	@if $x
+		align-items: align($x)
+	@if $y
+		justify-content: align($y)
+
+=row($x: null, $y: null)
+	display: flex
+	flex-direction: row
+	@if $x
+		justify-content: align($x)
+	@if $y
+		align-items: align($y)
+
+=wrap
+	flex-wrap: wrap
+
+=grid($cols: 1)
+	display: grid
+	grid-template-columns: repeat($cols, minmax(0, 1fr))
+
+// A grid that reflows on its own — no breakpoints, no counting columns.
+=auto-grid($min: 15rem, $gap: s)
+	display: grid
+	grid-template-columns: repeat(auto-fit, minmax(min(#{$min}, 100%), 1fr))
+	gap: space($gap)
+
+// Dead-center anything (grid is the one-liner that works for a single child).
+=center
+	display: grid
+	place-items: center
+
+// --- Spacing ---------------------------------------------------------------
+=gap($v: s)
+	gap: space($v)
+
+=pad($v: s)
+	padding: space($v)
+
+=px($v: s)
+	padding-inline: space($v)
+
+=py($v: s)
+	padding-block: space($v)
+
+=mx-auto
+	margin-inline: auto
+
+=my-auto
+	margin-block: auto
+
+// --- Size ------------------------------------------------------------------
+=w($v: 100%)
+	width: $v
+
+=h($v: 100%)
+	height: $v
+
+=full
+	width: 100%
+	height: 100%
+
+=square($v)
+	width: $v
+	height: $v
+
+=grow($n: 1)
+	flex-grow: $n
+
+=shrink($n: 0)
+	flex-shrink: $n
+
+=min0
+	min-width: 0
+	min-height: 0
+
+// --- Surface & skin --------------------------------------------------------
+=bg($role: surface)
+	background-color: surface($role)
+
+=ink($role: primary)
+	color: ink($role)
+
+=border($side: all, $color: var(--border))
+	@if $side == all
+		border: 1px solid $color
+	@else
+		border-#{$side}: 1px solid $color
+
+=radius($v: 12)
+	border-radius: radius($v)
+
+=shadow($v: md)
+	box-shadow: shadow($v)
+
+// --- Position --------------------------------------------------------------
+=relative
+	position: relative
+
+=absolute($inset: null)
+	position: absolute
+	@if $inset
+		inset: $inset
+
+=sticky($top: 0)
+	position: sticky
+	top: $top
+
+=fill
+	position: absolute
+	inset: 0
+
+// --- Type ------------------------------------------------------------------
+=type($v)
+	font-size: text-size($v)
+
+=weight($w: 500)
+	font-weight: $w
+
+=leading($lh: 1.5)
+	line-height: $lh
+
+=truncate
+	overflow: hidden
+	white-space: nowrap
+	text-overflow: ellipsis
+
+=clamp-lines($n: 2)
+	display: -webkit-box
+	-webkit-line-clamp: $n
+	-webkit-box-orient: vertical
+	overflow: hidden
+
+// --- Motion ----------------------------------------------------------------
+=transition($props: all, $dur: 150ms, $ease: ease)
+	transition: $props $dur $ease
+
+=ring($color: var(--ring))
+	outline: 2px solid $color
+	outline-offset: 1px

package/templates/_base.sass

@@ -0,0 +1,43 @@
+// =============================================================================
+// BASE — a minimal, opinionated reset so the tokens actually reach the page.
+// Kept tiny: box model, sane media defaults, and wiring body to the palette.
+// =============================================================================
+
+*, *::before, *::after
+	box-sizing: border-box
+
+html
+	-webkit-text-size-adjust: 100%
+
+body
+	margin: 0
+	min-height: 100vh
+	font-family: var(--font-sans)
+	font-size: var(--text-md)
+	line-height: 1.5
+	color: var(--text-primary)
+	background-color: var(--bg)
+	-webkit-font-smoothing: antialiased
+
+:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote)
+	margin: 0
+
+:where(h1, h2, h3, h4)
+	line-height: 1.15
+	text-wrap: balance
+
+:where(img, picture, video, canvas, svg)
+	display: block
+	max-width: 100%
+
+:where(a)
+	color: inherit
+	text-decoration-color: var(--border-strong)
+
+:where(button, input, select, textarea)
+	font: inherit
+	color: inherit
+
+:where(:focus-visible)
+	outline: 2px solid var(--ring)
+	outline-offset: 2px

package/templates/_blocks.sass

@@ -0,0 +1,88 @@
+// =============================================================================
+// BLOCKS — components as recipes of fractals. Note how little CSS is here:
+// each block is a handful of fractal calls plus its own genuinely-unique lines.
+// State is expressed with data-*/aria-*, never modifier classes.
+// =============================================================================
+
+@use 'fractals' as *
+
+.card
+	+surface(surface, s, 12)
+	+stack(s)
+	&[data-elevated]
+		+shadow(md)
+
+.panel
+	+surface(raised, m, 16)
+	+stack(m)
+
+.badge
+	+row(center, center)
+	display: inline-flex
+	+px(2xs)
+	+type(xs)
+	+weight(500)
+	+radius(full)
+	+bg(raised)
+	+ink(secondary)
+	padding-block: 2px
+
+.avatar
+	+center
+	+square(var(--avatar-size, 40px))
+	+radius(full)
+	+bg(raised)
+	+ink(secondary)
+	overflow: hidden
+
+.input
+	display: block
+	+w(100%)
+	+px(2xs)
+	+type(md)
+	+leading(1.5)
+	+border
+	+radius(6)
+	+bg(bg)
+	+ink(primary)
+	padding-block: 8px
+	&:focus-visible
+		+ring
+
+.button
+	+row(center, center)
+	+gap(2xs)
+	+px(s)
+	+radius(6)
+	+weight(500)
+	+transition(background-color)
+	cursor: pointer
+	padding-block: 8px
+	user-select: none
+	// Exceptions: variants live on data-variant, not in the class name.
+	&[data-variant='primary']
+		background: var(--theme)
+		color: var(--text-inverse)
+		&:hover
+			background: var(--theme-hover)
+	&[data-variant='ghost']
+		background: transparent
+		+ink(secondary)
+		&:hover
+			+bg(raised)
+
+.divider
+	border: none
+	+border(top)
+	margin-block: space(s)
+
+.kbd
+	display: inline-block
+	+px(3xs)
+	+type(xs)
+	+leading(1)
+	+radius(4)
+	+bg(raised)
+	border: 1px solid var(--border-strong)
+	font-family: var(--font-mono)
+	padding-block: 2px

package/templates/_config.sass

@@ -0,0 +1,78 @@
+// =============================================================================
+// CONFIG — the finite vocabulary every fractal draws from.
+// -----------------------------------------------------------------------------
+// Scales live here as Sass data; resolvers turn a keyword-or-raw value into the
+// right token var() or unit. Fractals never hardcode a px or a token name —
+// they route through space(), radius(), etc. so the system speaks one language.
+// =============================================================================
+
+@use 'sass:map'
+@use 'sass:math'
+@use 'sass:meta'
+@use 'sass:list'
+
+// --- Scales (mirror the custom properties in _tokens.sass) --------------------
+$breakpoints: (sm: 640px, md: 768px, lg: 1024px, xl: 1240px)
+
+$space-steps: 3xs 2xs xs s m l xl 2xl 3xl s-l
+$radius-steps: 0 2 4 6 8 12 16 24 full
+$text-steps: xs sm md lg xl 2xl 3xl 4xl
+$shadow-steps: sm md lg
+$surface-roles: bg surface raised
+$ink-roles: primary secondary muted inverse
+
+$align-map: (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly, stretch: stretch, baseline: baseline)
+
+// --- Resolvers ----------------------------------------------------------------
+
+// space(m) → var(--space-m) | space(18) → 18px | space(2rem) → 2rem
+@function space($v)
+	@if $v == null
+		@return null
+	@else if list.index($space-steps, $v)
+		@return var(--space-#{$v})
+	@else if meta.type-of($v) == number and math.is-unitless($v)
+		@return #{$v}px
+	@else
+		@return $v
+
+@function radius($v)
+	@if list.index($radius-steps, $v)
+		@return var(--radius-#{$v})
+	@else if meta.type-of($v) == number and math.is-unitless($v)
+		@return #{$v}px
+	@else
+		@return $v
+
+@function text-size($v)
+	@if list.index($text-steps, $v)
+		@return var(--text-#{$v})
+	@else
+		@return $v
+
+@function shadow($v)
+	@if list.index($shadow-steps, $v)
+		@return var(--shadow-#{$v})
+	@else
+		@return $v
+
+@function surface($role)
+	@if $role == bg
+		@return var(--bg)
+	@else
+		@return var(--bg-#{$role})
+
+@function ink($role)
+	@if $role == primary
+		@return var(--text-primary)
+	@else
+		@return var(--text-#{$role})
+
+@function align($v)
+	$m: map.get($align-map, $v)
+	@if $m
+		@return $m
+	@return $v
+
+@function bp($name)
+	@return map.get($breakpoints, $name)

package/templates/_fractals.sass

@@ -0,0 +1,13 @@
+// =============================================================================
+// FRACTALS — the pure API barrel. Emits NO css on its own.
+// -----------------------------------------------------------------------------
+// In any component partial or Svelte component:
+//   @use '$lib/styles/fractals' as *
+//   (or @use './fractals' as *)
+// then call fractals freely:  +surface(...)  +stack(...)  space(m) ...
+// =============================================================================
+
+@forward 'config'
+@forward 'responsive'
+@forward 'atoms'
+@forward 'molecules'

package/templates/_layouts.sass

@@ -0,0 +1,108 @@
+// =============================================================================
+// LAYOUTS — the largest fractals. Same recipe move, page scale.
+// These are the concrete deliverables you named: a responsive 3-col grid, a
+// hero, a holy-grail, a docs template. Each is a short composition of fractals.
+// =============================================================================
+
+@use 'fractals' as *
+
+// 1. Responsive grid of 3 columns — 1 → 2 → 3 across breakpoints.
+.grid-3
+	+cols((base: 1, sm: 2, lg: 3), m)
+
+// A grid that never needs breakpoints: it fits as many columns as will hold
+// the min track. Reach for this before .grid-3 when column count is negotiable.
+.card-grid
+	+auto-grid(16rem, m)
+
+// 2. Hero — full-viewport cover with a centered, measured message.
+.hero
+	+cover(80vh, xl)
+	> .center
+		+stack(m, center)
+		text-align: center
+		max-width: 45ch
+
+// 3. Holy grail — header / (nav · main · aside) / footer.
+.holy-grail
+	display: grid
+	min-height: 100vh
+	grid-template-rows: auto 1fr auto
+	grid-template-areas: 'header' 'main' 'footer'
+	> .hg-header
+		grid-area: header
+	> .hg-footer
+		grid-area: footer
+	> .hg-body
+		grid-area: main
+		display: grid
+		grid-template-columns: 1fr
+		+gap(m)
+		+pad(m)
+	+at(lg)
+		> .hg-body
+			grid-template-columns: var(--nav-w, 220px) minmax(0, 1fr) var(--aside-w, 260px)
+			> .hg-nav
+				+sticky(var(--space-m))
+				align-self: start
+			> .hg-aside
+				+sticky(var(--space-m))
+				align-self: start
+
+// 4. Docs template — sidebar nav + reading column + on-page TOC.
+.docs
+	display: grid
+	min-height: 100vh
+	grid-template-columns: 1fr
+	> .docs-nav
+		display: none
+	> .docs-toc
+		display: none
+	> .docs-main
+		+min0
+		+stack(m)
+		+center-column(72ch, s-l)
+		+py(l)
+	+at(md)
+		grid-template-columns: var(--docs-nav-w, 240px) minmax(0, 1fr)
+		> .docs-nav
+			+box
+			+sticky(0)
+			+py(l)
+			+px(s)
+			height: 100vh
+			overflow-y: auto
+			+border(right)
+	+at(xl)
+		grid-template-columns: var(--docs-nav-w, 240px) minmax(0, 1fr) var(--docs-toc-w, 220px)
+		> .docs-toc
+			+box
+			+sticky(0)
+			+py(l)
+			+px(s)
+			height: 100vh
+			overflow-y: auto
+			+ink(secondary)
+
+// 5. App shell — sticky header, fluid body, footer. The frame most apps live in.
+.app-shell
+	+box
+	+relative
+	isolation: isolate
+	min-height: 100vh
+	> .app-header
+		+row(null, center)
+		+sticky(0)
+		+px(m)
+		z-index: var(--z-sticky)
+		height: var(--header-height)
+		+bg(surface)
+		+border(bottom)
+	> .app-main
+		+grow
+		+min0
+	> .app-footer
+		+row(null, center)
+		+px(m)
+		min-height: var(--footer-height)
+		+border(top)