jsswift 1.0.54 → 2.0.0

package/AI.md

@@ -87,7 +87,9 @@ Dialog returns an API object, not a node to mount: `open(overrides?)`, `close()`
 
 ## Existing CSS and optional assets
 
-The UI stylesheet includes component styles, theme variables, and responsive rules. Start with native components. Prefer documented `color`, `dense`, `padding`, `radius`, `shadow`, and breakpoint props to overrides of internal `.cms-*` classes. Read [common props](ui/common-props.md) only for an additional inherited prop; component-specific definitions take precedence. Use custom CSS for remaining page requirements.
+CSS classes and theme variables use `jss-` (for example `--jss-primary`). Update old `cms-` overrides when upgrading; do not mix JS and CSS namespace versions.
+
+The UI stylesheet includes component styles, theme variables, and responsive rules. Start with native components. Prefer documented `color`, `dense`, `padding`, `radius`, `shadow`, and breakpoint props to overrides of internal `.jss-*` classes. Read [common props](ui/common-props.md) only for an additional inherited prop; component-specific definitions take precedence. Use custom CSS for remaining page requirements.
 
 For pages using component defaults and application-owned media queries, import `jsswift/css/ui-light.css` instead of `ui.css`. It retains base tokens, colors, `dense`/`outline`, layout and unprefixed sizing/spacing utilities. For `tablet`, `pc`/`desktop` or legacy breakpoint classes, additionally import `jsswift/css/responsive.css` **after** the light stylesheet. `ui.css` remains the complete compatible entry; do not import both full and light. The light entry keeps component-specific mobile rules and does not remove JavaScript props. `ui-light.min.css` is also available.
 
@@ -141,8 +143,14 @@ For taller catalogue fields, set the shared height variable on their application
 
 ```css
 .catalogue-filters {
-  --cms-input-height-default: 40px;
+  --jss-input-height-default: 40px;
 }
 ```
 
 Check the border, floating label, error message and keyboard focus at desktop and mobile sizes. A passing CRUD test does not verify these visual states. Keep failed server startup, retry incidents, cached input and uncached input separate when comparing repeated benchmark runs.
+
+## Theme and lifecycle essentials
+
+base.css is already included. Use `_.setTheme('dark')` or `_.setTheme('light')`; persistence defaults to `jsswift:theme`. At startup restore with `_.setTheme(_.getTheme())`. Customize the existing `--jss-primary-600`/`--jss-primary-700` palette values after the UI import. See [base CSS and themes](ui/themes.md) only for additional theme requirements.
+
+Replace component subtrees with `_.mount(host, nextContent)` (default clear:true), which cleans up previous effects and subscriptions. Native `replaceChildren`/`innerHTML` alone do not run JSswift cleanup. Keep shared models owned by the application alive.

package/README.md

@@ -1,7 +1,7 @@
 # JSswift
 
-Start with [AI.md](AI.md) for imports, field models with `_.rod()`, Input, Select, Button, Card, Table and Dialog. Use its supported examples directly before reading other contracts.
+**First read only [AI.md](AI.md), in a separate read operation.** It covers imports, rod field models, Input, Select, Button, Card, Table and Dialog. Implement its supported examples before opening additional contracts.
 
 For an API absent from that guide, use [knowledge-map.json](dist/documentions/knowledge-map.json) to locate the exact document. Read only the relevant contract; avoid concatenating the component catalog or searching runtime bundles for documentation.
 
-Import `jsswift` and `jsswift/css/ui.css`. Component CSS is included; fonts and Tabler are optional. The read-only `@jsswift/knowledge-mcp` is an optional discovery interface when configured in your AI client.
+Import `jsswift` and `jsswift/css/ui-light.css`; add `jsswift/css/responsive.css` when using breakpoint props. `ui.css` remains the complete alternative. Component CSS is included; fonts and Tabler are optional. The read-only `@jsswift/knowledge-mcp` is an optional discovery interface when configured in your AI client.

package/dist/css/animation.css

@@ -1,52 +1,52 @@
 :root {
-  --cms-anim-dur: 500ms;
-  --cms-anim-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
-  --cms-anim-distance: 12px;
-  --cms-anim-scale: 0.98;
-  --cms-anim-in: cms-fade-in;
-  --cms-anim-out: cms-fade-out;
+  --jss-anim-dur: 500ms;
+  --jss-anim-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --jss-anim-distance: 12px;
+  --jss-anim-scale: 0.98;
+  --jss-anim-in: jss-fade-in;
+  --jss-anim-out: jss-fade-out;
 }
 
-.cms-animate {
-  animation-duration: var(--cms-anim-dur);
-  animation-timing-function: var(--cms-anim-ease);
+.jss-animate {
+  animation-duration: var(--jss-anim-dur);
+  animation-timing-function: var(--jss-anim-ease);
   animation-fill-mode: both;
   will-change: opacity, transform;
 }
 
-.cms-animate.in {
-  animation-name: var(--cms-anim-in);
+.jss-animate.in {
+  animation-name: var(--jss-anim-in);
 }
 
-.cms-animate.out {
-  animation-name: var(--cms-anim-out);
+.jss-animate.out {
+  animation-name: var(--jss-anim-out);
 }
 
-.cms-animate.fade.in {
-  animation-name: cms-fade-in;
+.jss-animate.fade.in {
+  animation-name: jss-fade-in;
 }
 
-.cms-animate.fade.out {
-  animation-name: cms-fade-out;
+.jss-animate.fade.out {
+  animation-name: jss-fade-out;
 }
 
-.cms-animate.slide.in {
-  animation-name: cms-slide-in;
+.jss-animate.slide.in {
+  animation-name: jss-slide-in;
 }
 
-.cms-animate.slide.out {
-  animation-name: cms-slide-out;
+.jss-animate.slide.out {
+  animation-name: jss-slide-out;
 }
 
-.cms-animate.scale.in {
-  animation-name: cms-scale-in;
+.jss-animate.scale.in {
+  animation-name: jss-scale-in;
 }
 
-.cms-animate.scale.out {
-  animation-name: cms-scale-out;
+.jss-animate.scale.out {
+  animation-name: jss-scale-out;
 }
 
-@keyframes cms-fade-in {
+@keyframes jss-fade-in {
   from {
     opacity: 0;
   }
@@ -56,7 +56,7 @@
   }
 }
 
-@keyframes cms-fade-out {
+@keyframes jss-fade-out {
   from {
     opacity: 1;
   }
@@ -66,10 +66,10 @@
   }
 }
 
-@keyframes cms-slide-in {
+@keyframes jss-slide-in {
   from {
     opacity: 0;
-    transform: translateY(var(--cms-anim-distance));
+    transform: translateY(var(--jss-anim-distance));
   }
 
   to {
@@ -78,7 +78,7 @@
   }
 }
 
-@keyframes cms-slide-out {
+@keyframes jss-slide-out {
   from {
     opacity: 1;
     transform: translateY(0);
@@ -86,14 +86,14 @@
 
   to {
     opacity: 0;
-    transform: translateY(var(--cms-anim-distance));
+    transform: translateY(var(--jss-anim-distance));
   }
 }
 
-@keyframes cms-scale-in {
+@keyframes jss-scale-in {
   from {
     opacity: 0;
-    transform: scale(var(--cms-anim-scale));
+    transform: scale(var(--jss-anim-scale));
   }
 
   to {
@@ -102,7 +102,7 @@
   }
 }
 
-@keyframes cms-scale-out {
+@keyframes jss-scale-out {
   from {
     opacity: 1;
     transform: scale(1);
@@ -110,12 +110,12 @@
 
   to {
     opacity: 0;
-    transform: scale(var(--cms-anim-scale));
+    transform: scale(var(--jss-anim-scale));
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .cms-animate {
+  .jss-animate {
     animation-duration: 1ms;
   }
 }