Implement CSSX Phase 2: native SX style primitives

Replace Tailwind class strings with native SX expressions:
(css :flex :gap-4 :hover:bg-sky-200) instead of :class "flex gap-4 ..."

- Add style_dict.py: 516 atoms, variants, breakpoints, keyframes, patterns
- Add style_resolver.py: memoized resolver with variant splitting
- Add StyleValue type to types.py (frozen dataclass with class_name, declarations, etc.)
- Add css and merge-styles primitives to primitives.py
- Add defstyle and defkeyframes special forms to evaluator.py and async_eval.py
- Integrate StyleValue into html.py and async_eval.py render paths
- Add register_generated_rule() to css_registry.py, fix media query selector
- Add style dict JSON delivery with localStorage caching to helpers.py
- Add client-side css primitive, resolver, and style injection to sx.js

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

shared/sx/evaluator.py

@@ -366,6 +366,78 @@ def _sf_define(expr: list, env: dict) -> Any:
     return value
 
 
+def _sf_defstyle(expr: list, env: dict) -> Any:
+    """``(defstyle card-base (css :rounded-xl :bg-white :shadow))``
+
+    Evaluates body → StyleValue, binds to name in env.
+    """
+    if len(expr) < 3:
+        raise EvalError("defstyle requires name and body")
+    name_sym = expr[1]
+    if not isinstance(name_sym, Symbol):
+        raise EvalError(f"defstyle name must be symbol, got {type(name_sym).__name__}")
+    value = _trampoline(_eval(expr[2], env))
+    env[name_sym.name] = value
+    return value
+
+
+def _sf_defkeyframes(expr: list, env: dict) -> Any:
+    """``(defkeyframes fade-in (from (css :opacity-0)) (to (css :opacity-100)))``
+
+    Builds @keyframes rule from steps, registers it, and binds the animation.
+    """
+    from .types import StyleValue
+    from .css_registry import register_generated_rule
+    from .style_dict import KEYFRAMES
+
+    if len(expr) < 3:
+        raise EvalError("defkeyframes requires name and at least one step")
+    name_sym = expr[1]
+    if not isinstance(name_sym, Symbol):
+        raise EvalError(f"defkeyframes name must be symbol, got {type(name_sym).__name__}")
+
+    kf_name = name_sym.name
+
+    # Build @keyframes rule from steps
+    steps: list[str] = []
+    for step_expr in expr[2:]:
+        if not isinstance(step_expr, list) or len(step_expr) < 2:
+            raise EvalError("defkeyframes step must be (selector (css ...))")
+        selector = step_expr[0]
+        if isinstance(selector, Symbol):
+            selector = selector.name
+        else:
+            selector = str(selector)
+        body = _trampoline(_eval(step_expr[1], env))
+        if isinstance(body, StyleValue):
+            decls = body.declarations
+        elif isinstance(body, str):
+            decls = body
+        else:
+            raise EvalError(f"defkeyframes step body must be css/string, got {type(body).__name__}")
+        steps.append(f"{selector}{{{decls}}}")
+
+    kf_rule = f"@keyframes {kf_name}{{{' '.join(steps)}}}"
+
+    # Register in KEYFRAMES so animate-{name} works
+    KEYFRAMES[kf_name] = kf_rule
+    # Clear resolver cache so new keyframes are picked up
+    from .style_resolver import _resolve_cached
+    _resolve_cached.cache_clear()
+
+    # Create a StyleValue for the animation property
+    import hashlib
+    h = hashlib.sha256(kf_rule.encode()).hexdigest()[:6]
+    sv = StyleValue(
+        class_name=f"sx-{h}",
+        declarations=f"animation-name:{kf_name}",
+        keyframes=((kf_name, kf_rule),),
+    )
+    register_generated_rule(sv)
+    env[kf_name] = sv
+    return sv
+
+
 def _sf_defcomp(expr: list, env: dict) -> Component:
     """``(defcomp ~name (&key param1 param2 &rest children) body)``"""
     if len(expr) < 4:
@@ -814,6 +886,8 @@ _SPECIAL_FORMS: dict[str, Any] = {
     "lambda": _sf_lambda,
     "fn": _sf_lambda,
     "define": _sf_define,
+    "defstyle": _sf_defstyle,
+    "defkeyframes": _sf_defkeyframes,
     "defcomp": _sf_defcomp,
     "defrelation": _sf_defrelation,
     "begin": _sf_begin,