npm - fractalstyler2 - Versions diffs - 0.4.0 → 0.7.0 - Mend

fractalstyler2 0.4.0 → 0.7.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 (87) hide show

package/README.md +114 -95
package/dist/cli.js +105 -25
package/dist/components/Accordion.svelte +44 -0
package/dist/components/Accordion.svelte.d.ts +23 -0
package/dist/components/AccordionItem.svelte +44 -0
package/dist/components/AccordionItem.svelte.d.ts +21 -0
package/dist/components/AppShell.svelte +86 -0
package/dist/components/AppShell.svelte.d.ts +39 -0
package/dist/components/ColorPicker.svelte +38 -0
package/dist/components/ColorPicker.svelte.d.ts +6 -0
package/dist/components/Hero.svelte +14 -0
package/dist/components/Hero.svelte.d.ts +9 -0
package/dist/components/LayoutPicker.svelte +34 -0
package/dist/components/LayoutPicker.svelte.d.ts +6 -0
package/dist/components/MotionPicker.svelte +34 -0
package/dist/components/MotionPicker.svelte.d.ts +6 -0
package/dist/components/PageShell.svelte +14 -0
package/dist/components/PageShell.svelte.d.ts +9 -0
package/dist/components/PageSplit.svelte +26 -0
package/dist/components/PageSplit.svelte.d.ts +18 -0
package/dist/components/ShapePicker.svelte +37 -0
package/dist/components/ShapePicker.svelte.d.ts +6 -0
package/dist/css/fractalstyler.css +10643 -0
package/dist/css/fractalstyler.min.css +2 -0
package/dist/index.d.ts +18 -6
package/dist/index.js +30 -12
package/dist/mcp/schemas/compile_fractals.json +3 -3
package/dist/mcp/schemas/css_to_fractals.json +1 -1
package/dist/mcp/schemas/generate_component.json +2 -2
package/dist/mcp/schemas/instructions.md +41 -14
package/dist/mcp/schemas/list_fractals.json +9 -7
package/dist/mcp/schemas/validate_recipe.json +2 -2
package/dist/mcp/server.d.ts +1 -1
package/dist/mcp/server.js +334 -237
package/dist/presets.core.d.ts +42 -0
package/dist/presets.core.js +190 -0
package/dist/presets.svelte.d.ts +6 -0
package/dist/presets.svelte.js +21 -0
package/dist/styles/_00_presets.sass +111 -0
package/dist/styles/_00_themes.sass +1061 -0
package/dist/styles/_00_tokens.sass +57 -17
package/dist/styles/_01_config.sass +77 -70
package/dist/styles/_02_dimensions.sass +174 -0
package/dist/styles/_03_containers.sass +105 -0
package/dist/styles/_04_layouts.sass +100 -0
package/dist/styles/_05_shells.sass +374 -0
package/dist/styles/_06_visuals.sass +236 -0
package/dist/styles/_07_interactions.sass +112 -0
package/dist/styles/_08_own.sass +4 -0
package/dist/styles/canonical-markups.md +160 -0
package/dist/styles/index.sass +11 -18
package/dist/themes.d.ts +7 -0
package/dist/themes.js +45 -0
package/dist/version.d.ts +1 -0
package/dist/version.js +2 -0
package/package.json +26 -15
package/plugin.json +11 -10
package/registry.json +2002 -0
package/skills/fractal-styler/SKILL.md +137 -50
package/skills/fractal-styler/references/fractals.md +416 -28
package/skills/fractal-styler/references/tokens.md +110 -36
package/dist/styles/_02_fonts.sass +0 -13
package/dist/styles/_03_responsive.sass +0 -31
package/dist/styles/_04_atoms.sass +0 -155
package/dist/styles/_05_molecules.sass +0 -97
package/dist/styles/_06_recipes.sass +0 -189
package/dist/styles/_07_base.sass +0 -44
package/dist/styles/_08_blocks.sass +0 -433
package/dist/styles/_09_utilities.sass +0 -208
package/dist/styles/_10_layouts.sass +0 -373
package/dist/styles/_11_own.sass +0 -21
package/dist/styles/_fractals.sass +0 -14
package/skills/style-migration/SKILL.md +0 -45
package/templates/_00_tokens.sass +0 -136
package/templates/_01_config.sass +0 -66
package/templates/_02_fonts.sass +0 -13
package/templates/_03_responsive.sass +0 -31
package/templates/_04_atoms.sass +0 -155
package/templates/_05_molecules.sass +0 -97
package/templates/_06_recipes.sass +0 -189
package/templates/_07_base.sass +0 -44
package/templates/_08_blocks.sass +0 -433
package/templates/_09_utilities.sass +0 -207
package/templates/_10_layouts.sass +0 -373
package/templates/_11_own.sass +0 -21
package/templates/_fractals.sass +0 -14
package/templates/index.sass +0 -18

package/dist/presets.core.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+export { themes, themeIds, type ThemeMeta } from './themes.js';
+export declare const presetAxes: {
+    readonly layout: readonly ["tight", "comfortable", "sprawling"];
+    readonly shape: readonly ["round", "curved", "pro", "sharp"];
+    readonly color: readonly ["clean", "general", "vibrant"];
+    readonly motion: readonly ["reduced", "heavy", "active", "springy"];
+};
+export declare const presetDefaults: {
+    readonly layout: "comfortable";
+    readonly shape: "curved";
+    readonly color: "general";
+    readonly motion: "active";
+};
+export type PresetAxis = keyof typeof presetAxes;
+export declare const STORAGE_KEY = "fs2.presets";
+export declare const THEME_KEY = "fs2.theme";
+/** Current value of every axis. Read it; mutate through setPreset. */
+export declare const presetState: Record<PresetAxis, string>;
+type Listener = (axis: PresetAxis, value: string) => void;
+/** Subscribe to preset changes — for hand-rolled pickers. Returns an unsubscribe. */
+export declare function onPresetChange(fn: Listener): () => void;
+export declare function isDefault(axis: PresetAxis, value: string): boolean;
+/** Read the saved blob and apply it. Call once, on load. */
+export declare function initPresets(): void;
+/** Set one axis. Ignores values outside the axis. */
+export declare function setPreset(axis: PresetAxis, value: string): void;
+export declare function getPreset(axis: PresetAxis): string;
+/** Cycle an axis to its next value — what a single toggle button wants. */
+export declare function cyclePreset(axis: PresetAxis): string;
+/** Inline head script — stamps saved presets before first paint (no flicker).
+ *  Axes and defaults are derived from the constants above — one source, no
+ *  second hardcoded copy to drift. */
+export declare function getPresetScript(): string;
+/** Apply a built-in palette. Pass null to fall back to the mode defaults. */
+export declare function setTheme(id: string | null): void;
+/** The active palette, or null when none is applied. */
+export declare function getTheme(): string | null;
+/** Swap to the light/dark counterpart of the active theme, if it has one. */
+export declare function toggleThemeMode(): string | null;
+/** Set the colour mode marker. Light/dark is a mode, not a preset axis. */
+export declare function setMode(mode: 'light' | 'dark'): void;
+export declare function toggleMode(): 'light' | 'dark';

package/dist/presets.core.js ADDED Viewed

@@ -0,0 +1,190 @@
+// fs2 preset runtime — framework-free.
+//
+// The four preset languages are the styling system's own physics, so fs2 owns
+// their application, persistence and anti-flicker. Nothing here imports Svelte:
+// this is the module a vanilla CSS consumer gets, and it is also the single
+// implementation the Svelte wrapper (presets.svelte.ts) delegates to.
+//
+// Attribute contract: data-layout / data-shape / data-color / data-motion on
+// <html>. An absent attribute means that axis's default. A palette is a class
+// on the same element, paired with data-mode.
+import { themes } from './themes.js';
+export { themes, themeIds } from './themes.js';
+// Axis arrays are the canonical value order — monotonic (shape: roundest →
+// sharpest) — and are what pickers render. Default-ness is declared separately
+// in presetDefaults; it does not dictate array position.
+export const presetAxes = {
+    layout: ['tight', 'comfortable', 'sprawling'],
+    shape: ['round', 'curved', 'pro', 'sharp'],
+    color: ['clean', 'general', 'vibrant'],
+    motion: ['reduced', 'heavy', 'active', 'springy']
+};
+export const presetDefaults = {
+    layout: 'comfortable',
+    shape: 'curved',
+    color: 'general',
+    motion: 'active'
+};
+export const STORAGE_KEY = 'fs2.presets';
+export const THEME_KEY = 'fs2.theme';
+/** Current value of every axis. Read it; mutate through setPreset. */
+export const presetState = { ...presetDefaults };
+const listeners = new Set();
+/** Subscribe to preset changes — for hand-rolled pickers. Returns an unsubscribe. */
+export function onPresetChange(fn) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+}
+export function isDefault(axis, value) {
+    return value === presetDefaults[axis];
+}
+function isValid(axis, value) {
+    return presetAxes[axis].includes(value);
+}
+/** Default values remove the attribute — absent IS the default. */
+function applyAttr(axis, value) {
+    const root = document.documentElement;
+    if (isDefault(axis, value))
+        root.removeAttribute(`data-${axis}`);
+    else
+        root.setAttribute(`data-${axis}`, value);
+}
+function persist() {
+    const nonDefaults = {};
+    for (const axis of Object.keys(presetAxes)) {
+        if (!isDefault(axis, presetState[axis]))
+            nonDefaults[axis] = presetState[axis];
+    }
+    try {
+        if (Object.keys(nonDefaults).length)
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(nonDefaults));
+        else
+            localStorage.removeItem(STORAGE_KEY);
+    }
+    catch {
+        /* storage unavailable — presets stay session-local */
+    }
+}
+/** Read the saved blob and apply it. Call once, on load. */
+export function initPresets() {
+    if (typeof document === 'undefined')
+        return;
+    try {
+        const savedTheme = localStorage.getItem(THEME_KEY);
+        if (savedTheme)
+            setTheme(savedTheme);
+    }
+    catch {
+        /* storage unavailable — defaults stand */
+    }
+    try {
+        const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+        for (const axis of Object.keys(presetAxes)) {
+            const v = saved[axis];
+            if (v && isValid(axis, v)) {
+                presetState[axis] = v;
+                applyAttr(axis, v);
+                for (const fn of listeners)
+                    fn(axis, v);
+            }
+        }
+    }
+    catch {
+        /* corrupt blob — defaults stand */
+    }
+}
+/** Set one axis. Ignores values outside the axis. */
+export function setPreset(axis, value) {
+    if (typeof document === 'undefined')
+        return;
+    if (!isValid(axis, value))
+        return;
+    presetState[axis] = value;
+    applyAttr(axis, value);
+    persist();
+    for (const fn of listeners)
+        fn(axis, value);
+}
+export function getPreset(axis) {
+    return presetState[axis];
+}
+/** Cycle an axis to its next value — what a single toggle button wants. */
+export function cyclePreset(axis) {
+    const values = presetAxes[axis];
+    const next = values[(values.indexOf(presetState[axis]) + 1) % values.length];
+    setPreset(axis, next);
+    return next;
+}
+/** Inline head script — stamps saved presets before first paint (no flicker).
+ *  Axes and defaults are derived from the constants above — one source, no
+ *  second hardcoded copy to drift. */
+export function getPresetScript() {
+    const axes = JSON.stringify(presetAxes).replaceAll('"', "'");
+    const defs = JSON.stringify(presetDefaults).replaceAll('"', "'");
+    return `(function(){try{var v=${axes};var d=${defs};var r=document.documentElement;var s=JSON.parse(localStorage.getItem('${STORAGE_KEY}')||'{}');for(var k in v){var val=s[k];if(val&&val!==d[k])r.setAttribute('data-'+k,val);}var t=localStorage.getItem('${THEME_KEY}');if(t){r.classList.add(t);r.setAttribute('data-mode',t.indexOf('-dark')>-1?'dark':'light');}}catch(e){}})();`;
+}
+// ─── themes ────────────────────────────────────────────────────────────────
+// A theme is one class on <html>, always paired with its data-mode: the colour
+// preset's dark variants key off prefers-color-scheme, so an unpaired theme can
+// end up tuned against the OS preference rather than against itself.
+/** Apply a built-in palette. Pass null to fall back to the mode defaults. */
+export function setTheme(id) {
+    if (typeof document === 'undefined')
+        return;
+    const root = document.documentElement;
+    for (const t of themes)
+        root.classList.remove(t.id);
+    if (!id) {
+        root.removeAttribute('data-mode');
+        try {
+            localStorage.removeItem(THEME_KEY);
+        }
+        catch {
+            /* storage unavailable */
+        }
+        return;
+    }
+    const theme = themes.find((t) => t.id === id);
+    if (!theme)
+        return;
+    root.classList.add(theme.id);
+    root.setAttribute('data-mode', theme.mode);
+    try {
+        localStorage.setItem(THEME_KEY, theme.id);
+    }
+    catch {
+        /* storage unavailable — the theme stays session-local */
+    }
+}
+/** The active palette, or null when none is applied. */
+export function getTheme() {
+    if (typeof document === 'undefined')
+        return null;
+    const root = document.documentElement;
+    return themes.find((t) => root.classList.contains(t.id))?.id ?? null;
+}
+/** Swap to the light/dark counterpart of the active theme, if it has one. */
+export function toggleThemeMode() {
+    const active = getTheme();
+    if (!active) {
+        toggleMode();
+        return null;
+    }
+    const want = themes.find((t) => t.id === active).mode === 'dark' ? 'light' : 'dark';
+    const twin = themes.find((t) => t.mode === want);
+    if (twin)
+        setTheme(twin.id);
+    return twin?.id ?? null;
+}
+/** Set the colour mode marker. Light/dark is a mode, not a preset axis. */
+export function setMode(mode) {
+    if (typeof document === 'undefined')
+        return;
+    document.documentElement.setAttribute('data-mode', mode);
+}
+export function toggleMode() {
+    const current = typeof document !== 'undefined' ? document.documentElement.getAttribute('data-mode') : null;
+    const next = current === 'dark' ? 'light' : 'dark';
+    setMode(next);
+    return next;
+}

package/dist/presets.svelte.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { type PresetAxis } from './presets.core.js';
+export { presetAxes, presetDefaults, getPreset, cyclePreset, getPresetScript, setMode, toggleMode, setTheme, getTheme, toggleThemeMode, themes, themeIds, type ThemeMeta, onPresetChange, type PresetAxis } from './presets.core.js';
+/** Reactive mirror of presetState, for pickers and any $derived reading it. */
+export declare const presets: Record<"color" | "layout" | "shape" | "motion", string>;
+export declare function initPresets(): void;
+export declare function setPreset(axis: PresetAxis, value: string): void;

package/dist/presets.svelte.js ADDED Viewed

@@ -0,0 +1,21 @@
+// Svelte wrapper over the framework-free runtime in presets.core.ts.
+//
+// The logic lives there so the vanilla CSS distribution and the Svelte package
+// share one implementation. All this adds is a reactive mirror of the state so
+// the bundled pickers re-render.
+import { presetAxes, presetDefaults, initPresets as coreInit, setPreset as coreSet, onPresetChange, presetState } from './presets.core.js';
+export { presetAxes, presetDefaults, getPreset, cyclePreset, getPresetScript, setMode, toggleMode, setTheme, getTheme, toggleThemeMode, themes, themeIds, onPresetChange } from './presets.core.js';
+/** Reactive mirror of presetState, for pickers and any $derived reading it. */
+export const presets = $state({ ...presetDefaults });
+// Keep the mirror in step with the core, however the core was driven.
+onPresetChange((axis, value) => {
+    presets[axis] = value;
+});
+export function initPresets() {
+    coreInit();
+    for (const axis of Object.keys(presetAxes))
+        presets[axis] = presetState[axis];
+}
+export function setPreset(axis, value) {
+    coreSet(axis, value);
+}

package/dist/styles/_00_presets.sass ADDED Viewed

@@ -0,0 +1,111 @@
+// ============================================================================
+// presets — the four preset languages, as pure token remaps.
+//
+// Emitted AFTER _00_themes.sass on purpose. data-color remaps the same three
+// surface tokens every theme sets, so if themes came last a chosen theme would
+// silently cancel the colour axis. The intended layering is:
+//
+//   :root defaults  ->  [data-mode]  ->  theme class  ->  preset attributes
+//
+// i.e. a theme beats the mode default, and a preset tunes whatever theme is
+// active. Do not reorder these three in index.sass.
+// ============================================================================
+// Applied by setting one attribute per language on <html>; fs2 owns
+// application, persistence, and anti-flicker (Amendment A2). Absent attributes
+// = the defaults above (comfortable layout, curved radius channels, general
+// color, active motion).
+// =============================================================================
+// --- Layout — data-layout: tight / sprawling (comfortable is the default) ---
+// Density = two factors: gaps/margins × --gap-scale, paddings × --pad-scale.
+// Pads and gaps scale at DIFFERENT rates — uniform scaling is a perceptual
+// no-op; breathing opens when padding outgrows gap (sprawling) and closes
+// when it shrinks faster (tight). Element sizes, heights, and widths never
+// move: control heights stay authored at their comfortable values.
+[data-layout='tight']
+	--gap-scale: 0.85
+	--pad-scale: 0.7
+[data-layout='sprawling']
+	--gap-scale: 1.2
+	--pad-scale: 1.5
+// --- Shape — data-shape: round / curved / pro / sharp ------------------------
+[data-shape='round']
+	--radius-sm: 16px
+	--radius-md: 24px
+	--radius-lg: 32px
+[data-shape='curved']
+	--radius-sm: 8px
+	--radius-md: 16px
+	--radius-lg: 24px
+[data-shape='pro']
+	--radius-sm: 4px
+	--radius-md: 8px
+	--radius-lg: 16px
+[data-shape='sharp']
+	--radius-sm: 0
+	--radius-md: 0
+	--radius-lg: 0
+// --- Color — data-color: clean / vibrant (general is the default) ------------
+// Layer tint on the surface ladder only: clean flattens separation toward the
+// page bg, vibrant deepens it. Light values are the mode default; dark values
+// override under both dark paths. General ships in the theme mixins.
+[data-color='clean']
+	--bg-surface: #fbfbfb
+	--bg-raised: #f5f7f9
+	--bg-panel: #F7F8F9
+[data-color='vibrant']
+	--bg-surface: #f2f5f7
+	--bg-raised: #e8eef3
+	--bg-panel: #E9EEF3
+@media (prefers-color-scheme: dark)
+	:root:not([data-mode='light'])[data-color='clean']
+		--bg-surface: #121626
+		--bg-raised: #171C2C
+		--bg-panel: #10131D
+	:root:not([data-mode='light'])[data-color='vibrant']
+		--bg-surface: #171E33
+		--bg-raised: #26314E
+		--bg-panel: #141B2E
+[data-mode='dark'][data-color='clean']
+	--bg-surface: #121626
+	--bg-raised: #171C2C
+	--bg-panel: #10131D
+[data-mode='dark'][data-color='vibrant']
+	--bg-surface: #171E33
+	--bg-raised: #26314E
+	--bg-panel: #141B2E
+// --- Motion — data-motion: springy / heavy / reduced (active is the default) -
+[data-motion='springy']
+	--motion-fast: 140ms
+	--motion-base: 200ms
+	--motion-slow: 300ms
+	--ease-out: cubic-bezier(0.34, 1.56, 0.64, 1)
+[data-motion='heavy']
+	--motion-fast: 200ms
+	--motion-base: 300ms
+	--motion-slow: 450ms
+[data-motion='reduced']
+	--motion-fast: 0ms
+	--motion-base: 0ms
+	--motion-slow: 0ms
+// prefers-reduced-motion is honored globally regardless of preset (registry v1).
+@media (prefers-reduced-motion: reduce)
+	:root
+		--motion-fast: 0ms
+		--motion-base: 0ms
+		--motion-slow: 0ms