@vertz/ui 0.2.12 → 0.2.14

package/README.md

@@ -103,7 +103,7 @@ function App() {
   return <button onClick={() => count++}>Count: {count}</button>;
 }
 
-const { unmount, root } = mount(App, '#app');
+const { unmount, root } = mount(App);
 ```
 
 **With options:**
@@ -116,20 +116,17 @@ const theme = defineTheme({
   colors: { primary: { 500: '#3b82f6' } },
 });
 
-mount(App, '#app', {
+mount(App, {
   theme,
   styles: ['body { margin: 0; }'],
   onMount: (root) => console.log('Mounted to', root),
 });
 ```
 
-`mount(app, selector, options?)` accepts:
+`mount(app, options?)` accepts:
 
-- `selector` — CSS selector string or `HTMLElement`
 - `options.theme` — theme definition for CSS vars
 - `options.styles` — global CSS strings to inject
-- `options.hydration` — `'replace'` (default) or `false`
-- `options.registry` — component registry for per-component hydration
 - `options.onMount` — callback after mount completes
 
 Returns a `MountHandle` with `unmount()` and `root`.
@@ -382,6 +379,63 @@ function App() {
 
 ---
 
+## Access Control
+
+Client-side entitlement checks using `@vertz/ui/auth`. The server computes what the user can do, embeds it in the JWT, and the client uses it to show/hide UI without network requests.
+
+### `can()` -- check entitlements
+
+```tsx
+import { can } from '@vertz/ui/auth';
+
+function ProjectToolbar() {
+  const deleteCheck = can('project:delete');
+
+  return (
+    <div>
+      {deleteCheck.allowed && <button onClick={handleDelete}>Delete</button>}
+      {deleteCheck.reason === 'plan_required' && <span>Upgrade to unlock</span>}
+      {deleteCheck.meta?.limit && (
+        <span>{deleteCheck.meta.limit.remaining} uses left</span>
+      )}
+    </div>
+  );
+}
+```
+
+`can()` returns reactive properties: `allowed`, `reasons`, `reason`, `meta`, and `loading`. The compiler auto-unwraps signal values.
+
+For entity-scoped checks, pass the entity as the second argument:
+
+```tsx
+function ProjectCard({ project }) {
+  const editCheck = can('project:edit', project);
+  // reads project.__access if available, falls back to global access set
+}
+```
+
+### `AccessGate` -- wait for access data
+
+```tsx
+import { AccessContext, AccessGate, createAccessProvider } from '@vertz/ui/auth';
+
+function App() {
+  const accessValue = createAccessProvider();
+
+  return (
+    <AccessContext.Provider value={accessValue}>
+      <AccessGate fallback={() => <Spinner />}>
+        {() => <Router />}
+      </AccessGate>
+    </AccessContext.Provider>
+  );
+}
+```
+
+See the full [Access Control guide](https://vertz.dev/guides/ui/access-control) for SSR hydration, denial reasons, and usage limit display.
+
+---
+
 ## Advanced
 
 ### Watch
@@ -596,6 +650,16 @@ onMount(() => {
 | `parseSearchParams` | Parse URL search parameters |
 | `useSearchParams` | Reactive search parameters |
 
+### Auth (`@vertz/ui/auth`)
+
+| Export | Description |
+|---|---|
+| `AccessContext` | Context for access set data |
+| `can` | Check if the user has an entitlement |
+| `AccessGate` | Gate rendering until access set loads |
+| `createAccessProvider` | Bootstrap access context from SSR data |
+| `useAccessContext` | Read the access context (throws without provider) |
+
 ### Testing (`@vertz/ui/test`)
 
 | Export | Description |

package/dist/shared/{chunk-bjcpcq5j.js → chunk-2sth83bd.js}

@@ -1,6 +1,6 @@
 import {
   injectCSS
-} from "./chunk-kg898f92.js";
+} from "./chunk-c9xxsrat.js";
 
 // src/dom/animation.ts
 function onAnimationsComplete(el, callback) {

package/dist/shared/{chunk-9e92w0wt.js → chunk-83g4h38e.js}

@@ -42,6 +42,7 @@ function defineRoutes(map) {
       component: config.component,
       errorComponent: config.errorComponent,
       loader: config.loader,
+      params: config.params,
       pattern,
       searchParams: config.searchParams
     };
@@ -60,6 +61,17 @@ function matchRoute(routes, url) {
   const leaf = matchRouteRecursive(routes, pathname, matched, allParams);
   if (!leaf)
     return null;
+  let parsedParams;
+  if (leaf.params) {
+    try {
+      const parseResult = leaf.params.parse(allParams);
+      if (!parseResult.ok)
+        return null;
+      parsedParams = parseResult.data;
+    } catch {
+      return null;
+    }
+  }
   let search = {};
   for (const m of matched) {
     if (m.route.searchParams) {
@@ -77,6 +89,7 @@ function matchRoute(routes, url) {
   return {
     matched,
     params: allParams,
+    parsedParams,
     route: leaf,
     search,
     searchParams

package/dist/shared/{chunk-2rs8a26p.js → chunk-8hsz5y4a.js}

@@ -1,3 +1,12 @@
+// src/ssr/ssr-render-context.ts
+var _ssrResolver = null;
+function registerSSRResolver(resolver) {
+  _ssrResolver = resolver;
+}
+function getSSRContext() {
+  return _ssrResolver?.();
+}
+
 // src/component/context.ts
 var currentScope = null;
 function isSignalLike(value) {
@@ -54,29 +63,27 @@ function createContext(defaultValue, __stableId) {
     Provider(valueOrProps, fn) {
       if (fn !== undefined) {
         const value2 = wrapSignalProps(valueOrProps);
-        const parentScope2 = currentScope;
+        const parentScope2 = getContextScope();
         const scope2 = parentScope2 ? new Map(parentScope2) : new Map;
         scope2.set(asKey(ctx), value2);
         ctx._stack.push(value2);
-        const prevScope2 = currentScope;
-        currentScope = scope2;
+        const prevScope2 = setContextScope(scope2);
         try {
           fn();
         } finally {
           ctx._stack.pop();
-          currentScope = prevScope2;
+          setContextScope(prevScope2);
         }
         return;
       }
       const props = valueOrProps;
       const { value: rawValue, children } = props;
       const value = wrapSignalProps(rawValue);
-      const parentScope = currentScope;
+      const parentScope = getContextScope();
       const scope = parentScope ? new Map(parentScope) : new Map;
       scope.set(asKey(ctx), value);
       ctx._stack.push(value);
-      const prevScope = currentScope;
-      currentScope = scope;
+      const prevScope = setContextScope(scope);
       try {
         const result = typeof children === "function" ? children() : children;
         if (typeof process !== "undefined" && true && Array.isArray(result)) {
@@ -85,7 +92,7 @@ function createContext(defaultValue, __stableId) {
         return result;
       } finally {
         ctx._stack.pop();
-        currentScope = prevScope;
+        setContextScope(prevScope);
       }
     },
     _default: defaultValue,
@@ -101,15 +108,25 @@ function useContext(ctx) {
     return ctx._stack[ctx._stack.length - 1];
   }
   const key = asKey(ctx);
-  if (currentScope?.has(key)) {
-    return currentScope.get(key);
+  const scope = getContextScope();
+  if (scope?.has(key)) {
+    return scope.get(key);
   }
   return ctx._default;
 }
 function getContextScope() {
+  const ctx = getSSRContext();
+  if (ctx)
+    return ctx.contextScope;
   return currentScope;
 }
 function setContextScope(scope) {
+  const ctx = getSSRContext();
+  if (ctx) {
+    const prev2 = ctx.contextScope;
+    ctx.contextScope = scope;
+    return prev2;
+  }
   const prev = currentScope;
   currentScope = scope;
   return prev;
@@ -123,26 +140,36 @@ class DisposalScopeError extends Error {
   }
 }
 var cleanupStack = [];
+function getCleanupStack() {
+  const ctx = getSSRContext();
+  if (ctx)
+    return ctx.cleanupStack;
+  return cleanupStack;
+}
 function onCleanup(fn) {
-  const current = cleanupStack[cleanupStack.length - 1];
+  const stack = getCleanupStack();
+  const current = stack[stack.length - 1];
   if (!current) {
     throw new DisposalScopeError;
   }
   current.push(fn);
 }
 function _tryOnCleanup(fn) {
-  const current = cleanupStack[cleanupStack.length - 1];
+  const stack = getCleanupStack();
+  const current = stack[stack.length - 1];
   if (current) {
     current.push(fn);
   }
 }
 function pushScope() {
+  const stack = getCleanupStack();
   const scope = [];
-  cleanupStack.push(scope);
+  stack.push(scope);
   return scope;
 }
 function popScope() {
-  cleanupStack.pop();
+  const stack = getCleanupStack();
+  stack.pop();
 }
 function runCleanups(cleanups) {
   for (let i = cleanups.length - 1;i >= 0; i--) {
@@ -155,28 +182,45 @@ function runCleanups(cleanups) {
 var currentSubscriber = null;
 var readValueCallback = null;
 function getSubscriber() {
+  const ctx = getSSRContext();
+  if (ctx)
+    return ctx.subscriber;
   return currentSubscriber;
 }
 function setSubscriber(sub) {
+  const ctx = getSSRContext();
+  if (ctx) {
+    const prev2 = ctx.subscriber;
+    ctx.subscriber = sub;
+    return prev2;
+  }
   const prev = currentSubscriber;
   currentSubscriber = sub;
   return prev;
 }
 function getReadValueCallback() {
+  const ctx = getSSRContext();
+  if (ctx)
+    return ctx.readValueCb;
   return readValueCallback;
 }
 function setReadValueCallback(cb) {
+  const ctx = getSSRContext();
+  if (ctx) {
+    const prev2 = ctx.readValueCb;
+    ctx.readValueCb = cb;
+    return prev2;
+  }
   const prev = readValueCallback;
   readValueCallback = cb;
   return prev;
 }
 function untrack(fn) {
-  const prev = currentSubscriber;
-  currentSubscriber = null;
+  const prev = setSubscriber(null);
   try {
     return fn();
   } finally {
-    currentSubscriber = prev;
+    setSubscriber(prev);
   }
 }
 
@@ -188,37 +232,52 @@ function scheduleNotify(subscriber) {
     subscriber._notify();
     return;
   }
-  if (batchDepth > 0) {
-    pendingEffects.set(subscriber._id, subscriber);
+  const ctx = getSSRContext();
+  const depth = ctx ? ctx.batchDepth : batchDepth;
+  const effects = ctx ? ctx.pendingEffects : pendingEffects;
+  if (depth > 0) {
+    effects.set(subscriber._id, subscriber);
   } else {
     subscriber._notify();
   }
 }
-function flush() {
-  while (pendingEffects.size > 0) {
-    const queue = [...pendingEffects.values()];
-    pendingEffects.clear();
+function flush(effects) {
+  while (effects.size > 0) {
+    const queue = [...effects.values()];
+    effects.clear();
     for (const sub of queue) {
       sub._notify();
     }
   }
 }
 function batch(fn) {
-  batchDepth++;
-  try {
-    fn();
-  } finally {
-    batchDepth--;
-    if (batchDepth === 0) {
-      flush();
+  const ctx = getSSRContext();
+  if (ctx) {
+    ctx.batchDepth++;
+    try {
+      fn();
+    } finally {
+      ctx.batchDepth--;
+      if (ctx.batchDepth === 0) {
+        flush(ctx.pendingEffects);
+      }
+    }
+  } else {
+    batchDepth++;
+    try {
+      fn();
+    } finally {
+      batchDepth--;
+      if (batchDepth === 0) {
+        flush(pendingEffects);
+      }
     }
   }
 }
 
 // src/runtime/signal.ts
 function isSSR() {
-  const check = typeof globalThis !== "undefined" && globalThis.__VERTZ_IS_SSR__;
-  return typeof check === "function" ? check() : false;
+  return getSSRContext() !== undefined;
 }
 var COLLECTOR_KEY = Symbol.for("vertz:signal-collector-stack");
 var _global = globalThis;
@@ -413,4 +472,4 @@ function lifecycleEffect(fn) {
   return dispose;
 }
 
-export { createContext, useContext, getContextScope, setContextScope, DisposalScopeError, onCleanup, _tryOnCleanup, pushScope, popScope, runCleanups, setReadValueCallback, untrack, batch, startSignalCollection, stopSignalCollection, signal, computed, domEffect, lifecycleEffect };
+export { registerSSRResolver, getSSRContext, createContext, useContext, getContextScope, setContextScope, DisposalScopeError, onCleanup, _tryOnCleanup, pushScope, popScope, runCleanups, setReadValueCallback, untrack, batch, startSignalCollection, stopSignalCollection, signal, computed, domEffect, lifecycleEffect };

package/dist/shared/{chunk-55tgkc7s.js → chunk-c30eg6wn.js}

@@ -1,7 +1,7 @@
 import {
   computed,
   signal
-} from "./chunk-2rs8a26p.js";
+} from "./chunk-8hsz5y4a.js";
 
 // src/form/field-state.ts
 function createFieldState(_name, initialValue) {

package/dist/shared/{chunk-kg898f92.js → chunk-c9xxsrat.js}

@@ -3,7 +3,10 @@ import {
   __element,
   __enterChildren,
   __exitChildren
-} from "./chunk-662f9zrb.js";
+} from "./chunk-j6qyxfdc.js";
+import {
+  getSSRContext
+} from "./chunk-8hsz5y4a.js";
 
 // src/component/children.ts
 var MAX_RESOLVE_DEPTH = 100;
@@ -618,10 +621,12 @@ var vertzSheets = new Set;
 function injectCSS(cssText) {
   if (!cssText)
     return;
-  const isSSR = typeof globalThis.__SSR_URL__ === "string";
+  const isSSR = getSSRContext() !== undefined;
   if (!isSSR && injectedCSS.has(cssText))
     return;
   injectedCSS.add(cssText);
+  if (isSSR)
+    return;
   if (typeof document === "undefined")
     return;
   if (typeof CSSStyleSheet !== "undefined" && document.adoptedStyleSheets !== undefined) {

package/dist/shared/{chunk-wn4gv1qd.js → chunk-dksg08fq.js}

@@ -1,6 +1,6 @@
 import {
   domEffect
-} from "./chunk-2rs8a26p.js";
+} from "./chunk-8hsz5y4a.js";
 
 // src/dom/attributes.ts
 function __attr(el, name, fn) {

package/dist/shared/{chunk-g4rch80a.js → chunk-h89w580h.js}

@@ -1,3 +1,7 @@
+import {
+  getSSRContext
+} from "./chunk-8hsz5y4a.js";
+
 // src/dom/dom-adapter.ts
 function createDOMAdapter() {
   return {
@@ -21,6 +25,9 @@ function isRenderNode(value) {
 }
 var currentAdapter = null;
 function getAdapter() {
+  const ctx = getSSRContext();
+  if (ctx)
+    return ctx.adapter;
   if (!currentAdapter) {
     currentAdapter = createDOMAdapter();
   }