@blukavantui/community 0.0.0-stage → 1.0.1

package/styles/video-player.css

@@ -0,0 +1,92 @@
+/* BluUI_Core → video-player — component-owned stylesheet. */
+/* BluUI rich content: scoped defaults shared by standalone Blocks. */
+.blu-rich { box-sizing:border-box;min-width:0;color:var(--bluui-text,#172033);font-family:var(--bluui-font,Inter,system-ui,sans-serif); }
+.blu-rich *, .blu-rich *::before, .blu-rich *::after { box-sizing:border-box; }
+.blu-rich [hidden] { display:none!important; }
+.blu-rich img { display:block;max-width:100%; }
+.blu-rich figure { margin:0; }
+.blu-rich button,.blu-rich a,.blu-rich input { font:inherit; }
+.blu-rich-button { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 18px;border:1px solid var(--bluui-control-border,#94a3b8);border-radius:999px;background:var(--bluui-surface,#fff);color:var(--bluui-text,#172033);cursor:pointer;text-decoration:none; }
+.blu-rich-button:hover { background:var(--bluui-surface-muted,#f1f5f9); }
+.blu-rich-button:disabled { opacity:.45;cursor:default; }
+.blu-rich :is(button,a,input,[tabindex]):focus-visible { outline:3px solid var(--bluui-primary,#4f46e5);outline-offset:4px; }
+.blu-rich-error { color:var(--bluui-color-danger-text,#b91c1c);padding:12px;border:1px solid currentColor;border-radius:8px; }
+.blu-rich-eyebrow { margin:0 0 20px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; }
+.blu-rich-title { color:inherit;margin:0 0 20px;font-size:clamp(28px,3.4vw,56px);line-height:1.1;letter-spacing:-.045em;text-wrap:balance; }
+.blu-rich-description { font-size:clamp(16px,1.4vw,19px);line-height:1.7;margin:0 0 24px;max-width:62ch;white-space:pre-line; }
+.blu-rich-link { display:inline-flex;gap:12px;align-items:center;min-height:44px;color:inherit;font-weight:650;text-decoration:none; }
+.blu-rich-link::after { content:'↗';font-size:1.25em; }
+.blu-rich-link:hover { text-decoration:underline; }
+.blu-rich-bridge { display:contents!important; }
+.blu-rich-enlarged { display:block;max-width:100%;max-height:75vh;object-fit:contain;margin:auto; }
+.blu-component-preview { display:none;-servicestudio-display:block;-servicestudio-padding:24px;-servicestudio-background:#eef2ff;-servicestudio-border:1px dashed #a5b4fc;-servicestudio-color:#312e81; }
+@media(prefers-reduced-motion:reduce){.blu-rich *, .blu-rich *::before, .blu-rich *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }}
+
+/* A stable control dock keeps every action visible to pointer and keyboard users. */
+.blu-video-player__frame { position:relative;isolation:isolate;overflow:visible;border:1px solid var(--bluui-border,#dce3ed);border-radius:0;background:var(--bluui-surface,#fff);line-height:1.5;box-shadow:0 8px 28px #0b13240d;container-type:inline-size; }
+.blu-video-player__stage { position:relative;overflow:hidden;border-radius:0;background:#101318; }
+.blu-video-player__pause-glass { position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#ffffff0e,#ffffff05 55%,#1018270a);backdrop-filter:blur(1.5px) saturate(.95);-webkit-backdrop-filter:blur(1.5px) saturate(.95); }
+.blu-video-player .blu-video-player__media { display:block;width:100%;height:auto;max-height:75vh;background:#101318;object-fit:contain;border-radius:0;cursor:pointer; }
+.blu-video-player__title { position:absolute;inset:0 0 auto;padding:22px 24px 42px;background:linear-gradient(#050810b8,transparent);color:#fff;font-size:14px;font-weight:650;line-height:1.5;pointer-events:none; }
+.blu-video-player__button { appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:40px;min-height:40px;padding:8px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--blu-video-control-text,var(--bluui-text,#172033));font:inherit;font-size:13px;font-weight:650;line-height:1;cursor:pointer;transition:background .15s,color .15s; }
+.blu-video-player__button svg { width:20px;height:20px;display:block; }
+.blu-video-player__button:hover:not(:disabled) { background:var(--blu-video-soft,var(--bluui-surface-muted,#f1f5f9)); }
+.blu-video-player__button:disabled { opacity:.45;cursor:not-allowed; }
+.blu-video-player__button[aria-pressed=true] { color:var(--blu-video-control-text,var(--bluui-color-primary-text,#4338ca));background:var(--blu-video-soft,var(--bluui-color-primary-soft,#eef2ff)); }
+.blu-video-player .blu-video-player__primary { color:var(--blu-video-contrast,var(--bluui-color-primary-contrast,#fff));background:var(--blu-video-accent,var(--bluui-color-primary-solid,#4f46e5)); }
+.blu-video-player .blu-video-player__primary:hover:not(:disabled) { background:var(--blu-video-accent,var(--bluui-color-primary-solid,#4f46e5));filter:brightness(.92); }
+.blu-video-player .blu-video-player__big-play { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border:1px solid var(--blu-video-accent,#4f46e5);border-radius:50%;background:color-mix(in srgb,var(--blu-video-accent,#4f46e5) 40%,transparent);color:var(--blu-video-contrast,#fff);box-shadow:0 4px 32px #0004;backdrop-filter:blur(4px); }
+.blu-video-player .blu-video-player__big-play:hover:not(:disabled) { background:color-mix(in srgb,var(--blu-video-accent,#4f46e5) 55%,transparent);color:var(--blu-video-contrast,#fff); }
+.blu-video-player__big-play svg { width:28px;height:28px;margin-left:3px; }
+.blu-video-player__status { position:absolute;left:50%;bottom:20px;transform:translateX(-50%);padding:7px 12px;border-radius:7px;background:#080e1be6;color:#fff;font-size:12px; }
+.blu-video-player__controls { padding:0; }
+.blu-video-player__notice { display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-top:1px solid var(--bluui-border,#dce3ed);background:var(--bluui-surface-muted,#f1f5f9);color:var(--bluui-text,#172033);border-radius:0; }
+.blu-video-player__notice-icon { flex:none;padding-top:2px;color:var(--blu-video-control-text,var(--bluui-color-primary-text,#4338ca)); }
+.blu-video-player__notice-icon svg { display:block;width:18px;height:18px; }
+.blu-video-player__notice-copy { flex:1;min-width:0;font-size:12px;line-height:1.6; }
+.blu-video-player__notice-copy strong { display:block;font-size:12px;font-weight:650; }
+.blu-video-player__notice-copy p { margin:3px 0 0;color:var(--bluui-text-muted,#59677a);font-size:12px;line-height:1.6;overflow-wrap:anywhere; }
+.blu-video-player__notice-dismiss { margin:-6px -8px -6px 0;font-size:20px;font-weight:400;border-radius:0; }
+.blu-video-player__frame[data-rounded=true] .blu-video-player__notice { border-radius:0 0 17px 17px; }
+.blu-video-player__row { padding:0 16px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0; }
+.blu-video-player__spacer { flex:1; }
+.blu-video-player__time { white-space:nowrap;font-size:12px;font-weight:550;font-variant-numeric:tabular-nums;color:var(--bluui-text-muted,#59677a); }
+.blu-video-player .blu-video-player__controls input[type="range"].blu-video-player__range { --blu-video-progress:0%;appearance:none;-webkit-appearance:none;display:block;min-width:0;min-height:24px;height:24px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer; }
+.blu-video-player .blu-video-player__controls input[type="range"].blu-video-player__timeline { width:100%;margin:0!important; }
+.blu-video-player .blu-video-player__controls input[type="range"].blu-video-player__volume { width:64px;flex:none; }
+.blu-video-player__range::-webkit-slider-runnable-track { height:4px;border-radius:8px;background:linear-gradient(to right,var(--blu-video-accent,var(--bluui-color-primary-solid,#4f46e5)) var(--blu-video-progress),var(--bluui-border-strong,#b8c4d4) var(--blu-video-progress)); }
+.blu-video-player__range::-moz-range-track { height:4px;border-radius:8px;background:var(--bluui-border-strong,#b8c4d4); }
+.blu-video-player__range::-moz-range-progress { height:4px;border-radius:8px;background:var(--blu-video-accent,var(--bluui-color-primary-solid,#4f46e5)); }
+.blu-video-player__range::-webkit-slider-thumb { appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:2px solid var(--bluui-surface,#fff);border-radius:50%;background:var(--blu-video-accent,var(--bluui-color-primary-solid,#4f46e5));box-shadow:0 0 0 1px var(--blu-video-accent,var(--bluui-color-primary-solid,#4f46e5)); }
+.blu-video-player__range::-moz-range-thumb { width:9px;height:9px;border:2px solid var(--bluui-surface,#fff);border-radius:50%;background:var(--blu-video-accent,var(--bluui-color-primary-solid,#4f46e5));box-shadow:0 0 0 1px var(--blu-video-accent,var(--bluui-color-primary-solid,#4f46e5)); }
+.blu-video-player__range:disabled { opacity:.4;cursor:not-allowed; }
+.blu-video-player__speed { position:relative; }
+.blu-video-player__speed-panel { position:absolute;bottom:calc(100% + 14px);right:0;z-index:3;display:grid;gap:3px;min-width:150px;padding:8px;border:1px solid var(--bluui-border,#dce3ed);border-radius:12px;background:var(--bluui-surface,#fff);box-shadow:0 12px 40px #0b132433; }
+.blu-video-player__speed-panel .blu-video-player__button { justify-content:flex-start; }
+.blu-video-player__speed-label { padding:8px;color:var(--bluui-text-muted,#59677a);font-size:11px;font-weight:650; }
+.blu-video-player .blu-video-player__button:focus-visible,.blu-video-player .blu-video-player__range:focus-visible,.blu-video-player__frame:focus-visible { outline:2px solid var(--blu-video-accent,var(--bluui-color-primary-solid,#4f46e5));outline-offset:3px; }
+.blu-video-player .blu-video-player__big-play:focus-visible { outline:3px solid #fff;outline-offset:5px; }
+.blu-video-player__frame:fullscreen { display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;border:0;border-radius:0;background:#101318; }
+.blu-video-player__frame:fullscreen .blu-video-player__stage { flex:1;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:0; }
+.blu-video-player__frame:fullscreen .blu-video-player__media { max-height:100%;height:100%; }
+.blu-video-player__frame:fullscreen .blu-video-player__controls { background:var(--bluui-surface,#fff); }
+@container(max-width:440px) { .blu-video-player__volume { display:none!important; }.blu-video-player__row { gap:3px; }.blu-video-player__controls { padding:0; }.blu-video-player__row { padding:0 10px 10px; }.blu-video-player__title { padding:16px 18px 34px;font-size:12px; }.blu-video-player .blu-video-player__big-play { width:56px;height:56px; }.blu-video-player__time { font-size:11px; } }
+@media(forced-colors:active) { .blu-video-player__button,.blu-video-player__frame { border:1px solid ButtonText; }.blu-video-player .blu-video-player__controls input[type="range"].blu-video-player__range { appearance:auto; }.blu-video-player__title { background:Canvas;color:CanvasText; } }
+
+.blu-video-player__frame[data-rounded=true] { border-radius:18px; }
+.blu-video-player__frame[data-rounded=true] .blu-video-player__stage { border-radius:17px 17px 0 0; }
+.blu-video-player__frame:fullscreen[data-rounded] { border-radius:0; }
+
+/* Optional aggregate viewing data. It never intercepts seeking or changes player height. */
+.blu-video-player__seek { position:relative;z-index:1;width:100%;height:24px;margin:-12px 0 0; }
+.blu-video-player__heatmap { position:absolute;left:0;bottom:14px;width:100%;height:44px;fill:var(--blu-video-accent,var(--bluui-color-primary-solid,#4f46e5));opacity:0;pointer-events:none;transition:opacity .15s ease; }
+.blu-video-player__frame:hover .blu-video-player__heatmap,.blu-video-player__frame:has(:focus-visible) .blu-video-player__heatmap { opacity:.42; }
+.blu-video-player__seek-hint { position:absolute;bottom:60px;left:50%;transform:translateX(-50%);padding:5px 8px;border-radius:5px;background:#101827;color:#fff;white-space:nowrap;font-size:11px;line-height:1.4;opacity:0;pointer-events:none; }
+.blu-video-player__seek:hover .blu-video-player__seek-hint,.blu-video-player__seek:has(:focus-visible) .blu-video-player__seek-hint { opacity:1; }
+.blu-video-player__sr { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
+@media(hover:none) { .blu-video-player__frame:hover .blu-video-player__heatmap { opacity:0; }.blu-video-player__frame:has(:focus-visible) .blu-video-player__heatmap { opacity:.42; } }
+@media(prefers-reduced-motion:reduce) { .blu-video-player__heatmap { transition:none; } }
+
+/* The seek track meets both video edges; row padding only applies to buttons. */
+.blu-video-player__timeline::-webkit-slider-runnable-track { border-radius:0; }
+.blu-video-player__timeline::-moz-range-track,.blu-video-player__timeline::-moz-range-progress { border-radius:0; }

package/test/contracts.test.mjs

@@ -0,0 +1,8 @@
+import test from 'node:test';import assert from 'node:assert/strict';import {build} from 'esbuild';import {readFile} from 'node:fs/promises';
+const result=await build({entryPoints:['src/grid-spec.ts'],bundle:true,format:'esm',write:false});const {normalizeOptions,formatValue,parseDate}=await import('data:text/javascript;base64,'+Buffer.from(result.outputFiles[0].text).toString('base64'));
+const seed=()=>({Columns:[{Field:'Name'}],Rows:[{Id:'1',Name:'Atlas'}]});
+test('commercial options and column behavior cannot enter the basic contract',()=>{for(const key of ['Editable','RowActions','EnableRowDetails','Datasource','GridOptions','SaveView','BulkActions'])assert.throws(()=>normalizeOptions({...seed(),[key]:true}),/unsupported/);for(const key of ['Editable','Pinned','CellRenderer','ValueGetter'])assert.throws(()=>normalizeOptions({...seed(),Columns:[{Field:'Name',[key]:true}]}),/unsupported/);});
+test('row identity and unsafe keys are rejected before mounting',()=>{assert.throws(()=>normalizeOptions({...seed(),Rows:[{Id:1},{Id:'1'}]}),/unique/);assert.throws(()=>normalizeOptions({...seed(),Rows:[{Name:'missing'}]}),/keys/);assert.throws(()=>normalizeOptions({...seed(),Rows:[JSON.parse('{"Id":"1","__proto__":{}}')]}),/Invalid/);assert.throws(()=>normalizeOptions({...seed(),Rows:[{Id:'1',Name:Infinity}]}),/Invalid/);});
+test('formatting handles dates, zero, null and false correctly',()=>{const p=normalizeOptions(seed());assert.equal(formatValue(false,'Boolean',p),'No');assert.equal(formatValue(0,'Number',p),'0');assert.equal(formatValue(null,'Currency',p),'');assert.equal(parseDate('2026-02-30'),null);assert.equal(formatValue('2026-01-01','Date',{...p,TimeZone:'Pacific/Honolulu'}),'Jan 1, 2026');});
+test('no arbitrary record limit; data is copied before AG Grid receives it',()=>{const s=seed();const p=normalizeOptions(s);p.Rows[0].Name='Changed';assert.equal(s.Rows[0].Name,'Atlas');assert.equal(normalizeOptions({...seed(),Rows:Array.from({length:10001},(_,i)=>({Id:i}))}).Rows.length,10001);});
+test('bundle source is isolated and optional AG modules are absent',async()=>{const meta=JSON.parse(await readFile('dist/build-audit.json','utf8'));for(const f of meta.inputs)assert.ok(/^(src\/|node_modules\/(ag-grid-community|ag-stack)\/)/.test(f),f);const bundle=await readFile('dist/bluui-community-grid.js','utf8');for(const name of ['CsvExportModule','InfiniteRowModelModule','TextEditorModule','LargeTextEditorModule','NumberEditorModule','DateEditorModule','SelectEditorModule','UndoRedoEditModule','BatchEditModule'])assert.ok(!bundle.includes('moduleName:"'+name.replace(/Module$/,'')+'"'),name);const essentials=await readFile('dist/bluui-community.js','utf8');assert.ok(!essentials.includes('ClientSideRowModel'));assert.ok(!essentials.includes('BluGridRuntime'));});

package/test/isolation.test.mjs

@@ -0,0 +1,36 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {readFile,readdir} from 'node:fs/promises';
+import vm from 'node:vm';
+const edition=JSON.parse(await readFile('edition.json','utf8'));
+const sizes=JSON.parse(await readFile('dist/sizes.json','utf8'));
+test('all seven groups expose exactly the approved 55 Community components',()=>{
+ const names=Object.values(edition.nativeModules).flat();assert.equal(names.length,55);assert.equal(new Set(names).size,55);assert.deepEqual([...names].sort(),[...edition.components].sort());assert.equal(Object.keys(edition.nativeModules).length,7);
+});
+test('non-grid entrypoints do not pull the AG Grid engine or unrelated component factories',async()=>{
+ for(const name of ['chat','chat-widget','float-button','date-picker','time-picker','date-time-picker','date-range-picker','font-provider','shape-mask','tree-select','transfer-list','core','layout','inputs','feedback','data']){
+  const files=sizes.typescript[name].files;const source=(await Promise.all(files.map(f=>readFile('dist/'+f,'utf8')))).join('\n');
+  assert.ok(!source.includes('ClientSideRowModel'),name);assert.ok(!source.includes('BluGridRuntime'),name);assert.ok(!source.includes('BluUIRuntime'),name);
+ }
+ assert.ok(sizes.typescript['chat'].bytes<65000);assert.ok(sizes.typescript['float-button'].bytes<25000);
+});
+test('independent native scripts coexist with the commercial registry',async()=>{
+ const commercial={marker:'commercial'};const window={BluUIRuntime:commercial};const context=vm.createContext({window,Map,Set,WeakMap,WeakSet,Promise,console});
+ for(const name of ['float-button','chat','chat-widget','date-picker','time-picker','date-time-picker','date-range-picker','font-provider','shape-mask'])vm.runInContext(await readFile('dist/native/'+name+'.js','utf8'),context);
+ assert.equal(window.BluUIRuntime,commercial);assert.deepEqual(Object.keys(commercial),['marker']);assert.ok(window.BluUICommunityRuntime.Chat);assert.ok(window.BluUICommunityRuntime.ChatWidget);assert.ok(window.BluUICommunityRuntime.FloatButton);for(const name of ['DatePicker','TimePicker','DateTimePicker','DateRangePicker','FontProvider','ShapeMask'])assert.ok(window.BluUICommunityRuntime[name],name);
+ const chat=window.BluUICommunityRuntime.Chat;vm.runInContext(await readFile('dist/native/chat.js','utf8'),context);assert.equal(window.BluUICommunityRuntime.Chat,chat);
+});
+test('source distribution contains only selected component factories',async()=>{
+ const files=await readdir('src/component-factories');assert.equal(files.length,47);
+ for(const excluded of ['form-builder','form-renderer','kanban','matrix-editor','image-annotator','filter-builder','data-import-wizard','project-timeline'])assert.ok(!files.includes(excluded+'.ts'));
+ const pkg=JSON.parse(await readFile('package.json','utf8'));assert.notEqual(pkg.private,true);assert.equal(pkg.publishConfig.access,'public');assert.equal(pkg.publishConfig.registry,'https://registry.npmjs.org/');assert.equal(pkg.license,'SEE LICENSE IN LICENSE.txt');
+});
+
+test('the nine Pro factories and runtimes are absent from Community',async()=>{
+ const names=['FormBuilder','FormRenderer','Grid','ImageAnnotator','DataImportWizard','MatrixEditor','FilterBuilder','ProjectTimeline','Kanban'];
+ const meta=JSON.parse(await readFile('dist/build-audit.json','utf8'));
+ const input=meta.inputs.join('\n');
+ for(const slug of ['form-builder','form-renderer','image-annotator','data-import-wizard','matrix-editor','filter-builder','project-timeline','kanban'])assert.ok(!input.includes('/'+slug+'.'),slug);
+ const source=(await Promise.all(sizes.typescript.index.files.map(f=>readFile('dist/'+f,'utf8')))).join('\n');
+ for(const name of names)assert.ok(!new RegExp('install'+name+'\\b').test(source),name);
+});

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": [
+      "ES2022",
+      "DOM"
+    ],
+    "strict": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "rootDir": "src"
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}