@widgetic/design-system 0.3.75 → 0.3.77

package/dist/components/pdf/PDFViewer.svelte

@@ -3,7 +3,8 @@
   import { onMount, onDestroy, tick, afterUpdate, createEventDispatcher } from 'svelte';
 
   // Sveltekit imports
-  import { browser } from '$app/environment';
+  // import { browser } from '$app/environment';
+  const browser = typeof window !== 'undefined';
   import { base } from '$app/paths';
   
   // Local components imports

package/dist/styles/global.css

@@ -5,10 +5,14 @@
 /* @import './fonts.css' layer(utilities); */
 @import './fonts.css';
 
-/* Tailwind config load *after* main imports - needed for tailwind 4 */
-@config "../../../tailwind.config.ts";
+/* Tailwind config load *after* main imports - needed for tailwind 4 
+go 3 levels up in development mode, 2 levels up in production mode*/
+@config "../../tailwind.config.ts";
 
 /* Utility classes for border radius - Moved to top level */
+/* NOTE: We define these custom utilities BEFORE the base layer 
+   so they are available for @apply within the base layer if needed, 
+   and Tailwind processes them correctly. */
 @utility rounded-pill {
   border-radius: var(--radius-pill);
 }
@@ -34,6 +38,7 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
+  /* Rule for Default border color fix from first @layer block */
   *,
   ::after,
   ::before,
@@ -41,10 +46,8 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentcolor);
   }
-}
 
-@layer base {
-  /* CSS Variables Here at the top of the base layer */
+  /* CSS Variables now defined globally on :root */
   :root {
     /* Site Grid Variables */
     --site-column-width: 74px;
@@ -90,11 +93,10 @@
     /* Icon Colors */
     --icon-success: 142 71% 45%;
     --icon-error: 0 84% 60%;
-  }
 
-  /* CLASSES FOR WIDGETIC COMPONENTS - Keep variable definitions inside layer */
-  /* convert colors from hex to HSL (Hue, Saturation, Lightness) format */
-  .widgetic-colors {
+    
+    /* Widgetic Color Variables (Moved from .widgetic-colors) */
+    /* convert colors from hex to HSL (Hue, Saturation, Lightness) format */
     --dark: 120 35.7% 9.4%;
     --deep-forest-green: 115 24.1% 24.7%;
     --sage-green: 108 25.4% 52.9%;
@@ -103,7 +105,6 @@
     --forest-green: 90 16.7% 83.3%;
     --error: 0 89% 65.7%;
     --light-error: 0 45.5% 93.7%;
-    
     /* Greys */
     --grey1: 0 0% 96.1%;
     --grey2: 0 0% 94.1%;
@@ -112,11 +113,10 @@
     --grey5: 0 0% 40%;
     --grey6: 0 0% 26.7%;
     --grey7: 0 0% 12.9%;
-  }
 
-  /* Border radius tokens */
-  .widgetic-radius {
-    /* Corner radius values */
+
+
+    /* Border radius values */
     --radius-pill: 100px;   /* Pill/Extra large corner radius */
     --radius-large: 15px;   /* Large corner radius */
     --radius-medium: 12px;  /* Medium corner radius */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.3.75",
+	"version": "0.3.77",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -23,11 +23,14 @@
 		"dev-with-check": "NODE_ENV=development concurrently \"npm run check:watch\" \"npm run dev-sv\" \"npm run package:watch\"",
 		"dev-open": "npm run dev-sv -- --open",
 		"dev-sv": "NODE_ENV=development vite dev",
+		"build-sv": "vite build",
 		"watch": "concurrently \"npm run check:watch\" \"npm run package:watch\"",
 		"build": "NODE_ENV=production vite build && npm run package",
-		"package:watch": "NODE_ENV=development svelte-package --watch | grep -v '$app/environment'",
-		"build-sv": "vite build",
-		"package": "svelte-package | grep -v '$app/environment'",
+		"package:watch:svelte": "NODE_ENV=development svelte-package --watch | grep -v '$app/environment'",
+		"package:watch:css": "chokidar 'dist/styles/global.css' --debounce 500 -c \"npm run update-config-path\" --initial",
+		"package:watch": "concurrently \"npm run package:watch:svelte\" \"npm run package:watch:css\"",
+		"package": "NODE_ENV=production svelte-package | grep -v '$app/environment' && npm run update-config-path",
+		"update-config-path": "if [ -f dist/styles/global.css ] && grep -q '@config \"../../../tailwind.config.ts\";' dist/styles/global.css; then echo 'Updating @config path in dist/styles/global.css...'; sed -i '' 's|@config \"../../../tailwind.config.ts\";|@config \"../../tailwind.config.ts\";|g' dist/styles/global.css; else :; fi",
 		"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",
@@ -122,6 +125,7 @@
 		"@tailwindcss/typography": "^0.5.15",
 		"@types/node": "^22.10.1",
 		"bits-ui": "^1.3.19",
+		"chokidar-cli": "^3.0.0",
 		"concurrently": "^9.1.0",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -167,6 +171,7 @@
 		"@tiptap/starter-kit": "^2.9.1",
 		"clsx": "^2.1.1",
 		"lowlight": "^3.2.0",
+		"lucide-svelte": "^0.468.0",
 		"mode-watcher": "^0.5.0",
 		"pdfjs-dist": "^4.10.38",
 		"svelte-awesome-color-picker": "^3.1.4",
@@ -175,8 +180,7 @@
 		"tailwind-merge": "^2.5.5",
 		"tailwind-variants": "^0.3.0",
 		"tailwindcss-animate": "^1.0.7",
-		"vaul-svelte": "^1.0.0-next.3",
-		"lucide-svelte": "^0.468.0"
+		"vaul-svelte": "^1.0.0-next.3"
 	},
 	"volta": {
 		"node": "22.14.0",