@hkdigital/lib-sveltekit 0.1.77 → 0.1.79

package/dist/components/drag-drop/util.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Find the source draggable element from an event
+ *
+ * @param {DragEvent} event
+ * @returns {HTMLElement|null}
+ */
+export function findDraggableSource(event: DragEvent): HTMLElement | null;
+/**
+ * Get draggable ID from an event, if available
+ * @param {DragEvent} event
+ * @returns {string|null}
+ */
+export function getDraggableIdFromEvent(event: DragEvent): string | null;
+/**
+ * Process a drop event with the provided data and handlers
+ * @param {DragEvent} event
+ * @param {any} data The drag data
+ * @param {Object} options
+ * @param {Function} options.onDropStart Optional drop start handler
+ * @param {Function} options.onDrop Main drop handler
+ * @param {Function} options.onDropEnd Optional drop end handler
+ * @param {string} options.zone The drop zone identifier
+ * @param {Function} options.setState Function to update component state
+ * @returns {Promise<boolean>} Success status
+ */
+export function processDropWithData(event: DragEvent, data: any, { onDropStart, onDrop, onDropEnd, zone, setState }: {
+    onDropStart: Function;
+    onDrop: Function;
+    onDropEnd: Function;
+    zone: string;
+    setState: Function;
+}): Promise<boolean>;

package/dist/components/drag-drop/util.js

@@ -0,0 +1,85 @@
+/**
+ * Find the source draggable element from an event
+ *
+ * @param {DragEvent} event
+ * @returns {HTMLElement|null}
+ */
+export function findDraggableSource(event) {
+  const target = /** @type {Element|EventTarget|null} */ (event.target);
+
+  if (!(target instanceof Element)) {
+    return null;
+  }
+
+  let element = /** @type {Element|null} */ (target);
+
+  // Walk up the DOM tree
+  while (element !== null && element !== document.body) {
+    if (element.hasAttribute('data-id')) {
+      // Return as HTMLElement if needed
+      return /** @type {HTMLElement} */ (element);
+    }
+
+    element = element.parentElement;
+  }
+
+  return null;
+}
+
+/**
+ * Get draggable ID from an event, if available
+ * @param {DragEvent} event
+ * @returns {string|null}
+ */
+export function getDraggableIdFromEvent(event) {
+  const element = findDraggableSource(event);
+  return element ? element.getAttribute('data-id') : null;
+}
+
+/**
+ * Process a drop event with the provided data and handlers
+ * @param {DragEvent} event
+ * @param {any} data The drag data
+ * @param {Object} options
+ * @param {Function} options.onDropStart Optional drop start handler
+ * @param {Function} options.onDrop Main drop handler
+ * @param {Function} options.onDropEnd Optional drop end handler
+ * @param {string} options.zone The drop zone identifier
+ * @param {Function} options.setState Function to update component state
+ * @returns {Promise<boolean>} Success status
+ */
+export async function processDropWithData(event, data, {
+  onDropStart,
+  onDrop,
+  onDropEnd,
+  zone,
+  setState
+}) {
+  try {
+    // Update state and notify listeners
+    setState('ACTIVE_DROP');
+    onDropStart?.({ event, zone, data });
+
+    // Call the onDrop handler
+    const dropResult = onDrop?.({
+      event,
+      zone,
+      item: data.item,
+      source: data.source,
+      metadata: data.metadata
+    });
+
+    // Handle async or sync results
+    await Promise.resolve(dropResult);
+
+    // Success path
+    setState('READY');
+    onDropEnd?.({ event, zone, data, success: true });
+    return true;
+  } catch (error) {
+    // Error path
+    setState('READY');
+    onDropEnd?.({ event, zone, data, success: false, error });
+    return false;
+  }
+}

package/dist/components/tab-bar/HkTabBar.state.svelte.d.ts

@@ -48,7 +48,7 @@ export class HkTabBarState {
      */
     linkTab(index: number, tabElement: HTMLElement): void;
 }
-export const createOrGetState: (instanceKey?: string | Symbol) => HkTabBarState;
-export const createState: (instanceKey?: string | Symbol) => HkTabBarState;
-export const getState: (instanceKey?: string | Symbol) => HkTabBarState;
-export type Tab = any;
+export const createOrGetState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarState;
+export const createState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarState;
+export const getState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarState;
+export type Tab = import("./typedef.js").Tab;

package/dist/components/tab-bar/HkTabBar.svelte

@@ -19,7 +19,7 @@
 	 *   margin?: string,
 	 *   classes?: string,
 	 *   style?: string,
-	 *   instanceKey?: Symbol | string,
+	 *   contextKey?: Symbol | string,
 	 *   children: import('svelte').Snippet,
 	 *   onmount?: function,
 	 *   domElem?: HTMLElement
@@ -39,7 +39,7 @@
 		style,
 
 		// State
-		instanceKey,
+		contextKey,
 
 		// Snippets
 		children,
@@ -54,7 +54,7 @@
 		...attrs
 	} = $props();
 
-	createOrGetState(instanceKey);
+	createOrGetState(contextKey);
 
 	//grid-cols-[repeat({cols},minmax(0,auto))]
 </script>

package/dist/components/tab-bar/HkTabBar.svelte.d.ts

@@ -9,7 +9,7 @@ type HkTabBar = {
         margin?: string;
         classes?: string;
         style?: string;
-        instanceKey?: string | Symbol;
+        contextKey?: string | Symbol;
         children: Snippet<[]>;
         onmount?: Function;
         domElem?: HTMLElement;
@@ -25,7 +25,7 @@ declare const HkTabBar: import("svelte").Component<{
     margin?: string;
     classes?: string;
     style?: string;
-    instanceKey?: Symbol | string;
+    contextKey?: Symbol | string;
     children: import("svelte").Snippet;
     onmount?: Function;
     domElem?: HTMLElement;

package/dist/components/tab-bar/HkTabBarSelector.state.svelte.d.ts

@@ -14,6 +14,6 @@ export class HkTabBarSelectorState {
     tabBarState: any;
     #private;
 }
-export const createOrGetState: (instanceKey?: string | Symbol) => HkTabBarSelectorState;
-export const createState: (instanceKey?: string | Symbol) => HkTabBarSelectorState;
-export const getState: (instanceKey?: string | Symbol) => HkTabBarSelectorState;
+export const createOrGetState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;
+export const createState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;
+export const getState: (contextKey: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;

package/dist/components/tab-bar/HkTabBarSelector.svelte

@@ -17,7 +17,7 @@
    *   boxMargin?: string,
    *   boxClasses?: string,
    *   boxAttrs?: { [attr: string]: * },
-   *   instanceKey?: Symbol | string
+   *   contextKey?: Symbol | string
    * } & { [attr: string]: any }}
    */
   let {
@@ -30,10 +30,10 @@
     boxClasses,
 
     // State
-    instanceKey
+    contextKey
   } = $props();
 
-  const selectorState = createOrGetState(instanceKey);
+  const selectorState = createOrGetState(contextKey);
 </script>
 
 <div

package/dist/components/tab-bar/HkTabBarSelector.svelte.d.ts

@@ -13,7 +13,7 @@ type HkTabBarSelector = {
         boxAttrs?: {
             [attr: string]: any;
         };
-        instanceKey?: string | Symbol;
+        contextKey?: string | Symbol;
     } & {
         [attr: string]: any;
     }>): void;
@@ -30,7 +30,7 @@ declare const HkTabBarSelector: import("svelte").Component<{
     boxAttrs?: {
         [attr: string]: any;
     };
-    instanceKey?: Symbol | string;
+    contextKey?: Symbol | string;
 } & {
     [attr: string]: any;
 }, {}, "">;

package/dist/components/tab-bar/index.d.ts

@@ -1,4 +1,5 @@
 export { default as HkTabBar } from "./HkTabBar.svelte";
 export { default as HkTabBarSelector } from "./HkTabBarSelector.svelte";
+export * from "./typedef.js";
 export { createOrGetState as createOrGetTabBarState, createState as createTabBarState, getState as getTabBarState } from "./HkTabBar.state.svelte.js";
 export { createOrGetState as createOrGetTabBarSelectorState, createState as createTabBarSelectorState, getState as getTabBarSelectorState } from "./HkTabBarSelector.state.svelte.js";

package/dist/components/tab-bar/typedef.d.ts

@@ -1,4 +1,6 @@
-type Tab = {
+declare const _default: {};
+export default _default;
+export type Tab = {
     icon: any;
     label?: string;
     route?: string;

package/dist/components/tab-bar/typedef.js

@@ -6,3 +6,6 @@
  * @property {string} [route]
  * @property {string} [routePrefix]
  */
+
+
+export default {};

package/dist/themes/hkdev/components/drag-drop/draggable.css

@@ -1,12 +1,20 @@
 @define-mixin component-draggable {
   [data-component='draggable'] {
-    cursor: move;
     user-select: none;
     transition:
       opacity 0.2s ease,
       transform 0.2s ease;
   }
 
+  [data-component='draggable']:not(.state-dragging):not(.state-drag-disabled) {
+    cursor: grab;  /* Open hand when hovering draggable items */
+  }
+
+
+  /*[data-component='draggable']:active {
+    cursor: grabbing;
+  }*/
+
   /* State-based styling using state classes */
   [data-component='draggable'].state-idle {
     opacity: 1;
@@ -16,6 +24,7 @@
   [data-component='draggable'].state-dragging {
     opacity: 0.5;
     transform: scale(0.95);
+    cursor: grabbing;
   }
 
   [data-component='draggable'].state-drag-preview {

package/dist/typedef/context.d.ts

@@ -0,0 +1,3 @@
+declare const _default: {};
+export default _default;
+export type ContextKey = Symbol | "default";

package/dist/typedef/context.js

@@ -0,0 +1,6 @@
+
+/**
+ * @typedef {Symbol|'default'} ContextKey
+ */
+
+export default {};

package/dist/typedef/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./context.js";
 export * from "./drag.js";
 export * from "./drop.js";
 export * from "./image.js";

package/dist/typedef/index.js

@@ -1,3 +1,4 @@
+export * from './context.js';
 export * from './drag.js';
 export * from './drop.js';
 export * from './image.js';

package/dist/util/svelte/state-context/index.d.ts

@@ -14,4 +14,5 @@
  *   getState
  * ]}
  */
-export function defineStateContext<T>(State: new () => T): [(instanceKey?: string | Symbol) => T, (instanceKey?: string | Symbol) => T, (instanceKey?: string | Symbol) => T];
+export function defineStateContext<T>(State: new () => T): [(contextKey: import("../../../typedef").ContextKey) => T, (contextKey: import("../../../typedef").ContextKey) => T, (contextKey: import("../../../typedef").ContextKey) => T];
+export const DEFAULT_CONTEXT_KEY: "default";

package/dist/util/svelte/state-context/index.js

@@ -1,5 +1,7 @@
 import { setContext, getContext, hasContext } from 'svelte';
 
+export const DEFAULT_CONTEXT_KEY = 'default';
+
 /* ----------------------------------------------------------- Create and Get */
 
 /**
@@ -19,26 +21,58 @@ import { setContext, getContext, hasContext } from 'svelte';
  * ]}
  */
 export function defineStateContext(State) {
-  const description = State.name;
+  const stateName = State.name;
+
+  const sharedKey = Symbol(stateName);
+
+  // console.debug(`Creating state context for ${stateName}`, { sharedKey });
+
+  /**
+   * Internal function to get the supplied key or the shared key
+   *
+   * @param {import('../../../typedef').ContextKey} contextKey
+   *
+   * @returns {Symbol} key
+   */
+  function getKey(contextKey) {
+    if (typeof contextKey === 'symbol') {
+      return contextKey;
+    }
 
-  const sharedKey = Symbol(description);
+    if (
+      contextKey === undefined ||
+      contextKey === null ||
+      contextKey === DEFAULT_CONTEXT_KEY
+    ) {
+      return sharedKey;
+    }
+
+    throw new Error(
+      `Invalid contextKey (use a Symbol or DEFAULT_CONTEXT_KEY)`
+    );
+  }
 
   /**
    * Create component state
    *
-   * @param {string|Symbol} [instanceKey]
+   * @param {import('../../../typedef').ContextKey} contextKey
    *
    * @returns {T} state
    */
-  function createState(instanceKey) {
-    const key = instanceKey ?? sharedKey;
+  function createState(contextKey) {
+    const key = getKey(contextKey);
 
     // console.log('Create state', key);
+    // console.debug(`Creating new state for ${stateName}`, {
+    //   key,
+    //   contextKey,
+    //   isDefaultKey: key === sharedKey
+    // });
 
     const state = new State();
 
     // @ts-ignore
-    state._instanceKey = instanceKey;
+    state._contextKey = contextKey;
 
     return setContext(key, state);
   }
@@ -46,12 +80,12 @@ export function defineStateContext(State) {
   /**
    * Get component state or create a new state if it does not yet exist
    *
-   * @param {string|Symbol} [instanceKey]
+   * @param {import('../../../typedef').ContextKey} contextKey
    *
    * @returns {T} state
    */
-  function createOrGetState(instanceKey) {
-    let key = instanceKey ?? sharedKey;
+  function createOrGetState(contextKey) {
+    let key = getKey(contextKey);
 
     if (!hasContext(key)) {
       return createState(key);
@@ -65,12 +99,12 @@ export function defineStateContext(State) {
    *
    * @throws Will throw an error if the state-context does not exist
    *
-   * @param {string|Symbol} [instanceKey]
+   * @param {import('../../../typedef').ContextKey} contextKey
    *
    * @returns {T} state
    */
-  function getState(instanceKey) {
-    let key = instanceKey ?? sharedKey;
+  function getState(contextKey) {
+    let key = getKey(contextKey);
 
     if (!hasContext(key)) {
       throw new Error(`No state context found. Create one first`);

package/dist/widgets/game-box/GameBox.svelte

@@ -558,6 +558,7 @@
 
 <style>
   .center {
+    display: grid;
     height: 100lvh;
     display: grid;
     justify-items: center;

package/dist/widgets/hk-app-layout/HkAppLayout.state.svelte.d.ts

@@ -1,6 +1,6 @@
 export class AppLayoutState {
     landscapeOnSmallScreen: boolean;
 }
-export const createOrGetState: (instanceKey?: string | Symbol) => AppLayoutState;
-export const createState: (instanceKey?: string | Symbol) => AppLayoutState;
-export const getState: (instanceKey?: string | Symbol) => AppLayoutState;
+export const createOrGetState: (contextKey: import("../../typedef").ContextKey) => AppLayoutState;
+export const createState: (contextKey: import("../../typedef").ContextKey) => AppLayoutState;
+export const getState: (contextKey: import("../../typedef").ContextKey) => AppLayoutState;

package/dist/widgets/image-box/ImageBox.svelte

@@ -204,9 +204,7 @@
 		height: 100%;
 		max-width: 100%;
 		max-height: 100%;
-		-o-object-fit: var(--fit);
-		   object-fit: var(--fit);
-		-o-object-position: var(--pos);
-		   object-position: var(--pos);
+		object-fit: var(--fit);
+		object-position: var(--pos);
 	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.77",
+	"version": "0.1.79",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -62,6 +62,7 @@
 		"pino-pretty": "^13.0.0",
 		"runed": "^0.23.0",
 		"svelte": "^5.0.0",
+		"svelte-preprocess": "^6.0.3",
 		"valibot": "^0.42.1",
 		"zod": "^3.24.2"
 	},
@@ -95,6 +96,7 @@
 		"standardized-audio-context-mock": "^9.7.16",
 		"svelte": "^5.20.5",
 		"svelte-check": "^4.1.4",
+		"svelte-preprocess": "^6.0.3",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.8.2",
 		"vite": "^6.2.0",