matrix-design-system 1.0.0

package/dist/organism/profile-hero/profile-hero.mjs

@@ -0,0 +1,72 @@
+"use client";
+import { useGlassmorphism } from "../../hooks/use-glassmorphism.mjs";
+import { ProfilePhoto } from "../profile-photo/profile-photo.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/organism/profile-hero/profile-hero.tsx
+const ProfileHero = (t0) => {
+	const $ = c(16);
+	const { name, role, imageSrc, imageAlt, children, imageComponent } = t0;
+	const { glassmorphismClass } = useGlassmorphism();
+	const t1 = `my-7 p-4 ${glassmorphismClass}`;
+	const t2 = imageAlt ?? name;
+	let t3;
+	if ($[0] !== imageComponent || $[1] !== imageSrc || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ProfilePhoto, {
+			author: t2,
+			src: imageSrc,
+			imageComponent
+		});
+		$[0] = imageComponent;
+		$[1] = imageSrc;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== name) {
+		t4 = /* @__PURE__ */ jsx("h3", {
+			className: "text-primary-text mx-0 mt-3 text-center",
+			children: name
+		});
+		$[4] = name;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== role) {
+		t5 = role && /* @__PURE__ */ jsx("h5", {
+			className: "text-secondary-text text-center",
+			children: role
+		});
+		$[6] = role;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== t4 || $[9] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "text-center",
+			children: [t4, t5]
+		});
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== children || $[12] !== t1 || $[13] !== t3 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [
+				t3,
+				t6,
+				children
+			]
+		});
+		$[11] = children;
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+};
+//#endregion
+export { ProfileHero };

package/dist/organism/profile-photo/index.d.mts

@@ -0,0 +1,2 @@
+import { ProfilePhoto, ProfilePhotoProps } from "./profile-photo.mjs";
+export { ProfilePhoto, type ProfilePhotoProps };

package/dist/organism/profile-photo/profile-photo.d.mts

@@ -0,0 +1,12 @@
+import { ImageComponent } from "../../atoms/effects/plain-image/plain-image.mjs";
+import "../../atoms/effects/plain-image/index.mjs";
+import { FC } from "react";
+//#region src/organism/profile-photo/profile-photo.d.ts
+interface ProfilePhotoProps {
+  author: string;
+  src?: string;
+  imageComponent?: ImageComponent;
+}
+declare const ProfilePhoto: FC<ProfilePhotoProps>;
+//#endregion
+export { ProfilePhoto, ProfilePhotoProps };

package/dist/organism/profile-photo/profile-photo.mjs

@@ -0,0 +1,17 @@
+import { ImageGlow } from "../../atoms/effects/image-glow/image-glow.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/organism/profile-photo/profile-photo.tsx
+const defaultProfilePhoto = "/media/authors/fabrizio-duroni.jpg";
+const ProfilePhoto = ({ author, src = defaultProfilePhoto, imageComponent }) => /* @__PURE__ */ jsx("div", {
+	className: "flex items-center justify-center",
+	children: /* @__PURE__ */ jsx(ImageGlow, {
+		imageComponent,
+		className: "w-[150px] h-[150px] rounded-full",
+		src,
+		alt: author,
+		width: 150,
+		height: 150
+	})
+});
+//#endregion
+export { ProfilePhoto };

package/dist/organism/reading-content-progress-bar/index.d.mts

@@ -0,0 +1,2 @@
+import { ContentProgressBar } from "./reading-content-progress-bar.mjs";
+export { ContentProgressBar };

package/dist/organism/reading-content-progress-bar/reading-content-progress-bar.d.mts

@@ -0,0 +1,8 @@
+import React from "react";
+//#region src/organism/reading-content-progress-bar/reading-content-progress-bar.d.ts
+interface ContentProgressBarProps {
+  contentId: string;
+}
+declare const ContentProgressBar: React.FC<ContentProgressBarProps>;
+//#endregion
+export { ContentProgressBar };

package/dist/organism/reading-content-progress-bar/reading-content-progress-bar.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { useGlassmorphism } from "../../hooks/use-glassmorphism.mjs";
+import { TerminalProgressBar } from "../../molecules/terminal-progress-bar/terminal-progress-bar.mjs";
+import { useReadingContentProgressBarStore } from "./use-reading-content-progress-bar-store.mjs";
+import { c } from "react/compiler-runtime";
+import { motion } from "framer-motion";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/organism/reading-content-progress-bar/reading-content-progress-bar.tsx
+const ContentProgressBar = (t0) => {
+	const $ = c(14);
+	const { contentId } = t0;
+	const { glassmorphismClass } = useGlassmorphism();
+	const { state } = useReadingContentProgressBarStore(contentId);
+	const { progressPercentage, isVisible, shouldReduceMotion } = state;
+	const t1 = `${glassmorphismClass} container-fixed fixed top-0 right-0 left-0 z-60 rounded-tl-none rounded-tr-none border-t-0 px-0 py-2`;
+	const t2 = isVisible ? 0 : -100;
+	const t3 = isVisible ? "auto" : "none";
+	let t4;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			delay: .1,
+			duration: .4,
+			ease: "linear"
+		};
+		$[0] = t4;
+	} else t4 = $[0];
+	let t5;
+	if ($[1] !== t2 || $[2] !== t3) {
+		t5 = {
+			y: t2,
+			pointerEvents: t3,
+			transition: t4
+		};
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = t5;
+	} else t5 = $[3];
+	const t6 = isVisible ? "auto" : "none";
+	let t7;
+	if ($[4] !== t6) {
+		t7 = { pointerEvents: t6 };
+		$[4] = t6;
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] !== progressPercentage || $[7] !== shouldReduceMotion) {
+		t8 = /* @__PURE__ */ jsx(TerminalProgressBar, {
+			percentage: progressPercentage,
+			loadingMessage: "Uploading knowledge...",
+			completeMessage: "Transfer complete.",
+			shouldReduceMotion
+		});
+		$[6] = progressPercentage;
+		$[7] = shouldReduceMotion;
+		$[8] = t8;
+	} else t8 = $[8];
+	let t9;
+	if ($[9] !== t1 || $[10] !== t5 || $[11] !== t7 || $[12] !== t8) {
+		t9 = /* @__PURE__ */ jsx(motion.div, {
+			className: t1,
+			initial: false,
+			animate: t5,
+			style: t7,
+			children: t8
+		}, "content-progress-bar");
+		$[9] = t1;
+		$[10] = t5;
+		$[11] = t7;
+		$[12] = t8;
+		$[13] = t9;
+	} else t9 = $[13];
+	return t9;
+};
+//#endregion
+export { ContentProgressBar };

package/dist/organism/reading-content-progress-bar/use-reading-content-progress-bar-store.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { useReducedMotions } from "../../hooks/use-reduced-motions.mjs";
+import { useScrollDirection } from "../../hooks/use-scroll-direction.mjs";
+import { useReadingProgress } from "../../hooks/use-reading-progress.mjs";
+import { c } from "react/compiler-runtime";
+//#region src/organism/reading-content-progress-bar/use-reading-content-progress-bar-store.ts
+const useReadingContentProgressBarStore = (contentId) => {
+	const $ = c(4);
+	const shouldReduceMotion = useReducedMotions();
+	const { percentage, started, status } = useReadingProgress(contentId);
+	const direction = useScrollDirection();
+	const isVisible = started && direction === "down";
+	const progressPercentage = status === "complete" ? 100 : percentage;
+	let t0;
+	if ($[0] !== isVisible || $[1] !== progressPercentage || $[2] !== shouldReduceMotion) {
+		t0 = { state: {
+			progressPercentage,
+			isVisible,
+			shouldReduceMotion
+		} };
+		$[0] = isVisible;
+		$[1] = progressPercentage;
+		$[2] = shouldReduceMotion;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+};
+//#endregion
+export { useReadingContentProgressBarStore };

package/dist/organism/social-contacts/index.d.mts

@@ -0,0 +1,2 @@
+import { SocialContactLinks, SocialContacts, SocialContactsProps } from "./social-contacts.mjs";
+export { type SocialContactLinks, SocialContacts, type SocialContactsProps };

package/dist/organism/social-contacts/social-contacts.d.mts

@@ -0,0 +1,29 @@
+import { LinkComponent } from "../../atoms/links/anchor-link/anchor-link.mjs";
+import "../../atoms/links/anchor-link/index.mjs";
+import { FC } from "react";
+//#region src/organism/social-contacts/social-contacts.d.ts
+interface SocialContactLinks {
+  github: string;
+  linkedin: string;
+  medium: string;
+  devto?: string;
+  twitter: string;
+  facebook: string;
+  instagram: string;
+}
+interface SocialContactsProps {
+  linkComponent?: LinkComponent;
+  links: SocialContactLinks;
+  contactHref: string;
+  onTrackGithub?: () => void;
+  onTrackLinkedin?: () => void;
+  onTrackContact?: () => void;
+  onTrackMedium?: () => void;
+  onTrackDevto?: () => void;
+  onTrackTwitter?: () => void;
+  onTrackFacebook?: () => void;
+  onTrackInstagram?: () => void;
+}
+declare const SocialContacts: FC<SocialContactsProps>;
+//#endregion
+export { SocialContactLinks, SocialContacts, SocialContactsProps };

package/dist/organism/social-contacts/social-contacts.mjs

@@ -0,0 +1,78 @@
+import { CallToActionInternalWithTracking } from "../../atoms/call-to-actions/call-to-action-internal-with-tracking/call-to-action-internal-with-tracking.mjs";
+import { SocialContact } from "../../molecules/buttons/social-contact/social-contact.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BiEnvelope, BiLogoDevTo, BiLogoFacebookSquare, BiLogoGithub, BiLogoInstagram, BiLogoLinkedin, BiLogoMedium } from "react-icons/bi";
+import { FaXTwitter } from "react-icons/fa6";
+//#region src/organism/social-contacts/social-contacts.tsx
+const SocialContacts = ({ links, contactHref, onTrackGithub, onTrackLinkedin, onTrackContact, onTrackMedium, onTrackDevto, onTrackTwitter, onTrackFacebook, onTrackInstagram, linkComponent }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center justify-center p-0 text-center",
+		children: [
+			/* @__PURE__ */ jsx(SocialContact, {
+				link: links.github,
+				onClick: onTrackGithub,
+				icon: /* @__PURE__ */ jsx(BiLogoGithub, {
+					size: 30,
+					title: "Github"
+				})
+			}),
+			/* @__PURE__ */ jsx(SocialContact, {
+				link: links.linkedin,
+				onClick: onTrackLinkedin,
+				icon: /* @__PURE__ */ jsx(BiLogoLinkedin, {
+					size: 30,
+					title: "Linkedin"
+				})
+			}),
+			/* @__PURE__ */ jsx(CallToActionInternalWithTracking, {
+				linkComponent,
+				to: contactHref,
+				onClick: onTrackContact,
+				className: "min-w-auto!",
+				children: /* @__PURE__ */ jsx(BiEnvelope, { size: 30 })
+			}),
+			/* @__PURE__ */ jsx(SocialContact, {
+				link: links.medium,
+				onClick: onTrackMedium,
+				icon: /* @__PURE__ */ jsx(BiLogoMedium, {
+					size: 30,
+					title: "Medium"
+				})
+			}),
+			/* @__PURE__ */ jsx(SocialContact, {
+				link: links.devto,
+				onClick: onTrackDevto,
+				icon: /* @__PURE__ */ jsx(BiLogoDevTo, {
+					size: 30,
+					title: "Devto"
+				})
+			}),
+			/* @__PURE__ */ jsx(SocialContact, {
+				link: links.twitter,
+				onClick: onTrackTwitter,
+				icon: /* @__PURE__ */ jsx(FaXTwitter, {
+					size: 30,
+					title: "Twitter"
+				})
+			}),
+			/* @__PURE__ */ jsx(SocialContact, {
+				link: links.facebook,
+				onClick: onTrackFacebook,
+				icon: /* @__PURE__ */ jsx(BiLogoFacebookSquare, {
+					size: 30,
+					title: "Facebook"
+				})
+			}),
+			/* @__PURE__ */ jsx(SocialContact, {
+				link: links.instagram,
+				onClick: onTrackInstagram,
+				icon: /* @__PURE__ */ jsx(BiLogoInstagram, {
+					size: 30,
+					title: "Instagram"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { SocialContacts };

package/dist/state/command-palette/command-palette-context.d.mts

@@ -0,0 +1,9 @@
+//#region src/state/command-palette/command-palette-context.d.ts
+type CommandPaletteClose = () => void;
+/**
+ * Scopes "close the palette I belong to" to the enclosing CommandPalette, so that two palettes on
+ * one page never close each other. Out-of-tree callers use closeCommandPalette() instead.
+ */
+declare const CommandPaletteContext: import("react").Context<CommandPaletteClose | null>;
+//#endregion
+export { CommandPaletteClose, CommandPaletteContext };

package/dist/state/command-palette/command-palette-context.mjs

@@ -0,0 +1,10 @@
+"use client";
+import { createContext } from "react";
+//#region src/state/command-palette/command-palette-context.ts
+/**
+* Scopes "close the palette I belong to" to the enclosing CommandPalette, so that two palettes on
+* one page never close each other. Out-of-tree callers use closeCommandPalette() instead.
+*/
+const CommandPaletteContext = createContext(null);
+//#endregion
+export { CommandPaletteContext };

package/dist/state/command-palette/command-palette-events.d.mts

@@ -0,0 +1,11 @@
+//#region src/state/command-palette/command-palette-events.d.ts
+declare const commandPaletteOpenEvent = "command-palette-open";
+declare const openCommandPalette: () => void;
+declare const commandPaletteCloseEvent = "command-palette-close";
+/**
+ * Closes every mounted palette. Items inside a palette must not use this — they close their own
+ * palette through CommandPaletteContext. This exists for callers outside the palette's React tree.
+ */
+declare const closeCommandPalette: () => void;
+//#endregion
+export { closeCommandPalette, commandPaletteCloseEvent, commandPaletteOpenEvent, openCommandPalette };

package/dist/state/command-palette/command-palette-events.mjs

@@ -0,0 +1,15 @@
+//#region src/state/command-palette/command-palette-events.ts
+const commandPaletteOpenEvent = "command-palette-open";
+const openCommandPalette = () => {
+	if (typeof window !== "undefined") window.dispatchEvent(new Event(commandPaletteOpenEvent));
+};
+const commandPaletteCloseEvent = "command-palette-close";
+/**
+* Closes every mounted palette. Items inside a palette must not use this — they close their own
+* palette through CommandPaletteContext. This exists for callers outside the palette's React tree.
+*/
+const closeCommandPalette = () => {
+	if (typeof window !== "undefined") window.dispatchEvent(new Event(commandPaletteCloseEvent));
+};
+//#endregion
+export { closeCommandPalette, commandPaletteCloseEvent, commandPaletteOpenEvent, openCommandPalette };

package/dist/state/command-palette/command-palette-trigger.d.mts

@@ -0,0 +1,8 @@
+//#region src/state/command-palette/command-palette-trigger.d.ts
+/**
+ * What caused a palette to open or close. Consumers need this to tell a deliberate open (the header
+ * button dispatching the open event) apart from an incidental one (the keyboard shortcut).
+ */
+type CommandPaletteTrigger = "shortcut" | "event" | "escape" | "dismiss";
+//#endregion
+export { CommandPaletteTrigger };

package/dist/state/lightbox/lightbox-events.d.mts

@@ -0,0 +1,9 @@
+//#region src/state/lightbox/lightbox-events.d.ts
+interface LightboxOpenDetail {
+  src: string;
+  alt: string;
+}
+declare const lightboxOpenEvent = "lightbox-open";
+declare const openLightbox: (detail: LightboxOpenDetail) => void;
+//#endregion
+export { LightboxOpenDetail, lightboxOpenEvent, openLightbox };

package/dist/state/lightbox/lightbox-events.mjs

@@ -0,0 +1,7 @@
+//#region src/state/lightbox/lightbox-events.ts
+const lightboxOpenEvent = "lightbox-open";
+const openLightbox = (detail) => {
+	if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent(lightboxOpenEvent, { detail }));
+};
+//#endregion
+export { lightboxOpenEvent, openLightbox };

package/dist/state/matrix-rain/matrix-settings.d.mts

@@ -0,0 +1,37 @@
+import { BloomOptions, CrtOptions, RainOptions } from "matrix-rain-webgpu";
+//#region src/state/matrix-rain/matrix-settings.d.ts
+interface MatrixRainBloomSettings {
+  enabled: boolean;
+  intensity: number;
+  threshold: number;
+  emission: number;
+}
+interface MatrixRainCrtSettings {
+  enabled: boolean;
+  scanlineStrength: number;
+  aberration: number;
+}
+interface MatrixRainRainSettings {
+  density: number;
+  stepRate: number;
+  fontSize: number;
+}
+interface MatrixRainSettings {
+  version: number;
+  rain: MatrixRainRainSettings;
+  bloom: MatrixRainBloomSettings;
+  crt: MatrixRainCrtSettings;
+}
+interface MatrixRainProps {
+  rain: RainOptions;
+  bloom: BloomOptions | false;
+  crt: CrtOptions | false;
+}
+declare const MATRIX_RAIN_DEFAULTS: MatrixRainSettings;
+declare const MATRIX_RAIN_PRESETS: Record<string, MatrixRainSettings>;
+declare const matrixSettingsChangeEvent = "matrix-settings-change";
+declare const readMatrixSettings: () => MatrixRainSettings;
+declare const writeMatrixSettings: (settings: MatrixRainSettings) => void;
+declare const settingsToProps: (settings: MatrixRainSettings) => MatrixRainProps;
+//#endregion
+export { MATRIX_RAIN_DEFAULTS, MATRIX_RAIN_PRESETS, MatrixRainProps, MatrixRainSettings, matrixSettingsChangeEvent, readMatrixSettings, settingsToProps, writeMatrixSettings };

package/dist/state/matrix-rain/matrix-settings.mjs

@@ -0,0 +1,122 @@
+//#region src/state/matrix-rain/matrix-settings.ts
+const PREFIX = "fabrizioduroni_";
+const readLocalStorage = (key) => {
+	try {
+		return localStorage.getItem(`${PREFIX}${key}`);
+	} catch {
+		return null;
+	}
+};
+const writeLocalStorage = (key, value) => localStorage.setItem(`${PREFIX}${key}`, value);
+const STORAGE_KEY = "matrix-rain-settings";
+const SETTINGS_VERSION = 1;
+const MATRIX_RAIN_DEFAULTS = {
+	version: SETTINGS_VERSION,
+	rain: {
+		density: .95,
+		stepRate: 10,
+		fontSize: 20
+	},
+	bloom: {
+		enabled: true,
+		intensity: 1.5,
+		threshold: .8,
+		emission: 1.1
+	},
+	crt: {
+		enabled: true,
+		scanlineStrength: .3,
+		aberration: 1
+	}
+};
+const MATRIX_RAIN_PRESETS = {
+	Classic: MATRIX_RAIN_DEFAULTS,
+	Cyberpunk: {
+		version: SETTINGS_VERSION,
+		rain: {
+			density: .9,
+			stepRate: 14,
+			fontSize: 16
+		},
+		bloom: {
+			enabled: true,
+			intensity: 2.8,
+			threshold: .5,
+			emission: 2
+		},
+		crt: {
+			enabled: true,
+			scanlineStrength: .4,
+			aberration: 2.8
+		}
+	},
+	Overload: {
+		version: SETTINGS_VERSION,
+		rain: {
+			density: .82,
+			stepRate: 28,
+			fontSize: 12
+		},
+		bloom: {
+			enabled: true,
+			intensity: 3,
+			threshold: .3,
+			emission: 2.5
+		},
+		crt: {
+			enabled: true,
+			scanlineStrength: .8,
+			aberration: 2
+		}
+	}
+};
+const matrixSettingsChangeEvent = "matrix-settings-change";
+let cachedRaw = null;
+let cachedSnapshot = MATRIX_RAIN_DEFAULTS;
+const readMatrixSettings = () => {
+	let raw;
+	try {
+		raw = readLocalStorage(STORAGE_KEY);
+	} catch {
+		return MATRIX_RAIN_DEFAULTS;
+	}
+	if (raw === null) {
+		cachedRaw = null;
+		cachedSnapshot = MATRIX_RAIN_DEFAULTS;
+		return cachedSnapshot;
+	}
+	if (raw === cachedRaw) return cachedSnapshot;
+	try {
+		const parsed = JSON.parse(raw);
+		cachedRaw = raw;
+		cachedSnapshot = parsed.version === SETTINGS_VERSION ? parsed : MATRIX_RAIN_DEFAULTS;
+		return cachedSnapshot;
+	} catch {
+		return MATRIX_RAIN_DEFAULTS;
+	}
+};
+const writeMatrixSettings = (settings) => {
+	writeLocalStorage(STORAGE_KEY, JSON.stringify({
+		...settings,
+		version: SETTINGS_VERSION
+	}));
+	if (typeof window !== "undefined") window.dispatchEvent(new Event(matrixSettingsChangeEvent));
+};
+const settingsToProps = (settings) => ({
+	rain: {
+		density: settings.rain.density,
+		stepRate: settings.rain.stepRate,
+		fontSize: settings.rain.fontSize
+	},
+	bloom: settings.bloom.enabled ? {
+		intensity: settings.bloom.intensity,
+		threshold: settings.bloom.threshold,
+		emission: settings.bloom.emission
+	} : false,
+	crt: settings.crt.enabled ? {
+		scanlineStrength: settings.crt.scanlineStrength,
+		aberration: settings.crt.aberration
+	} : false
+});
+//#endregion
+export { MATRIX_RAIN_DEFAULTS, MATRIX_RAIN_PRESETS, matrixSettingsChangeEvent, readMatrixSettings, settingsToProps, writeMatrixSettings };

package/dist/state/motion/motion.d.mts

@@ -0,0 +1,6 @@
+//#region src/state/motion/motion.d.ts
+declare const motionChangeEvent = "motion-change";
+declare const hasMotion: () => boolean;
+declare const writeMotion: (value: "on" | "off") => void;
+//#endregion
+export { hasMotion, motionChangeEvent, writeMotion };

package/dist/state/motion/motion.mjs

@@ -0,0 +1,17 @@
+//#region src/state/motion/motion.ts
+const PREFIX = "fabrizioduroni_";
+const readLocalStorage = (key) => localStorage.getItem(`${PREFIX}${key}`);
+const writeLocalStorage = (key, value) => localStorage.setItem(`${PREFIX}${key}`, value);
+const key = "motion";
+const readMotion = () => readLocalStorage(key);
+const motionChangeEvent = "motion-change";
+const hasMotion = () => {
+	const motionSetting = readMotion();
+	return motionSetting === null || motionSetting === "on";
+};
+const writeMotion = (value) => {
+	writeLocalStorage(key, value);
+	if (typeof window !== "undefined") window.dispatchEvent(new Event(motionChangeEvent));
+};
+//#endregion
+export { hasMotion, motionChangeEvent, writeMotion };