jsswift 1.0.53 → 2.0.0

package/AI.md

@@ -27,7 +27,7 @@ Provide `<div id="app"></div>` in HTML and a module entrypoint. With Vite:
 
 ```js
 import 'jsswift';
-import 'jsswift/css/ui.css';
+import 'jsswift/css/ui-light.css';
 const _ = window._;
 
 const name = _.rod('Prodotto 01');
@@ -64,7 +64,7 @@ const table = _.Table({
   ],
   pagination: false, hideFooter: true, hideStatus: true, minTableWidth: 700
 });
-const page = _.Page({}, _.Card({ title: 'Prodotti' }, edit, table));
+const page = _.Page({}, _.div({}, _.h1('Prodotti'), edit, table));
 _.mount('#app', page);
 ```
 
@@ -87,7 +87,13 @@ 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.
+
+Prefer supported props to rebuilding control styles: `_.Button({color:'primary', outline:true, dense:true}, 'Modifica')`. Use `_.Row({gap:'md', tablet:{gap:'lg'}})` with the responsive addon when breakpoint props are required. Read the focused component contract for additional options.
 
 System fonts are the default. Import `jsswift/css/fonts-nunito.css`, `jsswift/css/fonts-material.css`, or `jsswift/tabler` only when required; Material Symbols loads a remote Google font. See [setup](getting-started.md).
 
@@ -123,3 +129,28 @@ Apply focus indicators to every selector through `:is`, rather than placing the
 ```
 
 When MCP is configured, request missing component details with `jsswift_read({id:"component:table", section:"props", keys:["pagination","hideFooter"]})`. `section` supports props, events, methods and slots; omit it for the full document. Inherited props are resolved automatically; unknown keys return an error. This reduces returned text, not the API knowledge needed by the task.
+
+
+## Catalogue surfaces and field styling
+
+Use `_.Kpi({title:'Disponibili', value:9, note:'Con quantità maggiore di zero'})` for dashboard metrics; it already supplies the metric layout. [Additional Kpi options](components/kpi.md).
+
+Table already returns a Card: place it in a structural `_.div`, without another Card around it. Use `hideStatus:true` with an application-owned counter, and `emptyText:'Nessun prodotto trovato'` for a single empty message. When passing a paginated slice, set each data column's `sortable:false` unless the application sorts the full filtered dataset before slicing; built-in sorting sees only supplied rows.
+
+Input's border belongs to its outer control; the native input is transparent. Preserve that transparency: broad rules such as `.filters input {background:white}` can cover the curved border when a surrounding Card supplies a larger radius. Apply page backgrounds to structural containers. Set a field's own `radius` when it should not inherit the surrounding surface radius. Avoid clipping controls with `overflow:hidden`, which can also clip focus indicators.
+
+For taller catalogue fields, set the shared height variable on their application-owned container; do not force a height or background on native `input` and `select` descendants:
+
+```css
+.catalogue-filters {
+  --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;
   }
 }