@hkdigital/lib-core 0.5.90 → 0.5.92

package/dist/state/classes/reactive-data-store/README.md

@@ -0,0 +1,445 @@
+# ReactiveDataStore
+
+Reactive key-value data store with fine-grained reactivity built on Svelte 5's
+`SvelteMap`.
+
+## Features
+
+- **Fine-grained reactivity**: Effects only re-run when specific keys change
+- **Strict mode**: Throws errors on uninitialized key access
+- **Production guard**: Dev-only data mode for development helpers
+- **Full CRUD API**: Set, get, update, delete, check existence, clear
+- **Type-safe**: Use constants for keys to get autocomplete and typo prevention
+
+## Basic Usage
+
+```javascript
+import { ReactiveDataStore } from '$lib/state/classes.js';
+
+// Create a store
+const store = new ReactiveDataStore({
+  initialData: {
+    score: 0,
+    level: 1,
+    playerName: 'Alice'
+  }
+});
+
+// Set data
+store.set('score', 100);
+
+// Get data (reactive)
+$effect(() => {
+  const score = store.get('score');
+  console.log('Score changed:', score);
+});
+
+// Update multiple values
+store.update({
+  score: 200,
+  level: 5
+});
+
+// Check existence
+if (store.has('score')) {
+  // ...
+}
+
+// Get all data (snapshot)
+const allData = store.getAll();
+
+// Delete
+store.delete('temporaryFlag');
+
+// Clear all
+store.clear();
+
+// Get size
+console.log(`Store has ${store.size} entries`);
+```
+
+## Options
+
+```javascript
+const store = new ReactiveDataStore({
+  // Initial key-value pairs
+  initialData: {},
+
+  // Throw on uninitialized key access (default: true)
+  strictMode: true,
+
+  // Dev-only mode (default: false)
+  productionGuard: false,
+
+  // Custom error message prefix (default: 'Data key')
+  errorPrefix: 'Custom prefix'
+});
+```
+
+## Fine-Grained Reactivity
+
+ReactiveDataStore uses `SvelteMap` internally, providing fine-grained
+reactivity where effects only re-run when the specific keys they access change.
+
+```javascript
+const store = new ReactiveDataStore({
+  initialData: { score: 0, lives: 3 }
+});
+
+// Effect 1: Only re-runs when 'score' changes
+$effect(() => {
+  const score = store.get('score');
+  console.log('Score:', score);
+});
+
+// Effect 2: Only re-runs when 'lives' changes
+$effect(() => {
+  const lives = store.get('lives');
+  console.log('Lives:', lives);
+});
+
+// This only triggers Effect 1, not Effect 2
+store.set('score', 100);
+
+// This only triggers Effect 2, not Effect 1
+store.set('lives', 2);
+```
+
+## Strict Mode (Default)
+
+By default, ReactiveDataStore throws errors when accessing uninitialized keys.
+This helps catch typos and ensures data is properly initialized.
+
+```javascript
+const store = new ReactiveDataStore();
+
+// ❌ Throws: "Data key "score" is not initialized."
+store.get('score');
+
+// ✅ Initialize first
+store.set('score', 0);
+store.get('score');  // Works
+
+// Or initialize via constructor
+const store2 = new ReactiveDataStore({
+  initialData: { score: 0 }
+});
+store2.get('score');  // Works
+```
+
+### Disabling Strict Mode
+
+```javascript
+const store = new ReactiveDataStore({
+  strictMode: false
+});
+
+// Returns undefined instead of throwing
+const score = store.get('nonexistent');  // undefined
+```
+
+## Production Guard (Dev-Only Data)
+
+Use `productionGuard: true` for development-only data that should not be
+accessed in production.
+
+```javascript
+const devStore = new ReactiveDataStore({
+  initialData: {
+    autoNavigation: false,
+    skipAnimations: false,
+    mockApi: 'localhost'
+  },
+  productionGuard: true,
+  errorPrefix: 'Dev data key'
+});
+
+// In development mode:
+devStore.set('autoNavigation', true);    // ✅ Works
+const value = devStore.get('autoNavigation');  // ✅ Works
+
+// In production:
+devStore.set('autoNavigation', true);    // ✅ Silent no-op (safe)
+devStore.get('autoNavigation');          // ❌ Throws error (programming bug!)
+```
+
+**Why this design?**
+
+- **SET operations**: Safe to call conditionally in production (no-op)
+- **GET/HAS operations**: Reading dev data in production is a programming
+  error that should fail fast
+
+## Using with PageMachine
+
+ReactiveDataStore is used internally by PageMachine for data management:
+
+```javascript
+import { PageMachine } from '$lib/state/machines.js';
+
+const machine = new PageMachine({
+  startPath: '/intro',
+  initialData: {
+    score: 0,
+    tutorialSeen: false
+  },
+  initialDevData: {
+    autoNav: false,
+    skipAnimations: false
+  }
+});
+
+// Access via read-only getters
+machine.data.set('score', 100);
+machine.data.get('score');
+
+machine.devData.set('autoNav', true);
+machine.devData.get('autoNav');
+```
+
+## Best Practices
+
+### 1. Use Constants for Keys
+
+Avoid magic strings - use constants for autocomplete and typo prevention:
+
+```javascript
+// ✅ Good - use constants
+const KEY_SCORE = 'score';
+const KEY_PLAYER_NAME = 'player-name';
+const KEY_TUTORIAL_SEEN = 'tutorial-seen';
+
+store.set(KEY_SCORE, 100);
+const score = store.get(KEY_SCORE);
+
+// ❌ Avoid - magic strings
+store.set('score', 100);
+const score = store.get('scroe');  // Typo! No error until runtime
+```
+
+### 2. Initialize Data in Constructor
+
+Always initialize expected keys in the constructor for strict mode:
+
+```javascript
+// ✅ Good
+const store = new ReactiveDataStore({
+  initialData: {
+    score: 0,
+    lives: 3,
+    playerName: ''
+  }
+});
+
+// ❌ Avoid - uninitialized keys
+const store = new ReactiveDataStore();
+store.get('score');  // Throws error
+```
+
+### 3. Use Dev Data for Development Helpers
+
+Keep development-only flags separate with production guard:
+
+```javascript
+// Regular data
+const data = new ReactiveDataStore({
+  initialData: {
+    score: 0,
+    level: 1
+  }
+});
+
+// Dev-only data
+const devData = new ReactiveDataStore({
+  initialData: {
+    autoNavigation: false,
+    skipAnimations: false,
+    debugMode: false
+  },
+  productionGuard: true,
+  errorPrefix: 'Dev data key'
+});
+```
+
+### 4. Use getAll() for Serialization Only
+
+`getAll()` returns a snapshot (plain object), not a reactive value. Use it for
+serialization or inspection, not for reactive tracking:
+
+```javascript
+// ✅ Good - serialization
+const snapshot = store.getAll();
+await saveToServer(snapshot);
+
+// ✅ Good - inspection
+console.log('Current state:', store.getAll());
+
+// ❌ Avoid - for reactivity
+$effect(() => {
+  const data = store.getAll();  // Re-runs on ANY key change
+  console.log(data.score);      // Use store.get('score') instead
+});
+```
+
+## API Reference
+
+### Constructor
+
+```javascript
+new ReactiveDataStore(options)
+```
+
+**Options:**
+- `initialData` (object): Initial key-value pairs
+- `strictMode` (boolean): Throw on uninitialized keys (default: `true`)
+- `productionGuard` (boolean): Dev-only mode (default: `false`)
+- `errorPrefix` (string): Error message prefix (default: `'Data key'`)
+
+### Methods
+
+#### `set(key, value)`
+
+Set a data property value. Triggers reactivity for this key.
+
+```javascript
+store.set('score', 100);
+```
+
+#### `get(key)`
+
+Get a data property value. Creates a reactive dependency on this key.
+
+```javascript
+const score = store.get('score');
+```
+
+**Throws:** Error if key not initialized (strict mode)
+
+#### `getAll()`
+
+Get all data as a plain object snapshot (not reactive).
+
+```javascript
+const snapshot = store.getAll();
+```
+
+#### `update(updates)`
+
+Update multiple properties at once.
+
+```javascript
+store.update({
+  score: 100,
+  level: 5,
+  lives: 2
+});
+```
+
+#### `has(key)`
+
+Check if a key exists.
+
+```javascript
+if (store.has('score')) {
+  // Key exists
+}
+```
+
+#### `delete(key)`
+
+Delete a property.
+
+```javascript
+const deleted = store.delete('temporaryFlag');
+```
+
+**Returns:** `true` if key existed and was deleted
+
+#### `clear()`
+
+Clear all data properties.
+
+```javascript
+store.clear();
+```
+
+#### `size` (getter)
+
+Get the number of data entries.
+
+```javascript
+console.log(`Store has ${store.size} entries`);
+```
+
+## Common Patterns
+
+### Persisting to Server
+
+```javascript
+const store = new ReactiveDataStore({
+  initialData: {
+    score: 0,
+    level: 1,
+    preferences: {}
+  }
+});
+
+// Save snapshot to server
+async function saveProgress() {
+  const data = store.getAll();
+  await fetch('/api/save', {
+    method: 'POST',
+    body: JSON.stringify(data)
+  });
+}
+
+// Load from server
+async function loadProgress() {
+  const response = await fetch('/api/load');
+  const data = await response.json();
+  store.update(data);
+}
+```
+
+### Computed Values
+
+```javascript
+const store = new ReactiveDataStore({
+  initialData: {
+    score: 0,
+    multiplier: 1
+  }
+});
+
+// Computed value based on store data
+const totalScore = $derived(
+  store.get('score') * store.get('multiplier')
+);
+```
+
+### Conditional Effects
+
+```javascript
+const store = new ReactiveDataStore({
+  initialData: {
+    level: 1,
+    lives: 3
+  }
+});
+
+// Effect only runs when level changes and lives > 0
+$effect(() => {
+  const level = store.get('level');
+  const lives = store.get('lives');
+
+  if (lives > 0) {
+    console.log(`Playing level ${level}`);
+  }
+});
+```
+
+## See Also
+
+- [PageMachine](../../machines/page-machine/README.md) - Uses ReactiveDataStore
+  for route-aware data management
+- [SubscribersCount](../subscribers-count/SubscribersCount.js) - Another state
+  utility class

package/dist/state/machines/page-machine/README.md

@@ -135,32 +135,32 @@ export class PuzzleState extends PageMachine {
     return this.current === ROUTE_COMPLETE;
   }
 
-  // Persistent settings/progress (use getData/setData)
+  // Persistent settings/progress (use machine.data)
   get hasSeenTutorial() {
-    return this.getData(KEY_TUTORIAL_SEEN) || false;
+    return this.data.get(KEY_TUTORIAL_SEEN) || false;
   }
 
   markTutorialComplete() {
-    this.setData(KEY_TUTORIAL_SEEN, true);
+    this.data.set(KEY_TUTORIAL_SEEN, true);
   }
 
   get highestLevel() {
-    return this.getData(KEY_HIGHEST_LEVEL) || 1;
+    return this.data.get(KEY_HIGHEST_LEVEL) || 1;
   }
 
   updateHighestLevel(level) {
     const current = this.highestLevel;
     if (level > current) {
-      this.setData(KEY_HIGHEST_LEVEL, level);
+      this.data.set(KEY_HIGHEST_LEVEL, level);
     }
   }
 
   get difficulty() {
-    return this.getData(KEY_DIFFICULTY) || 'normal';
+    return this.data.get(KEY_DIFFICULTY) || 'normal';
   }
 
   setDifficulty(level) {
-    this.setData(KEY_DIFFICULTY, level);
+    this.data.set(KEY_DIFFICULTY, level);
   }
 
   // Optional: Lifecycle methods
@@ -273,11 +273,25 @@ puzzleState.isStartPath(path)         // Check if path is start path
 puzzleState.isOnStartPath             // Check if on start path
 puzzleState.redirectToStartPath()     // Navigate to start path
 
-// Persistent data properties
-puzzleState.setData(KEY_NAME, value)
-puzzleState.getData(KEY_NAME)
-puzzleState.getAllData()
-puzzleState.updateData({ KEY1: val1, KEY2: val2 })
+// Persistent data properties (via ReactiveDataStore)
+puzzleState.data.set(KEY_NAME, value)
+puzzleState.data.get(KEY_NAME)
+puzzleState.data.getAll()
+puzzleState.data.update({ KEY1: val1, KEY2: val2 })
+puzzleState.data.has(KEY_NAME)
+puzzleState.data.delete(KEY_NAME)
+puzzleState.data.clear()
+puzzleState.data.size
+
+// Dev data properties (dev-only, via ReactiveDataStore)
+puzzleState.devData.set(KEY_DEV_NAME, value)
+puzzleState.devData.get(KEY_DEV_NAME)
+puzzleState.devData.getAll()
+puzzleState.devData.update({ KEY1: val1 })
+puzzleState.devData.has(KEY_DEV_NAME)
+puzzleState.devData.delete(KEY_DEV_NAME)
+puzzleState.devData.clear()
+puzzleState.devData.size
 
 // Visited routes tracking
 puzzleState.hasVisited(route)         // e.g., hasVisited('/puzzle/intro')
@@ -296,9 +310,9 @@ puzzleState.hasSeenTutorial
 
 ## Data Storage Guidelines
 
-### When to use `getData/setData` (PageMachine)
+### When to use `machine.data` (ReactiveDataStore)
 
-Use PageMachine's data properties for **persistent settings and progress**:
+Use PageMachine's data store for **persistent settings and progress**:
 
 - ✅ Tutorial completion flags
 - ✅ User preferences (difficulty, language, sound)
@@ -319,13 +333,39 @@ const KEY_DIFFICULTY = 'difficulty';
 const KEY_HIGHEST_LEVEL = 'highest-level';
 
 // Use constants (not strings!)
-pageMachine.setData(KEY_TUTORIAL_SEEN, true);       // ✅ Good
-pageMachine.setData(KEY_DIFFICULTY, 'hard');        // ✅ Good
-pageMachine.setData(KEY_HIGHEST_LEVEL, 5);          // ✅ Good
+pageMachine.data.set(KEY_TUTORIAL_SEEN, true);       // ✅ Good
+pageMachine.data.set(KEY_DIFFICULTY, 'hard');        // ✅ Good
+pageMachine.data.set(KEY_HIGHEST_LEVEL, 5);          // ✅ Good
 
 // DON'T use magic strings
-pageMachine.setData('tutorial-seen', true);         // ❌ Avoid
-pageMachine.setData('TUTORIAL_SEEN', true);         // ❌ Avoid
+pageMachine.data.set('tutorial-seen', true);         // ❌ Avoid
+pageMachine.data.set('TUTORIAL_SEEN', true);         // ❌ Avoid
+```
+
+### When to use `machine.devData` (Dev-only ReactiveDataStore)
+
+Use PageMachine's devData store for **development helpers**:
+
+- ✅ Auto-navigation flags
+- ✅ Skip animations/delays
+- ✅ Mock API endpoints
+- ✅ Debug mode flags
+- ✅ Development-only settings
+
+**IMPORTANT**: Use KEY_DEV_ prefix for dev data constants:
+
+```javascript
+// Define constants (at top of file)
+const KEY_DEV_AUTO_NAVIGATION = 'dev-auto-navigation';
+const KEY_DEV_SKIP_ANIMATIONS = 'dev-skip-animations';
+const KEY_DEV_MOCK_API = 'dev-mock-api';
+
+// Use in development (no-op in production)
+pageMachine.devData.set(KEY_DEV_AUTO_NAVIGATION, true);    // ✅ Good
+pageMachine.devData.set(KEY_DEV_SKIP_ANIMATIONS, false);   // ✅ Good
+
+// Reading in production throws error (programming bug)
+const autoNav = pageMachine.devData.get(KEY_DEV_AUTO_NAVIGATION);
 ```
 
 ### When to use GameLogic with `$state`
@@ -358,6 +398,17 @@ export class PuzzleGameLogic {
 - Routes are the source of truth (no state abstraction layer)
 - Use route constants for clarity and maintainability
 - Always sync in `$effect` watching `$page.url.pathname`
-- Use constants for data keys (e.g., `KEY_TUTORIAL_SEEN`)
+- Use constants for data keys (e.g., `KEY_TUTORIAL_SEEN`, `KEY_DEV_AUTO_NAV`)
 - Separate persistent data (PageMachine) from reactive state (GameLogic)
 - Handle animations in pages using `$effect` or `onMount`
+- Data and devData use [ReactiveDataStore](../../classes/reactive-data-store/README.md)
+  for fine-grained reactivity
+- Access data via read-only getters: `machine.data.get()`, `machine.devData.set()`
+
+## See Also
+
+- [ReactiveDataStore](../../classes/reactive-data-store/README.md) - The
+  underlying reactive data storage implementation
+- [FiniteStateMachine](../finite-state-machine/README.md) - For enforced state
+  transitions
+- [State Context](../../context/README.md) - For providing state to components

package/dist/ui/CHANGES-COMPONENT-PROPS.md

@@ -0,0 +1,121 @@
+# UI Component Changes
+
+## Property Name Changes (2026-01)
+
+### Background
+Skeleton.dev has updated their component API standards, and we follow
+skeleton standards for consistency across the ecosystem.
+
+### Changes
+
+#### `classes` → `class`
+All UI components now accept `class` instead of `classes` for CSS
+class names.
+
+#### `base` → removed
+The `base` property has been deprecated. Use `class` instead.
+
+#### `bg` → removed
+The `bg` property has been deprecated. Use `class` instead.
+
+### Migration Guide
+
+**Before:**
+```svelte
+<SteezeIcon
+  base="icon-base"
+  classes="text-primary-500"
+  src={icon}
+/>
+
+<GameBox
+  base="box-base"
+  bg="bg-surface-100"
+  classes="rounded-md"
+/>
+```
+
+**After:**
+```svelte
+<SteezeIcon
+  class="icon-base text-primary-500"
+  src={icon}
+/>
+
+<GameBox
+  class="box-base bg-surface-100 rounded-md"
+/>
+```
+
+### Implementation Pattern
+
+All components follow this exact pattern for backward compatibility:
+
+**JSDoc Type:**
+```javascript
+/**
+ * @type {{
+ *   class?: string,
+ *   base?: string,  // Deprecated: use 'class' instead
+ *   bg?: string,  // Deprecated: use 'class' instead (if applicable)
+ *   classes?: string,  // Deprecated: use 'class' instead
+ *   // ... other props
+ * }}
+ */
+```
+
+**Props Destructuring:**
+```javascript
+const {
+  class: className,
+  base,  // Deprecated: kept for backward compatibility
+  bg,  // Deprecated: kept for backward compatibility (if applicable)
+  classes,  // Deprecated: kept for backward compatibility
+  // ... other props
+} = $props();
+```
+
+**Class Attribute Usage:**
+```svelte
+<!-- With bg prop -->
+<div class="{base ?? ''} {bg ?? ''} {className ?? classes ?? ''}"></div>
+
+<!-- Without bg prop -->
+<div class="{base ?? ''} {className ?? classes ?? ''}"></div>
+```
+
+**Priority Order:**
+1. `base` - applied first if provided
+2. `bg` - applied second if provided and component supports it
+3. `className` - from new `class` prop, applied if `classes` not provided
+4. `classes` - deprecated fallback, applied if `className` not provided
+
+### Backward Compatibility
+
+During the transition period, components accept both old and new
+property names:
+
+- `class` - new standard (recommended)
+- `classes` - deprecated, still works
+- `base` - deprecated, still works
+- `bg` - deprecated, still works (GameBox only)
+
+All properties will be merged if provided together, allowing gradual
+migration without breaking existing code.
+
+### Timeline
+
+- **Now**: Both old and new properties supported
+- **Future**: `base`, `bg`, and `classes` will be removed in a future
+  major version
+
+### Affected Components
+
+- `SteezeIcon.svelte`
+- `GameBox.svelte`
+- `ImageBox.svelte`
+- `Presenter.svelte`
+- `GridLayers.svelte`
+- `Panel.svelte`
+- `Button.svelte`
+- More components will be updated following this pattern

package/dist/ui/components/game-box/GameBox.svelte

@@ -26,9 +26,10 @@
 
   /**
    * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
+   *   class?: string,
+   *   base?: string,  // Deprecated: use 'class' instead
+   *   bg?: string,  // Deprecated: use 'class' instead
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   style?: string,
    *   aspectOnLandscape?: number,
    *   aspectOnPortrait?: number,
@@ -57,9 +58,10 @@
    */
   const {
     // > Style
-    base = '',
-    bg = '',
-    classes = '',
+    class: className,
+    base,  // Deprecated: kept for backward compatibility
+    bg,  // Deprecated: kept for backward compatibility
+    classes,  // Deprecated: kept for backward compatibility
     style = '',
 
     // > Functional properties
@@ -468,8 +470,9 @@
     <div
       data-component="game-box"
       data-orientation={isLandscape ? 'landscape' : 'portrait'}
-      class="{base} {bg} {classes}"
+      class="{base ?? ''} {bg ?? ''} {className ?? classes ?? ''}"
       class:isMobile
+      style:position="relative"
       style:width="{gameWidth}px"
       style:height="{gameHeight}px"
       style:--game-width={gameWidth}

package/dist/ui/components/game-box/GameBox.svelte.d.ts

@@ -3,6 +3,7 @@ type GameBox = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         [attr: string]: any;
+        class?: string | undefined;
         base?: string | undefined;
         bg?: string | undefined;
         classes?: string | undefined;
@@ -51,6 +52,7 @@ type GameBox = {
 };
 declare const GameBox: import("svelte").Component<{
     [attr: string]: any;
+    class?: string;
     base?: string;
     bg?: string;
     classes?: string;

package/dist/ui/components/game-box/ScaledContainer.svelte

@@ -1,6 +1,12 @@
 <script>
+  // import { onMount } from 'svelte';
+
   import { enableContainerScaling } from '../../../design/index.js';
 
+  // onMount( () => {
+  //   console.debug('[ScaledContainer] mounted');
+  // } );
+
   /**
    * Wrapper component that applies container scaling to its children
    *
@@ -41,8 +47,8 @@
       !width ||
       !height ||
       !design ||
-      !clamping ||
-      hidden
+      !clamping
+      || hidden
     ) {
       return;
     }
@@ -62,16 +68,13 @@
   <div
     data-component="scaled-container"
     bind:this={container}
-    class:hidden
+    style:position="absolute"
+    style:top="0"
+    style:left="0"
     style:width="{width}px"
     style:height="{height}px"
+    style:display={hidden ? "none" : "block"}
   >
     {@render snippet(snippetParams)}
   </div>
 {/if}
-
-<style>
-  .hidden {
-    visibility: hidden;
-  }
-</style>

package/dist/ui/components/grid-layers/GridLayers.svelte

@@ -6,11 +6,12 @@
    * enabling layered layouts with natural height behavior.
    *
    * @type {{
-   *   base?: string,
-   *   bg?: string,
+   *   class?: string,
+   *   base?: string,  // Deprecated: use 'class' instead
+   *   bg?: string,  // Deprecated: use 'class' instead
    *   padding?: string,
    *   margin?: string,
-   *   classes?: string,
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   style?: string,
    *   overflow?: string,
    *   children: import('svelte').Snippet,
@@ -19,11 +20,12 @@
    */
   const {
     // Container styles
-    base = '',
-    bg = '',
+    class: className,
+    base,  // Deprecated: kept for backward compatibility
+    bg,  // Deprecated: kept for backward compatibility
     padding = '',
     margin = '',
-    classes = '',
+    classes,  // Deprecated: kept for backward compatibility
     style = '',
     overflow = '',
 
@@ -48,7 +50,7 @@
 
 <div
   data-component="grid-layers"
-  class="grid {base} {bg} {classes} {margin} {padding} {overflow}"
+  class="grid {base ?? ''} {bg ?? ''} {className ?? classes ?? ''} {margin} {padding} {overflow}"
   style={containerStyle}
   {...attrs}
 >

package/dist/ui/components/grid-layers/GridLayers.svelte.d.ts

@@ -3,6 +3,7 @@ type GridLayers = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         [attr: string]: any;
+        class?: string | undefined;
         base?: string | undefined;
         bg?: string | undefined;
         padding?: string | undefined;
@@ -15,6 +16,7 @@ type GridLayers = {
 };
 declare const GridLayers: import("svelte").Component<{
     [attr: string]: any;
+    class?: string;
     base?: string;
     bg?: string;
     padding?: string;

package/dist/ui/components/image-box/ImageBox.svelte

@@ -4,9 +4,10 @@
 
 	/**
 	 * @type {{
-	 *   base?: string,
-	 *   bg?: string,
-	 *   classes?: string,
+	 *   class?: string,
+	 *   base?: string,  // Deprecated: use 'class' instead
+	 *   bg?: string,  // Deprecated: use 'class' instead
+	 *   classes?: string,  // Deprecated: use 'class' instead
 	 *   width?: string,
 	 *   height?: string,
 	 *   aspect?: string,
@@ -23,9 +24,10 @@
 	 */
 	let {
 		// Style
-		base,
-		bg,
-		classes,
+		class: className,
+		base,  // Deprecated: kept for backward compatibility
+		bg,  // Deprecated: kept for backward compatibility
+		classes,  // Deprecated: kept for backward compatibility
 		width,
 		height,
 		aspect,
@@ -172,7 +174,7 @@
 <div
 	data-component="image-box"
 	bind:this={containerElem}
-	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
+	class="{base ?? ''} {bg ?? ''} {aspect} {overflow} {width} {height} {className ?? classes ?? ''}"
 	style:--fit={fit}
 	style:--pos={position}
 	style:width={width || (height && aspect) ? undefined : '100%'}

package/dist/ui/components/image-box/ImageBox.svelte.d.ts

@@ -3,6 +3,7 @@ type ImageBox = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         [attr: string]: any;
+        class?: string | undefined;
         base?: string | undefined;
         bg?: string | undefined;
         classes?: string | undefined;
@@ -21,6 +22,7 @@ type ImageBox = {
 };
 declare const ImageBox: import("svelte").Component<{
     [attr: string]: any;
+    class?: string;
     base?: string;
     bg?: string;
     classes?: string;

package/dist/ui/components/presenter/Presenter.svelte

@@ -16,7 +16,8 @@
 
   /**
    * @type {{
-   *   classes?: string,
+   *   class?: string,
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   slides?: import("./typedef.js").Slide[],
    *   presenterRef?: import('./Presenter.state.svelte.js').PresenterRef,
    *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>,
@@ -25,7 +26,8 @@
    */
   let {
     // > Style
-    classes,
+    class: className,
+    classes,  // Deprecated: kept for backward compatibility
 
     // > Functional
     slides,
@@ -109,7 +111,7 @@
   });
 </script>
 
-<GridLayers data-feature="presenter" {classes}>
+<GridLayers data-feature="presenter" class={className ?? classes ?? ''}>
   <div
     data-layer="layer1"
     style:z-index={presenter.layerA.z}

package/dist/ui/components/presenter/Presenter.svelte.d.ts

@@ -2,6 +2,7 @@ export default Presenter;
 type Presenter = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
+        class?: string | undefined;
         classes?: string | undefined;
         slides?: Slide[] | undefined;
         presenterRef?: PresenterRef | undefined;
@@ -10,6 +11,7 @@ type Presenter = {
     }>): void;
 };
 declare const Presenter: import("svelte").Component<{
+    class?: string;
     classes?: string;
     slides?: import("./typedef.js").Slide[];
     presenterRef?: import("./Presenter.state.svelte.js").PresenterRef;

package/dist/ui/primitives/buttons/button/Button.svelte

@@ -3,9 +3,10 @@
 
   /**
    * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
+   *   class?: string,
+   *   base?: string,  // Deprecated: use 'class' instead
+   *   bg?: string,  // Deprecated: use 'class' instead
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   type?: string,
    *   role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
    *   size?: 'sm' | 'md' | 'lg',
@@ -25,9 +26,10 @@
    */
   const {
     // Style
-    base,
-    bg,
-    classes,
+    class: className,
+    base,  // Deprecated: kept for backward compatibility
+    bg,  // Deprecated: kept for backward compatibility
+    classes,  // Deprecated: kept for backward compatibility
 
     type = '',
     role = 'primary',
@@ -66,7 +68,7 @@
   data-variant={variant}
   data-mode={mode}
   type={buttonType}
-  class="{base} {bg} {classes} {stateClasses}"
+  class="{base ?? ''} {bg ?? ''} {className ?? classes ?? ''} {stateClasses}"
   disabled={disabled || loading}
   aria-busy={loading}
   aria-pressed={selected}

package/dist/ui/primitives/buttons/button/Button.svelte.d.ts

@@ -3,6 +3,7 @@ type Button = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         [key: string]: any;
+        class?: string | undefined;
         base?: string | undefined;
         bg?: string | undefined;
         classes?: string | undefined;
@@ -24,6 +25,7 @@ type Button = {
 };
 declare const Button: import("svelte").Component<{
     [key: string]: any;
+    class?: string;
     base?: string;
     bg?: string;
     classes?: string;

package/dist/ui/primitives/icons/SteezeIcon.svelte

@@ -23,8 +23,9 @@
    * theme - name of the icon theme (e.g. 'solid' or 'outline')
    *
    * @type {{
-   *   base?: string,
-   *   classes?: string
+   *   class?: string,
+   *   base?: string,  // Deprecated: use 'class' instead
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   size?: string,
    *   variant?: string,
    *   src: import('./typedef.js').IconSource,
@@ -33,8 +34,9 @@
    */
   let {
     // Style
-    base,
-    classes,
+    class: className,
+    base,  // Deprecated: kept for backward compatibility
+    classes,  // Deprecated: kept for backward compatibility
 
     size = 'md',
     variant = '',
@@ -72,7 +74,7 @@
     data-variant={variant}
     {...icon.a}
     xmlns="http://www.w3.org/2000/svg"
-    class="{base} {classes}"
+    class="{base ?? ''} {className ?? classes ?? ''}"
     {...attrs}
   >
     {#each icon.path ?? [] as a}

package/dist/ui/primitives/icons/SteezeIcon.svelte.d.ts

@@ -2,6 +2,7 @@ export default SteezeIcon;
 type SteezeIcon = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
+        class?: string | undefined;
         base?: string | undefined;
         classes?: string | undefined;
         size?: string | undefined;
@@ -13,6 +14,7 @@ type SteezeIcon = {
     }>): void;
 };
 declare const SteezeIcon: import("svelte").Component<{
+    class?: string;
     base?: string;
     classes?: string;
     size?: string;

package/dist/ui/primitives/panels/panel/Panel.svelte

@@ -7,9 +7,10 @@
 
   /**
    * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
+   *   class?: string,
+   *   base?: string,  // Deprecated: use 'class' instead
+   *   bg?: string,  // Deprecated: use 'class' instead
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   width?: 'sm' | 'md' | 'lg',
    *   variant?: string,
    *   children?: import('svelte').Snippet,
@@ -17,9 +18,10 @@
    */
   const {
     // Style
-    base,
-    bg,
-    classes,
+    class: className,
+    base,  // Deprecated: kept for backward compatibility
+    bg,  // Deprecated: kept for backward compatibility
+    classes,  // Deprecated: kept for backward compatibility
 
     width = 'md',
     variant = 'light',
@@ -36,7 +38,7 @@
   data-component="panel"
   data-width={width}
   data-variant={variant}
-  class="{base} {bg} {classes}"
+  class="{base ?? ''} {bg ?? ''} {className ?? classes ?? ''}"
   {...attrs}
 >
   {@render children()}

package/dist/ui/primitives/panels/panel/Panel.svelte.d.ts

@@ -2,6 +2,7 @@ export default Panel;
 type Panel = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
+        class?: string | undefined;
         base?: string | undefined;
         bg?: string | undefined;
         classes?: string | undefined;
@@ -13,6 +14,7 @@ type Panel = {
     }>): void;
 };
 declare const Panel: import("svelte").Component<{
+    class?: string;
     base?: string;
     bg?: string;
     classes?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-core",
-	"version": "0.5.90",
+	"version": "0.5.92",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"