@crystaltech/hsms-shared-ui 0.6.9-alpha-1 → 0.6.9-alpha-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +19 -27
  2. package/dist/preMountSplash.es.js +3 -1
  3. package/dist/preMountSplash.iife.js +3 -1
  4. package/dist/preMountSplash.js +3 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -283,19 +283,13 @@ import {
283
283
 
284
284
  ## Pre-Mount Splash Injector
285
285
 
286
- Prevent initial white screen and show brand instantly while Vite/PWA initializes.
286
+ Prevent initial white screen and show a full-screen Loader while the app initializes.
287
287
 
288
288
  - ESM (Vite apps): add at the very top of your entry file
289
289
  - `import '@crystaltech/hsms-shared-ui/preMountSplash';`
290
- - Or, for manual control:
291
- ```ts
292
- import { initPreMountSplash, markAppReady } from '@crystaltech/hsms-shared-ui/preMountSplash';
293
- initPreMountSplash();
294
- // Later, when your app has mounted and is ready:
295
- markAppReady(); // dispatches global 'app-ready' and removes splash
296
- ```
297
- - IIFE (microfrontend host or legacy HTML): include pinned CDN script before your app bundles
298
- - `<script src="https://unpkg.com/@crystaltech/hsms-shared-ui@0.6.6-alpha-0.4/dist/preMountSplash.iife.js" crossorigin="anonymous"></script>`
290
+ - Signal lifecycle with events or call `markAppReady()` when ready.
291
+ - IIFE (microfrontend host or legacy HTML): include the CDN script before your app bundles
292
+ - `<script src="https://unpkg.com/@crystaltech/hsms-shared-ui/dist/preMountSplash.iife.js" crossorigin="anonymous"></script>`
299
293
  - Optional manual init with a custom root
300
294
  - `import { initPreMountSplash } from '@crystaltech/hsms-shared-ui/preMountSplash';`
301
295
  - `initPreMountSplash({ rootId: 'portal-root' });`
@@ -310,7 +304,7 @@ Prevent initial white screen and show brand instantly while Vite/PWA initializes
310
304
 
311
305
  LocalStorage keys used
312
306
  - Theme: `theme.mode`, `theme.themeColor`
313
- - Branding: `organization_name`, `organization_logo_full_url`
307
+ - Branding: `organization_name`
314
308
 
315
309
  PWA and CSP
316
310
  - Vite PWA: ESM import gets precached; CDN IIFE is external and fetched network-first.
@@ -319,7 +313,7 @@ PWA and CSP
319
313
  Standard lifecycle
320
314
  - Adds `app-loading` class to `html` on init; removes it and sets `app-ready` on hide.
321
315
  - Sets `window.__APP_READY__ = true` and dispatches a global `app-ready` event when hidden.
322
- - Auto-hides on `DOMContentLoaded`, `load`, `hsms-app-mounted`, and `app-ready`.
316
+ - Hides when the app signals readiness via `hsms-app-mounted` or `app-ready`.
323
317
  - You can programmatically call `markAppReady()` or dispatch `new Event('app-ready')`.
324
318
 
325
319
  Example host page: see `examples/host.html`.
@@ -327,13 +321,13 @@ Example host page: see `examples/host.html`.
327
321
  ### Quick Start (Splash)
328
322
  - Choose integration:
329
323
  - Vite apps: add `import '@crystaltech/hsms-shared-ui/preMountSplash'` at the top of your entry file.
330
- - Microfrontend/legacy: include the pinned CDN IIFE script in your host HTML.
324
+ - Microfrontend/legacy: include the CDN IIFE script in your host HTML.
331
325
  - Ensure branding/theme keys are available early:
332
- - `localStorage.organization_name`, `localStorage.organization_logo_full_url`, `localStorage.theme`.
326
+ - `localStorage.organization_name`, `localStorage.theme`.
333
327
  - Optional manual init and custom root:
334
328
  - `initPreMountSplash({ rootId: 'portal-root' })`.
335
329
  - Signal readiness after your app mounts:
336
- - ESM: `markAppReady()`.
330
+ - ESM: dispatch `hsms-app-mounted` and/or call `markAppReady()`.
337
331
  - IIFE: `window.HSMSPreMountSplash?.markAppReady()` or `window.dispatchEvent(new Event('app-ready'))`.
338
332
  - Verify behavior:
339
333
  - First paint: `<html>` has `app-loading` and splash is visible.
@@ -341,15 +335,15 @@ Example host page: see `examples/host.html`.
341
335
 
342
336
  ESM example:
343
337
  ```ts
344
- import { initPreMountSplash, markAppReady } from '@crystaltech/hsms-shared-ui/preMountSplash';
345
- initPreMountSplash();
338
+ import '@crystaltech/hsms-shared-ui/preMountSplash';
346
339
  // ... your app bootstrap (fetch config, auth, etc.)
347
- markAppReady();
340
+ window.dispatchEvent(new Event('hsms-app-mounted'));
341
+ window.dispatchEvent(new Event('app-ready'));
348
342
  ```
349
343
 
350
344
  IIFE host example:
351
345
  ```html
352
- <script src="https://unpkg.com/@crystaltech/hsms-shared-ui@0.6.6-alpha-0.4/dist/preMountSplash.iife.js" crossorigin="anonymous"></script>
346
+ <script src="https://unpkg.com/@crystaltech/hsms-shared-ui/dist/preMountSplash.iife.js" crossorigin="anonymous"></script>
353
347
  <script>
354
348
  window.HSMSPreMountSplash?.initPreMountSplash({ rootId: 'portal-root' });
355
349
  // after app is mounted
@@ -357,28 +351,26 @@ IIFE host example:
357
351
  // or: window.dispatchEvent(new Event('app-ready'));
358
352
  // optional: set branding early so it shows on splash
359
353
  localStorage.setItem('organization_name', 'HSMS');
360
- localStorage.setItem('organization_logo_full_url', '/logo.png');
361
354
  localStorage.setItem('theme', JSON.stringify({ mode: 'light', themeColor: '#2c5282' }));
362
355
  </script>
363
356
  ```
364
357
 
365
358
  ### Adoption Checklist (Microfrontends)
366
- - Pin version across all microfrontends and hosts: `@crystaltech/hsms-shared-ui@0.6.6-alpha-0.4`.
367
359
  - Choose one integration per app: ESM import (Vite) or IIFE CDN (host HTML) — avoid double init.
368
360
  - Standardize the mount root id (e.g., `portal-root`) and pass `{ rootId }` consistently.
369
- - Seed brand/theme early at login/bootstrap: `organization_name`, `organization_logo_full_url`, `theme`.
361
+ - Seed brand/theme early at login/bootstrap: `organization_name`, `theme`.
370
362
  - Signal readiness on mount: call `markAppReady()` or dispatch `new Event('app-ready')`.
371
- - CSP: allow the injected `<style>` and brand logo source in `style-src`/`img-src`.
363
+ - CSP: allow the injected `<style>` in policy.
372
364
  - Performance: include the IIFE script before heavy bundles; avoid blocking inline scripts before splash.
373
365
  - PWA: ensure ESM import is precached; if using CDN IIFE, verify network fallback strategy.
374
366
  - QA: verify first paint shows splash, fade-out occurs, and `<html>` toggles `app-loading` → `app-ready`.
375
367
 
376
368
  ### Minimal Steps (Other Modules)
377
369
  - Vite apps (ESM):
378
- 1) Install: `pnpm add @crystaltech/hsms-shared-ui@0.6.6-alpha-0.4`
370
+ 1) Install: `pnpm add @crystaltech/hsms-shared-ui`
379
371
  2) At top of `src/main.tsx` (or `src/index.ts`): `import '@crystaltech/hsms-shared-ui/preMountSplash'`
380
- 3) After your app mounts: `import { markAppReady } from '@crystaltech/hsms-shared-ui/preMountSplash'; markAppReady();`
381
- 4) Optional: set early brand/theme keys: `localStorage.setItem('organization_name', 'HSMS'); localStorage.setItem('organization_logo_full_url', '/logo.png');`
372
+ 3) After your app mounts: dispatch `hsms-app-mounted` and/or call `markAppReady()`.
373
+ 4) Optional: set early brand/theme keys: `localStorage.setItem('organization_name', 'HSMS');`
382
374
 
383
375
  React (Vite) example — recommended wiring
384
376
  ```tsx
@@ -408,7 +400,7 @@ export default function App() {
408
400
 
409
401
  - Microfrontend/legacy hosts (IIFE):
410
402
  1) Add script before your bundles:
411
- `<script src="https://unpkg.com/@crystaltech/hsms-shared-ui@0.6.6-alpha-0.4/dist/preMountSplash.iife.js" crossorigin="anonymous"></script>`
403
+ `<script src="https://unpkg.com/@crystaltech/hsms-shared-ui/dist/preMountSplash.iife.js" crossorigin="anonymous"></script>`
412
404
  2) Optional init with root id:
413
405
  `<script>window.HSMSPreMountSplash?.initPreMountSplash({ rootId: 'portal-root' });</script>`
414
406
  3) After mount, signal ready:
package/dist/preMountSplash.es.js CHANGED
@@ -24887,7 +24887,9 @@ function gb() {
24887
24887
  html, body { height: 100%; }
24888
24888
  body { margin: 0; background: var(--app-bg); color: var(--app-fg); }
24889
24889
  .app-splash {
24890
- height: 100%;
24890
+ position: fixed;
24891
+ inset: 0;
24892
+ z-index: 9999;
24891
24893
  display: flex;
24892
24894
  align-items: center;
24893
24895
  justify-content: center;
package/dist/preMountSplash.iife.js CHANGED
@@ -430,7 +430,9 @@ To suppress this warning, you need to explicitly provide the \`palette.${d}Chann
430
430
  html, body { height: 100%; }
431
431
  body { margin: 0; background: var(--app-bg); color: var(--app-fg); }
432
432
  .app-splash {
433
- height: 100%;
433
+ position: fixed;
434
+ inset: 0;
435
+ z-index: 9999;
434
436
  display: flex;
435
437
  align-items: center;
436
438
  justify-content: center;
package/dist/preMountSplash.js CHANGED
@@ -243,7 +243,9 @@ You might need to use a local HTTP server (instead of file://): https://react.de
243
243
  html, body { height: 100%; }
244
244
  body { margin: 0; background: var(--app-bg); color: var(--app-fg); }
245
245
  .app-splash {
246
- height: 100%;
246
+ position: fixed;
247
+ inset: 0;
248
+ z-index: 9999;
247
249
  display: flex;
248
250
  align-items: center;
249
251
  justify-content: center;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@crystaltech/hsms-shared-ui",
3
3
  "private": false,
4
- "version": "0.6.9-alpha-1",
4
+ "version": "0.6.9-alpha-3",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
7
7
  "module": "dist/index.mjs",