@widgetic/design-system 0.5.12 → 0.5.14

package/dist/components/modals/Portal.svelte

@@ -39,6 +39,19 @@
             if (!host) {
                 host = document.querySelector(`.${targetId}`) as HTMLElement | null;
             }
+            // Never adopt the portal's own subtree as its host.
+            //
+            // A caller may name a target after a class that the *portalled content*
+            // also carries (e.g. target `app-header-widget-picker` for a dropdown
+            // whose root div has that same class, so outside-click detection can
+            // find it). The slot is already rendered inside `portal` when onMount
+            // runs, so the class lookup above can return that inner div. Moving
+            // `portal` into it then throws
+            // "HierarchyRequestError: The new child element contains the parent".
+            // Anything equal to, inside, or containing `portal` is not a host.
+            if (host && (host === portal || portal?.contains(host) || host.contains(portal))) {
+                host = null;
+            }
             // if(showLogs) console.log('DS Portal host:', host, 'target:', target);
 
             // Create host container if it doesn't exist

package/dist/styles/fonts.css

@@ -1,3 +1,22 @@
+/* Self-hosted faces from src/lib/fonts (packaged with DS).
+ * Paths are relative so Vite resolves them when consumers import fonts.css.
+ * Site also mirrors these under static/fonts for /fonts/* URLs in app.html.
+ *
+ * ## OTS / Chromium validation (Sep 2026)
+ * Several Inter / Cousine / JetBrains Mono WOFF2 files under src/lib/fonts fail
+ * Chromium OpenType Sanitizer (console: "OTS parsing error", "Failed to convert
+ * WOFF 2.0 font to SFNT") when served via Vite `@fs` in local monorepo links.
+ * That does NOT mean CSS @font-face is wrong — the binary files themselves are
+ * incomplete/corrupt for OTS. Google Fonts CDN faces (site app.html) still work
+ * for the same family names, so UI typography stays correct even when local
+ * @font-face errors appear in the console.
+ *
+ * Keep these @font-face rules for packaging / offline / consumers that ship
+ * clean binaries. Prefer replacing the WOFF2 files with official releases
+ * (rsms/inter, google/fonts) when cleaning the console is required — do not
+ * delete @font-face solely to silence OTS.
+ */
+
 /* Tailwind config */
 /* @config "../../../tailwind.config.ts"; */
 
@@ -6,7 +25,7 @@
   /** INTER FAMILY (Figma Foundations: 01 — Foundations) **/
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Thin-BETA.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Thin-BETA.woff2') format('woff2');
     font-weight: 100;
     font-style: normal;
     font-display: swap;
@@ -14,7 +33,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-ExtraLight-BETA.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-ExtraLight-BETA.woff2') format('woff2');
     font-weight: 200;
     font-style: normal;
     font-display: swap;
@@ -22,7 +41,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Light-BETA.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Light-BETA.woff2') format('woff2');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
@@ -30,7 +49,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Regular.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
@@ -38,7 +57,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Italic.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Italic.woff2') format('woff2');
     font-weight: 400;
     font-style: italic;
     font-display: swap;
@@ -46,7 +65,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Medium.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Medium.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
@@ -54,7 +73,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-SemiBold.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-SemiBold.woff2') format('woff2');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
@@ -62,7 +81,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Bold.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
@@ -70,7 +89,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-ExtraBold.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-ExtraBold.woff2') format('woff2');
     font-weight: 800;
     font-style: normal;
     font-display: swap;
@@ -78,7 +97,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Black.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Black.woff2') format('woff2');
     font-weight: 900;
     font-style: normal;
     font-display: swap;
@@ -86,7 +105,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter.var.woff2') format('woff2-variations');
+    src: url('../fonts/Inter/Inter.var.woff2') format('woff2-variations');
     font-weight: 100 900;
     font-style: normal;
     font-display: swap;
@@ -95,7 +114,7 @@
   /* JETBRAINS MONO: Monospace Display (Developer API) */
   @font-face {
     font-family: 'JetBrains Mono';
-    src: url('/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2') format('woff2');
+    src: url('../fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2') format('woff2');
     font-weight: 800;
     font-style: normal;
     font-display: swap;
@@ -104,7 +123,7 @@
   /* COUSINE: Code & Embed Snippets */
   @font-face {
     font-family: 'Cousine';
-    src: url('/fonts/Cousine/Cousine-Regular.woff2') format('woff2');
+    src: url('../fonts/Cousine/Cousine-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
@@ -112,7 +131,7 @@
 
   @font-face {
     font-family: 'Cousine';
-    src: url('/fonts/Cousine/Cousine-Bold.woff2') format('woff2');
+    src: url('../fonts/Cousine/Cousine-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;

package/dist/styles/global.css

@@ -476,14 +476,14 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   /* Tablet (744px and below) */
   @media (max-width: 744px) {
     .dashboard-grid {
-      grid-template-columns: 
-        var(--dashboard-margin)
+      /* Keep the four tracks aligned with the four named areas below. */
+      grid-template-columns:
         var(--dashboard-sidebar-width)
-        var(--dashboard-gap)
-        1fr
+        var(--dashboard-margin)
+        minmax(0, 1fr)
         var(--dashboard-margin);
       grid-template-rows: 56px 1fr;
-      gap: var(--dashboard-gap);
+      gap: 0;
       grid-template-areas:
         "sidebar margin-l header margin-r"
         "sidebar margin-l main margin-r";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.5.12",
+	"version": "0.5.14",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -38,6 +38,8 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "NODE_OPTIONS='--max-old-space-size=8192' svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"check:strict": "tsc --noEmit && npm run check",
+		"check:deps": "check-runtime-deps",
+		"test:deps": "check-runtime-deps-fixtures",
 		"pnpm-link": "zsh -c 'mkdir -p ~/.pnpm-global/bin && export PATH=\"$PATH:$HOME/.pnpm-global/bin\" && pnpm install -g pnpm && pnpm config set global-bin-dir ~/.pnpm-global/bin && echo \"export PATH=\\\"$PATH:$HOME/.pnpm-global/bin\\\"\" >> ~/.zshrc && source ~/.zshrc && pnpm link --global'",
 		"link-packs": "zsh -c 'mkdir -p ~/.pnpm-global/bin && export PATH=\"$PATH:$HOME/.pnpm-global/bin\" && pnpm install -g pnpm && pnpm config set global-bin-dir ~/.pnpm-global/bin && echo \"export PATH=\\\"$PATH:$HOME/.pnpm-global/bin\\\"\" >> ~/.zshrc && source ~/.zshrc && pnpm link --global @widgetic/api-sdk @widgetic/design-system'",
 		"i-shadcn": "npm run clean-shadcn && npm run i-shadcn-init && npm run i-shadcn-comps",
@@ -93,16 +95,6 @@
 			"svelte": "./dist/stores/*.js",
 			"default": "./dist/stores/*.js"
 		},
-		"./previews": {
-			"types": "./dist/components/previews/index.d.ts",
-			"svelte": "./dist/components/previews/index.js",
-			"default": "./dist/components/previews/index.js"
-		},
-		"./previews/*": {
-			"types": "./dist/components/previews/*.d.ts",
-			"svelte": "./dist/components/previews/*.js",
-			"default": "./dist/components/previews/*.js"
-		},
 		"./styles": "./dist/styles/global.css",
 		"./styles/*": "./dist/styles/*.css",
 		"./fonts": "./dist/fonts",
@@ -149,6 +141,7 @@
 		"@tiptap/pm": "^2.9.1",
 		"@tiptap/starter-kit": "^2.9.1",
 		"@types/node": "^22.10.1",
+		"@widgetic/dev-tools": "^0.1.0",
 		"chokidar-cli": "^3.0.0",
 		"concurrently": "^9.1.0",
 		"eslint": "^9.7.0",