jsswift 2.0.0 → 2.1.0

package/AI.md

@@ -16,6 +16,7 @@ The installed package exposes this same guide as `AI.md` at its root and through
 | --- | --- | --- |
 | Small page with the six components below | This guide | Implement the supported subset without opening component contracts. |
 | Product CRUD with validation, persistence and focus | [CRUD example](examples/crud.md) | Reuse the example; do not also concatenate Input, Select, Dialog and Table contracts. |
+| jss.config.js, selective runtime, Vite plugin or optional extras | [Configured runtime](configured-runtime.md) (`guide:configured-runtime`) | Follow the existing app configuration; do not also import the complete runtime/CSS. |
 | One missing prop or callback | Map → exact document, or selective MCP read | Read only the needed section; do not search the runtime bundle. |
 | Custom appearance | Supported props below, then one relevant contract | Keep component styles; add CSS for page layout and task-specific visuals. |
 
@@ -23,52 +24,34 @@ The map locates a contract; it does not replace it. Avoid reading all of `ui/com
 
 ## Import, create, mount
 
-Provide `<div id="app"></div>` in HTML and a module entrypoint. With Vite:
+For an existing app, preserve its loading method. With the configured Vite plugin, import `jss:runtime` instead of the two traditional imports below: it includes the configured JavaScript, CSS and extras. Read [configured-runtime.md](configured-runtime.md) for setup and package availability; older installed releases may not expose this tooling.
+
+With Vite, provide `<div id="app"></div>` and a module entrypoint:
 
 ```js
 import 'jsswift';
 import 'jsswift/css/ui-light.css';
 const _ = window._;
-
-const name = _.rod('Prodotto 01');
-const category = _.rod('Casa');
-const nameInput = _.Input({ label: 'Nome prodotto', model: name });
-const categorySelect = _.Select({
-  label: 'Categoria', model: category,
-  options: [{ value: 'Casa', label: 'Casa' }, { value: 'Ufficio', label: 'Ufficio' }]
-});
-const errors = _.div({ role: 'alert' });
-const dialog = _.Dialog({
-  title: 'Modifica prodotto', ariaLabel: 'Modifica prodotto',
-  content: _.div({}, nameInput, categorySelect, errors),
-  closeOnEsc: true, trapFocus: true, autoFocus: true
-});
-const save = _.Button({ color: 'primary', onClick: () => {
-  if (!name.value.trim()) {
-    errors.replaceChildren(_.p('Il nome è obbligatorio.'));
-    return;
-  }
-  errors.replaceChildren();
-  console.log({ name: name.value, category: category.value });
-  dialog.close();
-}}, 'Salva');
-dialog.update({ actions: [
-  _.Button({ onClick: () => dialog.close() }, 'Annulla'), save
-] });
-const edit = _.Button({ onClick: () => dialog.open() }, 'Modifica');
-const table = _.Table({
-  rows: [{ id: 1, name: 'Prodotto 01', price: 10 }], rowKey: 'id',
-  columns: [
-    { key: 'name', label: 'Nome', render: (row, { value }) => _.strong(value) },
-    { key: 'price', label: 'Prezzo', format: value => `${value} EUR` }
-  ],
-  pagination: false, hideFooter: true, hideStatus: true, minTableWidth: 700
-});
-const page = _.Page({}, _.div({}, _.h1('Prodotti'), edit, table));
-_.mount('#app', page);
+const name = _.rod('Prodotto 01'), category = _.rod('Casa');
+const input = _.Input({label:'Nome', required:true, model:name});
+const select = _.Select({label:'Categoria', model:category,
+ options:[{value:'Casa',label:'Casa'},{value:'Ufficio',label:'Ufficio'}]});
+const dialog = _.Dialog({title:'Prodotto', ariaLabel:'Prodotto',
+ content:_.div({}, input, select), trapFocus:true, closeOnEsc:true,
+ onOpen:() => input.focus()});
+dialog.update({actions:[_.Button({onClick:() => {
+ console.log({name:name.value, category:category.value}); dialog.close();
+}}, 'Salva')]});
+const table = _.Table({rows:[{id:1,name:'Prodotto 01'}], rowKey:'id',
+ columns:[{key:'name',label:'Nome',sortable:false,render:(row,ctx) => _.strong(ctx.value)}],
+ pagination:false, hideFooter:true, hideStatus:true, minTableWidth:600});
+_.mount('#app', _.div({}, _.Card({title:'Prodotti'},
+ _.Button({color:'primary',onClick:() => dialog.open()}, 'Modifica')), table));
 ```
 
-This demonstrates composition and validation; saving logs the values. Add application persistence and refresh the table when your task requires them. Prefer `_.rod(initial)` for bidirectional field models: read `name.value`, write `name.value = 'Nuovo nome'`; `model` synchronizes the control. Use `_.signal(initial)` when explicit getter/setter functions suit the state, and `_.useForm()` for structured form validation and errors. This avoids reading private `_input` or `_select` references. Input and Select expose `focus(options?)`; read and write values through the rod model. Use `ariaLabel`, `ariaLabelledBy`, `ariaDescribedBy`, `ariaInvalid` and `required` on the control. Input also accepts `min`, `max`, `step`, `pattern`, `minLength` and `maxLength`.
+This logs values; it does not implement validation or persistence. For product editing use [the executable CRUD example](examples/crud.md) instead of reading forms, overlays or component contracts first.
+
+Prefer `_.rod(initial)` for bidirectional fields: read/write `model.value`. `_.signal(initial)` remains supported. Input/Select expose `focus(options?)`; avoid private `_input`/`_select`. Use `label`, `required`, `ariaLabel`, `ariaLabelledBy`, `ariaDescribedBy`, `ariaInvalid`, and `error: _.rod('')`. Input accepts `min`, `max`, `step`, `pattern`, `minLength`, `maxLength`.
 
 ## Exact callback arguments
 
@@ -87,67 +70,49 @@ Dialog returns an API object, not a node to mount: `open(overrides?)`, `close()`
 
 ## Existing CSS and optional assets
 
-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.
+The light import includes base tokens, colors, component styles, dense/outline and unprefixed layout utilities. Add `jsswift/css/responsive.css` **after** it for tablet/pc/desktop or legacy breakpoint classes. `ui.css` is the complete alternative; do not import full and light together. Component-specific mobile rules remain in light.
 
-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 public props to rebuilding controls: `_.Button({color:'primary',outline:true,dense:true}, 'Modifica')`. For breakpoint props use `_.Row({gap:'md',tablet:{gap:'lg'}})` with the responsive addon. Consult common props only for an additional inherited API.
 
-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.
+Classes and theme variables use `jss-`; migrate old `cms-` overrides. Fonts are system defaults. Import `jsswift/css/fonts-nunito.css`, `fonts-material.css`, or `jsswift/tabler` only when required; Material Symbols downloads a remote font.
 
-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).
+With `jss:runtime`, choose assets in `jss.config.js` through `extras` instead of adding these imports. `ui: {all:true}` includes the complete UI and services. For a selective build, use `ui: {components:['Button','Input','Select','Card','Table'],services:['Dialog']}` for the example above; dependencies are automatic. Services also support Notify, Loading and Form (useForm). Add every component used through dynamic lookup explicitly. `responsive:false` retains base utilities and component mobile CSS but excludes breakpoint utilities; use true for tablet/pc props. Shared and complex CSS rules are retained conservatively.
 
 ## Accessibility and verification
 
-Input and Select use a string `label` as their default accessible name; use `ariaLabel` for a different name or `ariaLabelledBy` for an external label. Verify rendered names when using custom label nodes. Set Dialog `ariaLabel` explicitly. Dialog normally restores the original focus element; if the app replaces that element, restore focus to its current replacement using a stable application identifier in `onClose`. Do not claim these behaviors were tested from a build alone.
-
-Run the app's build after implementation and check values, validation, dialog keyboard behavior, and persistence when required. Start one development server on an explicit available port; with Vite use `npm run dev -- --port <port> --strictPort`. Report checks actually performed.
-
-## Read only what the task needs
-
-- Exact APIs: [Input](components/input.md), [Select](components/select.md), [Button](components/btn.md), [Card](components/card.md), [Table](components/table.md), [Dialog](components/dialog.md).
-- Extra behavior: [forms](ui/forms.md), [reactivity](reactivity.md), [layout](ui/layout-and-responsive.md), [overlays](ui/data-feedback-overlays.md).
-- Other components: [index](components/README.md). MCP: read `guide:AI`, then search only for additional features.
+String labels name Input/Select; set Dialog `ariaLabel`. Field errors are associated automatically. Dialog preserves focus assigned in `onOpen`. If rendering replaces the trigger, restore its current replacement in `onClose`; see CRUD.
 
-For a complete application flow, read [the compact CRUD example](examples/crud.md) only when the task needs editing, validation, persistence and focus restoration together.
-
-## Verification evidence and environment
-
-Check whether browser tooling and server permissions are available before launching checks. Run Git commands only in a Git worktree; for example test `git rev-parse --is-inside-work-tree` before requesting a diff. Keep build, pure-logic tests and server startup results separate. An HTTP response confirms a reachable server, not that your startup command succeeded or that browser interactions work. Report environment failures separately from application failures. Test the implemented functions rather than rebuilding equivalent data inside an assertion.
-
-Dialog autofocus preserves focus assigned inside `onOpen`; verify initial focus after the deferred autofocus has run, separately from validation focus and return focus. Record each check separately: initial field, Tab/Shift+Tab containment, Escape, and return to the current trigger. A focus-trap result does not prove initial focus. Field messages are associated with Input/Select through `aria-describedby` automatically.
-
-## Focus CSS and targeted reads
-
-Apply focus indicators to every selector through `:is`, rather than placing the pseudo-class on only the final selector in a comma-separated list:
+Build is not a browser test. Verify initial focus after deferred autofocus, Tab/Shift+Tab containment, Escape, return focus, validation, persistence, mobile overflow and borders separately. Report unverified checks. Use this custom focus CSS:
 
 ```css
-:is(button, a, input, select, [tabindex]):focus-visible {
+:is(button,a,input,select,[tabindex]):focus-visible {
   outline: 3px solid #2563eb;
   outline-offset: 3px;
 }
 ```
 
-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.
+Keep build, logic assertions and server startup in separate commands. Check tooling/permissions first; use an explicit Vite port with `--strictPort`. Environment failures are not application failures; HTTP alone does not verify interactions.
+
+## Additional APIs only
 
+Use the map for the missing API, then read its focused contract. Button is `components/btn.md` (`button.md` redirects). With configured MCP: `jsswift_read({id:"component:table",section:"props",keys:["pagination","hideFooter"]})`; sections include props/events/methods/slots and resolve inherited props. No MCP setup is required for local documentation.
 
 ## 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).
+`_.Kpi({title:'Disponibili',value:9,note:'Con quantità maggiore di zero'})` supplies dashboard metrics. Update KPI when inventory changes, not on each filter; see CRUD. Read the Kpi contract only for additional options.
 
-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.
+Table returns a Card; use a structural container. Card props include `shadow:'none'`, `radius:'12px'`, and `padding`. For a fixed light surface: `style:{background:'#fff'}`, `tableStyle:{background:'#fff','--set-color-1':'#fff'}`. This does not provide automatic dark theming.
 
-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 external pagination use `pagination:false`, `hideFooter:true`, `hideStatus:true`, `emptyText:'Nessun prodotto trovato'`, `minTableWidth:600`. Set each data column's `sortable:false`: built-in sorting sees only the supplied page. Sort the full filtered dataset before slicing if needed.
 
-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:
+Input's native input is transparent; preserve that background to keep the outer curved border visible. Set height on an application container:
 
 ```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.
+ Use the field's `radius` prop if it should not inherit a surface radius. Avoid clipping controls/focus indicators with overflow:hidden. Check borders, labels, errors and focus at desktop/mobile sizes.
 
 ## Theme and lifecycle essentials
 

package/README.md

@@ -5,3 +5,5 @@
 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-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.
+
+For configured builds, see [configured-runtime.md](dist/documentions/configured-runtime.md). Import `jssRuntime` from `jsswift/vite` in Vite config and `jss:runtime` in the application entry. Or use `npx jss-build` to generate standalone assets. Set `ui.all: true` for the complete UI, or list components/services for a selective build. Tooling requires Node.js 20.19.x or >=22.12.0; Vite is optional for standalone builds.

package/dist/build/build-configured-runtime.d.mts

@@ -0,0 +1,29 @@
+export interface RuntimeConfig {
+  ui?: {
+    all?: boolean;
+    responsive?: boolean;
+    components?: string[];
+    services?: Array<'Dialog' | 'Notify' | 'Loading' | 'Form'>;
+  };
+  extras?: Array<'material-symbols-outlined' | 'nunito-font' | 'tabler'>;
+}
+export interface NormalizedRuntimeConfig {
+  ui: { all: boolean; responsive: boolean; components: string[]; services: string[] };
+  extras: string[];
+}
+export interface RuntimeBuildReport {
+  config: NormalizedRuntimeConfig;
+  javascript: string[];
+  css: string[];
+  extras: string[];
+  selectiveComponents: boolean;
+  components: string[] | 'all';
+  services: string[] | 'all';
+  reasons: Record<string, string>;
+  removedSelectors: number;
+  runtimeBytes: number;
+  cssBytes: number;
+}
+export declare const extras: Record<string, string | null>;
+export declare function validateConfig(config: RuntimeConfig): NormalizedRuntimeConfig;
+export declare function buildConfiguredRuntime(config: RuntimeConfig, output: string, sourceRoot?: string): Promise<RuntimeBuildReport>;

package/dist/build/build-configured-runtime.mjs

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { pathToFileURL, fileURLToPath } from 'node:url';
+import { transform } from 'esbuild';
+import { selectUI, selectComponentCSS } from './select-ui.mjs';
+import { runtimeLayout } from './runtime-layout.mjs';
+
+const root = fileURLToPath(new URL('../', import.meta.url));
+export const extras = {
+  'material-symbols-outlined': 'fonts-material.css',
+  'nunito-font': 'fonts-nunito.css',
+  tabler: null,
+};
+
+export function validateConfig(config) {
+  if (!config || typeof config !== 'object' || Array.isArray(config)) throw new Error('Expected a configuration object');
+  for (const key of Object.keys(config)) if (!['ui', 'extras'].includes(key)) throw new Error(`Unknown config option: ${key}`);
+  const ui = config.ui ?? { all: true };
+  if (!ui || typeof ui !== 'object' || Array.isArray(ui)) throw new Error('ui must be an object');
+  for (const key of Object.keys(ui)) if (!['all', 'responsive', 'components', 'services'].includes(key)) throw new Error(`Unknown ui option: ${key}`);
+  if (ui.all !== undefined && typeof ui.all !== 'boolean') throw new Error('ui.all must be boolean');
+  if (ui.responsive !== undefined && typeof ui.responsive !== 'boolean') throw new Error('ui.responsive must be boolean');
+  for (const key of ['components', 'services']) {
+    if (ui[key] !== undefined && (!Array.isArray(ui[key]) || ui[key].some(name => typeof name !== 'string' || !name))) throw new Error(`ui.${key} must be an array of names`);
+  }
+  const all = ui.all ?? (ui.components === undefined && ui.services === undefined);
+  if (all && (ui.components?.length || ui.services?.length)) throw new Error('Use ui.all: true alone or selective components/services');
+  const selected = config.extras ?? [];
+  if (!Array.isArray(selected)) throw new Error('extras must be an array');
+  for (const name of selected) if (!Object.hasOwn(extras, name)) throw new Error(`Unknown extra: ${name}`);
+  return { ui: { all, responsive: ui.responsive ?? true, components: [...new Set(ui.components ?? [])], services: [...new Set(ui.services ?? [])] }, extras: [...new Set(selected)] };
+}
+
+export async function buildConfiguredRuntime(config, output, sourceRoot = root) {
+  const normalized = validateConfig(config);
+  const layout = runtimeLayout(sourceRoot);
+  const selective = !normalized.ui.all && (normalized.ui.components.length || normalized.ui.services.length);
+  const selection = selective ? await selectUI(sourceRoot, normalized.ui.components, normalized.ui.services) : null;
+  // A dedicated empty directory prevents stale opt-in assets and accidental overwrite.
+  await fs.mkdir(output, { recursive: true });
+  if ((await fs.readdir(output)).length) throw new Error('Output directory must be empty; choose a new application output directory');
+  const inputs = [path.relative(sourceRoot, layout.core)];
+  if (normalized.ui.all) inputs.push(path.relative(sourceRoot, layout.ui));
+  const chunks = await Promise.all(inputs.map(file => fs.readFile(path.join(sourceRoot, file), 'utf8')));
+  if (selection) { chunks.push(selection.code); inputs.push(...selection.sources); }
+  if (normalized.extras.includes('tabler')) {
+    chunks.push('JSswift.config ||= {}; JSswift.config.iconSpriteUrl = new URL("./img/svg/tabler-icons-sprite.svg", import.meta.url).href;');
+    await fs.mkdir(path.join(output, 'img/svg'), { recursive: true });
+    await fs.copyFile(path.join(layout.assets, 'img/svg/tabler-icons-sprite.svg'), path.join(output, 'img/svg/tabler-icons-sprite.svg'));
+  }
+  const runtime = await transform(chunks.join('\n'), { minify: true, target: 'es2018', format: 'esm' });
+  await fs.writeFile(path.join(output, 'runtime.js'), runtime.code);
+  const css = [];
+  if (normalized.ui.all) css.push(normalized.ui.responsive ? 'ui.css' : 'ui-light.css');
+  else if (selection) css.push('base.css', 'animation.css', 'ui-components.css', normalized.ui.responsive ? 'responsive.css' : 'responsive-base.css');
+  else css.push('base.css');
+  for (const name of normalized.extras) if (extras[name]) css.push(extras[name]);
+  await fs.mkdir(path.join(output, 'css'), { recursive: true });
+  let removedSelectors = 0;
+  const cssChunks = await Promise.all(css.map(async file => {
+    const content = await fs.readFile(path.join(layout.assets, 'css', file), 'utf8');
+    if (selection && file === 'ui-components.css') {
+      const result = selectComponentCSS(content, selection.components, selection.services);
+      removedSelectors = result.removedSelectors;
+      return result.css;
+    }
+    return content;
+  }));
+  const stylesheet = cssChunks.join('\n');
+  await fs.writeFile(path.join(output, 'css/runtime.css'), stylesheet);
+  if (normalized.extras.includes('nunito-font')) await fs.cp(path.join(layout.assets, 'fonts'), path.join(output, 'fonts'), { recursive: true });
+  const report = { config: normalized, javascript: inputs, css, extras: normalized.extras, selectiveComponents: !!selection, components: selection?.components ?? (normalized.ui.all ? 'all' : []), services: selection?.services ?? (normalized.ui.all ? 'all' : []), reasons: selection?.reasons ?? {}, removedSelectors, runtimeBytes: Buffer.byteLength(runtime.code), cssBytes: Buffer.byteLength(stylesheet) };
+  await fs.writeFile(path.join(output, 'build-report.json'), JSON.stringify(report, null, 2) + '\n');
+  return report;
+}
+
+// npm binaries are symlinks; compare the real entrypoint rather than .bin path.
+const invokedPath = process.argv[1] ? await fs.realpath(process.argv[1]).catch(() => null) : null;
+if (invokedPath === fileURLToPath(import.meta.url)) {
+  try {
+    if (process.argv[2] === '--help' || process.argv[2] === '-h') {
+      console.log('Usage: jss-build [config-path] [output-directory]\nDefaults: jss.config.js and dist-runtime (must be empty)');
+    } else {
+      const configPath = path.resolve(process.argv[2] ?? 'jss.config.js');
+      const output = path.resolve(process.argv[3] ?? 'dist-runtime');
+      const config = (await import(pathToFileURL(configPath).href)).default;
+      const report = await buildConfiguredRuntime(config, output);
+      console.log(`Configured runtime: ${output} (${report.runtimeBytes} JS bytes); report: build-report.json`);
+    }
+  } catch (error) { console.error(error.message); process.exitCode = 1; }
+}

package/dist/build/runtime-layout.mjs

@@ -0,0 +1,13 @@
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+
+// The same tooling runs from the checkout and from jsswift/dist/build.
+export function runtimeLayout(root) {
+  const checkout = existsSync(path.join(root, 'packages/ui/src/modules.json'));
+  return {
+    core: path.join(root, checkout ? 'packages/core/dist/cms.js' : 'cms.js'),
+    ui: path.join(root, checkout ? 'packages/ui/dist/ui.js' : 'ui.js'),
+    assets: path.join(root, checkout ? 'packages/ui/dist' : '.'),
+    source: path.join(root, checkout ? 'packages/ui/src' : 'ui-src'),
+  };
+}

package/dist/build/select-ui.mjs

@@ -0,0 +1,167 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { parseAst } from 'rolldown/parseAst';
+import postcss from 'postcss';
+import { runtimeLayout } from './runtime-layout.mjs';
+
+const services = {
+  Notify: ['UI.Notify', 'JSswift.services.notify', 'JSswift.notify'],
+  Dialog: ['UI.Dialog', 'JSswift.dialog'],
+  Loading: ['JSswift.loading'],
+  Form: ['JSswift.useForm'],
+};
+
+function member(node) {
+  if (node?.type === 'ChainExpression') return member(node.expression);
+  if (node?.type === 'Identifier') return node.name;
+  if (node?.type !== 'MemberExpression') return null;
+  const object = member(node.object);
+  const property = node.computed ? (node.property.type === 'Literal' ? node.property.value : null) : node.property.name;
+  if (!object || typeof property !== 'string') return null;
+  return `${object}.${property}`;
+}
+
+function walk(node, visit, parent = null, key = null) {
+  if (!node || typeof node !== 'object') return;
+  if (node.type) visit(node, parent, key);
+  for (const [name, value] of Object.entries(node)) {
+    if (['start', 'end', 'loc', 'range'].includes(name)) continue;
+    if (Array.isArray(value)) for (const child of value) walk(child, visit, node, name);
+    else if (value && typeof value === 'object') walk(value, visit, node, name);
+  }
+}
+
+function canonical(name, components) {
+  name = name.replace(/^app\./, 'JSswift.');
+  // UI aliases exist on both public namespaces. Slot helpers are separate.
+  const match = /^(?:UI|JSswift\.ui|_)\.([^.]+)(.*)$/.exec(name);
+  if (match && components.has(match[1])) return `UI.${match[1] === 'Button' ? 'Btn' : match[1]}${match[2]}`;
+  return name;
+}
+
+export async function selectUI(root, requested, requestedServices) {
+  const directory = runtimeLayout(root).source;
+  const manifest = JSON.parse(await fs.readFile(path.join(directory, 'modules.json'), 'utf8'));
+  const files = await Promise.all(manifest.buildOrder.map(async file => ({ file, text: await fs.readFile(path.join(directory, file), 'utf8') })));
+  let offset = 0;
+  for (const file of files) { file.start = offset; offset += file.text.length + 1; file.end = offset; }
+  const source = files.map(file => file.text).join('\n');
+  const program = parseAst(source);
+  const call = program.body[0]?.expression;
+  if (program.body.length !== 1 || call?.type !== 'CallExpression' || !call.callee.body?.body) throw new Error('Unexpected UI module structure; update dependency extraction');
+  const nodes = call.callee.body.body;
+  const components = new Set();
+  for (const node of nodes) {
+    const lhs = node.expression?.type === 'AssignmentExpression' ? member(node.expression.left) : null;
+    if (lhs && /^UI\.[^.]+$/.test(lhs)) components.add(lhs.slice(3));
+  }
+  for (const name of requested) if (!components.has(name)) throw new Error(`Unknown UI component: ${name}`);
+  for (const name of requestedServices) if (!Object.hasOwn(services, name)) throw new Error(`Unknown UI service: ${name}`);
+  const definitions = new Map();
+  const records = nodes.map((node, index) => {
+    const file = files.find(file => node.start >= file.start && node.start < file.end).file;
+    const defined = [];
+    if (node.type === 'VariableDeclaration') for (const declaration of node.declarations) {
+      walk(declaration.id, child => { if (child.type === 'Identifier') defined.push(child.name); });
+    }
+    if (node.type === 'FunctionDeclaration') defined.push(node.id.name);
+    if (node.expression?.type === 'AssignmentExpression') {
+      const lhs = member(node.expression.left);
+      if (!lhs) throw new Error(`Unsupported UI assignment in ${file}`);
+      defined.push(canonical(lhs, components));
+    }
+    for (const name of defined) {
+      if (!definitions.has(name)) definitions.set(name, []);
+      definitions.get(name).push(index);
+    }
+    const references = new Set();
+    walk(node, (child, parent, key) => {
+      if (child.type === 'MemberExpression') {
+        const name = member(child);
+        if (name) references.add(canonical(name, components));
+      }
+      if (child.type === 'Identifier') {
+        if (parent?.type === 'MemberExpression' && key === 'property' && !parent.computed) return;
+        if ((parent?.type === 'Property' || parent?.type === 'MethodDefinition') && key === 'key' && !parent.computed) return;
+        references.add(child.name);
+      }
+    });
+    return { index, node, file, defined, references };
+  });
+  const included = new Set();
+  const reasons = {};
+  const include = (index, reason) => {
+    if (included.has(index)) return;
+    included.add(index);
+    const record = records[index];
+    for (const name of record.defined) reasons[name] ??= reason;
+    for (const reference of record.references) {
+      for (const dependency of definitions.get(reference) ?? []) include(dependency, record.defined[0] ?? `initialization:${record.file}`);
+    }
+    // A selected component/service includes its public methods and aliases.
+    for (const name of record.defined) {
+      if (/^UI\.[^.]+$/.test(name) || /^JSswift\.(dialog|loading|notify)$/.test(name) || name === 'JSswift.services.notify') {
+        for (const [child, indices] of definitions) if (child.startsWith(name + '.')) for (const dependency of indices) include(dependency, name);
+      }
+    }
+  };
+  // Preserve initialization order and rod-path hooks. Helpers otherwise follow references.
+  for (const record of records) if ((record.file === '00-bootstrap.js' && !record.defined.includes('JSswift.services.notify')) || record.defined.includes('JSswift.omit')) include(record.index, 'shared UI initialization');
+  const roots = [...requested.map(name => `UI.${name}`), ...requestedServices.flatMap(name => services[name])];
+  for (const root of roots) for (const index of definitions.get(canonical(root, components)) ?? []) include(index, 'requested');
+  const selectedRecords = records.filter(record => included.has(record.index));
+  const selectedComponents = [...components].filter(name => definitions.get(canonical(`UI.${name}`, components))?.some(index => included.has(index)));
+  const selectedServices = Object.keys(services).filter(name => services[name].every(root => definitions.get(canonical(root, components))?.some(index => included.has(index))));
+  return {
+    code: `(function initJSswiftUI(app) {\n${selectedRecords.map(record => source.slice(record.node.start, record.node.end)).join('\n')}\n})(JSswift);`,
+    components: selectedComponents,
+    services: selectedServices,
+    sources: [...new Set(selectedRecords.map(record => path.relative(root, path.join(directory, record.file))))],
+    reasons,
+  };
+}
+
+// Only rules with explicit component ownership are removed. Shared tokens,
+// utilities, native styles and unknown selectors are retained conservatively.
+const cssOwners = {
+  btn: ['Btn', 'Button'], card: ['Card', 'cardHeader', 'cardBody', 'cardFooter'],
+  input: ['Input', 'InputRaw', 'Textarea', 'FormField'], field: ['FormField'],
+  textarea: ['Textarea'], select: ['Select'], search: ['Search'], upload: ['Upload'],
+  icon: ['Icon'], badge: ['Badge'], avatar: ['Avatar'], chip: ['Chip'],
+  list: ['List', 'Item'], item: ['Item'], separator: ['Separator'], tooltip: ['Tooltip'],
+  checkbox: ['Checkbox'], radio: ['Radio'], toggle: ['Toggle'], slider: ['Slider'], rating: ['Rating'],
+  date: ['Date', 'Calendar', 'Datepicker'], calendar: ['Date', 'Calendar'], time: ['Time'],
+  tabs: ['Tabs', 'RouteTab'], tab: ['Tabs', 'RouteTab', 'TabPanel'], breadcrumbs: ['Breadcrumbs'], breadcrumb: ['Breadcrumbs'],
+  pagination: ['Pagination'], spinner: ['Spinner'], progress: ['Progress'], 'loading-bar': ['LoadingBar'],
+  banner: ['Banner'], alert: ['Alert'], table: ['Table'], menu: ['Menu'], popover: ['Popover'],
+  dialog: ['Dialog'], notify: ['Notify'], toast: ['Notify'], loading: ['$Loading'],
+  header: ['Header', 'Layout'], drawer: ['Drawer', 'Layout'], footer: ['Footer', 'Layout'],
+  page: ['Page', 'Layout'], 'app-shell': ['AppShell'], parallax: ['Parallax'],
+  toolbar: ['Toolbar'], grid: ['Grid', 'GridCol'], container: ['Container'], form: ['Form'], kpi: ['Kpi'],
+};
+
+export function selectComponentCSS(css, components, selectedServices = []) {
+  const selected = new Set([...components, ...selectedServices.map(name => `$${name}`)]);
+  const prefixes = Object.keys(cssOwners).sort((a, b) => b.length - a.length);
+  const ast = postcss.parse(css);
+  let removedSelectors = 0;
+  ast.walkRules(rule => {
+    if (rule.parent.type === 'atrule' && /keyframes$/i.test(rule.parent.name)) return;
+    const selectors = postcss.list.comma(rule.selector).filter(selector => {
+      // Functional selector lists can mix owners; preserve them rather than
+      // risk changing :is/:not/:has semantics without a selector AST.
+      if (/:(?:is|where|not|has)\(/.test(selector)) return true;
+      const classes = [...selector.matchAll(/\.jss-([a-zA-Z0-9_-]+)/g)].map(match => match[1]);
+      const omitted = classes.some(name => {
+        const prefix = prefixes.find(prefix => name === prefix || name.startsWith(prefix + '-'));
+        return prefix && !cssOwners[prefix].some(owner => selected.has(owner));
+      });
+      if (omitted) removedSelectors++;
+      return !omitted;
+    });
+    if (selectors.length) rule.selector = selectors.join(',\n');
+    else rule.remove();
+  });
+  ast.walkAtRules(rule => { if (rule.nodes && !rule.nodes.length) rule.remove(); });
+  return { css: ast.toString(), removedSelectors };
+}

package/dist/build/vite-jss.d.mts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function jssRuntime(options?: { config?: string; sourceRoot?: string }): Plugin;

package/dist/build/vite-jss.mjs

@@ -0,0 +1,73 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { validateConfig, extras } from './build-configured-runtime.mjs';
+import { selectUI, selectComponentCSS } from './select-ui.mjs';
+import { runtimeLayout } from './runtime-layout.mjs';
+
+const frameworkRoot = fileURLToPath(new URL('../', import.meta.url));
+const runtimeId = '\0jss:runtime';
+const cssId = '\0jss:selected.css';
+
+export function jssRuntime(options = {}) {
+  const configPath = path.resolve(options.config ?? 'jss.config.js');
+  const sourceRoot = options.sourceRoot ?? frameworkRoot;
+  const layout = runtimeLayout(sourceRoot);
+  let cached;
+  let used = false;
+  const prepare = () => cached ??= (async () => {
+    const config = validateConfig((await import(pathToFileURL(configPath).href + `?mtime=${(await fs.stat(configPath)).mtimeMs}`)).default);
+    const selective = !config.ui.all && (config.ui.components.length || config.ui.services.length);
+    const selection = selective ? await selectUI(sourceRoot, config.ui.components, config.ui.services) : null;
+    return { config, selection };
+  })();
+  return {
+    name: 'jss-configured-runtime',
+    resolveId(id) {
+      if (id === 'jss:runtime') return runtimeId;
+      if (id === 'jss:selected.css') return cssId;
+    },
+    async load(id) {
+      if (![runtimeId, cssId].includes(id)) return;
+      this.addWatchFile(configPath);
+      const { config, selection } = await prepare();
+      const asset = file => path.join(layout.assets, file);
+      if (id === cssId) {
+        const filename = asset('css/ui-components.css');
+        this.addWatchFile(filename);
+        return selectComponentCSS(await fs.readFile(filename, 'utf8'), selection.components, selection.services).css;
+      }
+      used = true;
+      const imports = [`import ${JSON.stringify(layout.core)};`];
+      const css = config.ui.all ? [config.ui.responsive ? 'ui.css' : 'ui-light.css'] : selection ? ['base.css', 'animation.css'] : ['base.css'];
+      for (const file of css) imports.push(`import ${JSON.stringify(asset('css/' + file))};`);
+      if (selection) {
+        imports.push('import "jss:selected.css";');
+        imports.push(`import ${JSON.stringify(asset('css/' + (config.ui.responsive ? 'responsive.css' : 'responsive-base.css')))};`);
+        for (const file of selection.sources) this.addWatchFile(path.join(sourceRoot, file));
+      } else if (config.ui.all) imports.push(`import ${JSON.stringify(asset('ui.js'))};`);
+      for (const extra of config.extras) {
+        if (extras[extra]) imports.push(`import ${JSON.stringify(asset('css/' + extras[extra]))};`);
+        else if (extra === 'tabler') imports.push(`import spriteUrl from ${JSON.stringify(asset('img/svg/tabler-icons-sprite.svg') + '?url')};`);
+      }
+      return imports.join('\n') + '\n' + (selection?.code ?? '') + (config.extras.includes('tabler') ? '\nJSswift.config ||= {}; JSswift.config.iconSpriteUrl = spriteUrl;' : '');
+    },
+    configureServer(server) {
+      server.watcher.add(configPath);
+      const onChange = file => {
+        if (file === configPath || file.startsWith(layout.source + path.sep)) {
+          cached = undefined;
+          void server.restart();
+        }
+      };
+      server.watcher.on('change', onChange);
+      server.httpServer?.once('close', () => server.watcher.off('change', onChange));
+    },
+    watchChange() { cached = undefined; },
+    async generateBundle() {
+      if (!used) return;
+      const { config, selection } = await prepare();
+      this.emitFile({ type: 'asset', fileName: 'jss-build-report.json', source: JSON.stringify({ config, components: selection?.components ?? (config.ui.all ? 'all' : []), services: selection?.services ?? (config.ui.all ? 'all' : []), reasons: selection?.reasons ?? {} }, null, 2) });
+    },
+  };
+}