chaincss 2.1.38 → 2.2.0

package/src/core/types.ts

@@ -256,4 +256,210 @@ export function isCompileResult(value: any): value is CompileResult {
     typeof value.css === 'string' &&
     typeof value.classMap === 'object' &&
     typeof value.stats === 'object';
+}
+
+// ============================================================================
+// 🆕 Math Engine Types (v3.0)
+// ============================================================================
+
+export type CSSUnit = 
+  | 'px' | 'rem' | 'em' | '%' 
+  | 'vw' | 'vh' | 'vmin' | 'vmax' 
+  | 'ch' | 'ex' | 'cm' | 'mm' | 'in' | 'pt' | 'pc'
+  | 'deg' | 'rad' | 'turn' | 'grad'
+  | 's' | 'ms'
+  | 'dpi' | 'dpcm' | 'dppx';
+
+export interface CSSMathValue {
+  value: number;
+  unit: CSSUnit;
+}
+
+export interface MathContext {
+  rootFontSize?: number;    // px, default 16
+  viewportWidth?: number;   // px, default 1920
+  viewportHeight?: number;  // px, default 1080
+  parentFontSize?: number;  // px, default 16
+  dpi?: number;             // default 96
+  elementWidth?: number;    // px
+  elementHeight?: number;   // px
+}
+
+export interface MathResult {
+  value: number;
+  unit: CSSUnit | 'calc' | 'mixed';
+  expression: string;
+  resolved: CSSMathValue | null;
+  explanations: string[];
+  toString(): string;
+  toCalc(): string;
+}
+
+export interface FluidTypeConfig {
+  minSize: number;
+  maxSize: number;
+  minWidth?: number;   // default 320
+  maxWidth?: number;   // default 1280
+  unit?: 'px' | 'rem';
+  rootFontSize?: number; // for rem conversion
+}
+
+// ============================================================================
+// 🆕 Self-Healing / Intent Engine Types (v3.0)
+// ============================================================================
+
+export interface IntentRule {
+  input: string | RegExp;
+  output: string | ((match: RegExpMatchArray) => string);
+  defaults?: Record<string, string | number>;
+  confidence: number;
+  description: string;
+}
+
+export interface CorrectionResult {
+  original: string;
+  property: string;
+  corrected: string;
+  defaults: Record<string, string | number>;
+  confidence: number;
+  intent: string;
+  explanation: string;
+}
+
+export interface IntentContext {
+  property?: string;
+  value?: string;
+  selector?: string;
+  parentStyles?: Record<string, any>;
+  mediaContext?: string;
+  themeContext?: string;
+}
+
+export type HealMode = 'strict' | 'dev' | 'smart';
+
+export interface HealResult {
+  fixed: Record<string, any>;
+  corrections: CorrectionResult[];
+  warnings: string[];
+  mode: HealMode;
+}
+
+// ============================================================================
+// 🆕 Style Graph Types (v3.0)
+// ============================================================================
+
+export interface StyleGraphNode {
+  id: string;
+  selector: string;
+  properties: Record<string, string | number>;
+  specificity: number;
+  dependencies: string[];
+  dependents: string[];
+  mediaQuery?: string;
+  isDead: boolean;
+  hash: string;
+  sourceComponent?: string;
+}
+
+export interface StyleGraphEdge {
+  from: string;
+  to: string;
+  type: 'extends' | 'overrides' | 'references';
+}
+
+export interface StyleGraph {
+  nodes: Map<string, StyleGraphNode>;
+  edges: StyleGraphEdge[];
+  rootNodes: string[];
+  leafNodes: string[];
+}
+
+export interface GraphCompileOptions {
+  eliminateDead?: boolean;
+  knownSelectors?: string[];
+  mergeIdentical?: boolean;
+  mergeThreshold?: number;     // min properties to consider merging
+  sortOutput?: 'specificity' | 'source-order' | 'topological';
+  verbose?: boolean;
+}
+
+export interface GraphCompileResult extends CompileResult {
+  graph: StyleGraph;
+  eliminatedDead: number;
+  mergedRules: number;
+  optimizationTime: number;
+  preOptimizationSize: number;
+  postOptimizationSize: number;
+}
+
+// ============================================================================
+// 🆕 Analyzer / IDE Types (v3.0)
+// ============================================================================
+
+export type DiagnosticSeverity = 'error' | 'warning' | 'info' | 'hint';
+
+export interface StyleDiagnostic {
+  property: string;
+  value?: string;
+  selector?: string;
+  severity: DiagnosticSeverity;
+  message: string;
+  suggestion?: string;
+  code?: string;
+  source?: string;
+  range?: {
+    startLine: number;
+    startColumn: number;
+    endLine: number;
+    endColumn: number;
+  };
+}
+
+export interface StyleAnalysis {
+  diagnostics: StyleDiagnostic[];
+  conflicts: StyleDiagnostic[];
+  breakpoints: BreakpointConfig[];
+  unusedSelectors: string[];
+  deadStyles: string[];
+  duplicationWarnings: StyleDiagnostic[];
+  optimizationSuggestions: StyleDiagnostic[];
+  stats: {
+    totalProperties: number;
+    totalSelectors: number;
+    shorthandOpportunities: number;
+    animationSuggestions: number;
+    responsiveIssues: number;
+  };
+}
+
+export interface BreakpointInference {
+  selector: string;
+  property: string;
+  currentValue: string;
+  suggestedBreakpoint: string;
+  suggestedValue: string;
+  reason: string;
+}
+
+// ============================================================================
+// 🆕 Type Guards for new types
+// ============================================================================
+
+export function isMathResult(value: any): value is MathResult {
+  return value && typeof value === 'object' && 
+    typeof value.expression === 'string' &&
+    typeof value.toString === 'function';
+}
+
+export function isCorrectionResult(value: any): value is CorrectionResult {
+  return value && typeof value === 'object' &&
+    typeof value.original === 'string' &&
+    typeof value.corrected === 'string' &&
+    typeof value.confidence === 'number';
+}
+
+export function isGraphCompileResult(value: any): value is GraphCompileResult {
+  return isCompileResult(value) && 
+    typeof (value as any).graph === 'object' &&
+    typeof (value as any).eliminatedDead === 'number';
 }

package/src/index.ts

@@ -162,6 +162,40 @@ export type { BreakpointsMap, ResponsiveStyle } from './compiler/breakpoints.js'
 // ============================================================================
 export const VERSION = '3.0.0';
 
+// ============================================================================
+// Default Export - Keep original chain for backward compatibility
+// ============================================================================
+// ============================================================================
+// 🆕 Design System Orchestrator (v2.3)
+// ============================================================================
+export {
+  orchestrator,
+  contrastRatio,
+  checkContrast,
+  auditContrast,
+  createContextualToken,
+  resolveContextual,
+  generateContextualCSS,
+  validateTokenRelationships,
+} from './compiler/design-orchestrator.js';
+export type { ContrastResult, ContrastReport, ContextualToken, TokenContext } from './compiler/design-orchestrator.js';
+
+// ============================================================================
+// Default Export - Keep original chain for backward compatibility
+// ============================================================================
+// ============================================================================
+// 🆕 Scroll Timeline Engine (v2.3)
+// ============================================================================
+export {
+  scrollTimeline,
+  compileScrollAnimation,
+  compileScrollAnimations,
+  createScrollAnimation,
+  getScrollPresets,
+  SCROLL_PRESETS,
+} from './compiler/scroll-timeline.js';
+export type { ScrollTimelineConfig, ScrollAnimation, ScrollTimelineResult, KeyframeStep } from './compiler/scroll-timeline.js';
+
 // ============================================================================
 // Default Export - Keep original chain for backward compatibility
 // ============================================================================
@@ -207,4 +241,72 @@ export type ResponsiveValue<T> = T | {
 
 export type StyleWithTokens<T = any> = T | ((tokens: DesignTokens) => T);
 
-import { DesignTokens } from './compiler/tokens.js';
+import { DesignTokens } from './compiler/tokens.js';
+
+// ============================================================================
+// 🆕 Math Engine (v3.0)
+// ============================================================================
+export { 
+  math,
+  add,
+  subtract,
+  multiply,
+  divide,
+  fluidType,
+  convert,
+  toPx,
+  scale
+} from './compiler/math-engine.js';
+export type { 
+  CSSUnit, 
+  CSSMathValue, 
+  MathContext, 
+  MathResult, 
+  FluidTypeConfig 
+} from './compiler/math-engine.js';
+
+// ============================================================================
+// 🆕 Intent Engine — Self-Healing CSS (v3.0)
+// ============================================================================
+export {
+  intent,
+  correct,
+  heal,
+  validate as validateValue,
+  getIntent
+} from './compiler/intent-engine.js';
+export type {
+  CorrectionResult,
+  HealMode,
+  HealResult,
+  IntentContext
+} from './compiler/intent-engine.js';
+
+// ============================================================================
+// 🆕 Style Graph Compiler (v3.0)
+// ============================================================================
+export {
+  StyleGraphCompiler,
+  compileGraph
+} from './compiler/style-graph.js';
+export type {
+  StyleGraph,
+  StyleGraphNode,
+  StyleGraphEdge,
+  GraphCompileOptions,
+  GraphCompileResult
+} from './compiler/style-graph.js';
+
+// ============================================================================
+// 🆕 Static Analyzer — IDE Intelligence Layer (v3.0)
+// ============================================================================
+export {
+  StyleAnalyzer,
+  analyze as analyzeStyle
+} from './compiler/analyzer.js';
+export type {
+  StyleDiagnostic,
+  StyleAnalysis,
+  BreakpointInference,
+  DiagnosticSeverity
+} from './compiler/analyzer.js';

package/demo/demo/node_modules/caniuse-db/fulldata-json/data-2.0.json

@@ -1 +0,0 @@
-{"data":{}}

package/demo/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ChainCSS Demo | Zero-Runtime CSS-in-JS</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-</html>

package/demo/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "chaincss-demo",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build"
-  },
-  "dependencies": {
-    "autoprefixer": "^10.5.0",
-    "browserslist": "^4.28.2",
-    "caniuse-lite": "^1.0.30001791",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.0.0",
-    "vite": "^5.0.0"
-  }
-}

package/demo/src/App.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import * as S from './styles.chain';
-
-const features = [
-  { icon: '⚡', title: 'Zero Runtime', desc: 'Static styles compile to plain CSS. No JavaScript shipped for styling.' },
-  { icon: '🎯', title: 'Auto Detection', desc: 'smartChain() detects static vs dynamic automatically.' },
-  { icon: '🧩', title: '57 Macros', desc: 'flex(), center(), glass(), pill() — complex CSS as single method calls.' },
-  { icon: '🎨', title: 'Design Tokens', desc: 'Themeable with full token resolution system.' },
-  { icon: '🔄', title: 'Variant System', desc: 'Type-safe component variants with compound conditions.' },
-  { icon: '📱', title: 'Responsive', desc: '20 breakpoints. Mobile-first to feature queries.' },
-];
-
-const plans = [
-  { name: 'Starter', price: 'Free', features: ['5 components', 'Basic macros', 'Community support'], featured: false },
-  { name: 'Pro', price: '$29/mo', features: ['Unlimited components', 'All 57 macros', 'Priority support', 'Atomic CSS', 'Design tokens'], featured: true },
-  { name: 'Enterprise', price: '$99/mo', features: ['Everything in Pro', 'Theme contracts', 'SSR support', 'Custom plugins', 'Dedicated support'], featured: false },
-];
-
-export function App() {
-  return (
-    <div style={{ background: '#0f172a', minHeight: '100vh' }}>
-      {/* NAV */}
-      <nav className={S.nav.selectors?.[0]}>
-        <div className={S.navInner.selectors?.[0]}>
-          <span className={S.navLogo.selectors?.[0]}>ChainCSS</span>
-          <div className={S.navLinks.selectors?.[0]}>
-            {['Features', 'Pricing', 'Docs', 'GitHub'].map(item => (
-              <a key={item} href="#" className={S.navLink.selectors?.[0]}>{item}</a>
-            ))}
-          </div>
-        </div>
-      </nav>
-
-      {/* HERO */}
-      <section className={S.hero.selectors?.[0]}>
-        <h1 className={S.heroTitle.selectors?.[0]}>
-          Write Styles Like JavaScript.<br />Ship Zero Runtime.
-        </h1>
-        <p className={S.heroSubtitle.selectors?.[0]}>
-          ChainCSS auto-detects static vs dynamic styles. CSS where possible, JS where needed.
-        </p>
-        <div style={{ display: 'flex', gap: 16 }}>
-          <button className={S.buttonPrimary.selectors?.[0]}>Get Started →</button>
-          <button className={S.buttonSecondary.selectors?.[0]}>View on GitHub</button>
-        </div>
-      </section>
-
-      {/* FEATURES */}
-      <section className={S.section.selectors?.[0]}>
-        <div className={S.sectionHeader.selectors?.[0]}>
-          <h2 className={S.sectionTitle.selectors?.[0]}>Everything You Need</h2>
-          <p className={S.sectionDesc.selectors?.[0]}>550+ features. One JavaScript API. Zero runtime CSS.</p>
-        </div>
-        <div className={S.featureGrid.selectors?.[0]}>
-          {features.map(f => (
-            <div key={f.title} className={S.featureCard.selectors?.[0]}>
-              <div className={S.featureIcon.selectors?.[0]}>{f.icon}</div>
-              <h3 className={S.featureTitle.selectors?.[0]}>{f.title}</h3>
-              <p className={S.featureDesc.selectors?.[0]}>{f.desc}</p>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* PRICING */}
-      <section className={S.section.selectors?.[0]}>
-        <div className={S.sectionHeader.selectors?.[0]}>
-          <h2 className={S.sectionTitle.selectors?.[0]}>Simple Pricing</h2>
-          <p className={S.sectionDesc.selectors?.[0]}>Start free, scale as you grow.</p>
-        </div>
-        <div className={S.pricingGrid.selectors?.[0]}>
-          {plans.map(p => (
-            <div key={p.name} className={(p.featured ? S.pricingCardFeatured : S.pricingCard).selectors?.[0]}>
-              {p.featured && <span className={S.pricingBadge.selectors?.[0]}>POPULAR</span>}
-              <h3 className={S.pricingPlanName.selectors?.[0]}>{p.name}</h3>
-              <div className={S.pricingPrice.selectors?.[0]}>{p.price}</div>
-              <div style={{ flex: 1, marginBottom: 24 }}>
-                {p.features.map(f => (
-                  <div key={f} className={S.pricingFeature.selectors?.[0]}>✓ {f}</div>
-                ))}
-              </div>
-              <button className={(p.featured ? S.buttonPrimary : S.buttonSecondary).selectors?.[0]}>
-                Get Started
-              </button>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* FOOTER */}
-      <footer className={S.footer.selectors?.[0]}>
-        <div className={S.footerGrid.selectors?.[0]}>
-          <div>
-            <h4 className={S.footerHeading.selectors?.[0]}>ChainCSS</h4>
-            <a href="#" className={S.footerLink.selectors?.[0]}>About</a>
-            <a href="#" className={S.footerLink.selectors?.[0]}>Blog</a>
-          </div>
-          <div>
-            <h4 className={S.footerHeading.selectors?.[0]}>Product</h4>
-            <a href="#" className={S.footerLink.selectors?.[0]}>Features</a>
-            <a href="#" className={S.footerLink.selectors?.[0]}>Pricing</a>
-          </div>
-          <div>
-            <h4 className={S.footerHeading.selectors?.[0]}>Resources</h4>
-            <a href="#" className={S.footerLink.selectors?.[0]}>Docs</a>
-            <a href="#" className={S.footerLink.selectors?.[0]}>Examples</a>
-          </div>
-          <div>
-            <h4 className={S.footerHeading.selectors?.[0]}>Legal</h4>
-            <a href="#" className={S.footerLink.selectors?.[0]}>Privacy</a>
-            <a href="#" className={S.footerLink.selectors?.[0]}>Terms</a>
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-}

package/demo/src/chaincss-barrel.ts

@@ -1,9 +0,0 @@
-// Lightweight barrel for demo - excludes compiler/prefixer
-export { chain, enableDebug, setTokenContext, getTokenContext } from '../../src/compiler/Chain.js';
-export { recipe } from '../../src/compiler/btt.js';
-export { createTokens, DesignTokens } from '../../src/compiler/tokens.js';
-export { smartChain, buildChain, runtimeChain } from '../../src/core/smart-chain.js';
-export { createThemeContract, createTheme, validateTheme, Theme } from '../../src/compiler/theme-contract.js';
-export { helpers } from '../../src/compiler/helpers.js';
-export { animationPresets, createAnimation, getAnimationPreset } from '../../src/compiler/animations.js';
-export { shorthandMap, macros } from '../../src/compiler/shorthands.js';

package/demo/src/main.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { App } from './App';
-
-const root = document.getElementById('app');
-if (root) {
-  createRoot(root).render(<App />);
-}