npm - @ecoma-io/loom - Versions diffs - 0.2.0 → 0.3.0 - Mend

@ecoma-io/loom 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1365) hide show

package/dist/theme.js DELETED Viewed

@@ -1,171 +0,0 @@
-import { computed, onScopeDispose, ref, watch } from "vue";
-//#region src/lib/theme.ts
-/**
-* Theme switching for Loom.
-*
-* The single source of truth is the `data-theme` attribute on `<html>`.
-* This composable reads and writes it, persists the preference to
-* `localStorage`, and resolves `"system"` mode from the OS preference.
-*
-* SSR-safe: every DOM access is guarded. On the server, `theme` returns
-* the persisted or default preference, `resolvedTheme` resolves `"system"`
-* to `"light"` (the only safe default without a DOM), and the setter and
-* toggler are no-ops.
-*
-* Flash prevention: `themeScript` is a string of inline JavaScript that
-* reads `localStorage` and sets `data-theme` before the first paint.
-* Consumers rendering SSR inject it into `<head>`:
-*
-*   <script>${themeScript}<\/script>
-*/
-var STORAGE_KEY = "loom:theme";
-var DATA_ATTR = "data-theme";
-var MEDIA_QUERY = "(prefers-color-scheme: dark)";
-/** Default preference when nothing is stored and no OS signal exists. */
-var DEFAULT_PREFERENCE = "system";
-/**
-* Reactive shared state, lazily initialised on the first `useTheme()` call
-* and torn down with the effect scope that owns it. Multiple components
-* calling `useTheme()` in the same app share the same refs and the same
-* `matchMedia` listener.
-*/
-var sharedState = null;
-/**
-* Reset the shared state. Intended for test isolation only — a real app
-* never needs this because the state lives for the app's lifetime.
-*/
-function _resetThemeState() {
-	if (sharedState?.mediaQuery && sharedState.listener) sharedState.mediaQuery.removeEventListener("change", sharedState.listener);
-	sharedState = null;
-}
-function getSharedState() {
-	if (sharedState) {
-		sharedState.scopeCount++;
-		return sharedState;
-	}
-	let stored = DEFAULT_PREFERENCE;
-	try {
-		const raw = localStorage.getItem(STORAGE_KEY);
-		if (raw === "light" || raw === "dark" || raw === "system") stored = raw;
-	} catch {}
-	applyToDOM(resolveTheme(stored, getSystemIsDark()));
-	const preference = ref(stored);
-	const systemIsDark = ref(getSystemIsDark());
-	let mediaQuery = null;
-	let listener = null;
-	try {
-		mediaQuery = window.matchMedia(MEDIA_QUERY);
-		listener = (e) => {
-			systemIsDark.value = e.matches;
-		};
-		mediaQuery.addEventListener("change", listener);
-	} catch {}
-	sharedState = {
-		preference,
-		systemIsDark,
-		mediaQuery,
-		listener,
-		scopeCount: 1
-	};
-	return sharedState;
-}
-function releaseSharedState() {
-	if (!sharedState) return;
-	sharedState.scopeCount--;
-	if (sharedState.scopeCount > 0) return;
-	if (sharedState.mediaQuery && sharedState.listener) sharedState.mediaQuery.removeEventListener("change", sharedState.listener);
-	sharedState = null;
-}
-function getSystemIsDark() {
-	try {
-		return window.matchMedia(MEDIA_QUERY).matches;
-	} catch {
-		return false;
-	}
-}
-function resolveTheme(pref, systemDark) {
-	return pref === "system" ? systemDark ? "dark" : "light" : pref;
-}
-function applyToDOM(theme) {
-	try {
-		document.documentElement.setAttribute(DATA_ATTR, theme);
-	} catch {}
-}
-function persist(preference) {
-	try {
-		localStorage.setItem(STORAGE_KEY, preference);
-	} catch {}
-}
-/**
-* Read and control the active Loom theme.
-*
-* @example
-* ```vue
-* <script setup>
-* import { useTheme } from "@ecoma-io/loom/theme"
-* const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme()
-* <\/script>
-*
-* <template>
-*   <button @click="toggleTheme">
-*     {{ resolvedTheme === "dark" ? "☀️" : "🌙" }}
-*   </button>
-* </template>
-* ```
-*/
-function useTheme() {
-	const state = getSharedState();
-	onScopeDispose(releaseSharedState);
-	/** The user's preference — `"system"` defers to the OS. */
-	const theme = computed({
-		get: () => state.preference.value,
-		set: (value) => {
-			state.preference.value = value;
-		}
-	});
-	/** The actual active theme, with `"system"` resolved to `"light"` or `"dark"`. */
-	const resolvedTheme = computed(() => resolveTheme(state.preference.value, state.systemIsDark.value));
-	watch([() => state.preference.value, () => state.systemIsDark.value], () => {
-		applyToDOM(resolvedTheme.value);
-		persist(state.preference.value);
-	});
-	/** Set the theme preference explicitly. */
-	function setTheme(preference) {
-		state.preference.value = preference;
-	}
-	/** Toggle between light and dark. System preference stays system. */
-	function toggleTheme() {
-		if (state.preference.value === "system") state.preference.value = resolvedTheme.value === "dark" ? "light" : "dark";
-		else state.preference.value = state.preference.value === "dark" ? "light" : "dark";
-	}
-	return {
-		theme,
-		resolvedTheme,
-		setTheme,
-		toggleTheme
-	};
-}
-/**
-* Inline script to prevent flash-of-wrong-theme on SSR pages.
-*
-* Paste it into `<head>` before any stylesheet links:
-*
-* ```html
-* <script><%= themeScript %><\/script>
-* ```
-*
-* It reads `localStorage` and sets `data-theme` on `<html>` synchronously,
-* before the browser paints, so the first frame is already in the right
-* theme. When no preference is stored, it follows the OS preference.
-*
-* The script is deliberately tiny and has no dependencies.
-*/
-var themeScript = `(() => {
-  const t = localStorage.getItem("${STORAGE_KEY}");
-  const d = window.matchMedia("${MEDIA_QUERY}").matches;
-  document.documentElement.setAttribute("${DATA_ATTR}", (t === "dark" || (!t && d)) ? "dark" : "light");
-})()`;
-//#endregion
-export { _resetThemeState, themeScript, useTheme };
-//# sourceMappingURL=theme.js.map

package/dist/theme.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"theme.js","names":[],"sources":["../src/lib/theme.ts"],"sourcesContent":["/**\n * Theme switching for Loom.\n *\n * The single source of truth is the `data-theme` attribute on `<html>`.\n * This composable reads and writes it, persists the preference to\n * `localStorage`, and resolves `\"system\"` mode from the OS preference.\n *\n * SSR-safe: every DOM access is guarded. On the server, `theme` returns\n * the persisted or default preference, `resolvedTheme` resolves `\"system\"`\n * to `\"light\"` (the only safe default without a DOM), and the setter and\n * toggler are no-ops.\n *\n * Flash prevention: `themeScript` is a string of inline JavaScript that\n * reads `localStorage` and sets `data-theme` before the first paint.\n * Consumers rendering SSR inject it into `<head>`:\n *\n * <script>${themeScript}</script>\n */\n\nimport { type Ref, computed, onScopeDispose, ref, watch } from \"vue\";\n\n/** The preference a user expresses — `\"system\"` defers to the OS. */\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\n\n/** The actual theme applied — `\"system\"` is resolved away. */\nexport type ResolvedTheme = \"light\" | \"dark\";\n\nconst STORAGE_KEY = \"loom:theme\";\nconst DATA_ATTR = \"data-theme\";\nconst MEDIA_QUERY = \"(prefers-color-scheme: dark)\";\n\n/** Default preference when nothing is stored and no OS signal exists. */\nconst DEFAULT_PREFERENCE: ThemePreference = \"system\";\n\n// --- Shared state (one per Vue app, not one per composable call) ---------\n\ninterface ThemeState {\n preference: Ref<ThemePreference>;\n systemIsDark: Ref<boolean>;\n mediaQuery: MediaQueryList | null;\n listener: ((e: MediaQueryListEvent) => void) | null;\n scopeCount: number;\n}\n\n/**\n * Reactive shared state, lazily initialised on the first `useTheme()` call\n * and torn down with the effect scope that owns it. Multiple components\n * calling `useTheme()` in the same app share the same refs and the same\n * `matchMedia` listener.\n */\nlet sharedState: ThemeState | null = null;\n\n/**\n * Reset the shared state. Intended for test isolation only — a real app\n * never needs this because the state lives for the app's lifetime.\n */\nexport function _resetThemeState(): void {\n if (sharedState?.mediaQuery && sharedState.listener) {\n sharedState.mediaQuery.removeEventListener(\"change\", sharedState.listener);\n }\n sharedState = null;\n}\n\nfunction getSharedState(): ThemeState {\n if (sharedState) {\n sharedState.scopeCount++;\n return sharedState;\n }\n\n // Read the stored preference, defaulting to \"system\".\n let stored: ThemePreference = DEFAULT_PREFERENCE;\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (raw === \"light\" || raw === \"dark\" || raw === \"system\") {\n stored = raw;\n }\n } catch {\n // localStorage may be unavailable (SSR, private browsing).\n }\n\n // Apply the initial theme to the DOM so the very first render is correct.\n const initial = resolveTheme(stored, getSystemIsDark());\n applyToDOM(initial);\n\n const preference = ref<ThemePreference>(stored);\n const systemIsDark = ref<boolean>(getSystemIsDark());\n\n // Listen for OS dark-mode changes.\n let mediaQuery: MediaQueryList | null = null;\n let listener: ((e: MediaQueryListEvent) => void) | null = null;\n\n try {\n mediaQuery = window.matchMedia(MEDIA_QUERY);\n listener = (e: MediaQueryListEvent) => {\n systemIsDark.value = e.matches;\n };\n mediaQuery.addEventListener(\"change\", listener);\n } catch {\n // matchMedia may be unavailable.\n }\n\n sharedState = {\n preference,\n systemIsDark,\n mediaQuery,\n listener,\n scopeCount: 1,\n };\n\n return sharedState;\n}\n\nfunction releaseSharedState(): void {\n if (!sharedState) return;\n sharedState.scopeCount--;\n if (sharedState.scopeCount > 0) return;\n\n // Last consumer gone — tear down the listener.\n if (sharedState.mediaQuery && sharedState.listener) {\n sharedState.mediaQuery.removeEventListener(\"change\", sharedState.listener);\n }\n sharedState = null;\n}\n\n// --- DOM helpers --------------------------------------------------------\n\nfunction getSystemIsDark(): boolean {\n try {\n return window.matchMedia(MEDIA_QUERY).matches;\n } catch {\n return false;\n }\n}\n\nfunction resolveTheme(pref: ThemePreference, systemDark: boolean): ResolvedTheme {\n return pref === \"system\" ? (systemDark ? \"dark\" : \"light\") : pref;\n}\n\nfunction applyToDOM(theme: ResolvedTheme): void {\n try {\n document.documentElement.setAttribute(DATA_ATTR, theme);\n } catch {\n // document may be unavailable (SSR).\n }\n}\n\nfunction persist(preference: ThemePreference): void {\n try {\n localStorage.setItem(STORAGE_KEY, preference);\n } catch {\n // localStorage may be unavailable.\n }\n}\n\n// --- Public API ---------------------------------------------------------\n\n/**\n * Read and control the active Loom theme.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useTheme } from \"@ecoma-io/loom/theme\"\n * const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme()\n * </script>\n *\n * <template>\n * <button @click=\"toggleTheme\">\n * {{ resolvedTheme === \"dark\" ? \"☀️\" : \"🌙\" }}\n * </button>\n * </template>\n * ```\n */\nexport function useTheme(): {\n readonly theme: Ref<ThemePreference>;\n readonly resolvedTheme: Readonly<Ref<ResolvedTheme>>;\n readonly setTheme: (preference: ThemePreference) => void;\n readonly toggleTheme: () => void;\n} {\n const state = getSharedState();\n\n // Clean up the shared listener when the consuming scope disposes.\n onScopeDispose(releaseSharedState);\n\n /** The user's preference — `\"system\"` defers to the OS. */\n const theme = computed<ThemePreference>({\n get: () => state.preference.value,\n set: (value: ThemePreference) => {\n state.preference.value = value;\n },\n });\n\n /** The actual active theme, with `\"system\"` resolved to `\"light\"` or `\"dark\"`. */\n const resolvedTheme = computed<ResolvedTheme>(() =>\n resolveTheme(state.preference.value, state.systemIsDark.value),\n );\n\n // Whenever the preference or the OS signal changes, apply the resolved\n // theme to the DOM and persist the preference.\n watch([() => state.preference.value, () => state.systemIsDark.value], () => {\n applyToDOM(resolvedTheme.value);\n persist(state.preference.value);\n });\n\n /** Set the theme preference explicitly. */\n function setTheme(preference: ThemePreference): void {\n state.preference.value = preference;\n }\n\n /** Toggle between light and dark. System preference stays system. */\n function toggleTheme(): void {\n if (state.preference.value === \"system\") {\n // Toggle the resolved theme and lock to it, so the user can override\n // the OS preference with one click.\n state.preference.value = resolvedTheme.value === \"dark\" ? \"light\" : \"dark\";\n } else {\n state.preference.value = state.preference.value === \"dark\" ? \"light\" : \"dark\";\n }\n }\n\n return { theme, resolvedTheme, setTheme, toggleTheme } as const;\n}\n\n/**\n * Inline script to prevent flash-of-wrong-theme on SSR pages.\n *\n * Paste it into `<head>` before any stylesheet links:\n *\n * ```html\n * <script><%= themeScript %></script>\n * ```\n *\n * It reads `localStorage` and sets `data-theme` on `<html>` synchronously,\n * before the browser paints, so the first frame is already in the right\n * theme. When no preference is stored, it follows the OS preference.\n *\n * The script is deliberately tiny and has no dependencies.\n */\nexport const themeScript = `(() => {\n const t = localStorage.getItem(\"${STORAGE_KEY}\");\n const d = window.matchMedia(\"${MEDIA_QUERY}\").matches;\n document.documentElement.setAttribute(\"${DATA_ATTR}\", (t === \"dark\" || (!t && d)) ? \"dark\" : \"light\");\n})()`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,IAAM,cAAc;AACpB,IAAM,YAAY;AAClB,IAAM,cAAc;;AAGpB,IAAM,qBAAsC;;;;;;;AAkB5C,IAAI,cAAiC;;;;;AAMrC,SAAgB,mBAAyB;CACvC,IAAI,aAAa,cAAc,YAAY,UACzC,YAAY,WAAW,oBAAoB,UAAU,YAAY,QAAQ;CAE3E,cAAc;AAChB;AAEA,SAAS,iBAA6B;CACpC,IAAI,aAAa;EACf,YAAY;EACZ,OAAO;CACT;CAGA,IAAI,SAA0B;CAC9B,IAAI;EACF,MAAM,MAAM,aAAa,QAAQ,WAAW;EAC5C,IAAI,QAAQ,WAAW,QAAQ,UAAU,QAAQ,UAC/C,SAAS;CAEb,QAAQ,CAER;CAIA,WADgB,aAAa,QAAQ,gBAAgB,CAC1C,CAAO;CAElB,MAAM,aAAa,IAAqB,MAAM;CAC9C,MAAM,eAAe,IAAa,gBAAgB,CAAC;CAGnD,IAAI,aAAoC;CACxC,IAAI,WAAsD;CAE1D,IAAI;EACF,aAAa,OAAO,WAAW,WAAW;EAC1C,YAAY,MAA2B;GACrC,aAAa,QAAQ,EAAE;EACzB;EACA,WAAW,iBAAiB,UAAU,QAAQ;CAChD,QAAQ,CAER;CAEA,cAAc;EACZ;EACA;EACA;EACA;EACA,YAAY;CACd;CAEA,OAAO;AACT;AAEA,SAAS,qBAA2B;CAClC,IAAI,CAAC,aAAa;CAClB,YAAY;CACZ,IAAI,YAAY,aAAa,GAAG;CAGhC,IAAI,YAAY,cAAc,YAAY,UACxC,YAAY,WAAW,oBAAoB,UAAU,YAAY,QAAQ;CAE3E,cAAc;AAChB;AAIA,SAAS,kBAA2B;CAClC,IAAI;EACF,OAAO,OAAO,WAAW,WAAW,CAAC,CAAC;CACxC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,aAAa,MAAuB,YAAoC;CAC/E,OAAO,SAAS,WAAY,aAAa,SAAS,UAAW;AAC/D;AAEA,SAAS,WAAW,OAA4B;CAC9C,IAAI;EACF,SAAS,gBAAgB,aAAa,WAAW,KAAK;CACxD,QAAQ,CAER;AACF;AAEA,SAAS,QAAQ,YAAmC;CAClD,IAAI;EACF,aAAa,QAAQ,aAAa,UAAU;CAC9C,QAAQ,CAER;AACF;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,WAKd;CACA,MAAM,QAAQ,eAAe;CAG7B,eAAe,kBAAkB;;CAGjC,MAAM,QAAQ,SAA0B;EACtC,WAAW,MAAM,WAAW;EAC5B,MAAM,UAA2B;GAC/B,MAAM,WAAW,QAAQ;EAC3B;CACF,CAAC;;CAGD,MAAM,gBAAgB,eACpB,aAAa,MAAM,WAAW,OAAO,MAAM,aAAa,KAAK,CAC/D;CAIA,MAAM,OAAO,MAAM,WAAW,aAAa,MAAM,aAAa,KAAK,SAAS;EAC1E,WAAW,cAAc,KAAK;EAC9B,QAAQ,MAAM,WAAW,KAAK;CAChC,CAAC;;CAGD,SAAS,SAAS,YAAmC;EACnD,MAAM,WAAW,QAAQ;CAC3B;;CAGA,SAAS,cAAoB;EAC3B,IAAI,MAAM,WAAW,UAAU,UAG7B,MAAM,WAAW,QAAQ,cAAc,UAAU,SAAS,UAAU;OAEpE,MAAM,WAAW,QAAQ,MAAM,WAAW,UAAU,SAAS,UAAU;CAE3E;CAEA,OAAO;EAAE;EAAO;EAAe;EAAU;CAAY;AACvD;;;;;;;;;;;;;;;;AAiBA,IAAa,cAAc;oCACS,YAAY;iCACf,YAAY;2CACF,UAAU"}

/package/dist/{blocks/AppHeader → packages/blocks/app-header/src}/AppHeader.vue.d.ts RENAMED Viewed

File without changes

/package/dist/{blocks/DashboardGrid → packages/blocks/dashboard-grid/src}/DashboardGrid.vue.d.ts RENAMED Viewed

File without changes

/package/dist/{blocks/EmptyState → packages/blocks/empty-state/src}/EmptyState.vue.d.ts RENAMED Viewed

File without changes

/package/dist/{blocks/ErrorState → packages/blocks/error-state/src}/ErrorState.vue.d.ts RENAMED Viewed

File without changes

/package/dist/{blocks/FormActions → packages/blocks/form-actions/src}/FormActions.vue.d.ts RENAMED Viewed

File without changes

/package/dist/{blocks/FormSection → packages/blocks/form-section/src}/FormSection.vue.d.ts RENAMED Viewed

File without changes