@hkdigital/lib-sveltekit 0.1.76 → 0.1.78

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/constants/state-labels/drag-states.d.ts

@@ -0,0 +1,5 @@
+export const IDLE: "idle";
+export const DRAGGING: "dragging";
+export const DRAG_PREVIEW: "drag-preview";
+export const DROPPING: "dropping";
+export const DRAG_DISABLED: "drag-disabled";

package/dist/constants/state-labels/drag-states.js

@@ -0,0 +1,6 @@
+// Draggable states
+export const IDLE = 'idle';                     // Not being dragged
+export const DRAGGING = 'dragging';             // Currently being dragged
+export const DRAG_PREVIEW = 'drag-preview';     // Mouse down, before drag
+export const DROPPING = 'dropping';             // Just dropped, animating
+export const DRAG_DISABLED = 'drag-disabled';   // Dragging not allowed

package/dist/constants/state-labels/drop-states.d.ts

@@ -0,0 +1,6 @@
+export const READY: "ready";
+export const DRAG_OVER: "drag-over";
+export const CAN_DROP: "can-drop";
+export const CANNOT_DROP: "cannot-drop";
+export const DROP_DISABLED: "drop-disabled";
+export const ACTIVE_DROP: "active-drop";

package/dist/constants/state-labels/drop-states.js

@@ -0,0 +1,6 @@
+export const READY = 'ready';                   // Waiting for drag
+export const DRAG_OVER = 'drag-over';           // Item dragged over zone
+export const CAN_DROP = 'can-drop';             // Valid drop target
+export const CANNOT_DROP = 'cannot-drop';       // Invalid drop target
+export const DROP_DISABLED = 'drop-disabled';   // Dropping not allowed
+export const ACTIVE_DROP = 'active-drop';       // Currently processing drop

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

@@ -0,0 +1,51 @@
+@define-mixin component-draggable {
+  [data-component='draggable'] {
+    cursor: move;
+    user-select: none;
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  /* State-based styling using state classes */
+  [data-component='draggable'].state-idle {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  [data-component='draggable'].state-dragging {
+    opacity: 0.5;
+    transform: scale(0.95);
+  }
+
+  [data-component='draggable'].state-drag-preview {
+    transform: scale(0.98);
+    filter: brightness(0.95);
+  }
+
+  [data-component='draggable'].state-dropping {
+    animation: drop-finish 0.2s ease-out;
+  }
+
+  [data-component='draggable'].state-drag-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    filter: grayscale(0.5);
+  }
+
+  /* Animations */
+  @keyframes drop-finish {
+    0% {
+      transform: scale(0.95);
+      opacity: 0.8;
+    }
+    50% {
+      transform: scale(1.05);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+@define-mixin component-dropzone {
+  [data-component='dropzone'] {
+    min-height: 100px;
+    border: 2px dashed rgb(var(--color-surface-400));
+    border-radius: var(--theme-rounded-container);
+    padding: 1rem;
+    transition: all 0.2s ease;
+    position: relative;
+    background-color: rgb(var(--color-surface-50) / 0.5);
+  }
+
+  /* State-based styling using state classes */
+  [data-component='dropzone'].state-ready {
+    border-color: rgb(var(--color-surface-400));
+    background-color: transparent;
+  }
+
+  [data-component='dropzone'].state-drag-over {
+    border-color: rgb(var(--color-primary-400));
+    background-color: rgb(var(--color-primary-500) / 0.05);
+  }
+
+  [data-component='dropzone'].state-can-drop {
+    border-color: rgb(var(--color-success-500));
+    background-color: rgb(var(--color-success-500) / 0.08);
+    transform: scale(1.01);
+    box-shadow: 0 0 0 3px rgb(var(--color-success-500) / 0.2);
+  }
+
+  [data-component='dropzone'].state-cannot-drop {
+    border-color: rgb(var(--color-error-500));
+    background-color: rgb(var(--color-error-500) / 0.08);
+    cursor: not-allowed;
+  }
+
+  [data-component='dropzone'].state-active-drop {
+    animation: drop-pulse 0.3s ease-out;
+    border-color: rgb(var(--color-success-500));
+    background-color: rgb(var(--color-success-500) / 0.1);
+  }
+
+  [data-component='dropzone'].state-drop-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: rgb(var(--color-surface-100));
+  }
+
+  /* Empty state */
+  [data-element='drop-zone-empty'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: rgb(var(--color-surface-500));
+    font-style: italic;
+  }
+
+  /* Animations */
+  @keyframes drop-pulse {
+    0% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 rgb(var(--color-success-500) / 0.4);
+    }
+    50% {
+      transform: scale(1.02);
+      box-shadow: 0 0 0 8px rgb(var(--color-success-500) / 0);
+    }
+    100% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 rgb(var(--color-success-500) / 0);
+    }
+  }
+}

package/dist/themes/hkdev/components.css

@@ -11,6 +11,9 @@
 
 /*@import "./components/buttons/skip-button.css";*/
 
+@import './components/drag-drop/draggable.css';
+@import './components/drag-drop/dropzone.css';
+
 /* Icons */
 @import './components/icons/icon-steeze.css';
 
@@ -36,6 +39,9 @@
   @mixin component-button-icon-steeze;
   /*  @mixin buttons-skip-button;*/
 
+  @mixin component-draggable;
+  @mixin component-dropzone;
+
   @mixin component-icon-steeze;
 
   @mixin component-panel;

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/drag.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {};
+export default _default;
+export type DragData = {
+    /**
+     * - The item being dragged
+     */
+    item: any;
+    /**
+     * - Source identifier
+     */
+    source?: string;
+    /**
+     * - Drag group
+     */
+    group?: string;
+    /**
+     * - Additional metadata
+     */
+    metadata?: any;
+};

package/dist/typedef/drag.js

@@ -0,0 +1,9 @@
+/**
+ * @typedef {Object} DragData
+ * @property {any} item - The item being dragged
+ * @property {string} [source] - Source identifier
+ * @property {string} [group] - Drag group
+ * @property {any} [metadata] - Additional metadata
+ */
+
+export default {}

package/dist/typedef/drop.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {};
+export default _default;
+export type DropData = {
+    /**
+     * - The dropped item
+     */
+    item: any;
+    /**
+     * - Source identifier
+     */
+    source: string;
+    /**
+     * - Drag group
+     */
+    group: string;
+    /**
+     * - Additional metadata
+     */
+    metadata?: any;
+};

package/dist/typedef/drop.js

@@ -0,0 +1,9 @@
+/**
+ * @typedef {Object} DropData
+ * @property {any} item - The dropped item
+ * @property {string} source - Source identifier
+ * @property {string} group - Drag group
+ * @property {any} [metadata] - Additional metadata
+ */
+
+export default {}

package/dist/typedef/{image-meta.js → image.js}

@@ -10,5 +10,4 @@
  * Single ImageMeta object or array of ImageMeta objects
  */
 
-
 export default {};

package/dist/typedef/index.d.ts

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

package/dist/typedef/index.js

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

package/dist/util/geo/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Check if a point lies within a polygon
+ *
+ * @param {number} xPct - X-coordinate as percentage
+ * @param {number} yPct - Y-coordinate as percentage
+ * @param {Array} polygon - Array of [x, y] points
+ *
+ * @returns {boolean} True if the point lies within the polygon
+ */
+export function isPointInPolygon(xPct: number, yPct: number, polygon: any[]): boolean;

package/dist/util/geo/index.js

@@ -0,0 +1,26 @@
+/**
+ * Check if a point lies within a polygon
+ *
+ * @param {number} xPct - X-coordinate as percentage
+ * @param {number} yPct - Y-coordinate as percentage
+ * @param {Array} polygon - Array of [x, y] points
+ *
+ * @returns {boolean} True if the point lies within the polygon
+ */
+export function isPointInPolygon(xPct, yPct, polygon) {
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i][0];
+    const yi = polygon[i][1];
+    const xj = polygon[j][0];
+    const yj = polygon[j][1];
+
+    const intersect =
+      yi > yPct !== yj > yPct &&
+      xPct < ((xj - xi) * (yPct - yi)) / (yj - yi) + xi;
+    if (intersect) {
+      inside = !inside;
+    }
+  }
+  return inside;
+}

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.76",
+	"version": "0.1.78",
 	"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",