@thebase/ui 1.1.1 → 1.1.2

package/dist/baseui.pwa.esm.js

@@ -0,0 +1,53 @@
+var u=[{src:"/icons/icon-192.png",sizes:"192x192",type:"image/png",purpose:"any"},{src:"/icons/icon-512.png",sizes:"512x512",type:"image/png",purpose:"any"},{src:"/icons/icon-512.png",sizes:"512x512",type:"image/png",purpose:"maskable"}],f=["/","/manifest.webmanifest","/favicon.svg"];function d(n){let{name:t,shortName:s=t,description:c="",startUrl:r="/",scope:e="/",display:a="standalone",orientation:i="portrait-primary",backgroundColor:o="#ffffff",themeColor:h="#0f172a",lang:l="en",icons:p=u}=n;return{name:t,short_name:s,description:c,start_url:r,scope:e,display:a,orientation:i,background_color:o,theme_color:h,lang:l,icons:p}}function m(n){let{cacheName:t,cdnVersion:s,appFiles:c=[],extraPrecacheUrls:r=[]}=n,e=`https://cdn.jsdelivr.net/npm/@thebase/ui@${s}/dist/`,a=[...f,...c,...r,`${e}baseui.min.css`,`${e}baseui.esm.js`,`${e}baseui.templates.xml`];return`const CACHE_NAME = ${JSON.stringify(t)};
+const BASEUI_CDN = ${JSON.stringify(e)};
+
+const PRECACHE_URLS = ${JSON.stringify(a,null,2)};
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(PRECACHE_URLS)).then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) => Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))))
+      .then(() => self.clients.claim())
+  );
+});
+
+async function fromCdnCache(request) {
+  const cache = await caches.open(CACHE_NAME);
+  const cached = await cache.match(request);
+  if (cached) return cached;
+  const response = await fetch(request);
+  if (response.ok) cache.put(request, response.clone());
+  return response;
+}
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  if (request.method !== "GET") return;
+  if (request.url.startsWith(BASEUI_CDN)) {
+    event.respondWith(fromCdnCache(request));
+    return;
+  }
+  if (new URL(request.url).origin !== self.location.origin) return;
+
+  event.respondWith(
+    caches.open(CACHE_NAME).then(async (cache) => {
+      try {
+        const response = await fetch(request);
+        if (response.ok) cache.put(request, response.clone());
+        return response;
+      } catch {
+        const cached = await cache.match(request);
+        if (cached) return cached;
+        throw new Error(\`No cached response for \${request.url} and network unavailable\`);
+      }
+    })
+  );
+});
+`}export{d as buildManifest,m as buildServiceWorker};

package/dist/baseui.registry.json

@@ -1662,8 +1662,8 @@
   "integrity": {
     "baseui.min.css": "sha384-hYFwlV6T/ONYzawtDGDFUoruqgNwYl9AVvLDHx24IWgKSMXqwACo/nX04I3gnyT9",
     "bootstrap.bundle.min.js": "sha384-RMbllTJcplkCRnELNTOc5Kz/3AvFDE/rNlJqWqfgmRWruobClBdfwvl10akQZkR1",
-    "baseui.min.js": "sha384-m91LivkZ3FsaSmngFXfmaGHxfBokU/tEXFAuYz3PIjeXuKMcJjdRmOEk596O8S8u",
-    "baseui.esm.js": "sha384-v3JjyzSIh67awBXIDScUTR40lyCHyuOue1zwObQHjH4OjOj9Cg3mPMkto3LVcVO7",
+    "baseui.min.js": "sha384-Qv1lpDLXQ3+gI0MGXGSdeOmq7tX+Hn6/TcsSsnWikLXQhi7BTAIKNWPUeIXP1LxF",
+    "baseui.esm.js": "sha384-IkUDqUsC56aiRgXggGe2XGZM2chM148CB837Gh/mWPtjqUEq5qH9ve5eG5texJPT",
     "baseui.icons.esm.js": "sha384-hj39VMhzcFvmYnjob2hlioMOAqwAXCURGreF6s9RitXFp/iYi7rUdqtfCI+ICQeS",
     "baseui.templates.xml": "sha384-XkqmfurKcEF6WuIQHWAbnZfW6oz19n7SDVRDU3g0hc3qOr4kPd/qfNGcTmcDDIgQ",
     "baseui.block-viewer.esm.js": "sha384-XlIb3jDxt6Q75dbC4rLctTdPU6u0vJFcbxp9Gl6VKOkhjpz3wRBe0E3dWd80425L",

package/dist/types/pwa.d.ts

@@ -0,0 +1,37 @@
+/** Optional PWA toolkit: builds manifest.webmanifest/sw.js content from a config object. */
+export interface BaseUIManifestConfig {
+  name: string;
+  /** Defaults to `name`. */
+  shortName?: string;
+  description?: string;
+  /** Defaults to "/". */
+  startUrl?: string;
+  /** Defaults to "/". */
+  scope?: string;
+  /** Defaults to "standalone". */
+  display?: string;
+  /** Defaults to "portrait-primary". */
+  orientation?: string;
+  /** Defaults to "#ffffff". */
+  backgroundColor?: string;
+  /** Defaults to "#0f172a". */
+  themeColor?: string;
+  /** Defaults to "en". */
+  lang?: string;
+  /** Defaults to a 192/512 `/icons/icon-*.png` set. */
+  icons?: Array<{ src: string; sizes: string; type: string; purpose?: string }>;
+}
+
+export interface BaseUIServiceWorkerConfig {
+  /** Cache bucket name, e.g. "my-app-cache-v1" — bump the suffix to invalidate old caches. */
+  cacheName: string;
+  /** Pinned `@thebase/ui` version the generated sw.js precaches/serves from jsdelivr. */
+  cdnVersion: string;
+  /** Same-origin app-shell paths to precache (JS/CSS/XML/icons/etc). */
+  appFiles?: string[];
+  /** Extra same-origin or cross-origin URLs to precache alongside `appFiles`. */
+  extraPrecacheUrls?: string[];
+}
+
+export function buildManifest(config: BaseUIManifestConfig): Record<string, unknown>;
+export function buildServiceWorker(config: BaseUIServiceWorkerConfig): string;

package/docs/analytics.md

@@ -84,7 +84,7 @@ init({ backendUrl: "https://stats.example.com", customProperties: visitorContext
 | `lang` | `navigator.language`, e.g. `vi-VN`. |
 | `screen` | Viewport width bucket: `Mobile` (< 576 px), `Tablet` (< 992), `Laptop` (< 1440), `Desktop`. |
 
-The values are deliberately coarse: no exact pixels, nothing persistent. Backends can treat `tz`, `lang` and `screen` as visit dimensions instead of event props. To combine it with your own props, call it inside your function: `customProperties: (name) => ({ ...visitorContext(), plan: "pro" })`. The IP address and user agent never appear in the payload; the server reads them from the HTTP request (see [Receiving events](#receiving-events-backend)).
+The values are deliberately coarse: no exact pixels, nothing persistent. Backends can treat `tz`, `lang` and `screen` as visit dimensions instead of event props. To combine it with your own props, call it inside your function: `customProperties: (name) => ({ ...visitorContext(), plan: "pro" })`. Don't use `tz`, `lang` or `screen` as your own event prop names: event props override custom properties with the same key, so the visitor's value would be lost. Use something like `uiLang` instead. The IP address and user agent never appear in the payload; the server reads them from the HTTP request (see [Receiving events](#receiving-events-backend)).
 
 ## Engagement
 

package/docs/usage-guide.md

@@ -200,6 +200,42 @@ Full token list and the shadcn-aligned default palette: [Theming](theming.md).
 
 Icons ship with the normal BaseUI assets — no separate script tag, and every Lucide icon name is available by kebab-case (`panel-left`), camelCase, or snake_case. Sizing, color, accessibility rules, and self-hosting: [Built-in Icons](icons.md).
 
+## 5b. PWA toolkit (optional) — generate manifest.webmanifest + sw.js
+
+Any BaseUI app can become an installable PWA without hand-writing a service worker. `@thebase/ui/pwa`
+exports two pure functions, `buildManifest(config)` and `buildServiceWorker(config)`, that turn a
+config object into the exact manifest JSON and service-worker source a hand-written PWA needs
+(precache the app shell, network-first for same-origin requests, cache-first for the pinned CDN
+build). Define the variables once, regenerate the files whenever they change:
+
+```js
+// baseui.pwa.config.js
+export default {
+  manifest: {
+    name: "My App",
+    shortName: "MyApp",
+    description: "One sentence about the app.",
+    themeColor: "#0f172a",
+  },
+  serviceWorker: {
+    cacheName: "my-app-cache-v1",
+    cdnVersion: "1.1.1", // pin to match the importmap in index.html
+    appFiles: ["/app.css", "/app.js", "/app.xml", "/favicon.svg", "/icons/icon-192.png", "/icons/icon-512.png"],
+  },
+};
+```
+
+```sh
+npx create-baseui-app pwa . --config baseui.pwa.config.js
+# writes ./manifest.webmanifest and ./sw.js
+```
+
+Re-run the command whenever `appFiles`, the CDN pin, or manifest fields change — both output files are
+fully regenerated, never hand-patched. Only `manifest.name`, `serviceWorker.cacheName`, and
+`serviceWorker.cdnVersion` are required; everything else (icons, theme/background color, display
+mode, extra precache URLs) has the same defaults the `qr-page` example ships with. See
+`dist/types/pwa.d.ts` for the full config shape.
+
 ## 6. Copy a block instead of assembling from primitives
 
 For common layouts (dashboard shells, sidebars, login/signup forms, charts), copy a ready-made block from the gallery instead of composing primitives by hand: [Blocks](blocks.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thebase/ui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "CDN-installable Owl and Bootstrap 5 UI component library.",
   "type": "module",
   "main": "./dist/baseui.min.js",
@@ -25,6 +25,10 @@
       "import": "./dist/baseui.analytics.esm.js",
       "default": "./dist/baseui.analytics.min.js"
     },
+    "./pwa": {
+      "types": "./dist/types/pwa.d.ts",
+      "import": "./dist/baseui.pwa.esm.js"
+    },
     "./dist/baseui.templates.xml": "./dist/baseui.templates.xml"
   },
   "files": [
@@ -35,6 +39,7 @@
     "dist/baseui.icons.esm.js",
     "dist/baseui.analytics.esm.js",
     "dist/baseui.analytics.min.js",
+    "dist/baseui.pwa.esm.js",
     "dist/baseui.templates.xml",
     "dist/icons",
     "dist/baseui.registry.json",