lapikit 0.7.6 → 0.7.7

package/dist/@types/components.d.ts

@@ -1,3 +1,4 @@
+import type MagicString from 'magic-string';
 import type { Snippet } from 'svelte';
 import type { ClassNameType, IdElementType, KitClassNameType, KitStylePropertiesType, PropValue, SStyleProp, StylePropertiesType } from './';
 import type { ClassValue } from 'svelte/elements';
@@ -20,6 +21,7 @@ export interface Component extends Base {
 export type KitComponentScan = {
     code: string;
     changed: boolean;
+    magic: MagicString;
     importedComponents: Map<string, string>;
 };
 export type ComponentInfo = {

package/dist/@types/props.d.ts

@@ -1,7 +1,7 @@
 export type PropValue = string | boolean | number | null | undefined;
 export type SizeType = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type RoundedType = 0 | '0' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type DensityType = 'none' | 'compact' | 'default' | 'comfortable';
+export type DensityType = 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
 export type ElevationType = '0' | '1' | '2' | '3' | '4' | '5';
 export interface ElevationState {
     base?: ElevationType;

package/dist/components/accordion/accordion.types.d.ts

@@ -16,9 +16,6 @@ export interface AccordionProps extends Component {
     spacer?: boolean;
     hideIcon?: boolean;
 }
-export type AccordionItemModelProps = {
-    open: boolean;
-};
 export interface AccordionItemProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div';
@@ -29,7 +26,7 @@ export interface AccordionItemProps extends Component {
     open?: boolean;
     disabled?: boolean;
     toggle?: (index: number | string) => void;
-    indicator?: Snippet<[AccordionItemModelProps]>;
+    indicator?: Snippet<[ModelAccordionItemProps]>;
     activator?: Snippet;
     elevation?: ElevationProps;
 }

package/dist/components/accordion/modules/accordion-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { useComponentAttrs, useElevation } from '../../../utils';
-	import type { AccordionItemModelProps, AccordionItemProps } from '../accordion.types.js';
+	import type { AccordionItemProps, ModelAccordionItemProps } from '../accordion.types.js';
 
 	let {
 		ref = $bindable(),
@@ -32,7 +32,7 @@
 	const contentId = `${uid}-content`;
 
 	let safeOpen = $derived(!!open);
-	let model: AccordionItemModelProps = {
+	let model: ModelAccordionItemProps = {
 		get open() {
 			return safeOpen;
 		}

package/dist/components/index.d.ts

@@ -1,7 +1,25 @@
-export type { ModelDropdownProps, ModelDropdownHandleProps } from './dropdown/dropdown.types';
-export type { ModelAccordionItemProps } from './accordion/accordion.types';
-export type { ModelPopoverProps } from './popover/popover.types';
-export type { FieldControlProps } from './field/field.types';
+export type { ColorProps, ColorState, DensityType, ElevationProps, ElevationState, ElevationType, RoundedType, SizeType } from '../@types';
+export type { AccordionProps, AccordionItemProps, ModelAccordionItemProps } from './accordion/accordion.types';
+export type { AlertProps } from './alert/alert.types';
+export type { AppProps } from './app/app.types';
+export type { AppbarProps } from './appbar/appbar.types';
+export type { AspectRatioProps, AspectRatioValue } from './aspect-ratio/aspect-ratio.types';
+export type { AvatarProps } from './avatar/avatar.types';
+export type { ButtonProps } from './btn/btn.types';
+export type { CardProps, CardActionsProps, CardContainerProps, CardContentProps, CardMediaProps, CardTitleProps } from './card/card.types';
+export type { ChipProps } from './chip/chip.types';
+export type { DialogProps } from './dialog/dialog.types';
+export type { DropdownProps, ModelDropdownProps, ModelDropdownHandleProps } from './dropdown/dropdown.types';
+export type { FieldProps, FieldBaseProps, FieldControlProps, FieldVariant } from './field/field.types';
+export type { IconProps } from './icon/icon.types';
+export type { ListProps, ListItemProps, ListVariant, ListElement, ListItemElement } from './list/list.types';
+export type { ModalProps } from './modal/modal.types';
+export type { PopoverProps, ModelPopoverProps } from './popover/popover.types';
+export type { SeparatorProps } from './separator/separator.types';
+export type { SpacerProps } from './spacer/spacer.types';
+export type { TextfieldProps } from './textfield/textfield.types';
+export type { ToolbarProps } from './toolbar/toolbar.types';
+export type { TooltipProps } from './tooltip/tooltip.types';
 export { default as KitApp } from './app/app.svelte';
 export { default as KitAppbar } from './appbar/appbar.svelte';
 export { default as KitBtn } from './btn/btn.svelte';

package/dist/escaping.js

@@ -1,19 +1,15 @@
+import MagicString from 'magic-string';
 import { rewriteDirectives } from './directives.js';
 export const decodeSourceMap = (content, componentInfo) => {
     const importedComponents = new Map();
-    const parts = [];
+    const magic = new MagicString(content);
     let changed = false;
     let index = 0;
     const length = content.length;
     while (index < length) {
         const nextLt = content.indexOf('<', index);
-        if (nextLt === -1) {
-            parts.push(content.slice(index));
+        if (nextLt === -1)
             break;
-        }
-        if (nextLt > index) {
-            parts.push(content.slice(index, nextLt));
-        }
         const ch = content[nextLt + 1];
         const isClosing = ch === '/';
         if (content.startsWith('<script', nextLt) || content.startsWith('<style', nextLt)) {
@@ -21,30 +17,22 @@ export const decodeSourceMap = (content, componentInfo) => {
             const nameEnd = nextLt + tagName.length + 1;
             const afterName = content[nameEnd];
             if (afterName && !/[\s>/]/.test(afterName)) {
-                parts.push('<');
                 index = nextLt + 1;
                 continue;
             }
             const openEnd = findTagEnd(content, nameEnd);
-            if (openEnd === -1) {
-                parts.push(content.slice(nextLt));
+            if (openEnd === -1)
                 break;
-            }
             const closeTag = `</${tagName}>`;
             const closeStart = content.indexOf(closeTag, openEnd + 1);
-            if (closeStart === -1) {
-                parts.push(content.slice(nextLt));
+            if (closeStart === -1)
                 break;
-            }
-            const closeEnd = closeStart + closeTag.length;
-            parts.push(content.slice(nextLt, closeEnd));
-            index = closeEnd;
+            index = closeStart + closeTag.length;
             continue;
         }
         const isKitTag = (!isClosing && content.startsWith('<kit:', nextLt)) ||
             (isClosing && content.startsWith('</kit:', nextLt));
         if (!isKitTag) {
-            parts.push('<');
             index = nextLt + 1;
             continue;
         }
@@ -60,7 +48,6 @@ export const decodeSourceMap = (content, componentInfo) => {
         }
         const shortName = content.slice(nameStart, nameEnd);
         if (!shortName) {
-            parts.push('<');
             index = nextLt + 1;
             continue;
         }
@@ -68,40 +55,35 @@ export const decodeSourceMap = (content, componentInfo) => {
         const isKnown = info !== undefined;
         if (isClosing) {
             const tagEnd = content.indexOf('>', nameEnd);
-            if (tagEnd === -1) {
-                parts.push(content.slice(nextLt));
+            if (tagEnd === -1)
                 break;
-            }
             if (isKnown) {
                 importedComponents.set(info.name, info.ref);
-                parts.push(`</${info.name}>`);
+                magic.overwrite(nextLt, tagEnd + 1, `</${info.name}>`);
                 changed = true;
             }
-            else {
-                parts.push(content.slice(nextLt, tagEnd + 1));
-            }
             index = tagEnd + 1;
             continue;
         }
         const tagEnd = findTagEnd(content, nameEnd);
-        if (tagEnd === -1) {
-            parts.push(content.slice(nextLt));
+        if (tagEnd === -1)
             break;
-        }
         if (isKnown) {
             importedComponents.set(info.name, info.ref);
+            magic.overwrite(nextLt, nameEnd, `<${info.name}`);
             // class: / style: are refused by Svelte on a component: they become s-class_ / s-style_ props
-            parts.push(`<${info.name}${rewriteDirectives(content.slice(nameEnd, tagEnd + 1))}`);
+            const attributes = content.slice(nameEnd, tagEnd + 1);
+            const rewritten = rewriteDirectives(attributes);
+            if (rewritten !== attributes)
+                magic.overwrite(nameEnd, tagEnd + 1, rewritten);
             changed = true;
         }
-        else {
-            parts.push(content.slice(nextLt, tagEnd + 1));
-        }
         index = tagEnd + 1;
     }
     return {
-        code: changed ? parts.join('') : content,
+        code: changed ? magic.toString() : content,
         changed,
+        magic,
         importedComponents
     };
 };

package/dist/framework.d.ts

@@ -2,10 +2,11 @@ import type { LapikitPreprocessOptions } from './@types/index.js';
 export declare function componentName(shortName: string): string;
 export declare function collectDeclaredIdentifiers(content: string): Set<string>;
 export declare function liliCore(options?: LapikitPreprocessOptions): {
-    markup({ content }: {
+    markup({ content, filename }: {
         content: string;
         filename?: string;
     }): {
         code: string;
+        map: import("magic-string").SourceMap;
     } | undefined;
 };

package/dist/framework.js

@@ -40,7 +40,7 @@ export function collectDeclaredIdentifiers(content) {
 }
 export function liliCore(options) {
     return {
-        markup({ content }) {
+        markup({ content, filename }) {
             if (!content.includes('<kit:'))
                 return;
             const componentInfo = new Map();
@@ -72,7 +72,7 @@ export function liliCore(options) {
             const scanResult = decodeSourceMap(content, componentInfo);
             if (!scanResult.changed)
                 return;
-            let processedContent = scanResult.code;
+            const { magic } = scanResult;
             const importedComponents = scanResult.importedComponents;
             // components already declared by the user (manual import, alias...) are not imported again
             const declared = collectDeclaredIdentifiers(content);
@@ -103,28 +103,24 @@ export function liliCore(options) {
                     })
                         .join('');
                 const scriptRegex = /<script(?![^>]*\bmodule\b)([^>]*)>/;
-                const scriptMatch = processedContent.match(scriptRegex);
+                const scriptMatch = content.match(scriptRegex);
                 if (scriptMatch && scriptMatch.index !== undefined) {
-                    const insertPos = scriptMatch.index + scriptMatch[0].length;
-                    processedContent =
-                        processedContent.slice(0, insertPos) + importLines + processedContent.slice(insertPos);
+                    magic.appendLeft(scriptMatch.index + scriptMatch[0].length, importLines);
                 }
                 else {
-                    const moduleScriptMatch = processedContent.match(/<script[^>]*\bmodule\b[^>]*>/);
+                    const moduleScriptMatch = content.match(/<script[^>]*\bmodule\b[^>]*>/);
                     if (moduleScriptMatch && moduleScriptMatch.index !== undefined) {
-                        const moduleScriptEnd = processedContent.indexOf('</script>', moduleScriptMatch.index) + '</script>'.length;
-                        processedContent =
-                            processedContent.slice(0, moduleScriptEnd) +
-                                `\n\n<script>${importLines}\n</script>` +
-                                processedContent.slice(moduleScriptEnd);
+                        const moduleScriptEnd = content.indexOf('</script>', moduleScriptMatch.index) + '</script>'.length;
+                        magic.appendLeft(moduleScriptEnd, `\n\n<script>${importLines}\n</script>`);
                     }
                     else {
-                        processedContent = `<script>${importLines}\n</script>\n\n` + processedContent;
+                        magic.prepend(`<script>${importLines}\n</script>\n\n`);
                     }
                 }
             }
             return {
-                code: processedContent
+                code: magic.toString(),
+                map: magic.generateMap({ hires: true, source: filename, includeContent: true })
             };
         }
     };

package/dist/hooks/themes.svelte.d.ts

@@ -4,9 +4,8 @@ export declare function createGlobalTheme(params?: ThemeOptions): {
     readonly active: string;
 };
 export declare function createTheme(): ThemeAction;
-/** LEGACY CODE
- * NEED UPDATE documentation with new theme system before removing this legacy code. The new theme system is designed to be more flexible and easier to use, allowing for better integration with Svelte's reactivity and component structure. It also provides a more consistent API for managing themes across different components and contexts.
- * TODO: Remove this legacy code once the new theme system is fully implemented and tested. This code is kept for backward compatibility with existing components that rely on the old theme system.
+/**
+ * themeScript - An inline script that applies the stored theme before the page is painted (no flash with SSR).
+ * Put it in the <head>: {@html themeScript()} inside <svelte:head>.
  */
-import { type Writable } from 'svelte/store';
-export declare const theme: Writable<string>;
+export declare function themeScript(params?: Pick<ThemeOptions, 'name' | 'key'>): string;

package/dist/hooks/themes.svelte.js

@@ -3,6 +3,27 @@ const isBrowser = typeof window !== 'undefined';
 // presets
 const default_theme = 'light';
 const default_storage_key = '@lapikit/theme';
+// localStorage can throw (private browsing, blocked storage): the theme still applies, without being kept
+function readStorage(key) {
+    if (!isBrowser)
+        return null;
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+function writeStorage(key, name) {
+    if (!isBrowser)
+        return;
+    try {
+        localStorage.setItem(key, name);
+    }
+    catch {
+        // ignored: see readStorage
+    }
+}
 function generateGlobalTheme() {
     let active = $state(default_theme);
     let key = default_storage_key;
@@ -15,16 +36,14 @@ function generateGlobalTheme() {
     }
     function set(name) {
         applyToHtml(name);
-        if (isBrowser) {
-            localStorage.setItem(key, name);
-        }
+        writeStorage(key, name);
     }
     function init(params = {}) {
         if (initialized)
             return;
         initialized = true;
         key = params.key ?? default_storage_key;
-        const stored = isBrowser ? localStorage.getItem(key) : null;
+        const stored = readStorage(key);
         applyToHtml(stored ?? params.name ?? default_theme);
     }
     return {
@@ -59,9 +78,8 @@ export function createTheme() {
     }
     function set(name) {
         applyTheme(name);
-        if (isBrowser && key) {
-            localStorage.setItem(key, name);
-        }
+        if (key)
+            writeStorage(key, name);
     }
     // skip the effect's first automatic pass so the mount's own initial value (from
     // `name`, storage or default) isn't immediately clobbered by the current global value
@@ -80,7 +98,7 @@ export function createTheme() {
         node = n;
         key = params.key;
         overridden = params.overridden ?? false;
-        const stored = isBrowser && key ? localStorage.getItem(key) : null;
+        const stored = key ? readStorage(key) : null;
         applyTheme(stored ?? params.name ?? (overridden ? default_theme : refGlobalTheme.active));
         return {
             update(newParams = {}) {
@@ -100,26 +118,13 @@ export function createTheme() {
         }
     };
 }
-/** LEGACY CODE
- * NEED UPDATE documentation with new theme system before removing this legacy code. The new theme system is designed to be more flexible and easier to use, allowing for better integration with Svelte's reactivity and component structure. It also provides a more consistent API for managing themes across different components and contexts.
- * TODO: Remove this legacy code once the new theme system is fully implemented and tested. This code is kept for backward compatibility with existing components that rely on the old theme system.
+/**
+ * themeScript - An inline script that applies the stored theme before the page is painted (no flash with SSR).
+ * Put it in the <head>: {@html themeScript()} inside <svelte:head>.
  */
-import { writable } from 'svelte/store';
-// presets
-const themeRef = 'light';
-export const theme = writable(themeRef);
-// export function useTheme(name: string, key: string = '@lapikit/theme') {
-// 	theme.update(() => {
-// 		if (isBrowser) {
-// 			const html = document.documentElement;
-// 			html.classList.forEach((cls) => {
-// 				if (cls.startsWith('kit-theme--')) {
-// 					html.classList.remove(cls);
-// 				}
-// 			});
-// 			html.classList.add(`kit-theme--${name}`);
-// 			localStorage.setItem(key, name);
-// 		}
-// 		return name;
-// 	});
-// }
+export function themeScript(params = {}) {
+    const key = JSON.stringify(params.key ?? default_storage_key);
+    const name = JSON.stringify(params.name ?? null);
+    const code = `(function(){var t=null;try{t=localStorage.getItem(${key})}catch(e){}t=t||${name};if(t)document.documentElement.setAttribute('data-kit-theme',t)})()`;
+    return `<script>${code.replace(/</g, '\\u003c')}</script>`;
+}

package/dist/labs/index.d.ts

@@ -1 +1,2 @@
+export type { SheetProps } from './sheet/sheet.types';
 export { default as KitSheet } from './sheet/sheet.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.7.6",
+	"version": "0.7.7",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -77,11 +77,16 @@
 			"default": "./dist/labs/*"
 		},
 		"./actions": {
+			"types": "./dist/hooks/actions.d.ts",
 			"default": "./dist/hooks/actions.js"
 		}
 	},
+	"engines": {
+		"node": "^20.19.0 || >=22.12.0"
+	},
 	"dependencies": {
-		"esm-env": "^1.2.2"
+		"esm-env": "^1.2.2",
+		"magic-string": "^0.30.21"
 	},
 	"peerDependencies": {
 		"svelte": "^5.20.0"