@hkdigital/lib-sveltekit 0.2.20 → 0.2.21

package/dist/server/logger.js

@@ -1,94 +1,94 @@
-/**
- * @example
- *
- * import { logger } from './logger.js';
- *
- * logger.info('Hello there!');
- * logger.info( { a: 1, b: 2 }, 'Test vars');
- *
- * export function load({ route }) {
- *   logger.context({route}).info('Log');
- * }
- *
- * @note
- * Set a 'handleError' hook to log errors captured by svelte
- *
- * // hooks.server.js
- * export const handleError = ({ status, error, message }) => {
- *	  if (status !== 404) {
- *		  logger.error(error);
- *	  }
- *
- *	  // do not return sensitive data here as it will be sent to the client
- * 	  return { message };
- *  };
- *
- * @see https://kit.svelte.dev/docs/hooks#shared-hooks-handleerror
- * @see https://stolthq.com/blog/structured-logging-sveltekit
- */
-
-import pino from 'pino';
-import { dev } from '$app/environment';
-
-// import { browser, building, dev, version } from '$app/environment';
-
-// > Setup
-
-/** @type {pino.LoggerOptions} */
-let options = {};
-
-if (dev) {
-	options = {
-		level: 'debug',
-		transport: {
-			target: 'pino-pretty',
-			options: {
-				colorize: true
-			}
-		}
-	};
-}
-
-// > Exports
-
-// ?? function routeLogger( ... )
-
-/**
- * @typedef {object} LoggerContext
- * @property {{ id: string }} [route]
- * @property {string} [componentName]
- */
-
-/**
- * @typedef {pino.Logger & LoggerExtension} ExtendedLogger
- */
-
-/**
- * @typedef {Object} LoggerExtension
- * @property {( context: LoggerContext )=> ExtendedLogger} context
- */
-
-/** @type {pino.Logger & LoggerExtension} */
-// @ts-ignore
-const logger = pino(options);
-
-Object.assign(logger, {
-	/**
-	 * @param {LoggerContext} _
-	 *
-	 * @returns {pino.Logger}
-	 */
-	context({ route, componentName }) {
-		if (route) {
-			// @ts-ignore
-			return this.child({ route: route.id });
-		} else if (componentName) {
-			// @ts-ignore
-			return this.child({ componentName });
-		} else {
-			throw new Error(`Missing input parameter`);
-		}
-	}
-});
-
-export { logger };
+/**
+ * @example
+ *
+ * import { logger } from './logger.js';
+ *
+ * logger.info('Hello there!');
+ * logger.info( { a: 1, b: 2 }, 'Test vars');
+ *
+ * export function load({ route }) {
+ *   logger.context({route}).info('Log');
+ * }
+ *
+ * @note
+ * Set a 'handleError' hook to log errors captured by svelte
+ *
+ * // hooks.server.js
+ * export const handleError = ({ status, error, message }) => {
+ *	  if (status !== 404) {
+ *		  logger.error(error);
+ *	  }
+ *
+ *	  // do not return sensitive data here as it will be sent to the client
+ * 	  return { message };
+ *  };
+ *
+ * @see https://kit.svelte.dev/docs/hooks#shared-hooks-handleerror
+ * @see https://stolthq.com/blog/structured-logging-sveltekit
+ */
+
+import pino from 'pino';
+import { dev } from '$app/environment';
+
+// import { browser, building, dev, version } from '$app/environment';
+
+// > Setup
+
+/** @type {pino.LoggerOptions} */
+let options = {};
+
+if (dev) {
+	options = {
+		level: 'debug',
+		transport: {
+			target: 'pino-pretty',
+			options: {
+				colorize: true
+			}
+		}
+	};
+}
+
+// > Exports
+
+// ?? function routeLogger( ... )
+
+/**
+ * @typedef {object} LoggerContext
+ * @property {{ id: string }} [route]
+ * @property {string} [componentName]
+ */
+
+/**
+ * @typedef {pino.Logger & LoggerExtension} ExtendedLogger
+ */
+
+/**
+ * @typedef {Object} LoggerExtension
+ * @property {( context: LoggerContext )=> ExtendedLogger} context
+ */
+
+/** @type {pino.Logger & LoggerExtension} */
+// @ts-ignore
+const logger = pino(options);
+
+Object.assign(logger, {
+	/**
+	 * @param {LoggerContext} _
+	 *
+	 * @returns {pino.Logger}
+	 */
+	context({ route, componentName }) {
+		if (route) {
+			// @ts-ignore
+			return this.child({ route: route.id });
+		} else if (componentName) {
+			// @ts-ignore
+			return this.child({ componentName });
+		} else {
+			throw new Error(`Missing input parameter`);
+		}
+	}
+});
+
+export { logger };

package/dist/states/index.js

@@ -1 +1 @@
-export * from './navigation.svelte.js';
+export * from './navigation.svelte.js';

package/dist/states/navigation.svelte.js

@@ -1,55 +1,55 @@
-import { onMount } from 'svelte';
-
-import { lazySingleton } from '../util/singleton/index.js';
-
-import { beforeNavigate, onNavigate, afterNavigate } from '$app/navigation';
-
-import { page } from '$app/stores';
-import { get } from 'svelte/store';
-
-class Navigation {
-	// TODO: complete page type
-
-	/** @type {{ url: { pathname: string } }} */
-	page = $state(get(page));
-
-	/** @type {string} */
-	pathname = $derived(this.page.url.pathname);
-
-	stage = $state.raw({ before: false, navigating: true, after: false });
-
-	constructor() {
-		beforeNavigate(() => {
-			this.stage = { before: true, navigating: false, after: false };
-		});
-
-		onNavigate(() => {
-			this.stage = { before: false, navigating: true, after: false };
-		});
-
-		// onNavigate(async () => {
-		//   console.log('onNavigate can be used to perform async page transitions');
-		//   return new Promise((resolve) => {
-		//     setTimeout(resolve, 1000);
-		//   });
-		// });
-
-		afterNavigate(() => {
-			this.stage = { before: false, navigating: false, after: true };
-		});
-
-		onMount(() => {
-			return page.subscribe((value) => {
-				// console.log('***update page url');
-				this.page = value;
-			});
-		});
-	} // end constructor
-
-	init() {}
-} // end class
-
-/**
- * @note call nav.init() during component initialization phase
- */
-export const nav = lazySingleton({ class: Navigation });
+import { onMount } from 'svelte';
+
+import { lazySingleton } from '../util/singleton/index.js';
+
+import { beforeNavigate, onNavigate, afterNavigate } from '$app/navigation';
+
+import { page } from '$app/stores';
+import { get } from 'svelte/store';
+
+class Navigation {
+	// TODO: complete page type
+
+	/** @type {{ url: { pathname: string } }} */
+	page = $state(get(page));
+
+	/** @type {string} */
+	pathname = $derived(this.page.url.pathname);
+
+	stage = $state.raw({ before: false, navigating: true, after: false });
+
+	constructor() {
+		beforeNavigate(() => {
+			this.stage = { before: true, navigating: false, after: false };
+		});
+
+		onNavigate(() => {
+			this.stage = { before: false, navigating: true, after: false };
+		});
+
+		// onNavigate(async () => {
+		//   console.log('onNavigate can be used to perform async page transitions');
+		//   return new Promise((resolve) => {
+		//     setTimeout(resolve, 1000);
+		//   });
+		// });
+
+		afterNavigate(() => {
+			this.stage = { before: false, navigating: false, after: true };
+		});
+
+		onMount(() => {
+			return page.subscribe((value) => {
+				// console.log('***update page url');
+				this.page = value;
+			});
+		});
+	} // end constructor
+
+	init() {}
+} // end class
+
+/**
+ * @note call nav.init() during component initialization phase
+ */
+export const nav = lazySingleton({ class: Navigation });

package/dist/stores/index.js

@@ -1 +1 @@
-export * as theme from './theme.js';
+export * as theme from './theme.js';

package/dist/stores/theme.js

@@ -1,80 +1,80 @@
-/**
- * @example Set theme color in a layout file
- *
- * // +layout.svelte
- * <script>
- * import { theme as themeStore } from './theme.js';
- *
- * const { metaThemeColorBase, metaThemeColorDark } = themeStore;
- * </script>
- *
- * <svelte:head>
- *   <meta
- *     name="theme-color"
- *     media="(prefers-color-scheme: light)"
- *     content={$metaThemeColorBase}
- *   />
- *   <meta
- *     name="theme-color"
- *     media="(prefers-color-scheme: dark)"
- *     content={$metaThemeColorDark}
- *   />
- * </svelte:head>
- */
-
-import { writable, get } from 'svelte/store';
-
-// > Internals
-
-const DEFAULT_THEME_COLOR_BASE = '#fffffe';
-const DEFAULT_THEME_COLOR_DARK = '#000001';
-
-/** @type {import('svelte/store').Writable<string>} */
-const themeColorBase = writable(DEFAULT_THEME_COLOR_BASE);
-
-/** @type {import('svelte/store').Writable<string|null>} */
-const themeColorDark = writable(DEFAULT_THEME_COLOR_DARK);
-
-// > Exports
-
-/**
- * Set meta theme color for both light and dark mode
- *
- * @param {string} value - HTML Color
- */
-export function setMetaThemeColor(value) {
-	themeColorBase.set(value);
-	themeColorDark.set(value);
-}
-
-/**
- * Set meta theme color for light mode
- *
- * @param {string} value - HTML Color
- */
-export function setMetaThemeColorBase(value) {
-	themeColorBase.set(value);
-}
-
-/**
- * Set meta theme color for dark mode only
- *
- * @param {string} value - HTML Color
- */
-export function setMetaThemeColorDark(value) {
-	themeColorDark.set(value);
-}
-
-export const metaThemeColorBase = {
-	subscribe: themeColorBase.subscribe,
-	get: () => {
-		get(themeColorBase);
-	}
-};
-
-export const metaThemeColorDark = {
-	subscribe: themeColorDark.subscribe,
-	get: () => {
-		get(themeColorDark);
-	}
-};
+/**
+ * @example Set theme color in a layout file
+ *
+ * // +layout.svelte
+ * <script>
+ * import { theme as themeStore } from './theme.js';
+ *
+ * const { metaThemeColorBase, metaThemeColorDark } = themeStore;
+ * </script>
+ *
+ * <svelte:head>
+ *   <meta
+ *     name="theme-color"
+ *     media="(prefers-color-scheme: light)"
+ *     content={$metaThemeColorBase}
+ *   />
+ *   <meta
+ *     name="theme-color"
+ *     media="(prefers-color-scheme: dark)"
+ *     content={$metaThemeColorDark}
+ *   />
+ * </svelte:head>
+ */
+
+import { writable, get } from 'svelte/store';
+
+// > Internals
+
+const DEFAULT_THEME_COLOR_BASE = '#fffffe';
+const DEFAULT_THEME_COLOR_DARK = '#000001';
+
+/** @type {import('svelte/store').Writable<string>} */
+const themeColorBase = writable(DEFAULT_THEME_COLOR_BASE);
+
+/** @type {import('svelte/store').Writable<string|null>} */
+const themeColorDark = writable(DEFAULT_THEME_COLOR_DARK);
+
+// > Exports
+
+/**
+ * Set meta theme color for both light and dark mode
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColor(value) {
+	themeColorBase.set(value);
+	themeColorDark.set(value);
+}
+
+/**
+ * Set meta theme color for light mode
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColorBase(value) {
+	themeColorBase.set(value);
+}
+
+/**
+ * Set meta theme color for dark mode only
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColorDark(value) {
+	themeColorDark.set(value);
+}
+
+export const metaThemeColorBase = {
+	subscribe: themeColorBase.subscribe,
+	get: () => {
+		get(themeColorBase);
+	}
+};
+
+export const metaThemeColorDark = {
+	subscribe: themeColorDark.subscribe,
+	get: () => {
+		get(themeColorDark);
+	}
+};

package/dist/themes/hkdev/components/blocks/text-block.css

@@ -1,41 +1,34 @@
-@define-mixin text_block {
-
-/* .on-primary-dark
-{
-  & [data-title-text-button-block] {
-    & > .title-box {
-      @apply text-white;
-    }
-
-    & > .text-box {
-      ...text color
-    }  
-  }
-} */
-
-[data-title-text-button-block] {
-
-  &.block-width {
-    @apply w-1/2;
-  }
-
-  & > .title-box {
-    @apply text-heading-h3;
-    @apply uppercase;
-  }
-
-  & > .content-box .p {
-    @apply text-base-md;
-  }
-
-  & > .content-box:has( + .footer-box )
-  {
-    @apply mb-30p; /* 10p + 20p */
-  }
-
-  & > .footer-box {
-  }
-}
-
-
-}
+/* .on-primary-dark
+{
+  & [data-title-text-button-block] {
+    & > .title-box {
+      @apply text-white;
+    }
+
+    & > .text-box {
+      ...text color
+    }  
+  }
+} */
+
+[data-title-text-button-block] {
+  &.block-width {
+    @apply w-1/2;
+  }
+
+  & > .title-box {
+    @apply text-heading-h3;
+    @apply uppercase;
+  }
+
+  & > .content-box .p {
+    @apply text-base-md;
+  }
+
+  & > .content-box:has(+ .footer-box) {
+    @apply mb-30p; /* 10p + 20p */
+  }
+
+  & > .footer-box {
+  }
+}

package/dist/themes/hkdev/components/boxes/game-box.css

@@ -1,12 +1,11 @@
-@import '../../global/on-colors.css';
-
-@define-mixin boxes-game-box {
-  [data-boxes='game-box'] {
-    /*& .game-box-padding-20p {
-      @apply mt-20p;
-      @apply mr-20p;
-      @apply mb-20p;
-      @apply ml-20p;
-    }*/
-  }
-}
+@import '../../global/on-colors.css';
+
+  [data-boxes='game-box'] {
+    /*& .game-box-padding-20p {
+      @apply mt-20p;
+      @apply mr-20p;
+      @apply mb-20p;
+      @apply ml-20p;
+    }*/
+  }
+

package/dist/themes/hkdev/components/buttons/button-icon-steeze.css

@@ -1,22 +1,22 @@
-@define-mixin component-button-icon-steeze {
-
-  /* @note using CSS vars defined in the parent button postcss */
-
-  /* Type-based styling for text buttons */
-  [data-component="button"][data-type="icon-steeze"] {
-
-    /*&[data-size="sm"] {
-      @apply px-8ut py-8ut;
-    }
-
-    &[data-size="md"] {
-      @apply px-16ut py-12ut;
-    }
-
-    &[data-size="lg"] {
-      @apply px-32ut py-16ut;
-    }*/
-
-  }
-
-}
+@define-mixin component-button-icon-steeze {
+
+  /* @note using CSS vars defined in the parent button postcss */
+
+  /* Type-based styling for text buttons */
+  [data-component="button"][data-type="icon-steeze"] {
+
+    /*&[data-size="sm"] {
+      @apply px-8ut py-8ut;
+    }
+
+    &[data-size="md"] {
+      @apply px-16ut py-12ut;
+    }
+
+    &[data-size="lg"] {
+      @apply px-32ut py-16ut;
+    }*/
+
+  }
+
+}

package/dist/themes/hkdev/components/buttons/button-text.css

@@ -1,32 +1,32 @@
-@define-mixin component-button-text {
-
-  /* @note using CSS vars defined in the parent button postcss */
-
-  /* Type-based styling for text buttons */
-  [data-component="button"][data-type="text"] {
-
-    /* Typography settings */
-    @apply font-ui text-ui-md;
-    @apply uppercase;
-    @apply whitespace-nowrap;
-
-    /* Size settings */
-
-    &[data-size="md"] {
-      @apply rounded-sm;
-      @apply py-8ut px-16ut;
-      min-width: var(--btn-min-width);
-      min-height: var(--btn-min-height);
-    }
-
-    /* Role-specific text adjustments */
-    &[data-role="primary"] {
-      @apply font-extrabold;
-    }
-
-    &[data-role="secondary"] {
-      @apply font-bold;
-    }
-  }
-
-}
+@define-mixin component-button-text {
+
+  /* @note using CSS vars defined in the parent button postcss */
+
+  /* Type-based styling for text buttons */
+  [data-component="button"][data-type="text"] {
+
+    /* Typography settings */
+    @apply font-ui text-ui-md;
+    @apply uppercase;
+    @apply whitespace-nowrap;
+
+    /* Size settings */
+
+    &[data-size="md"] {
+      @apply rounded-sm;
+      @apply py-8ut px-16ut;
+      min-width: var(--btn-min-width);
+      min-height: var(--btn-min-height);
+    }
+
+    /* Role-specific text adjustments */
+    &[data-role="primary"] {
+      @apply font-extrabold;
+    }
+
+    &[data-role="secondary"] {
+      @apply font-bold;
+    }
+  }
+
+}