@mastors/core 1.1.0 → 2.0.0

package/scripts/generate-tokens.js

@@ -1,259 +0,0 @@
-#!/usr/bin/env node
-// scripts/generate-tokens.js
-// ─────────────────────────────────────────────────────────────
-// Reads SCSS token map files and regenerates src/tokens.ts so
-// the TypeScript token mirror never drifts from the SCSS source.
-//
-// Run:  node scripts/generate-tokens.js
-// Auto: called by `node build.js` before tsc (see build.js)
-// ─────────────────────────────────────────────────────────────
-
-'use strict'
-
-const fs   = require('fs')
-const path = require('path')
-
-const TOKENS_DIR = path.join(__dirname, '..', 'scss', 'tokens')
-const OUT_FILE   = path.join(__dirname, '..', 'src', 'tokens.ts')
-
-// ── Helpers ──────────────────────────────────────────────────
-
-/** Extract all $map-name: ( ... ) blocks from a SCSS string */
-function extractMaps(scss) {
-  const maps = {}
-  const mapRe = /\$([a-z][a-z0-9-]*)\s*:\s*\(/g
-  let match
-  while ((match = mapRe.exec(scss)) !== null) {
-    const varName = match[1]
-    let depth = 1
-    let i = match.index + match[0].length
-    let inner = ''
-    while (i < scss.length && depth > 0) {
-      if (scss[i] === '(') depth++
-      else if (scss[i] === ')') depth--
-      if (depth > 0) inner += scss[i]
-      i++
-    }
-    maps[varName] = parseMap(inner)
-  }
-  return maps
-}
-
-/** Parse a flat SCSS map body into a JS object (string keys → string values) */
-function parseMap(body) {
-  const result = {}
-  const lines = body.split('\n')
-  for (const raw of lines) {
-    const line = raw.trim().replace(/,$/, '').replace(/\/\/.*$/, '').trim()
-    if (!line || line.startsWith('(') || line.endsWith('(')) continue
-    const colonIdx = line.indexOf(':')
-    if (colonIdx === -1) continue
-    const rawKey = line.slice(0, colonIdx).trim().replace(/^["']|["']$/g, '')
-    const rawVal = line.slice(colonIdx + 1).trim()
-    if (!rawKey || !rawVal) continue
-    // Unescape SCSS key escapes: "0\\.5" → "0.5", "1\\/2" → "1/2"
-    const key = rawKey.replace(/\\\\?\./g, '.').replace(/\\\\?\//g, '/')
-    result[key] = rawVal
-  }
-  return result
-}
-
-/** Parse nested color map ($color-tokens with sub-palettes) */
-function extractNestedColorMap(scss) {
-  const palettes = {}
-  const paletteRe = /"([a-z]+)"\s*:\s*\(([\s\S]*?)\),/g
-  let m
-  while ((m = paletteRe.exec(scss)) !== null) {
-    const name = m[1]
-    const inner = m[2]
-    if (inner.includes(':')) {
-      palettes[name] = parseMap(inner)
-    } else {
-      palettes[name] = inner.trim()
-    }
-  }
-  // flat top-level entries (white, black, transparent)
-  const flatRe = /"(white|black|transparent)"\s*:\s*([^,\n]+)/g
-  while ((m = flatRe.exec(scss)) !== null) {
-    palettes[m[1]] = m[2].trim().replace(/,$/, '')
-  }
-  return palettes
-}
-
-// ── Read token files ──────────────────────────────────────────
-
-function readScss(filename) {
-  return fs.readFileSync(path.join(TOKENS_DIR, filename), 'utf8')
-}
-
-const colorScss       = readScss('_color.scss')
-const spacingScss     = readScss('_spacing.scss')
-const typographyScss  = readScss('_typography.scss')
-const shadowsScss     = readScss('_shadows.scss')
-const radiiScss       = readScss('_radii.scss')
-const transitionsScss = readScss('_transitions.scss')
-const zIndexScss      = readScss('_z-index.scss')
-const opacityScss     = readScss('_opacity.scss')
-const sizingScss      = readScss('_sizing.scss')
-
-const colorMap       = extractNestedColorMap(colorScss)
-const spacingMap     = extractMaps(spacingScss)['spacing-tokens']           || {}
-const fontSizeMap    = extractMaps(typographyScss)['font-size-tokens']       || {}
-const fontFamilyMap  = extractMaps(typographyScss)['font-family-tokens']     || {}
-const fontWeightMap  = extractMaps(typographyScss)['font-weight-tokens']     || {}
-const lineHeightMap  = extractMaps(typographyScss)['line-height-tokens']     || {}
-const trackingMap    = extractMaps(typographyScss)['letter-spacing-tokens']  || {}
-const shadowMap      = extractMaps(shadowsScss)['shadow-tokens']             || {}
-const radiusMap      = extractMaps(radiiScss)['radius-tokens']               || {}
-const durationMap    = extractMaps(transitionsScss)['duration-tokens']       || {}
-const easingMap      = extractMaps(transitionsScss)['easing-tokens']         || {}
-const zIndexMap      = extractMaps(zIndexScss)['z-index-tokens']             || {}
-const opacityMap     = extractMaps(opacityScss)['opacity-tokens']            || {}
-const sizingMap      = extractMaps(sizingScss)['sizing-tokens']              || {}
-
-// ── Serialise to TypeScript ───────────────────────────────────
-
-function toTsObj(map, indent = 2) {
-  const pad = ' '.repeat(indent)
-  const entries = Object.entries(map).map(([k, v]) => {
-    const key = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(k) ? k : `'${k}'`
-    const val = typeof v === 'object'
-      ? `{\n${toTsObj(v, indent + 2)}\n${pad}}`
-      : `'${String(v)}'`
-    return `${pad}${key}: ${val},`
-  })
-  return entries.join('\n')
-}
-
-// ── Generate file ─────────────────────────────────────────────
-
-const now = new Date().toISOString().slice(0, 10)
-
-const out = `\
-/**
- * @mastors/core — src/tokens.ts
- * AUTO-GENERATED by scripts/generate-tokens.js on ${now}.
- * DO NOT EDIT MANUALLY — run \`node scripts/generate-tokens.js\` to regenerate.
- *
- * Source of truth: packages/core/scss/tokens/
- */
-
-// ─── Color ───────────────────────────────────────────────────────────────────
-
-const colorTokens = {
-${toTsObj(colorMap)}
-} as const
-
-// ─── Spacing ─────────────────────────────────────────────────────────────────
-
-const spacingTokens = {
-${toTsObj(spacingMap)}
-} as const
-
-// ─── Typography ──────────────────────────────────────────────────────────────
-
-const fontSizeTokens = {
-${toTsObj(fontSizeMap)}
-} as const
-
-const fontFamilyTokens = {
-${toTsObj(fontFamilyMap)}
-} as const
-
-const fontWeightTokens = {
-${toTsObj(fontWeightMap)}
-} as const
-
-const lineHeightTokens = {
-${toTsObj(lineHeightMap)}
-} as const
-
-const letterSpacingTokens = {
-${toTsObj(trackingMap)}
-} as const
-
-// ─── Border radius ───────────────────────────────────────────────────────────
-
-const radiusTokens = {
-${toTsObj(radiusMap)}
-} as const
-
-// ─── Shadows ─────────────────────────────────────────────────────────────────
-
-const shadowTokens = {
-${toTsObj(shadowMap)}
-} as const
-
-// ─── Duration & easing ───────────────────────────────────────────────────────
-
-const durationTokens = {
-${toTsObj(durationMap)}
-} as const
-
-const easingTokens = {
-${toTsObj(easingMap)}
-} as const
-
-// ─── Z-index ─────────────────────────────────────────────────────────────────
-
-const zIndexTokens = {
-${toTsObj(zIndexMap)}
-} as const
-
-// ─── Opacity ─────────────────────────────────────────────────────────────────
-
-const opacityTokens = {
-${toTsObj(opacityMap)}
-} as const
-
-// ─── Sizing ──────────────────────────────────────────────────────────────────
-
-const sizingTokens = {
-${toTsObj(sizingMap)}
-} as const
-
-// ─── Exported tokens object ───────────────────────────────────────────────────
-
-export const tokens = {
-  color:         colorTokens,
-  spacing:       spacingTokens,
-  fontSize:      fontSizeTokens,
-  fontFamily:    fontFamilyTokens,
-  fontWeight:    fontWeightTokens,
-  lineHeight:    lineHeightTokens,
-  letterSpacing: letterSpacingTokens,
-  radius:        radiusTokens,
-  shadow:        shadowTokens,
-  duration:      durationTokens,
-  easing:        easingTokens,
-  zIndex:        zIndexTokens,
-  opacity:       opacityTokens,
-  sizing:        sizingTokens,
-} as const
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export type Tokens            = typeof tokens
-export type ColorPalette      = keyof typeof colorTokens
-export type SpacingKey        = keyof typeof spacingTokens
-export type FontSizeKey       = keyof typeof fontSizeTokens
-export type FontFamilyKey     = keyof typeof fontFamilyTokens
-export type FontWeightKey     = keyof typeof fontWeightTokens
-export type LineHeightKey     = keyof typeof lineHeightTokens
-export type LetterSpacingKey  = keyof typeof letterSpacingTokens
-export type RadiusKey         = keyof typeof radiusTokens
-export type ShadowKey         = keyof typeof shadowTokens
-export type DurationKey       = keyof typeof durationTokens
-export type EasingKey         = keyof typeof easingTokens
-export type ZIndexKey         = keyof typeof zIndexTokens
-export type OpacityKey        = keyof typeof opacityTokens
-export type SizingKey         = keyof typeof sizingTokens
-
-export type ColorShade<P extends ColorPalette> =
-  typeof colorTokens[P] extends Record<string, string>
-    ? keyof typeof colorTokens[P]
-    : never
-`
-
-fs.writeFileSync(OUT_FILE, out, 'utf8')
-console.log('[generate-tokens] Written → ' + path.relative(process.cwd(), OUT_FILE))

package/scss/accessibility/_print.scss

@@ -1,52 +0,0 @@
-// accessibility/_print.scss
-// Print-specific utilities and media query helpers.
-// ─────────────────────────────────────────────────────────────
-
-// Hide from print
-.print\:hidden {
-  @media print { display: none !important; }
-}
-
-// Show only in print
-.screen\:hidden {
-  @media not print { display: none !important; }
-}
-
-@media print {
-  // Avoid page breaks inside these elements by default
-  .print\:break-inside-avoid {
-    break-inside: avoid;
-    page-break-inside: avoid;
-  }
-
-  // Force page break before
-  .print\:break-before {
-    break-before: page;
-    page-break-before: always;
-  }
-
-  // Force page break after
-  .print\:break-after {
-    break-after: page;
-    page-break-after: always;
-  }
-
-  // Print-safe color override (ensure text is black on white)
-  .print\:text-black  { color: #000 !important; }
-  .print\:bg-white    { background: #fff !important; }
-  .print\:border-none { border: none !important; }
-  .print\:shadow-none { box-shadow: none !important; }
-
-  // Expand truncated links for print readers
-  a[href]::after {
-    content: " (" attr(href) ")";
-    font-size: 0.75em;
-    color: #555;
-  }
-
-  // Don't expand hash or JS links
-  a[href^="#"]::after,
-  a[href^="javascript:"]::after {
-    content: "";
-  }
-}

package/scss/config/_index.scss

@@ -1,12 +0,0 @@
-// config/_index.scss
-// Public config surface — forward both partials so downstream
-// consumers can reach flags and settings via the public API.
-// ─────────────────────────────────────────────────────────────
-// Usage (downstream):
-//   @use "@mastors/core/api" as m;
-//   $dark: m.$enable-themes;          // from flags
-//   $pfx:  m.config("prefix");        // from settings
-// ─────────────────────────────────────────────────────────────
-
-@forward "settings";
-@forward "flags";

package/scss/functions/_vars.scss

@@ -1,49 +0,0 @@
-// functions/_vars.scss
-// vars() — reference any design token as a CSS custom property by name.
-// ─────────────────────────────────────────────────────────────
-// All Mastors tokens are emitted as --mastors-{name} custom properties
-// by the token layer. This function wraps that convention so downstream
-// consumers never have to hard-code the --mastors- prefix themselves,
-// and so token references remain refactor-safe if the prefix ever changes.
-// Usage:
-//   color:            vars(accent);            → var(--mastors-accent)
-//   background-color: vars(surface-raised);    → var(--mastors-surface-raised)
-//   box-shadow:       vars(shadow-lg);         → var(--mastors-shadow-lg)
-// With a CSS fallback (passed through verbatim):
-//   color: vars(accent, #3b82f6);             → var(--mastors-accent, #3b82f6)
-//   gap:   vars(spacing-4, 1rem);             → var(--mastors-spacing-4, 1rem)
-// Composing with other functions is fine — Sass evaluates eagerly:
-//   transition: opacity vars(duration-200) vars(ease-out);
-// ─────────────────────────────────────────────────────────────
-
-@use "sass:meta";
-@use "sass:string";
-@use "../variables/global" as g;
-
-// Internal: the custom-property namespace prefix.
-// Mirrors the --mastors- prefix used by the token emitter.
-// Kept as a private variable so it only needs to change here.
-$-namespace: "mastors" !default;
-
-/// Return a CSS var() expression for a design token by name.
-///
-/// @param  {String} $token    - token name, without the --mastors- prefix
-/// @param  {*}      $fallback - optional CSS fallback value (default: null)
-/// @return {String} var(--mastors-{$token}) or var(--mastors-{$token}, {$fallback})
-///
-/// @example scss
-///   .btn { color: vars(accent); }
-///   // → .btn { color: var(--mastors-accent); }
-///
-/// @example scss
-///   .card { box-shadow: vars(shadow-md, 0 2px 8px rgb(0 0 0 / .1)); }
-///   // → .card { box-shadow: var(--mastors-shadow-md, 0 2px 8px rgb(0 0 0 / .1)); }
-@function vars($token, $fallback: null) {
-  $prop: "--#{$-namespace}-#{$token}";
-
-  @if not $fallback {
-    @return var(#{$prop});
-  } @else {
-    @return var(#{$prop}, #{$fallback});
-  }
-}

package/scss/utilities/_animation.scss

@@ -1,125 +0,0 @@
-// utilities/_animation.scss
-// Transition and animation utility classes.
-// ─────────────────────────────────────────────────────────────
-
-@use "../tokens/transitions" as tr;
-@use "../generators/class-generator" as gen;
-
-// ── Transition property ───────────────────────────────────────────────────────
-
-.transition-none     { transition-property: none; }
-.transition-all      { transition-property: all; }
-.transition          { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; }
-.transition-colors   { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
-.transition-opacity  { transition-property: opacity; }
-.transition-shadow   { transition-property: box-shadow; }
-.transition-transform { transition-property: transform; }
-
-// ── Transition duration ───────────────────────────────────────────────────────
-
-@each $key, $val in tr.$duration-tokens {
-  .duration-#{$key} { transition-duration: $val; }
-}
-
-// ── Transition timing function ────────────────────────────────────────────────
-
-@each $key, $val in tr.$easing-tokens {
-  .ease-#{$key} { transition-timing-function: $val; }
-}
-
-// ── Transition delay ──────────────────────────────────────────────────────────
-
-@each $key, $val in tr.$duration-tokens {
-  .delay-#{$key} { transition-delay: $val; }
-}
-
-// ── Animation ────────────────────────────────────────────────────────────────
-
-.animate-none    { animation: none; }
-.animate-spin    { animation: mastors-spin    1s linear infinite; }
-.animate-ping    { animation: mastors-ping    1s cubic-bezier(0, 0, 0.2, 1) infinite; }
-.animate-pulse   { animation: mastors-pulse   2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
-.animate-bounce  { animation: mastors-bounce  1s infinite; }
-.animate-fade-in { animation: mastors-fade-in 0.3s ease-out both; }
-.animate-fade-out{ animation: mastors-fade-out 0.3s ease-in both; }
-.animate-slide-up   { animation: mastors-slide-up   0.3s ease-out both; }
-.animate-slide-down { animation: mastors-slide-down 0.3s ease-out both; }
-.animate-scale-in   { animation: mastors-scale-in   0.2s ease-out both; }
-
-// ── Keyframe definitions ─────────────────────────────────────────────────────
-
-@keyframes mastors-spin {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-}
-
-@keyframes mastors-ping {
-  75%, 100% { transform: scale(2); opacity: 0%; }
-}
-
-@keyframes mastors-pulse {
-  0%, 100% { opacity: 100%; }
-  50%       { opacity: 50%; }
-}
-
-@keyframes mastors-bounce {
-  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
-  50%       { transform: translateY(0);   animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
-}
-
-@keyframes mastors-fade-in {
-  from { opacity: 0%; }
-  to   { opacity: 100%; }
-}
-
-@keyframes mastors-fade-out {
-  from { opacity: 100%; }
-  to   { opacity: 0%; }
-}
-
-@keyframes mastors-slide-up {
-  from { opacity: 0%; transform: translateY(0.5rem); }
-  to   { opacity: 100%; transform: translateY(0); }
-}
-
-@keyframes mastors-slide-down {
-  from { opacity: 0%; transform: translateY(-0.5rem); }
-  to   { opacity: 100%; transform: translateY(0); }
-}
-
-@keyframes mastors-scale-in {
-  from { opacity: 0%; transform: scale(0.95); }
-  to   { opacity: 100%; transform: scale(1); }
-}
-
-// ── Animation control utilities ───────────────────────────────────────────────
-
-@include gen.generate-utilities((
-  "animation-fill-mode": (
-    property: animation-fill-mode,
-    prefix: "fill",
-    values: (
-      "none":      none,
-      "forwards":  forwards,
-      "backwards": backwards,
-      "both":      both,
-    ),
-  ),
-  "animation-play-state": (
-    property: animation-play-state,
-    prefix: "animation",
-    values: (
-      "running": running,
-      "paused":  paused,
-    ),
-  ),
-  "animation-iteration": (
-    property: animation-iteration-count,
-    prefix: "animate-repeat",
-    values: (
-      "0":        0,
-      "1":        1,
-      "infinite": infinite,
-    ),
-  ),
-));

package/scss/utilities/_interaction.scss

@@ -1,156 +0,0 @@
-// utilities/_interaction.scss
-// Interaction and user-experience utilities:
-// user-select, resize, scroll-behavior, scroll-snap, touch-action,
-// and state-variant prefixes (hover:, focus:, active:, disabled:).
-// ─────────────────────────────────────────────────────────────
-
-@use "../generators/class-generator" as gen;
-
-// ── User select ───────────────────────────────────────────────────────────────
-
-@include gen.generate-utilities((
-  "select": (
-    property: user-select,
-    prefix: "select",
-    values: (
-      "none":  none,
-      "text":  text,
-      "all":   all,
-      "auto":  auto,
-    ),
-  ),
-));
-
-// ── Resize ────────────────────────────────────────────────────────────────────
-
-@include gen.generate-utilities((
-  "resize": (
-    property: resize,
-    prefix: "resize",
-    values: (
-      "none":  none,
-      "x":     horizontal,
-      "y":     vertical,
-      "":      both,        // .resize
-    ),
-  ),
-));
-
-// ── Scroll behavior ───────────────────────────────────────────────────────────
-
-.scroll-auto   { scroll-behavior: auto; }
-.scroll-smooth { scroll-behavior: smooth; }
-
-// ── Scroll snap ───────────────────────────────────────────────────────────────
-
-// Container
-@include gen.generate-utilities((
-  "snap-type": (
-    property: scroll-snap-type,
-    prefix: "snap",
-    values: (
-      "none":       none,
-      "x":          x var(--mastors-snap-strictness, mandatory),
-      "y":          y var(--mastors-snap-strictness, mandatory),
-      "both":       both var(--mastors-snap-strictness, mandatory),
-      "mandatory":  x mandatory,
-      "proximity":  x proximity,
-    ),
-  ),
-));
-
-// Item
-@include gen.generate-utilities((
-  "snap-align": (
-    property: scroll-snap-align,
-    prefix: "snap",
-    values: (
-      "start":  start,
-      "end":    end,
-      "center": center,
-      "align-none": none,
-    ),
-  ),
-));
-
-.snap-stop-always  { scroll-snap-stop: always; }
-.snap-stop-normal  { scroll-snap-stop: normal; }
-
-// ── Scroll margin/padding ─────────────────────────────────────────────────────
-
-$-scroll-values: ("0": 0px, "4": 1rem, "8": 2rem, "16": 4rem);
-
-@each $key, $val in $-scroll-values {
-  .scroll-m-#{$key}  { scroll-margin: $val; }
-  .scroll-mt-#{$key} { scroll-margin-top: $val; }
-  .scroll-mb-#{$key} { scroll-margin-bottom: $val; }
-  .scroll-p-#{$key}  { scroll-padding: $val; }
-  .scroll-pt-#{$key} { scroll-padding-top: $val; }
-  .scroll-pb-#{$key} { scroll-padding-bottom: $val; }
-}
-
-// ── Touch action ──────────────────────────────────────────────────────────────
-
-@include gen.generate-utilities((
-  "touch": (
-    property: touch-action,
-    prefix: "touch",
-    values: (
-      "auto":         auto,
-      "none":         none,
-      "pan-x":        pan-x,
-      "pan-y":        pan-y,
-      "pan-left":     pan-left,
-      "pan-right":    pan-right,
-      "pan-up":       pan-up,
-      "pan-down":     pan-down,
-      "pinch-zoom":   pinch-zoom,
-      "manipulation": manipulation,
-    ),
-  ),
-));
-
-// ── State-variant pseudo-class utilities ─────────────────────────────────────
-// Hover, focus, active, disabled, and group-hover variants.
-// Pattern: .hover\:{utility}:hover { ... }
-// These are the most commonly used interactive overrides. For full
-// state-variant coverage, use a PostCSS/Vite plugin or the responsive engine.
-
-// Hover: opacity
-@each $key, $val in ("0": 0, "50": 0.5, "75": 0.75, "100": 1) {
-  .hover\:opacity-#{$key}:hover { opacity: $val; }
-}
-
-// Hover: background accent
-.hover\:bg-accent:hover         { background-color: var(--mastors-accent-hover); }
-.hover\:text-accent:hover       { color: var(--mastors-accent-hover); }
-.hover\:underline:hover         { text-decoration-line: underline; }
-.hover\:no-underline:hover      { text-decoration-line: none; }
-.hover\:shadow-lg:hover         { box-shadow: var(--mastors-shadow-lg); }
-.hover\:scale-105:hover         { transform: scale(1.05); }
-.hover\:scale-110:hover         { transform: scale(1.1); }
-.hover\:-translate-y-1:hover    { transform: translateY(-0.25rem); }
-
-// Focus-visible: ring utilities
-.focus\:ring:focus-visible {
-  outline: 2px solid var(--mastors-accent);
-  outline-offset: 2px;
-}
-
-.focus\:ring-2:focus-visible {
-  outline: 2px solid var(--mastors-accent);
-  outline-offset: 2px;
-}
-
-.focus\:ring-offset-2:focus-visible {
-  outline-offset: 4px;
-}
-
-.focus\:ring-none:focus-visible {
-  outline: none;
-}
-
-// Disabled: dim + block interaction
-.disabled\:opacity-50:disabled { opacity: 50%; }
-.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
-.disabled\:pointer-events-none:disabled { pointer-events: none; }