Style is the
expression of intent.

pnpm add @mastors/api @mastors/core @mastors/compiler \
        @mastors/schemas @mastors/tokens @mastors/types @mastors/utils

pnpm add @mastors/api @mastors/core @mastors/schemas @mastors/tokens @mastors/types

# React
pnpm add @mastors/adapter-react

# Vue 3
pnpm add @mastors/adapter-vue

# Svelte
pnpm add @mastors/adapter-svelte

pnpm add -D @mastors/plugin-vite      # Vite
pnpm add -D @mastors/plugin-webpack   # webpack

import { intent, semantics, compose, configure, intentClass } from "@mastors/api";

// ── configure() — initialize once at app entry ──
configure({ schema: mySchema, a11yMode: "warn" });

// ── intent() — parse an intent ID into a descriptor ──
const card = intent("card.elevated.interactive");
// Returns: IntentDescriptor { id, segments, context, __mastors: true }

// ── intentClass() — resolve directly to className string ──
const cls = intentClass("button.primary.cta");
// → "m-padding-left-abc m-background-color-def m-intent-button-primary-cta"

// ── semantics() — add intents to the active schema at runtime ──
semantics({
  "data.badge.negative": {
    color: { foreground: "token.color.error.700" },
  },
});

// ── compose() — merge multiple intents (last wins on conflicts) ──
const heroCard = compose("card.elevated", "card.elevated.interactive");

import { SemanticResolver } from "@mastors/core";
import { defaultSchema } from "@mastors/schemas";

const resolver = new SemanticResolver(defaultSchema);

// Step 1 — Parse intent string into a typed descriptor
const descriptor = resolver.describe("card.elevated.interactive");
// { id: "card.elevated.interactive", segments: { category, variant, modifier }, ... }

// Step 2 — Resolve descriptor into a full style map
const styleMap = resolver.resolve(descriptor);
// {
//   base: StyleRule[]           → CSS property/value pairs with token refs
//   variants: StyleRule[][]     → responsive / state variants
//   a11yHints: A11yHint[]       → WCAG requirements and ARIA suggestions
//   animationRules: AnimationRule[] → transitions with motion guard
// }

// Useful methods
resolver.clearCache();           // clear cached results (call when schema changes)
resolver.setSchema(newSchema);   // swap schema (also clears cache)

defineSchema({
  vocabulary: {
    "dashboard.stat.positive": {
      spacing: { x: "token.space.4", y: "token.space.3" },
      radius: "token.radius.lg",
      color: {
        background: "token.color.success.100",
        foreground: "token.color.success.700",
        border: "token.color.success.500",
      },
      a11y: { contrast: "AA" },
    },
    "dashboard.stat.negative": {
      spacing: { x: "token.space.4", y: "token.space.3" },
      radius: "token.radius.lg",
      color: {
        background: "token.color.error.100",
        foreground: "token.color.error.700",
      },
      a11y: { contrast: "AA" },
    },
  },
});

import { useIntent, Mastors } from "@mastors/adapter-react";

// Hook — resolves to a className string
function Card({ title, body }) {
  const className = useIntent("card.elevated.interactive");
  return <div className={className}>{title}</div>;
}

// Component namespace — declarative intent prop
<Mastors.div intent="card.elevated.interactive">
  <Mastors.h2 intent="heading.section">Title</Mastors.h2>
  <Mastors.p  intent="body.readable">Body text</Mastors.p>
  <Mastors.button intent="button.primary.cta">Get Started</Mastors.button>
</Mastors.div>

// main.ts — register globally
import { MastorsPlugin } from "@mastors/adapter-vue";
app.use(MastorsPlugin);

// Component.vue
<script setup>
import { useIntent } from "@mastors/adapter-vue";
const cardClass = useIntent("card.elevated.interactive");
</script>

<template>
  <!-- Composable -->
  <div :class="cardClass">...</div>

  <!-- Directive (requires MastorsPlugin) -->
  <div v-intent="'button.primary.cta'">...</div>
</template>

import { resolveIntent, intentAction } from "@mastors/adapter-svelte";

// Class binding (resolved at import time)
const cardClass = resolveIntent("card.elevated.interactive");

// Action (reactive, updates on prop change)
<div use:intentAction={"card.elevated.interactive"}>...</div>

// Class shorthand
<div class={resolveIntent("button.primary.cta")}>...</div>

import { mastorsPlugin } from "@mastors/plugin-vite";

export default defineConfig({
  plugins: [
    mastorsPlugin({
      config: {
        schema,
        a11yMode: "warn",       // "warn" | "enforce" | "report" | "off"
        outputFormat: "atomic", // "atomic" | "css-modules" | "css-vars"
      },
      include: ["ts", "tsx", "vue", "svelte"],  // file extensions to scan
      a11yManifest: true,   // emit mastors-a11y.json at build
    }),
  ],
});

const { MastorsWebpackPlugin } = require("@mastors/plugin-webpack");

module.exports = {
  plugins: [
    new MastorsWebpackPlugin({
      config: { schema, a11yMode: "warn" },
      filename: "mastors.css",  // output CSS filename in dist
    }),
  ],
};

type MastorsConfig = {
  schema: MastorsSchema;           // required — your project schema

  a11yMode?:
    | "warn"       // console.warn on violations (default, dev-friendly)
    | "enforce"    // throws on error-severity violations (use in CI)
    | "report"     // silently collect — call guard.generateManifest()
    | "off";       // disable accessibility guard entirely

  outputFormat?:
    | "atomic"     // deduplicated atomic CSS classes (default)
    | "css-modules" // scoped CSS module per intent
    | "css-vars";  // CSS custom property declarations only

  themes?: string[];           // theme names to generate variants for
  defaultTheme?: string;       // active theme at build time
};

type VocabularyEntry = {
  spacing?:    { x?: TokenPath; y?: TokenPath };
  radius?:     TokenPath;
  shadow?:     TokenPath;
  color?: {
    background?: TokenPath;
    foreground?: TokenPath;
    border?:     TokenPath;
  };
  typography?: {
    size?:       TokenPath;
    weight?:     TokenPath;
    lineHeight?: TokenPath;
  };
  interaction?: {
    hover?:  "lift" | "darken" | "lighten" | "highlight";
    focus?:  "ring.primary" | "ring.error" | "ring.success";
    active?: "press" | "bounce";
  };
  motion?: "transition.natural" | "animate.slide-up.spring";
  a11y?: {
    role?:     string;          // ARIA role suggestion
    contrast?: "AA" | "AAA";   // WCAG contrast level to enforce
  };
};

import { TokenRegistry, defaultTokens } from "@mastors/tokens";

const registry = new TokenRegistry(defaultTokens);

registry.resolve("token.space.4");               // → "1rem"
registry.resolveToVar("token.shadow.elevated");  // → { cssVar: "--mastors-shadow-elevated", fallback: "..." }
registry.generateCssVars(":root");               // → ":root { --mastors-space-4: 1rem; ... }"

// Extend with overrides (immutable — returns new registry)
const custom = registry.extend({
  token: { space: { "4": "0.875rem" } }          // override one value
});

import { AccessibilityGuard, contrastRatio, meetsContrastRequirement } from "@mastors/accessibility";

// Utility functions
contrastRatio("#3b82f6", "#ffffff");              // → 3.94
meetsContrastRequirement("#000000", "#ffffff", "AA");  // → true

// Guard instance
const guard = new AccessibilityGuard("enforce", tokenRegistry);
guard.check(intentId, styleMap);                  // throws if error-severity violations exist

// Generate a full compliance manifest
const manifest = guard.generateManifest(totalIntents);
// { totalIntents, passCount, failCount, violations: A11yViolation[] }