@blukavantui/community 1.0.1 → 1.2.0

package/edition.json

@@ -1,6 +1,6 @@
 {
   "edition": "Community",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "license": "BluKavantUI Community Free Use, Official Distribution Licence 1.2",
   "distribution": "Official @blukavantui/community npm package, official BluKavantUI Web downloads and official OutSystems Forge listing when published",
   "redistribution": "No republishing, mirroring or resale of the reusable components, including modified copies; see LICENSE.txt for permitted private work, application delivery and third-party rights.",
@@ -60,7 +60,19 @@
     "HeroSection",
     "SplitSection",
     "LogoCloud",
-    "BluGridBasic"
+    "BluGridBasic",
+    "Checkbox",
+    "TextInput",
+    "TextArea",
+    "RadioButton",
+    "RadioGroup",
+    "Switch",
+    "Select",
+    "FormField",
+    "Columns2",
+    "Columns3",
+    "Columns4",
+    "Table"
   ],
   "gridFeatures": [
     "client-side rows",
@@ -118,7 +130,10 @@
       "Splitter",
       "AppLayout",
       "PageLayout",
-      "ShapeMask"
+      "ShapeMask",
+      "Columns2",
+      "Columns3",
+      "Columns4"
     ],
     "BluKavantUi_Community_Inputs": [
       "TreeSelect",
@@ -128,7 +143,15 @@
       "DatePicker",
       "TimePicker",
       "DateTimePicker",
-      "DateRangePicker"
+      "DateRangePicker",
+      "Checkbox",
+      "TextInput",
+      "TextArea",
+      "RadioButton",
+      "RadioGroup",
+      "Switch",
+      "Select",
+      "FormField"
     ],
     "BluKavantUi_Community_Feedback": [
       "CommandPalette",
@@ -151,7 +174,8 @@
       "Descriptions",
       "Sparkline",
       "DashboardCanvas",
-      "DashboardPanel"
+      "DashboardPanel",
+      "Table"
     ],
     "BluKavantUi_Community_Content": [
       "VideoPlayer",
@@ -240,6 +264,19 @@
     "FontProvider": "font-provider",
     "ShapeMask": "shape-mask",
     "ChipGroup": "chip-group",
-    "BluGridBasic": "grid-basic"
-  }
+    "BluGridBasic": "grid-basic",
+    "Checkbox": "checkbox",
+    "TextInput": "text-input",
+    "TextArea": "text-area",
+    "RadioButton": "radio-button",
+    "RadioGroup": "radio-group",
+    "Switch": "switch",
+    "Select": "select",
+    "FormField": "form-field",
+    "Columns2": "columns2",
+    "Columns3": "columns3",
+    "Columns4": "columns4",
+    "Table": "table"
+  },
+  "nativeVerification": "18 new Blocks verified in a compiled OutSystems development consumer on 2026-10-24. Native packages are distributed separately."
 }

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@blukavantui/community",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@blukavantui/community",
-      "version": "1.0.1",
+      "version": "1.2.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "ag-grid-community": "36.2.0"

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "@blukavantui/community",
-  "version": "1.0.1",
-  "description": "BluKavantUI Community: 55 components for Web and OutSystems; ten advanced components are Pro.",
+  "version": "1.2.0",
+  "description": "BluKavantUI Community: 67 Web components. OutSystems integration available separately.",
   "homepage": "https://blukavantui.blutekmedia.com/community",
   "bugs": {
     "url": "https://blutekmedia.com/contact"
   },
-  "author": {
-    "name": "BluTek Media",
-    "url": "https://blutekmedia.com"
-  },
+  "author": "Blutek Media",
   "keywords": [
     "blukavantui",
     "typescript",
@@ -352,7 +349,95 @@
       "import": "./dist/content.js"
     },
     "./content.css": "./dist/content.css",
-    "./marketing-template-layout.css": "./dist/marketing-template-layout.css"
+    "./marketing-template-layout.css": "./dist/marketing-template-layout.css",
+    "./checkbox": {
+      "types": "./dist/checkbox.d.ts",
+      "import": "./dist/checkbox.js"
+    },
+    "./checkbox.css": "./dist/checkbox.css",
+    "./text-input": {
+      "types": "./dist/text-input.d.ts",
+      "import": "./dist/text-input.js"
+    },
+    "./text-input.css": "./dist/text-input.css",
+    "./text-area": {
+      "types": "./dist/text-area.d.ts",
+      "import": "./dist/text-area.js"
+    },
+    "./text-area.css": "./dist/text-area.css",
+    "./radio-button": {
+      "types": "./dist/radio-button.d.ts",
+      "import": "./dist/radio-button.js"
+    },
+    "./radio-button.css": "./dist/radio-button.css",
+    "./radio-group": {
+      "types": "./dist/radio-group.d.ts",
+      "import": "./dist/radio-group.js"
+    },
+    "./radio-group.css": "./dist/radio-group.css",
+    "./switch": {
+      "types": "./dist/switch.d.ts",
+      "import": "./dist/switch.js"
+    },
+    "./switch.css": "./dist/switch.css",
+    "./select": {
+      "types": "./dist/select.d.ts",
+      "import": "./dist/select.js"
+    },
+    "./select.css": "./dist/select.css",
+    "./form-field": {
+      "types": "./dist/form-field.d.ts",
+      "import": "./dist/form-field.js"
+    },
+    "./form-field.css": "./dist/form-field.css",
+    "./columns2": {
+      "types": "./dist/columns2.d.ts",
+      "import": "./dist/columns2.js"
+    },
+    "./columns2.css": "./dist/columns2.css",
+    "./columns3": {
+      "types": "./dist/columns3.d.ts",
+      "import": "./dist/columns3.js"
+    },
+    "./columns3.css": "./dist/columns3.css",
+    "./columns4": {
+      "types": "./dist/columns4.d.ts",
+      "import": "./dist/columns4.js"
+    },
+    "./columns4.css": "./dist/columns4.css",
+    "./table": {
+      "types": "./dist/table.d.ts",
+      "import": "./dist/table.js"
+    },
+    "./table.css": "./dist/table.css",
+    "./form-layout": {
+      "types": "./dist/form-layout.d.ts",
+      "import": "./dist/form-layout.js"
+    },
+    "./form-layout.css": "./dist/form-layout.css",
+    "./motion": {
+      "types": "./dist/motion.d.ts",
+      "import": "./dist/motion.js"
+    },
+    "./motion.css": "./dist/motion.css",
+    "./component-motion": {
+      "types": "./dist/component-motion.d.ts",
+      "import": "./dist/component-motion.js"
+    },
+    "./data-motion": {
+      "types": "./dist/data-motion.d.ts",
+      "import": "./dist/data-motion.js"
+    },
+    "./motion/settings": {
+      "types": "./dist/motion-settings.d.ts",
+      "import": "./dist/motion-settings.js"
+    },
+    "./motion/enhancers": {
+      "types": "./dist/motion-enhancers.d.ts",
+      "import": "./dist/motion-enhancers.js"
+    },
+    "./component-motion.css": "./dist/component-motion.css",
+    "./data-motion.css": "./dist/data-motion.css"
   },
   "files": [
     "dist",
@@ -368,19 +453,26 @@
     "test",
     "npm-shrinkwrap.json",
     "docs/PUBLISHING.md",
-    "assets"
+    "assets",
+    "draft-components.json",
+    "docs/FORM-LAYOUT-ESSENTIALS.md",
+    "scripts/build-motion-css.mjs",
+    "scripts/build-motion-styles.mjs",
+    "scripts/motion-entries.mjs"
   ],
   "sideEffects": [
     "**/*.css",
     "./src/theme-runtime.ts",
-    "./dist/theme.js"
+    "./dist/theme.js",
+    "./dist/chunk-*.js"
   ],
   "scripts": {
     "build": "node scripts/build.mjs",
     "test": "node --test test/*.test.mjs",
     "check": "tsc --noEmit",
     "prepack": "npm run check && npm run build && npm test",
-    "verify:package": "node scripts/verify-package.mjs"
+    "verify:package": "node scripts/verify-package.mjs",
+    "preview:essentials": "node scripts/preview-essentials.mjs"
   },
   "dependencies": {
     "ag-grid-community": "36.2.0"

package/scripts/build-motion-css.mjs

@@ -0,0 +1,36 @@
+/** Web-only utility generation from the same presets as WAAPI. Does not touch native/release artifacts. */
+import { build } from 'esbuild';
+import { readFile, writeFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+const root = fileURLToPath(new URL('../', import.meta.url));
+const result = await build({ absWorkingDir: root, entryPoints: ['src/motion/effects.ts'], bundle: true, format: 'esm', platform: 'node', write: false });
+const { motionEffects, motionEasings, motionFrames, motionClass, motionEasingClass, motionOrigins } = await import('data:text/javascript;base64,' + Buffer.from(result.outputFiles[0].text).toString('base64'));
+const lines = ['/* Generated by scripts/build-motion-css.mjs. Edit src/motion/effects.ts, then regenerate. */'];
+for (const effect of motionEffects) {
+  for (const phase of ['enter', 'exit']) {
+    const name = motionClass(effect, phase);
+    const aliases = effect === 'fade' ? [`.blu-motion-fade-${phase === 'enter' ? 'in' : 'out'}`]
+      : phase === 'enter' && effect === 'slide-up' ? ['.blu-motion-slide-up']
+      : phase === 'enter' && effect === 'zoom-in' ? ['.blu-motion-scale-in'] : [];
+    lines.push([`.${name}`, ...aliases].join(', ') + ` { animation: ${name} var(--blu-motion-duration) var(--blu-motion-ease) var(--blu-motion-delay) both; }`);
+    const frames = motionFrames(effect, phase, 'var(--blu-motion-distance)');
+    lines.push(`@keyframes ${name} { ${frames.map((frame, index) => {
+      const percent = (frame.offset ?? index / (frames.length - 1)) * 100;
+      return `${percent}% { ${Object.entries(frame).filter(([key]) => key !== 'offset').map(([key, value]) => `${key.replace(/[A-Z]/g, letter => "-" + letter.toLowerCase())}: ${value};`).join(' ')} }`;
+    }).join(' ')} }`);
+  }
+}
+for (const [name, curve] of Object.entries(motionEasings)) lines.push(`.${motionEasingClass(name)} { --blu-motion-ease: ${curve}; }`);
+for (const [name, origin] of Object.entries(motionOrigins)) lines.push(`.blu-motion-origin-${name} { transform-origin: ${origin}; }`);
+// Exit utilities do not manage hidden/inert. Owners must do that after animationend or use createMotionPresence.
+const css = lines.join('\n') + '\n';
+const target = new URL('../styles/motion-presets.css', import.meta.url);
+if (process.argv.includes('--check')) {
+  if (await readFile(target, 'utf8') !== css) throw Error('Motion CSS is stale. Run node scripts/build-motion-css.mjs.');
+} else await writeFile(target, css);
+
+const tokenBuild = await build({absWorkingDir:root,entryPoints:['src/motion/tokens.ts'],bundle:true,format:'esm',platform:'node',write:false});
+const {motionTiming} = await import('data:text/javascript;base64,'+Buffer.from(tokenBuild.outputFiles[0].text).toString('base64'));
+const tokenCSS = '/* Generated from src/motion/tokens.ts. */\n:root {\n'+['fast','normal','slow'].map(key=>`  --blu-motion-${key}: ${motionTiming[key]}ms;`).join('\n')+'\n}\n';
+const tokenTarget = new URL('../styles/motion-tokens.css',import.meta.url);
+if(process.argv.includes('--check')) {if(await readFile(tokenTarget,'utf8')!==tokenCSS)throw Error('Motion tokens CSS is stale.');} else await writeFile(tokenTarget,tokenCSS);

package/scripts/build-motion-styles.mjs

@@ -0,0 +1,29 @@
+import { build } from 'esbuild';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/** The same stylesheet is used by the package build and local documentation. */
+export async function buildMotionStyles(outdir) {
+  const root = fileURLToPath(new URL('../', import.meta.url));
+  const result = await build({ absWorkingDir: root, entryPoints: ['styles/motion.css'],
+    bundle: true, write: false, target: ['safari16.4', 'chrome110'], legalComments: 'inline' });
+  const css = result.outputFiles[0].text;
+  await mkdir(outdir, { recursive: true });
+  await writeFile(resolve(outdir, 'motion.css'), css);
+  return css;
+}
+
+/** Call after generating the base full stylesheet; used by the normal release build. */
+export async function includeMotionStyles(outdir) {
+  const base = await readFile(resolve(outdir, 'styles.css'), 'utf8');
+  const motion = await buildMotionStyles(outdir);
+  let combined = motion;
+  for (const name of ['component-motion', 'data-motion']) {
+    const css = await readFile(new URL('../styles/' + name + '.css', import.meta.url), 'utf8');
+    await writeFile(resolve(outdir, name + '.css'), css);
+    combined += '\n' + css;
+  }
+  await writeFile(resolve(outdir, 'styles.css'), base + '\n' + combined);
+  return motion;
+}

package/scripts/build.mjs

@@ -1,33 +1,45 @@
+import './build-motion-css.mjs';
+import { motionEntries } from './motion-entries.mjs';
+import { includeMotionStyles } from './build-motion-styles.mjs';
 import {build} from 'esbuild';
 import {readFile,writeFile,mkdir,rm,cp} from 'node:fs/promises';
 import {execFileSync} from 'node:child_process';
 import {gzipSync} from 'node:zlib';
 const edition=JSON.parse(await readFile('edition.json','utf8'));
+const draft=JSON.parse(await readFile('draft-components.json','utf8'));
 const slug=n=>edition.componentEntries?.[n]||n.replace(/([a-z])([A-Z])/g,'$1-$2').toLowerCase();
 const essentials=['button','badge','chip','chip-group','card','skeleton','empty-state'];
-const additions=edition.components.map(slug).filter(n=>!essentials.includes(n)&&n!=='grid-basic');
+const handwritten=new Set(draft.components.map(c=>c.slug));
+const additions=edition.components.map(slug).filter(n=>!essentials.includes(n)&&n!=='grid-basic'&&!handwritten.has(n));
 const groups=Object.fromEntries(Object.entries(edition.nativeModules).map(([k,v])=>[k.split('_').at(-1).toLowerCase(),v.map(slug)]));
-const entries=[...new Set(['index','grid-basic','essentials','theme',...essentials,...additions,...Object.keys(groups)])];
+const entries=[...new Set(['index','grid-basic','essentials','theme','form-layout',...motionEntries,...draft.components.map(c=>c.slug),...essentials,...additions,...Object.keys(groups)])];
 await rm('dist',{recursive:true,force:true});await mkdir('dist');
-const web=await build({entryPoints:entries.map(n=>'src/'+n+'.ts'),bundle:true,splitting:true,format:'esm',target:'es2020',minify:true,outdir:'dist',metafile:true});
-const nativeEntries={'bluui-community':'src/native.ts','bluui-community-grid':'src/native-grid.ts'};
+const web=await build({entryPoints:entries.map(n=>'src/'+n+'.ts'),bundle:true,splitting:true,format:'esm',target:'es2020',minify:true,outdir:'dist',metafile:true,preserveSymlinks:true});
+const nativeEntries={'bluui-community':'src/native.ts','bluui-community-grid':'src/native-grid.ts','native/form-layout':'src/native-components/form-layout.ts'};
 for(const name of additions){
  const source=await readFile('src/component-factories/'+name+'.ts','utf8');
  const installs=[...source.matchAll(/import \{(install\w+)\} from ['"]\.\.\/runtime\/([^'"]+)\.js['"]/g)];
  if(installs.length){const code=installs.map(m=>`import {${m[1]}} from '../runtime/${m[2]}.js';\n${m[1]}();`).join('\n');await mkdir('src/native-components',{recursive:true});await writeFile('src/native-components/'+name+'.ts',code+'\n');nativeEntries['native/'+name]='src/native-components/'+name+'.ts';}
 }
-const native=await build({entryPoints:nativeEntries,bundle:true,format:'iife',target:'es2018',minify:true,outdir:'dist',metafile:true});
+const native=await build({entryPoints:nativeEntries,bundle:true,format:'iife',target:'es2018',minify:true,outdir:'dist',metafile:true,preserveSymlinks:true});
 execFileSync('node',['node_modules/typescript/bin/tsc'],{stdio:'inherit'});
 const sheets={};for(const name of edition.components.map(slug)){sheets[name]=await readFile(`styles/${name}.css`,'utf8');await cp(`styles/${name}.css`,`dist/${name}.css`);}
 await cp('styles/theme.css','dist/theme.css');
 await cp('styles/marketing-template-layout.css','dist/marketing-template-layout.css');
 await cp('assets/fonts','dist/fonts',{recursive:true});
 await writeFile('dist/essentials.css',essentials.map(n=>sheets[n]).join('\n'));
-for(const[name,members]of Object.entries(groups))await writeFile('dist/'+name+'.css',members.map(n=>sheets[n]).join('\n'));
-await writeFile('dist/styles.css',await readFile('styles/theme.css','utf8')+'\n'+Object.values(sheets).join('\n'));
+for(const[name,members]of Object.entries(groups))await writeFile('dist/'+name+'.css',members.filter(n=>!handwritten.has(n)).map(n=>sheets[n]).join('\n'));
+await writeFile('dist/styles.css',await readFile('styles/theme.css','utf8')+'\n'+Object.entries(sheets).filter(([n])=>!handwritten.has(n)).map(([,s])=>s).join('\n'));
+const draftStyles=await readFile('styles/form-layout.css','utf8');
+await cp('styles/form-layout.css','dist/form-layout.css');
+for(const c of draft.components)await cp(`styles/${c.slug}.css`,`dist/${c.slug}.css`);
+for(const group of new Set(draft.components.map(c=>c.group)))await writeFile('dist/'+group+'.css',await readFile('dist/'+group+'.css','utf8')+'\n'+draftStyles);
+await writeFile('dist/styles.css',await readFile('dist/styles.css','utf8')+'\n'+draftStyles);
+await includeMotionStyles('dist');
+await cp('draft-components.json','dist/draft-components.json');
 const inputs=[...new Set([...Object.keys(web.metafile.inputs),...Object.keys(native.metafile.inputs)])];
 for(const file of inputs)if(!file.startsWith('src/')&&!file.startsWith('node_modules/ag-grid-community/')&&!file.startsWith('node_modules/ag-stack/'))throw Error('Unexpected source in Community bundle: '+file);
-await writeFile('dist/build-audit.json',JSON.stringify({inputs,outputs:Object.keys({...web.metafile.outputs,...native.metafile.outputs}),sourcePolicy:edition.sourcePolicy},null,2));
+await writeFile('dist/build-audit.json',JSON.stringify({inputs,outputs:Object.keys({...web.metafile.outputs,...native.metafile.outputs}),sourcePolicy:edition.sourcePolicy,draft},null,2));
 const sizes={version:edition.version,typescript:{},native:{}};
 for(const file of ['bluui-community.js','bluui-community-grid.js','styles.css','grid-basic.css','essentials.css','theme.css',...Object.keys(nativeEntries).filter(n=>n.startsWith('native/')).map(n=>n+'.js')]){const b=await readFile('dist/'+file);const measure={bytes:b.length,gzipBytes:gzipSync(b).length};if(file.startsWith('native/'))sizes.native[file]=measure;else sizes[file]=measure;}
 for(const entry of entries){const seen=new Set();const visit=file=>{if(seen.has(file))return;seen.add(file);for(const im of web.metafile.outputs[file]?.imports||[])if(!im.external)visit(im.path);};visit('dist/'+entry+'.js');let bytes=0,gzipBytes=0;for(const f of seen){const b=await readFile(f);bytes+=b.length;gzipBytes+=gzipSync(b).length;}sizes.typescript[entry]={files:[...seen].map(f=>f.slice(5)),bytes,gzipBytes};}

package/scripts/motion-entries.mjs

@@ -0,0 +1,2 @@
+/** Shared by the normal build and isolated local package verification. */
+export const motionEntries = ['motion', 'motion-settings', 'motion-enhancers', 'component-motion', 'data-motion'];

package/src/checkbox.ts

@@ -0,0 +1,2 @@
+export {createCheckbox} from './form-layout/choice.js';
+export type * from './form-layout/types.js';

package/src/columns2.ts

@@ -0,0 +1,2 @@
+export {createColumns2} from './form-layout/layout.js';
+export type * from './form-layout/types.js';

package/src/columns3.ts

@@ -0,0 +1,2 @@
+export {createColumns3} from './form-layout/layout.js';
+export type * from './form-layout/types.js';

package/src/columns4.ts

@@ -0,0 +1,2 @@
+export {createColumns4} from './form-layout/layout.js';
+export type * from './form-layout/types.js';

package/src/component-motion.ts

@@ -0,0 +1,101 @@
+/** Local, opt-in web integration. Import after the component styles plus component-motion.css.
+ * Create the controller on a scope containing every component host (normally document.body).
+ * Dispose this collection before disposing its controller. No native entry points import this file.
+ */
+import type { MotionController } from './motion/controller.js';
+import { createComponentMotionScope, validateComponentMotion } from './motion/component-settings.js';
+import type { ComponentMotionSettings, ComponentMotionHandle } from './motion/component-settings.js';
+export type { ComponentMotionSettings, ComponentMotionHandle } from './motion/component-settings.js';
+import { createMotionButton } from './motion/button.js';
+import { createPressFeedback } from './motion/feedback.js';
+import { createModal } from './component-factories/modal.js';
+import { createDrawer } from './component-factories/drawer.js';
+import { createCommandPalette } from './component-factories/command-palette.js';
+import { createTextInput } from './text-input.js';
+import { createTextArea } from './text-area.js';
+import { createCheckbox } from './checkbox.js';
+import { createSwitch } from './switch.js';
+import { createRadioButton } from './radio-button.js';
+import { createRadioGroup } from './radio-group.js';
+import { createSelect } from './select.js';
+import { createFormField } from './form-field.js';
+import { observeSurface } from './web-motion/surfaces.js';
+import { enhanceField } from './web-motion/fields.js';
+import { createDatePicker } from './component-factories/date-picker.js';
+import { createTimePicker } from './component-factories/time-picker.js';
+import { createDateTimePicker } from './component-factories/date-time-picker.js';
+import { createDateRangePicker } from './component-factories/date-range-picker.js';
+import { createTreeView } from './component-factories/tree-view.js';
+import { createNotification } from './component-factories/notification.js';
+import { enhanceTree } from './web-motion/tree.js';
+import { enhanceNotifications } from './web-motion/notifications.js';
+import { createSidebar } from './component-factories/sidebar.js';
+import { createPagination } from './component-factories/pagination.js';
+import { enhanceNavigation } from './web-motion/navigation.js';
+
+type Instance = { element: HTMLElement; destroy(): void };
+type Enhancement = { destroy(): void };
+export function createMotionComponents(motion: MotionController, initial: ComponentMotionSettings = {}) {
+  let defaults = validateComponentMotion(initial), disposed = false;
+  const instances = new Set<Instance>();
+  const configurations = new Map<Instance, () => void>();
+  function decorate<A extends unknown[], C extends Instance>(factory: (...args: A) => C, enhance: (component: C, local: MotionController) => Enhancement) {
+    return (...args: A): C & ComponentMotionHandle => {
+      if (disposed) throw Error('Motion components are destroyed.');
+      const component = factory(...args);
+      const scoped = createComponentMotionScope(component.element, motion, defaults);
+      let extra: Enhancement;
+      try { extra = enhance(component, scoped.motion); } catch (error) { scoped.destroy(); component.destroy(); throw error; }
+      const destroy = component.destroy.bind(component); let dead = false, overrides: ComponentMotionSettings = {};
+      const apply = () => scoped.update({ ...defaults, ...overrides });
+      const result = Object.assign(component, { setMotion(settings: ComponentMotionSettings = {}) {
+        if (dead) throw Error('Component is destroyed.');
+        overrides = validateComponentMotion(settings);
+        if (overrides.mode === 'inherit') delete overrides.mode;
+        apply();
+      } });
+      component.destroy = () => { if (dead) return; dead = true; extra.destroy(); scoped.destroy(); destroy(); instances.delete(component); configurations.delete(component); };
+      configurations.set(component, apply); instances.add(component); return result;
+    };
+  }
+  const field = (component: Instance, local: MotionController) => enhanceField(component.element, local);
+  const surface = (kind: 'modal' | 'drawer' | 'palette') => (component: Instance, local: MotionController) => observeSurface(component.element, local, kind);
+  const picker = (component: Instance, local: MotionController) => observeSurface(component.element, local, 'picker');
+  return {
+    createSidebar: decorate(createSidebar, (component, local) => enhanceNavigation(component.element, local, 'sidebar')),
+    createPagination: decorate(createPagination, (component, local) => enhanceNavigation(component.element, local, 'pagination')),
+    createDatePicker: decorate(createDatePicker, picker),
+    createTimePicker: decorate(createTimePicker, picker),
+    createDateTimePicker: decorate(createDateTimePicker, picker),
+    createDateRangePicker: decorate(createDateRangePicker, picker),
+    createTreeView: decorate(createTreeView, (component, local) => enhanceTree(component.element, local)),
+    createNotification: decorate(createNotification, (component, local) => enhanceNotifications(component.element, local)),
+    createButton: decorate(createMotionButton, (component, local) => {
+      const button = component.element.querySelector('button')!;
+      const press = createPressFeedback(button, local), update = component.update.bind(component);
+      component.update = patch => { update(patch); button.classList.add('blu-motion-press'); };
+      return press;
+    }),
+    createModal: decorate(createModal, surface('modal')),
+    createDrawer: decorate(createDrawer, surface('drawer')),
+    createCommandPalette: decorate(createCommandPalette, surface('palette')),
+    createTextInput: decorate(createTextInput, field),
+    createTextArea: decorate(createTextArea, field),
+    createCheckbox: decorate(createCheckbox, field),
+    createSwitch: decorate(createSwitch, field),
+    createRadioButton: decorate(createRadioButton, field),
+    createRadioGroup: decorate(createRadioGroup, field),
+    createFormField: decorate(createFormField, field),
+    createSelect: decorate(createSelect, (component, local) => {
+      const feedback = field(component, local), menu = observeSurface(component.element, local, 'select');
+      return { destroy() { menu.destroy(); feedback.destroy(); } };
+    }),
+    /** Replace collection defaults. Existing per-component overrides stay in place. */
+    configure(settings: ComponentMotionSettings = {}) {
+      if (disposed) throw Error('Motion components are destroyed.');
+      defaults = validateComponentMotion(settings);
+      for (const apply of configurations.values()) apply();
+    },
+    destroy() { if (disposed) return; disposed = true; for (const component of Array.from(instances).reverse()) component.destroy(); },
+  };
+}

package/src/data-motion.ts

@@ -0,0 +1,60 @@
+/** Local opt-in data entry. Existing Table/Grid defaults and native entries are unchanged. */
+import { createTable as baseTable, tableRows } from './form-layout/table.js';
+import type { TableOptions, TableEvents } from './form-layout/types.js';
+import { createGridBasic as baseGrid } from './grid-basic.js';
+import type { GridBasicOptions, GridBasicEvents } from './grid-basic.js';
+import type { MotionController } from './motion/controller.js';
+import { enhanceDataRows } from './web-motion/data-rows.js';
+
+import { createComponentMotionScope, type ComponentMotionSettings } from './motion/component-settings.js';
+import { createMotionSettingsGroup } from './motion/settings-group.js';
+
+export function createMotionData(motion: MotionController, defaults: ComponentMotionSettings = {}) {
+  const settings = createMotionSettingsGroup(defaults);
+  const instances = new Set<{ destroy(): void }>(); let dead = false;
+  function own<C extends { destroy(): void }>(component: C, extra: { destroy(): void }, scope: ReturnType<typeof createComponentMotionScope>) {
+    const binding = settings.bind(scope.update);
+    const destroy = component.destroy.bind(component); let disposed = false;
+    component.destroy = () => { if (disposed) return; disposed = true; binding.destroy(); extra.destroy(); scope.destroy(); destroy(); instances.delete(component); };
+    instances.add(component); return Object.assign(component, {setMotion: binding.setMotion});
+  }
+  return {
+    configure(next: ComponentMotionSettings = {}) { if (dead) throw Error('Motion data components are destroyed.'); settings.configure(next); },
+    createTable<Row extends object>(host: HTMLElement, initial: TableOptions<Row>, events: TableEvents<Row> = {}) {
+      if (dead) throw Error('Motion data components are destroyed.');
+      let options = initial;
+      function validate(p: TableOptions<Row>) {
+        if (!p.RowKey) throw Error('Animated tables require a stable RowKey.');
+        const ids = p.Rows.map(row => row[p.RowKey!]);
+        if (ids.some(id => !['string', 'number'].includes(typeof id) || String(id) === '') || new Set(ids.map(String)).size !== ids.length) throw Error('Animated tables require unique, nonempty row keys.');
+      }
+      validate(options);
+      const component = baseTable(host, initial, events), update = component.update;
+      const scope = createComponentMotionScope(component.element, motion, settings.settings);
+      const extra = enhanceDataRows(component.element, scope.motion, () => {
+        const rows = options.Loading ? [] : tableRows({ ...options, ...component.getState() }).rows;
+        const elements = [...component.element.querySelectorAll<HTMLTableRowElement>('tbody > tr')];
+        return rows.map((row, index) => ({ key: String(row[options.RowKey!]), element: elements[index], cells: [...elements[index].cells], cellKeys: [...options.Columns.map(c => c.Key), '__actions'] }));
+      });
+      component.update = patch => {
+        const next = { ...options, ...patch }; validate(next); extra.capture();
+        const focused = document.activeElement instanceof HTMLElement && component.element.contains(document.activeElement) ? document.activeElement : null;
+        update(patch); options = next;
+        if (focused && !focused.isConnected && document.activeElement === document.body) component.element.querySelector<HTMLElement>('.blu-table__scroll')!.focus({ preventScroll: true });
+      };
+      return own(component, extra, scope);
+    },
+    createGridBasic(host: HTMLElement, initial: GridBasicOptions, events: GridBasicEvents = {}) {
+      if (dead) throw Error('Motion data components are destroyed.');
+      const component = baseGrid(host, initial, events), update = component.update;
+      const scope = createComponentMotionScope(component.element, motion, settings.settings);
+      const extra = enhanceDataRows(component.element, scope.motion, () => [...component.element.querySelectorAll<HTMLElement>('.ag-center-cols-container > .ag-row[row-id], .ag-grid-scrolling-container > .ag-row[row-id]')].map(element => {
+        const cells = [...element.querySelectorAll<HTMLElement>('.ag-cell')];
+        return { key: element.getAttribute('row-id')!, element, cells, cellKeys: cells.map(cell => cell.getAttribute('col-id')!) };
+      }));
+      component.update = patch => { extra.capture(); update(patch); };
+      return own(component, extra, scope);
+    },
+    destroy() { if (dead) return; dead = true; for (const component of [...instances]) component.destroy(); },
+  };
+}

package/src/data.ts

@@ -7,3 +7,4 @@ export * from './descriptions.js';
 export * from './sparkline.js';
 export * from './dashboard-canvas.js';
 export * from './dashboard-panel.js';
+export * from './table.js';

package/src/form-field.ts

@@ -0,0 +1,2 @@
+export {createFormField} from './form-layout/layout.js';
+export type * from './form-layout/types.js';