@klodd/ds 5.8.0 → 5.9.0

package/SKILL.md

@@ -7,10 +7,13 @@ description: Design memory for the @klodd/ds shared design system used by the tw
 
 ## Status
 Designsystem-auditen (2026-05-20, se `audits/00-summary.md`) slutförd -
-alla tre sprintar klara:
+alla sex sprintar klara:
 - Sprint 1: dead-code-städning + topbar-bump (5.4.3)
 - Sprint 2: component-token-konsolidering, ADR 0024-backfill, light-theme-removal (5.5.0)
 - Sprint 3: base.css-extraktion till paketets base/interactions.css (5.6.0)
+- Sprint 4: JS-extraktion (sheet + toast) + deprecated-selektor-grep i verify (5.7.0 + 5.7.1)
+- Sprint 5: width/height-tokens (--measure-*, --content-max-*) + stylelint-regel no-literal-dimension (5.8.0)
+- Sprint 6: clerk-init-extraktion (waitForClerkBase, clerkLogout, KloddDS.clerkReady, fetchPatch opt-in) + async-progress clerkReady-race-fix (5.9.0)
 
 ## Vad detta är
 Gemensamt designsystem på npm (`@klodd/ds@5.x`). Tre-lagers tokens,

package/js/async-progress.js

@@ -91,12 +91,23 @@
       this.failed = false;
       this.consecutiveErrors = 0;
       if (this.pollTimer !== null) return;
-      // Forsta poll efter 100ms sa ev. fetch-patches (auth-tokens etc)
-      // hinner appliceras.
-      setTimeout(() => this._poll(), 100);
+      // Forsta poll vantar in KloddDS.clerkReady (clerk-init.js) sa en
+      // ev. fetch-Bearer-patch ar installerad innan vi traffar /api/.
+      // Ersatter en tidigare blind setTimeout(_poll, 100)-gissning som
+      // tappade racet vid langsam Clerk.load(). Saknas clerkReady
+      // (clerk-init.js ej laddad) pollar _firstPoll direkt - graceful
+      // degradation.
+      this._firstPoll();
       this.pollTimer = setInterval(() => this._poll(), this.cfg.pollInterval);
     }
 
+    async _firstPoll() {
+      if (window.KloddDS && window.KloddDS.clerkReady) {
+        await window.KloddDS.clerkReady;
+      }
+      this._poll();
+    }
+
     stop() {
       if (this.pollTimer !== null) {
         clearInterval(this.pollTimer);

package/js/clerk-init.js

@@ -0,0 +1,109 @@
+/* @klodd/ds - clerk-init
+ *
+ * Delad Clerk-initialisering for apparna som konsumerar @klodd/ds.
+ * Extraherad ur appernas app.js (tidigare byte-identiska kopior med
+ * tva divergenser: fetch-Bearer-patchen och logout-redirecten).
+ *
+ * Exponerar tre globals:
+ *
+ *   window.waitForClerkBase(cb, attempts)
+ *     Pollar window.Clerk var 200ms (max 50 forsok) och kor cb nar
+ *     SDK:n finns. Anvands ocksa av page-login.js.
+ *
+ *   window.clerkLogout()
+ *     Async. signOut() + redirect till config.logoutRedirect. Satts
+ *     upp av initClerk eftersom den behover config-vardet.
+ *
+ *   KloddDS.clerkReady
+ *     Promise som resolvar nar Clerk.load() ar klar. Resolvar i ett
+ *     finally - alltsa aven om Clerk.load() kastar - sa konsumenter
+ *     inte hanger for evigt vid en Clerk-storning. Resolvar oavsett
+ *     fetchPatch-konfiguration. Representerar "Clerk ar redo", inte
+ *     "patchen ar installerad". Tidiga /api/-fetchers (AsyncProgress)
+ *     awaitar den istallet for att gissa en setTimeout-delay.
+ *
+ * KloddDS.initClerk(config) startar allt. config-falt:
+ *
+ *   fetchPatch (default false)
+ *     Om true: patcha window.fetch sa /api/-anrop far en
+ *     Authorization: Bearer-header. Fallback nar cookies inte gar
+ *     igenom (PWA-standalone pa iOS). Opt-in per app.
+ *
+ *   logoutRedirect (default "/")
+ *     Dit clerkLogout navigerar efter signOut().
+ *
+ * initClerk anropas via en liten extern per-app config-fil
+ * (clerk-config.js) - CSP utan 'unsafe-inline' tillater inte
+ * inline-script. defer-ordning garanterar att initClerk finns nar
+ * config-filen kor.
+ */
+(function () {
+  "use strict";
+
+  window.KloddDS = window.KloddDS || {};
+
+  // clerkReady skapas direkt nar denna fil kor, sa konsumenter kan
+  // awaita den aven innan initClerk hunnit anropas. resolve-funktionen
+  // sparas sa initClerk-callbacken kan resolva den.
+  let resolveClerkReady;
+  window.KloddDS.clerkReady = new Promise(function (resolve) {
+    resolveClerkReady = resolve;
+  });
+
+  function waitForClerkBase(cb, attempts) {
+    if (window.Clerk) return cb();
+    if ((attempts || 0) > 50) return console.error("Clerk JS failed to load");
+    setTimeout(function () { waitForClerkBase(cb, (attempts || 0) + 1); }, 200);
+  }
+  window.waitForClerkBase = waitForClerkBase;
+
+  // Patchar window.fetch sa /api/-anrop far Authorization: Bearer som
+  // fallback nar cookies inte gar igenom (PWA-standalone pa iOS).
+  // Oforandrad logik fran Jubbs tidigare app.js-inline-version.
+  function installFetchPatch() {
+    if (!window.Clerk.session) return;
+    const originalFetch = window.fetch.bind(window);
+    window.fetch = async function (input, init) {
+      try {
+        const url = typeof input === "string" ? input : input.url;
+        if (url && (url.startsWith("/api/") || url.startsWith(window.location.origin + "/api/"))) {
+          const token = await window.Clerk.session.getToken();
+          if (token) {
+            init = init || {};
+            init.headers = new Headers(init.headers || {});
+            init.headers.set("Authorization", "Bearer " + token);
+          }
+        }
+      } catch (e) {
+        console.warn("Clerk token fetch failed", e);
+      }
+      return originalFetch(input, init);
+    };
+  }
+
+  function initClerk(config) {
+    const cfg = Object.assign(
+      { fetchPatch: false, logoutRedirect: "/" },
+      config || {}
+    );
+    waitForClerkBase(async function () {
+      try {
+        await window.Clerk.load();
+        if (cfg.fetchPatch) installFetchPatch();
+      } catch (e) {
+        console.log("Clerk init:", e);
+      } finally {
+        // finally: clerkReady resolvar aven om Clerk.load() kastade,
+        // sa await KloddDS.clerkReady aldrig hanger for evigt.
+        resolveClerkReady();
+        window.clerkLogout = async function () {
+          if (window.Clerk) {
+            await window.Clerk.signOut();
+          }
+          window.location.href = cfg.logoutRedirect;
+        };
+      }
+    }, 0);
+  }
+  window.KloddDS.initClerk = initClerk;
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {