snice 4.29.0 → 4.30.0

package/adapters/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACpE,YAAY,EACV,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EACjB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,wBAAwB,EACxB,gBAAgB,EAChB,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAMjB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACnG,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACpE,YAAY,EACV,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EACjB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,wBAAwB,EACxB,gBAAgB,EAChB,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAGjB,cAAc,cAAc,CAAC"}

package/adapters/react/index.js

@@ -30,10 +30,11 @@
  *
  * @module snice/react
  */
+export { SniceProvider, useSniceContext, useNavigate, useParams, useRoute } from './SniceProvider';
+export { SniceRouter, Route } from './SniceRouter';
+export { useRequestHandler } from './useRequestHandler';
 export { createReactAdapter, useSniceFormValue } from './wrapper';
 export { kebabToCamel, camelToKebab, extractComponentMetadata, isFormAssociated, waitForComponentDefinition } from './utils';
-// Component adapters will be generated and exported here
-// This is a placeholder for the generated adapters
 // Auto-generated component exports
 export * from './components';
 //# sourceMappingURL=index.js.map

package/adapters/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AASlE,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,wBAAwB,EACxB,gBAAgB,EAChB,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAEjB,yDAAyD;AACzD,mDAAmD;AAEnD,mCAAmC;AACnC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEnG,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AASlE,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,wBAAwB,EACxB,gBAAgB,EAChB,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAEjB,mCAAmC;AACnC,cAAc,cAAc,CAAC"}

package/adapters/react/index.ts

@@ -31,6 +31,12 @@
  * @module snice/react
  */
 
+export { SniceProvider, useSniceContext, useNavigate, useParams, useRoute } from './SniceProvider';
+export type { SniceReactContext, SniceProviderProps, Placard } from './SniceProvider';
+export { SniceRouter, Route } from './SniceRouter';
+export type { SniceRouterProps, RouteProps } from './SniceRouter';
+export { useRequestHandler } from './useRequestHandler';
+
 export { createReactAdapter, useSniceFormValue } from './wrapper';
 export type { AdapterConfig, SniceComponentProps } from './wrapper';
 export type {
@@ -48,8 +54,5 @@ export {
   waitForComponentDefinition
 } from './utils';
 
-// Component adapters will be generated and exported here
-// This is a placeholder for the generated adapters
-
 // Auto-generated component exports
 export * from './components';

package/adapters/react/matchRoute.d.ts

@@ -0,0 +1,16 @@
+import { type RouteParams } from 'pica-route';
+export interface RouteConfig {
+    path: string;
+    index: number;
+}
+export interface MatchResult {
+    index: number;
+    params: RouteParams;
+    path: string;
+}
+/**
+ * Match a URL path against an array of route configs.
+ * Uses pica-route — same matching as vanilla Snice's Router.
+ * Routes are sorted by specificity (longest spec first).
+ */
+export declare function matchRoutes(routes: RouteConfig[], pathname: string): MatchResult | null;

package/adapters/react/matchRoute.js

@@ -0,0 +1,32 @@
+/*!
+ * snice v4.29.0
+ * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+import { Route } from 'pica-route';
+
+/**
+ * Match a URL path against an array of route configs.
+ * Uses pica-route — same matching as vanilla Snice's Router.
+ * Routes are sorted by specificity (longest spec first).
+ */
+function matchRoutes(routes, pathname) {
+    // Sort by specificity (longest path first), same as vanilla Router
+    const sorted = [...routes].sort((a, b) => b.path.length - a.path.length);
+    for (const route of sorted) {
+        const matcher = new Route(route.path);
+        const params = matcher.match(pathname);
+        if (params !== false) {
+            return {
+                index: route.index,
+                params: params,
+                path: route.path,
+            };
+        }
+    }
+    return null;
+}
+
+export { matchRoutes };
+//# sourceMappingURL=matchRoute.js.map

package/adapters/react/matchRoute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"matchRoute.js","sources":["../../src/react/matchRoute.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAaA;;;;AAIG;AACG,SAAU,WAAW,CAAC,MAAqB,EAAE,QAAgB,EAAA;;AAEjE,IAAA,MAAM,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;AAExE,IAAA,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;QACrC,MAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;AACtC,QAAA,IAAI,MAAM,KAAK,KAAK,EAAE;YACpB,OAAO;gBACL,KAAK,EAAE,KAAK,CAAC,KAAK;AAClB,gBAAA,MAAM,EAAE,MAAqB;gBAC7B,IAAI,EAAE,KAAK,CAAC,IAAI;aACjB;QACH;IACF;AAEA,IAAA,OAAO,IAAI;AACb;;;;"}

package/adapters/react/types.d.ts

@@ -2,15 +2,9 @@ import React from 'react';
 /**
  * Base props that all Snice React components extend
  */
-export interface SniceBaseProps {
+export interface SniceBaseProps extends React.HTMLAttributes<HTMLElement> {
     /** Ref to the underlying web component element */
     ref?: React.Ref<any>;
-    /** Children to render inside the component */
-    children?: React.ReactNode;
-    /** Class name for styling */
-    className?: string;
-    /** Inline styles */
-    style?: React.CSSProperties;
 }
 /**
  * Props for form-associated Snice components
@@ -26,14 +20,6 @@ export interface SniceFormProps extends SniceBaseProps {
     required?: boolean;
     /** Whether the control is readonly */
     readonly?: boolean;
-    /** Callback when value changes */
-    onChange?: (event: Event) => void;
-    /** Callback on input */
-    onInput?: (event: Event) => void;
-    /** Callback on blur */
-    onBlur?: (event: FocusEvent) => void;
-    /** Callback on focus */
-    onFocus?: (event: FocusEvent) => void;
 }
 /**
  * Ref type for components with methods

package/adapters/react/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,uBAAuB;IACvB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,2CAA2C;IAC3C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,6BAA6B;IAC7B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,IAAI,IAAI,MAAM,IAAI,EAAE,GAChF,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,GACzB,CAAC,CAAC;AAEN;;GAEG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,MAAM,CAAC,EAAE,GAC9E,GAAG,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,GACxC,CAAC,CAAC;AAEN;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,GAAG;IACxC,MAAM,EAAE,CAAC,CAAC;CACX;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,GAAG,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,2CAA2C;IAC3C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,6BAA6B;IAC7B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,IAAI,IAAI,MAAM,IAAI,EAAE,GAChF,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,GACzB,CAAC,CAAC;AAEN;;GAEG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,MAAM,CAAC,EAAE,GAC9E,GAAG,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,GACxC,CAAC,CAAC;AAEN;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,GAAG;IACxC,MAAM,EAAE,CAAC,CAAC;CACX;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,GAAG,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC"}

package/adapters/react/types.ts

@@ -3,15 +3,9 @@ import React from 'react';
 /**
  * Base props that all Snice React components extend
  */
-export interface SniceBaseProps {
+export interface SniceBaseProps extends React.HTMLAttributes<HTMLElement> {
   /** Ref to the underlying web component element */
   ref?: React.Ref<any>;
-  /** Children to render inside the component */
-  children?: React.ReactNode;
-  /** Class name for styling */
-  className?: string;
-  /** Inline styles */
-  style?: React.CSSProperties;
 }
 
 /**
@@ -28,14 +22,6 @@ export interface SniceFormProps extends SniceBaseProps {
   required?: boolean;
   /** Whether the control is readonly */
   readonly?: boolean;
-  /** Callback when value changes */
-  onChange?: (event: Event) => void;
-  /** Callback on input */
-  onInput?: (event: Event) => void;
-  /** Callback on blur */
-  onBlur?: (event: FocusEvent) => void;
-  /** Callback on focus */
-  onFocus?: (event: FocusEvent) => void;
 }
 
 /**

package/adapters/react/useRequestHandler.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.28.0
+ * snice v4.29.0
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.

package/adapters/react/useRequestHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRequestHandler.js","sources":["../../src/src/react/useRequestHandler.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCG;AAYH;;;;;;AAMG;SACa,iBAAiB,CAC/B,GAA2C,EAC3C,MAA0B,EAC1B,OAAkC,EAAA;AAElC,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC;AAChC,IAAA,SAAS,CAAC,OAAO,GAAG,MAAM;AAE1B,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;AAClC,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC;IAEzD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,MAAM,GAAgB,GAAG,EAAE,OAAO,IAAI,QAAQ;QACpD,MAAM,QAAQ,GAAmB,EAAE;QAEnC,KAAK,MAAM,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;AACjD,YAAA,IAAI,CAAC,WAAW;gBAAE;AAClB,YAAA,MAAM,SAAS,GAAG,CAAA,SAAA,EAAY,WAAW,EAAE;AAE3C,YAAA,MAAM,QAAQ,GAAG,CAAC,KAAY,KAAI;gBAChC,MAAM,EAAE,GAAG,KAAoB;gBAC/B,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM;AAE9C,gBAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE;oBAChC,EAAE,CAAC,cAAc,EAAE;oBACnB,EAAE,CAAC,wBAAwB,EAAE;oBAC7B,EAAE,CAAC,eAAe,EAAE;gBACtB;gBAEA,SAAS,CAAC,OAAO,EAAE;gBAEnB,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;gBAC9C,IAAI,CAAC,OAAO,EAAE;oBACZ,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAA,mCAAA,EAAsC,WAAW,CAAA,CAAA,CAAG,CAAC,CAAC;oBAC5E;gBACF;gBAEA,OAAO,CAAC,OAAO;qBACZ,IAAI,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC;AAC3B,qBAAA,IAAI,CAAC,CAAC,MAAW,KAAK,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;AAC1C,qBAAA,KAAK,CAAC,CAAC,KAAU,KAAI;AACpB,oBAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;oBAClB,OAAO,CAAC,KAAK,CAAC,CAAA,6BAAA,EAAgC,WAAW,CAAA,UAAA,CAAY,EAAE,KAAK,CAAC;AAC/E,gBAAA,CAAC,CAAC;AACN,YAAA,CAAC;AAED,YAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACtE;AAEA,QAAA,OAAO,MAAK;YACV,KAAK,MAAM,EAAE,IAAI,QAAQ;AAAE,gBAAA,EAAE,EAAE;AACjC,QAAA,CAAC;;AAEH,IAAA,CAAC,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;AACxB;;;;"}
+{"version":3,"file":"useRequestHandler.js","sources":["../../src/react/useRequestHandler.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCG;AAYH;;;;;;AAMG;SACa,iBAAiB,CAC/B,GAA2C,EAC3C,MAA0B,EAC1B,OAAkC,EAAA;AAElC,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC;AAChC,IAAA,SAAS,CAAC,OAAO,GAAG,MAAM;AAE1B,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;AAClC,IAAA,UAAU,CAAC,OAAO,GAAG,OAAO;AAE5B,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC;IAEzD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,MAAM,GAAgB,GAAG,EAAE,OAAO,IAAI,QAAQ;QACpD,MAAM,QAAQ,GAAmB,EAAE;QAEnC,KAAK,MAAM,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;AACjD,YAAA,IAAI,CAAC,WAAW;gBAAE;AAClB,YAAA,MAAM,SAAS,GAAG,CAAA,SAAA,EAAY,WAAW,EAAE;AAE3C,YAAA,MAAM,QAAQ,GAAG,CAAC,KAAY,KAAI;gBAChC,MAAM,EAAE,GAAG,KAAoB;gBAC/B,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM;AAE9C,gBAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE;oBAChC,EAAE,CAAC,cAAc,EAAE;oBACnB,EAAE,CAAC,wBAAwB,EAAE;oBAC7B,EAAE,CAAC,eAAe,EAAE;gBACtB;gBAEA,SAAS,CAAC,OAAO,EAAE;gBAEnB,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;gBAC9C,IAAI,CAAC,OAAO,EAAE;oBACZ,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAA,mCAAA,EAAsC,WAAW,CAAA,CAAA,CAAG,CAAC,CAAC;oBAC5E;gBACF;gBAEA,OAAO,CAAC,OAAO;qBACZ,IAAI,CAAC,MAAM,OAAO,CAAC,OAAO,CAAC;AAC3B,qBAAA,IAAI,CAAC,CAAC,MAAW,KAAK,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;AAC1C,qBAAA,KAAK,CAAC,CAAC,KAAU,KAAI;AACpB,oBAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;oBAClB,OAAO,CAAC,KAAK,CAAC,CAAA,6BAAA,EAAgC,WAAW,CAAA,UAAA,CAAY,EAAE,KAAK,CAAC;AAC/E,gBAAA,CAAC,CAAC;AACN,YAAA,CAAC;AAED,YAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACtE;AAEA,QAAA,OAAO,MAAK;YACV,KAAK,MAAM,EAAE,IAAI,QAAQ;AAAE,gBAAA,EAAE,EAAE;AACjC,QAAA,CAAC;;AAEH,IAAA,CAAC,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;AACxB;;;;"}

package/bin/snice.js

@@ -34,7 +34,7 @@ if (command === 'create-app') {
   }
 
   const projectPath = positional[0] || '.';
-  const template = flags.template || 'base';
+  const template = flags.template || 'default';
 
   createApp(projectPath, template);
 } else if (command === 'mcp') {
@@ -79,14 +79,14 @@ if (command === 'create-app') {
 Snice CLI
 
 Usage:
-  snice create-app [options] <project-name>
-  snice create-app [options] .                          Initialize in current directory
+  snice create-app <project-name>                       Create a new Snice app
+  snice create-app .                                    Initialize in current directory
   snice build-component <component-name> [options]      Build CDN component
   snice validate                                        Check project for common issues
   snice mcp                                             Start MCP server for AI assistants
 
 Create App Options:
-  --template=<name>                                     Template to use (default: base)
+  --template=react                                      Use React template instead of default
 
 Build Component Options:
   --output=<dir>                                        Output directory (default: ./dist/cdn)
@@ -94,29 +94,24 @@ Build Component Options:
   --minify                                              Minify output (default: true)
   --with-theme                                          Include theme.css in output
 
-Templates:
-  base    - Minimal starter with counter example (default)
-  pwa     - Progressive Web App with auth, middleware, and live notifications
-
 MCP Server:
   Start a Model Context Protocol server for AI-assisted development.
   Connect in Claude Code: claude mcp add snice -- npx snice mcp
 
 Examples:
   snice create-app my-app
-  snice create-app my-app --template=pwa
+  snice create-app my-app --template=react
   snice build-component button
   snice build-component button --output=./cdn --format=iife
   snice mcp
 `);
 }
 
-function createApp(projectPath, template = 'base') {
+function createApp(projectPath, template = 'default') {
   const targetDir = resolve(process.cwd(), projectPath);
   const projectName = projectPath === '.' ? basename(process.cwd()) : basename(targetDir);
 
   console.log(`\n🚀 Creating Snice app in ${targetDir}...\n`);
-  console.log(`📦 Using template: ${template}\n`);
 
   // Check if directory exists and is empty
   if (projectPath !== '.') {
@@ -145,7 +140,7 @@ function createApp(projectPath, template = 'base') {
   // Check if template exists
   if (!existsSync(templateDir)) {
     console.error(`❌ Template "${template}" not found!`);
-    console.error(`Available templates: base, pwa`);
+    console.error(`Available templates: default, react`);
     process.exit(1);
   }
 
@@ -341,4 +336,4 @@ function validateProject() {
       console.log(`    → Use .types.ts imports to avoid circular dependencies\n`);
     }
   }
-}
+}

package/bin/templates/{pwa → default}/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="{{projectName}} - PWA built with Snice" />
-    <meta name="theme-color" content="#6366f1" />
+    <meta name="theme-color" content="#2563eb" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <title>{{projectName}}</title>

package/bin/templates/{pwa → default}/src/components/app-header.ts

@@ -1,6 +1,7 @@
-import { element, property, render, styles, context, on, dispatch, html, css, watch, query } from 'snice';
+import { element, property, render, styles, context, on, dispatch, dispose, html, css, watch, query } from 'snice';
 import type { Context } from 'snice';
 import type { Principal, User } from '../types/auth';
+import type { NotificationsDaemon } from '../daemons/notifications';
 import { logout } from '../services/auth';
 
 @element('app-header')
@@ -9,6 +10,8 @@ export class AppHeader extends HTMLElement {
   @property() userAvatar = '';
   @property({ type: Boolean }) authenticated = false;
   @property({ type: Boolean }) menuOpen = false;
+  @property({ type: Number }) notificationCount = 0;
+  private unsubscribeNotifications: (() => void) | null = null;
 
   @query('.user-menu') $menu!: HTMLElement;
 
@@ -19,6 +22,21 @@ export class AppHeader extends HTMLElement {
     this.authenticated = principal?.isAuthenticated || false;
     this.userName = user?.name || '';
     this.userAvatar = user?.avatar || '';
+
+    const daemon = ctx.application.notifications as NotificationsDaemon;
+    if (daemon && !this.unsubscribeNotifications) {
+      this.unsubscribeNotifications = daemon.subscribe(() => {
+        this.notificationCount++;
+      });
+    }
+  }
+
+  @dispose()
+  cleanupNotifications() {
+    if (this.unsubscribeNotifications) {
+      this.unsubscribeNotifications();
+      this.unsubscribeNotifications = null;
+    }
   }
 
   @watch('menuOpen')
@@ -57,7 +75,7 @@ export class AppHeader extends HTMLElement {
             <a href="#/dashboard">Dashboard</a>
             <a href="#/data">Data</a>
             <a href="#/notifications">
-              <notification-badge></notification-badge>
+              <notification-badge .count=${this.notificationCount}></notification-badge>
               Notifications
             </a>
           </nav>
@@ -109,14 +127,14 @@ export class AppHeader extends HTMLElement {
         justify-content: space-between;
         padding: 0 1.5rem;
         height: 60px;
-        background: var(--bg-primary);
-        border-bottom: 1px solid var(--border-color);
+        background: var(--snice-color-background);
+        border-bottom: 1px solid var(--snice-color-border);
       }
 
       .brand a {
         font-size: 1.25rem;
         font-weight: 700;
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
         text-decoration: none;
       }
 
@@ -127,7 +145,7 @@ export class AppHeader extends HTMLElement {
       }
 
       .nav-links a {
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         text-decoration: none;
         font-size: 0.875rem;
         font-weight: 500;
@@ -137,7 +155,7 @@ export class AppHeader extends HTMLElement {
       }
 
       .nav-links a:hover {
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
       }
 
       .user-section {
@@ -152,12 +170,12 @@ export class AppHeader extends HTMLElement {
         border: none;
         cursor: pointer;
         padding: 0.375rem 0.5rem;
-        border-radius: var(--radius-md);
-        color: var(--text-color);
+        border-radius: var(--snice-border-radius-lg);
+        color: var(--snice-color-text);
       }
 
       .user-btn:hover {
-        background: var(--bg-secondary);
+        background: var(--snice-color-background-secondary);
       }
 
       .user-name {
@@ -171,10 +189,10 @@ export class AppHeader extends HTMLElement {
         top: 100%;
         margin-top: 0.5rem;
         min-width: 180px;
-        background: var(--bg-primary);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-md);
-        box-shadow: var(--shadow-lg);
+        background: var(--snice-color-background);
+        border: 1px solid var(--snice-color-border);
+        border-radius: var(--snice-border-radius-lg);
+        box-shadow: var(--snice-shadow-lg);
         padding: 0.5rem 0;
         z-index: 100;
       }
@@ -184,7 +202,7 @@ export class AppHeader extends HTMLElement {
         display: block;
         width: 100%;
         padding: 0.5rem 1rem;
-        color: var(--text-color);
+        color: var(--snice-color-text);
         text-decoration: none;
         background: none;
         border: none;
@@ -195,12 +213,12 @@ export class AppHeader extends HTMLElement {
 
       .user-menu a:hover,
       .user-menu button:hover {
-        background: var(--bg-secondary);
-        color: var(--primary-color);
+        background: var(--snice-color-background-secondary);
+        color: var(--snice-color-primary);
       }
 
       .login-link {
-        color: var(--primary-color);
+        color: var(--snice-color-primary);
         text-decoration: none;
         font-weight: 500;
       }

package/bin/templates/{pwa → default}/src/components/notification-badge.ts

@@ -1,30 +1,11 @@
-import { element, property, render, styles, ready, dispose, html, css, watch, query } from 'snice';
-import { getNotificationsDaemon } from '../daemons/notifications';
+import { element, property, render, styles, html, css, watch, query } from 'snice';
 
 @element('notification-badge')
 export class NotificationBadge extends HTMLElement {
   @property({ type: Number }) count = 0;
 
-  private unsubscribe: (() => void) | null = null;
-
   @query('.badge') $badge!: HTMLElement;
 
-  @ready()
-  initialize() {
-    const daemon = getNotificationsDaemon();
-    this.unsubscribe = daemon.subscribe(() => {
-      this.count++;
-    });
-  }
-
-  @dispose()
-  cleanup() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-      this.unsubscribe = null;
-    }
-  }
-
   @watch('count')
   onCountChange() {
     if (this.$badge) {
@@ -56,7 +37,7 @@ export class NotificationBadge extends HTMLElement {
         min-width: 18px;
         height: 18px;
         padding: 0 4px;
-        background: var(--danger-color);
+        background: var(--snice-color-danger);
         color: white;
         font-size: 0.6875rem;
         font-weight: 600;

package/bin/templates/{pwa → default}/src/components/search-bar.ts

@@ -52,18 +52,18 @@ export class SearchBar extends HTMLElement {
         align-items: center;
         gap: 0.5rem;
         padding: 0.5rem 0.75rem;
-        background: var(--bg-primary);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-md);
+        background: var(--snice-color-background);
+        border: 1px solid var(--snice-color-border);
+        border-radius: var(--snice-border-radius-lg);
       }
 
       .search-container:focus-within {
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
+        border-color: var(--snice-color-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--snice-color-primary) 15%, transparent);
       }
 
       .icon {
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         font-size: 0.875rem;
       }
 
@@ -73,26 +73,26 @@ export class SearchBar extends HTMLElement {
         outline: none;
         background: transparent;
         font-size: 0.875rem;
-        color: var(--text-color);
+        color: var(--snice-color-text);
       }
 
       input::placeholder {
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
       }
 
       .clear {
         background: none;
         border: none;
         cursor: pointer;
-        color: var(--text-light);
+        color: var(--snice-color-text-secondary);
         font-size: 0.75rem;
         padding: 0.125rem 0.25rem;
-        border-radius: var(--radius-sm);
+        border-radius: var(--snice-border-radius-md);
       }
 
       .clear:hover {
-        background: var(--bg-secondary);
-        color: var(--text-color);
+        background: var(--snice-color-background-secondary);
+        color: var(--snice-color-text);
       }
     `;
   }

package/bin/templates/default/src/context.ts

@@ -0,0 +1,17 @@
+import type { Principal } from './types/auth';
+import { getUser } from './services/storage';
+import { isAuthenticated } from './services/auth';
+import { NotificationsDaemon } from './daemons/notifications';
+
+// In production, use actual WebSocket URL from env
+const wsUrl = import.meta.env.VITE_WS_URL || 'ws://localhost:8080';
+const notifications = new NotificationsDaemon(wsUrl);
+notifications.start();
+
+export const appContext = {
+  principal: {
+    get user() { return getUser(); },
+    get isAuthenticated() { return isAuthenticated(); }
+  } as Principal,
+  notifications
+};

package/bin/templates/{pwa → default}/src/controllers/notification-controller.ts

@@ -1,33 +1,28 @@
-import { controller, respond } from 'snice';
-import { getNotificationsDaemon } from '../daemons/notifications';
+import { controller, respond, IController } from 'snice';
 import type { Notification } from '../types/notifications';
 
 @controller('notification-controller')
-export class NotificationController {
-  element!: HTMLElement;
+export class NotificationController implements IController {
+  element: HTMLElement | null = null;
   private notifications: Notification[] = [];
-  private unsubscribe: (() => void) | null = null;
 
   async attach(el: HTMLElement) {
     this.element = el;
-    const daemon = getNotificationsDaemon();
-    this.unsubscribe = daemon.subscribe((notification) => {
-      this.notifications = [notification, ...this.notifications];
-    });
   }
 
-  async detach() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-      this.unsubscribe = null;
-    }
-  }
+  async detach() {}
 
   @respond('get-notifications')
   handleGetNotifications() {
     return this.notifications;
   }
 
+  @respond('add-notification')
+  handleAddNotification(notification: Notification) {
+    this.notifications = [notification, ...this.notifications];
+    return { added: true };
+  }
+
   @respond('clear-notifications')
   handleClearNotifications() {
     this.notifications = [];

package/bin/templates/{pwa → default}/src/daemons/notifications.ts

@@ -134,15 +134,3 @@ export class NotificationsDaemon {
     }
   }
 }
-
-// Singleton instance
-let instance: NotificationsDaemon | null = null;
-
-export function getNotificationsDaemon(): NotificationsDaemon {
-  if (!instance) {
-    // In production, use actual WebSocket URL from env
-    const wsUrl = import.meta.env.VITE_WS_URL || 'ws://localhost:8080';
-    instance = new NotificationsDaemon(wsUrl);
-  }
-  return instance;
-}

package/bin/templates/{pwa → default}/src/main.ts

@@ -1,4 +1,5 @@
 import { initialize } from './router';
+import 'snice/components/theme/theme.css';
 import './styles/global.css';
 
 // Import snice layout and components
@@ -32,13 +33,6 @@ import './pages/notifications';
 import './pages/settings';
 import './pages/data';
 
-// Import and start daemons
-import { getNotificationsDaemon } from './daemons/notifications';
-
-// Start notifications daemon
-const notificationsDaemon = getNotificationsDaemon();
-notificationsDaemon.start();
-
 // Initialize router
 initialize();
 

package/bin/templates/{pwa → default}/src/middleware/error.ts

@@ -1,5 +1,4 @@
 import type { Context } from 'snice';
-import type { Principal } from '../types/auth';
 import { clearToken } from '../services/storage';
 
 export async function errorMiddleware(
@@ -11,13 +10,7 @@ export async function errorMiddleware(
   if (response.status === 401) {
     clearToken();
 
-    // Update context to reflect logged out state
-    if (this.application.principal) {
-      const principal = this.application.principal as Principal;
-      principal.user = null;
-      principal.isAuthenticated = false;
-    }
-
+    // Getters in context will reflect logged-out state since token is cleared
     window.location.href = '#/login';
     throw new Error('Unauthorized - redirecting to login');
   }