gudu-programs 1.0.0

package/dist/gudu-programs.js

@@ -0,0 +1,859 @@
+import { Link as e, NavLink as t, Route as n, Routes as r } from "react-router-dom";
+import i, { useState as a } from "react";
+//#region \0rolldown/runtime.js
+var o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+}), c = /* @__PURE__ */ o(((e) => {
+	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+	function r(e, n, r) {
+		var i = null;
+		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
+		else r = n;
+		return n = r.ref, {
+			$$typeof: t,
+			type: e,
+			key: i,
+			ref: n === void 0 ? null : n,
+			props: r
+		};
+	}
+	e.Fragment = n, e.jsx = r, e.jsxs = r;
+})), l = /* @__PURE__ */ o(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		function t(e) {
+			if (e == null) return null;
+			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
+			if (typeof e == "string") return e;
+			switch (e) {
+				case v: return "Fragment";
+				case b: return "Profiler";
+				case y: return "StrictMode";
+				case w: return "Suspense";
+				case T: return "SuspenseList";
+				case O: return "Activity";
+			}
+			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
+				case _: return "Portal";
+				case S: return e.displayName || "Context";
+				case x: return (e._context.displayName || "Context") + ".Consumer";
+				case C:
+					var n = e.render;
+					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
+				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
+				case D:
+					n = e._payload, e = e._init;
+					try {
+						return t(e(n));
+					} catch {}
+			}
+			return null;
+		}
+		function n(e) {
+			return "" + e;
+		}
+		function r(e) {
+			try {
+				n(e);
+				var t = !1;
+			} catch {
+				t = !0;
+			}
+			if (t) {
+				t = console;
+				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
+			}
+		}
+		function i(e) {
+			if (e === v) return "<>";
+			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
+			try {
+				var n = t(e);
+				return n ? "<" + n + ">" : "<...>";
+			} catch {
+				return "<...>";
+			}
+		}
+		function a() {
+			var e = A.A;
+			return e === null ? null : e.getOwner();
+		}
+		function o() {
+			return Error("react-stack-top-frame");
+		}
+		function c(e) {
+			if (j.call(e, "key")) {
+				var t = Object.getOwnPropertyDescriptor(e, "key").get;
+				if (t && t.isReactWarning) return !1;
+			}
+			return e.key !== void 0;
+		}
+		function l(e, t) {
+			function n() {
+				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+			}
+			n.isReactWarning = !0, Object.defineProperty(e, "key", {
+				get: n,
+				configurable: !0
+			});
+		}
+		function u() {
+			var e = t(this.type);
+			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+		}
+		function d(e, t, n, r, i, a) {
+			var o = n.ref;
+			return e = {
+				$$typeof: g,
+				type: e,
+				key: t,
+				props: n,
+				_owner: r
+			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				value: null
+			}) : Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				get: u
+			}), e._store = {}, Object.defineProperty(e._store, "validated", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: 0
+			}), Object.defineProperty(e, "_debugInfo", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: null
+			}), Object.defineProperty(e, "_debugStack", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: i
+			}), Object.defineProperty(e, "_debugTask", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: a
+			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+		}
+		function f(e, n, i, o, s, u) {
+			var f = n.children;
+			if (f !== void 0) if (o) if (M(f)) {
+				for (o = 0; o < f.length; o++) p(f[o]);
+				Object.freeze && Object.freeze(f);
+			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+			else p(f);
+			if (j.call(n, "key")) {
+				f = t(e);
+				var m = Object.keys(n).filter(function(e) {
+					return e !== "key";
+				});
+				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, f, m, f), R[f + o] = !0);
+			}
+			if (f = null, i !== void 0 && (r(i), f = "" + i), c(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
+			else i = n;
+			return f && l(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, a(), s, u);
+		}
+		function p(e) {
+			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+		}
+		function m(e) {
+			return typeof e == "object" && !!e && e.$$typeof === g;
+		}
+		var h = s("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		h = { react_stack_bottom_frame: function(e) {
+			return e();
+		} };
+		var P, F = {}, I = h.react_stack_bottom_frame.bind(h, o)(), L = N(i(o)), R = {};
+		e.Fragment = v, e.jsx = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
+		}, e.jsxs = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
+		};
+	})();
+})), u = (/* @__PURE__ */ o(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = c() : t.exports = l();
+})))(), d = [
+	{
+		id: 1,
+		title: "Dynamic Input",
+		desc: "Stateful input that updates as you type"
+	},
+	{
+		id: 2,
+		title: "Props Demo",
+		desc: "Parent -> child data passing with Header/Footer"
+	},
+	{
+		id: 3,
+		title: "Counter",
+		desc: "Increment, decrement, reset and custom step"
+	},
+	{
+		id: 4,
+		title: "To-Do List",
+		desc: "Add, delete, and complete tasks"
+	},
+	{
+		id: 5,
+		title: "Figure Gallery",
+		desc: "Add/remove images with captions"
+	},
+	{
+		id: 6,
+		title: "Form Validation",
+		desc: "Name, email, password with validation"
+	},
+	{
+		id: 7,
+		title: "Profile Card",
+		desc: "Profile UI demonstrating CSS + inline styles"
+	},
+	{
+		id: 8,
+		title: "Reminder App",
+		desc: "Tasks with due dates and filters"
+	},
+	{
+		id: 9,
+		title: "Routing Example",
+		desc: "Home/About/Contact using react-router"
+	},
+	{
+		id: 10,
+		title: "API Fetcher",
+		desc: "Class component using lifecycle methods"
+	}
+];
+function f() {
+	return /* @__PURE__ */ (0, u.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, u.jsx)("h1", { children: "React Programs Collection" }),
+		/* @__PURE__ */ (0, u.jsx)("p", {
+			className: "lead",
+			children: "Click any card to open the program."
+		}),
+		/* @__PURE__ */ (0, u.jsx)("div", {
+			className: "cards-grid",
+			children: d.map((t) => /* @__PURE__ */ (0, u.jsx)(e, {
+				to: `/program-${t.id}`,
+				className: "program-card",
+				children: /* @__PURE__ */ (0, u.jsxs)("div", {
+					className: "card-inner",
+					children: [
+						/* @__PURE__ */ (0, u.jsx)("div", {
+							className: "card-icon",
+							children: t.id
+						}),
+						/* @__PURE__ */ (0, u.jsx)("h3", { children: t.title }),
+						/* @__PURE__ */ (0, u.jsx)("p", { children: t.desc })
+					]
+				})
+			}, t.id))
+		})
+	] });
+}
+//#endregion
+//#region src/program-1/Program1.jsx
+function p() {
+	let [e, t] = a("");
+	return /* @__PURE__ */ (0, u.jsxs)("div", {
+		className: "program-page",
+		children: [/* @__PURE__ */ (0, u.jsx)("h2", { children: "Program 1 — Dynamic Input" }), /* @__PURE__ */ (0, u.jsxs)("div", {
+			className: "controls",
+			children: [/* @__PURE__ */ (0, u.jsx)("input", {
+				placeholder: "Type something...",
+				value: e,
+				onChange: (e) => t(e.target.value),
+				style: {
+					padding: 10,
+					width: "100%",
+					maxWidth: 520,
+					borderRadius: 8,
+					border: "1px solid #e4eefb"
+				}
+			}), /* @__PURE__ */ (0, u.jsxs)("p", {
+				style: { marginTop: 12 },
+				children: ["You typed: ", /* @__PURE__ */ (0, u.jsx)("strong", { children: e || /* @__PURE__ */ (0, u.jsx)("em", { children: "nothing yet" }) })]
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/program-2/Header.jsx
+function m({ title: e }) {
+	return /* @__PURE__ */ (0, u.jsx)("header", { children: /* @__PURE__ */ (0, u.jsx)("h2", { children: e }) });
+}
+//#endregion
+//#region src/program-2/Footer.jsx
+function h({ tagline: e, copyright: t }) {
+	return /* @__PURE__ */ (0, u.jsxs)("footer", {
+		style: { marginTop: 12 },
+		children: [/* @__PURE__ */ (0, u.jsx)("small", { children: e }), /* @__PURE__ */ (0, u.jsx)("div", {
+			style: { color: "#666" },
+			children: t
+		})]
+	});
+}
+//#endregion
+//#region src/program-2/Program2.jsx
+function g() {
+	return /* @__PURE__ */ (0, u.jsxs)("div", {
+		className: "program-page",
+		children: [
+			/* @__PURE__ */ (0, u.jsx)(m, { title: "My Props Demo App" }),
+			/* @__PURE__ */ (0, u.jsx)("main", { children: /* @__PURE__ */ (0, u.jsx)("p", { children: "This app shows how props pass data from parent to children." }) }),
+			/* @__PURE__ */ (0, u.jsx)(h, {
+				tagline: "Passing data via props is simple and powerful.",
+				copyright: "© 2026 Example Corp."
+			})
+		]
+	});
+}
+//#endregion
+//#region src/program-3/Program3.jsx
+function _() {
+	let [e, t] = a(0), [n, r] = a(1);
+	return /* @__PURE__ */ (0, u.jsxs)("div", {
+		className: "program-page",
+		children: [
+			/* @__PURE__ */ (0, u.jsx)("h2", { children: "Program 3 — Counter" }),
+			/* @__PURE__ */ (0, u.jsx)("div", {
+				style: {
+					fontSize: 48,
+					margin: "12px 0",
+					fontWeight: 700
+				},
+				children: e
+			}),
+			/* @__PURE__ */ (0, u.jsxs)("div", {
+				style: {
+					display: "flex",
+					gap: 8
+				},
+				children: [
+					/* @__PURE__ */ (0, u.jsx)("button", {
+						onClick: () => t((e) => Math.max(0, e - Number(n))),
+						className: "btn",
+						children: "-"
+					}),
+					/* @__PURE__ */ (0, u.jsx)("button", {
+						onClick: () => t((e) => e + Number(n)),
+						className: "btn",
+						children: "+"
+					}),
+					/* @__PURE__ */ (0, u.jsx)("button", {
+						onClick: () => t(0),
+						className: "btn",
+						children: "Reset"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, u.jsx)("div", {
+				style: { marginTop: 12 },
+				children: /* @__PURE__ */ (0, u.jsxs)("label", { children: [
+					"Step:",
+					" ",
+					/* @__PURE__ */ (0, u.jsx)("input", {
+						type: "number",
+						value: n,
+						min: "1",
+						onChange: (e) => r(e.target.value),
+						style: { width: 80 }
+					})
+				] })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/program-4/ToDoFunction.jsx
+function v() {
+	let [e, t] = a([]), [n, r] = a(""), i = () => {
+		let e = n.trim();
+		e && (t((t) => [...t, {
+			id: Date.now(),
+			text: e,
+			done: !1
+		}]), r(""));
+	}, o = (e) => t((t) => t.map((t) => t.id === e ? {
+		...t,
+		done: !t.done
+	} : t)), s = (e) => t((t) => t.filter((t) => t.id !== e));
+	return /* @__PURE__ */ (0, u.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, u.jsx)("h2", { children: "Program 4 — To-Do List" }),
+		/* @__PURE__ */ (0, u.jsxs)("div", {
+			style: {
+				display: "flex",
+				gap: 8
+			},
+			children: [/* @__PURE__ */ (0, u.jsx)("input", {
+				value: n,
+				onChange: (e) => r(e.target.value),
+				placeholder: "New task"
+			}), /* @__PURE__ */ (0, u.jsx)("button", {
+				onClick: i,
+				children: "Add"
+			})]
+		}),
+		/* @__PURE__ */ (0, u.jsx)("ul", {
+			style: { marginTop: 12 },
+			children: e.map((e) => /* @__PURE__ */ (0, u.jsxs)("li", {
+				style: {
+					display: "flex",
+					gap: 8,
+					alignItems: "center"
+				},
+				children: [
+					/* @__PURE__ */ (0, u.jsx)("input", {
+						type: "checkbox",
+						checked: e.done,
+						onChange: () => o(e.id)
+					}),
+					/* @__PURE__ */ (0, u.jsx)("span", {
+						style: { textDecoration: e.done ? "line-through" : "none" },
+						children: e.text
+					}),
+					/* @__PURE__ */ (0, u.jsx)("button", {
+						onClick: () => s(e.id),
+						style: { marginLeft: "auto" },
+						children: "Delete"
+					})
+				]
+			}, e.id))
+		})
+	] });
+}
+//#endregion
+//#region src/program-4/Program4.jsx
+function y() {
+	return /* @__PURE__ */ (0, u.jsx)("div", {
+		className: "program-page",
+		children: /* @__PURE__ */ (0, u.jsx)(v, {})
+	});
+}
+//#endregion
+//#region src/program-5/BasicFigure.jsx
+function b({ src: e, caption: t, onRemove: n }) {
+	return /* @__PURE__ */ (0, u.jsxs)("figure", {
+		style: {
+			border: "1px solid #ddd",
+			padding: 8,
+			borderRadius: 6
+		},
+		children: [
+			/* @__PURE__ */ (0, u.jsx)("img", {
+				src: e,
+				alt: t,
+				style: {
+					maxWidth: 200,
+					display: "block",
+					marginBottom: 6
+				}
+			}),
+			/* @__PURE__ */ (0, u.jsx)("figcaption", { children: t }),
+			n && /* @__PURE__ */ (0, u.jsx)("button", {
+				onClick: n,
+				style: { marginTop: 6 },
+				children: "Remove"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/program-5/FigureList.jsx
+var x = [{
+	id: 1,
+	src: "https://via.placeholder.com/200",
+	caption: "Placeholder 1"
+}, {
+	id: 2,
+	src: "https://via.placeholder.com/200?text=2",
+	caption: "Placeholder 2"
+}];
+function S() {
+	let [e, t] = a(x), [n, r] = a(""), [i, o] = a(""), s = () => {
+		n.trim() && (t((e) => [...e, {
+			id: Date.now(),
+			src: n.trim(),
+			caption: i.trim()
+		}]), r(""), o(""));
+	}, c = (e) => t((t) => t.filter((t) => t.id !== e));
+	return /* @__PURE__ */ (0, u.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, u.jsx)("h2", { children: "Figures" }),
+		/* @__PURE__ */ (0, u.jsxs)("div", {
+			style: {
+				display: "flex",
+				gap: 8,
+				marginBottom: 8
+			},
+			children: [
+				/* @__PURE__ */ (0, u.jsx)("input", {
+					placeholder: "Image URL",
+					value: n,
+					onChange: (e) => r(e.target.value)
+				}),
+				/* @__PURE__ */ (0, u.jsx)("input", {
+					placeholder: "Caption",
+					value: i,
+					onChange: (e) => o(e.target.value)
+				}),
+				/* @__PURE__ */ (0, u.jsx)("button", {
+					onClick: s,
+					children: "Add"
+				})
+			]
+		}),
+		/* @__PURE__ */ (0, u.jsx)("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+				gap: 12
+			},
+			children: e.map((e) => /* @__PURE__ */ (0, u.jsx)(b, {
+				src: e.src,
+				caption: e.caption,
+				onRemove: () => c(e.id)
+			}, e.id))
+		})
+	] });
+}
+//#endregion
+//#region src/program-5/Program5.jsx
+function C() {
+	return /* @__PURE__ */ (0, u.jsxs)("div", {
+		className: "program-page",
+		children: [/* @__PURE__ */ (0, u.jsx)("h2", { children: "Program 5 — Figure Gallery" }), /* @__PURE__ */ (0, u.jsx)(S, {})]
+	});
+}
+//#endregion
+//#region src/program-6/Program6.jsx
+var w = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function T() {
+	let [e, t] = a(""), [n, r] = a(""), [i, o] = a(""), [s, c] = a(!1), [l, d] = a({}), f = (e) => e.replace(/[<>]/g, "");
+	return /* @__PURE__ */ (0, u.jsxs)("div", {
+		className: "program-page",
+		children: [/* @__PURE__ */ (0, u.jsx)("h2", { children: "Program 6 — Form Validation" }), /* @__PURE__ */ (0, u.jsxs)("form", {
+			onSubmit: (t) => {
+				t.preventDefault();
+				let r = {};
+				if (e.trim() || (r.name = "Name required"), w.test(n) || (r.email = "Invalid email"), i.length < 6 && (r.password = "Password too short"), d(r), Object.keys(r).length === 0) {
+					let t = {
+						name: f(e),
+						email: f(n),
+						password: "***"
+					};
+					alert("Submitted: " + JSON.stringify(t));
+				}
+			},
+			noValidate: !0,
+			children: [
+				/* @__PURE__ */ (0, u.jsxs)("div", { children: [
+					/* @__PURE__ */ (0, u.jsx)("label", { children: "Name" }),
+					/* @__PURE__ */ (0, u.jsx)("input", {
+						value: e,
+						onChange: (e) => t(e.target.value),
+						style: { borderColor: l.name ? "red" : void 0 }
+					}),
+					/* @__PURE__ */ (0, u.jsx)("div", {
+						style: { color: "red" },
+						children: l.name
+					})
+				] }),
+				/* @__PURE__ */ (0, u.jsxs)("div", { children: [
+					/* @__PURE__ */ (0, u.jsx)("label", { children: "Email" }),
+					/* @__PURE__ */ (0, u.jsx)("input", {
+						value: n,
+						onChange: (e) => r(e.target.value),
+						style: { borderColor: l.email ? "red" : void 0 }
+					}),
+					/* @__PURE__ */ (0, u.jsx)("div", {
+						style: { color: "red" },
+						children: l.email
+					})
+				] }),
+				/* @__PURE__ */ (0, u.jsxs)("div", { children: [
+					/* @__PURE__ */ (0, u.jsx)("label", { children: "Password" }),
+					/* @__PURE__ */ (0, u.jsx)("input", {
+						type: s ? "text" : "password",
+						value: i,
+						onChange: (e) => o(e.target.value),
+						style: { borderColor: l.password ? "red" : void 0 }
+					}),
+					/* @__PURE__ */ (0, u.jsx)("div", {
+						style: { color: "red" },
+						children: l.password
+					})
+				] }),
+				/* @__PURE__ */ (0, u.jsxs)("label", { children: [/* @__PURE__ */ (0, u.jsx)("input", {
+					type: "checkbox",
+					checked: s,
+					onChange: (e) => c(e.target.checked)
+				}), " Show Password"] }),
+				/* @__PURE__ */ (0, u.jsx)("div", { children: /* @__PURE__ */ (0, u.jsx)("button", {
+					type: "submit",
+					children: "Submit"
+				}) })
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/program-7/ProfileCard.jsx
+function E({ name: e, bio: t, img: n, bg: r }) {
+	return /* @__PURE__ */ (0, u.jsxs)("div", {
+		className: "profile-card",
+		style: { background: r || "#fff" },
+		children: [
+			/* @__PURE__ */ (0, u.jsx)("img", {
+				src: n,
+				alt: e
+			}),
+			/* @__PURE__ */ (0, u.jsx)("h3", { children: e }),
+			/* @__PURE__ */ (0, u.jsx)("p", { children: t })
+		]
+	});
+}
+//#endregion
+//#region src/program-7/Program7.jsx
+function D() {
+	let [e, t] = a("#ffffff");
+	return /* @__PURE__ */ (0, u.jsxs)("div", {
+		className: "program-page",
+		children: [
+			/* @__PURE__ */ (0, u.jsx)("h2", { children: "Program 7 — Profile Card" }),
+			/* @__PURE__ */ (0, u.jsx)("div", {
+				className: "controls",
+				children: /* @__PURE__ */ (0, u.jsxs)("label", { children: ["Card background: ", /* @__PURE__ */ (0, u.jsx)("input", {
+					value: e,
+					onChange: (e) => t(e.target.value)
+				})] })
+			}),
+			/* @__PURE__ */ (0, u.jsx)("div", {
+				style: { marginTop: 12 },
+				children: /* @__PURE__ */ (0, u.jsx)(E, {
+					name: "Jane Doe",
+					bio: "Frontend engineer and React enthusiast.",
+					img: "https://via.placeholder.com/150",
+					bg: e
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/program-8/Program8.jsx
+function O() {
+	let [e, t] = a([]), [n, r] = a(""), [i, o] = a(""), [s, c] = a(""), [l, d] = a("all"), f = () => {
+		n.trim() && (t((e) => [...e, {
+			id: Date.now(),
+			name: n.trim(),
+			date: i,
+			desc: s,
+			done: !1
+		}]), r(""), o(""), c(""));
+	}, p = (e) => t((t) => t.map((t) => t.id === e ? {
+		...t,
+		done: !t.done
+	} : t)), m = e.filter((e) => l === "all" ? !0 : l === "done" ? e.done : !e.done);
+	return /* @__PURE__ */ (0, u.jsxs)("div", {
+		className: "program-page",
+		children: [
+			/* @__PURE__ */ (0, u.jsx)("h2", { children: "Program 8 — Reminder App" }),
+			/* @__PURE__ */ (0, u.jsxs)("div", { children: [
+				/* @__PURE__ */ (0, u.jsx)("input", {
+					placeholder: "Task",
+					value: n,
+					onChange: (e) => r(e.target.value)
+				}),
+				/* @__PURE__ */ (0, u.jsx)("input", {
+					type: "date",
+					value: i,
+					onChange: (e) => o(e.target.value)
+				}),
+				/* @__PURE__ */ (0, u.jsx)("input", {
+					placeholder: "Description (optional)",
+					value: s,
+					onChange: (e) => c(e.target.value)
+				}),
+				/* @__PURE__ */ (0, u.jsx)("button", {
+					onClick: f,
+					children: "Add"
+				})
+			] }),
+			/* @__PURE__ */ (0, u.jsxs)("div", {
+				style: { marginTop: 8 },
+				children: [
+					/* @__PURE__ */ (0, u.jsxs)("label", { children: [/* @__PURE__ */ (0, u.jsx)("input", {
+						type: "radio",
+						name: "f",
+						checked: l === "all",
+						onChange: () => d("all")
+					}), " All"] }),
+					/* @__PURE__ */ (0, u.jsxs)("label", { children: [/* @__PURE__ */ (0, u.jsx)("input", {
+						type: "radio",
+						name: "f",
+						checked: l === "done",
+						onChange: () => d("done")
+					}), " Completed"] }),
+					/* @__PURE__ */ (0, u.jsxs)("label", { children: [/* @__PURE__ */ (0, u.jsx)("input", {
+						type: "radio",
+						name: "f",
+						checked: l === "pending",
+						onChange: () => d("pending")
+					}), " Pending"] })
+				]
+			}),
+			/* @__PURE__ */ (0, u.jsx)("ul", {
+				style: { marginTop: 12 },
+				children: m.map((e) => /* @__PURE__ */ (0, u.jsxs)("li", {
+					style: {
+						display: "flex",
+						gap: 8,
+						alignItems: "center"
+					},
+					children: [/* @__PURE__ */ (0, u.jsx)("input", {
+						type: "checkbox",
+						checked: e.done,
+						onChange: () => p(e.id)
+					}), /* @__PURE__ */ (0, u.jsxs)("div", { children: [/* @__PURE__ */ (0, u.jsxs)("div", {
+						style: { fontWeight: 600 },
+						children: [
+							e.name,
+							" ",
+							/* @__PURE__ */ (0, u.jsx)("small", {
+								style: { color: "#666" },
+								children: e.date
+							})
+						]
+					}), /* @__PURE__ */ (0, u.jsx)("div", {
+						style: { color: "#444" },
+						children: e.desc
+					})] })]
+				}, e.id))
+			})
+		]
+	});
+}
+//#endregion
+//#region src/program-9/Program9.jsx
+function k() {
+	return /* @__PURE__ */ (0, u.jsxs)("div", { children: [/* @__PURE__ */ (0, u.jsx)("h3", { children: "Home" }), /* @__PURE__ */ (0, u.jsx)("p", { children: "Welcome to the Home page." })] });
+}
+function A() {
+	return /* @__PURE__ */ (0, u.jsxs)("div", { children: [/* @__PURE__ */ (0, u.jsx)("h3", { children: "About" }), /* @__PURE__ */ (0, u.jsx)("p", { children: "About page content." })] });
+}
+function j() {
+	return /* @__PURE__ */ (0, u.jsxs)("div", { children: [/* @__PURE__ */ (0, u.jsx)("h3", { children: "Contact" }), /* @__PURE__ */ (0, u.jsx)("p", { children: "Contact details here." })] });
+}
+function M() {
+	return /* @__PURE__ */ (0, u.jsxs)("div", {
+		className: "program-page",
+		children: [
+			/* @__PURE__ */ (0, u.jsx)("h2", { children: "Program 9 — Routing Example" }),
+			/* @__PURE__ */ (0, u.jsxs)("nav", {
+				style: {
+					display: "flex",
+					gap: 8,
+					marginBottom: 8
+				},
+				children: [
+					/* @__PURE__ */ (0, u.jsx)(t, {
+						to: "/program-9/",
+						end: !0,
+						children: "Home"
+					}),
+					/* @__PURE__ */ (0, u.jsx)(t, {
+						to: "/program-9/about",
+						children: "About"
+					}),
+					/* @__PURE__ */ (0, u.jsx)(t, {
+						to: "/program-9/contact",
+						children: "Contact"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, u.jsx)("div", {
+				style: { background: "#fff" },
+				children: /* @__PURE__ */ (0, u.jsxs)(r, { children: [
+					/* @__PURE__ */ (0, u.jsx)(n, {
+						path: "/",
+						element: /* @__PURE__ */ (0, u.jsx)(k, {})
+					}),
+					/* @__PURE__ */ (0, u.jsx)(n, {
+						path: "about",
+						element: /* @__PURE__ */ (0, u.jsx)(A, {})
+					}),
+					/* @__PURE__ */ (0, u.jsx)(n, {
+						path: "contact",
+						element: /* @__PURE__ */ (0, u.jsx)(j, {})
+					})
+				] })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/program-10/Program10.jsx
+var N = class extends i.Component {
+	constructor(e) {
+		super(e), this.state = {
+			items: [],
+			loading: !1,
+			error: null,
+			query: ""
+		};
+	}
+	componentDidMount() {
+		this.fetchData();
+	}
+	componentDidUpdate(e, t) {
+		t.query !== this.state.query && this.fetchData();
+	}
+	fetchData() {
+		this.setState({
+			loading: !0,
+			error: null
+		});
+		let e = this.state.query || "";
+		fetch(`https://jsonplaceholder.typicode.com/posts${e ? "?_limit=5" : "?_limit=10"}`).then((e) => e.json()).then((e) => this.setState({
+			items: e,
+			loading: !1
+		})).catch((e) => this.setState({
+			error: e.message,
+			loading: !1
+		}));
+	}
+	render() {
+		let { items: e, loading: t, error: n } = this.state;
+		return /* @__PURE__ */ (0, u.jsxs)("div", { children: [
+			/* @__PURE__ */ (0, u.jsx)("h2", { children: "Program 10 — Class Component & API" }),
+			/* @__PURE__ */ (0, u.jsxs)("div", {
+				style: { marginBottom: 8 },
+				children: [/* @__PURE__ */ (0, u.jsxs)("label", { children: ["Query (not used for API but triggers update): ", /* @__PURE__ */ (0, u.jsx)("input", { onChange: (e) => this.setState({ query: e.target.value }) })] }), /* @__PURE__ */ (0, u.jsx)("button", {
+					onClick: () => this.fetchData(),
+					children: "Refresh"
+				})]
+			}),
+			t && /* @__PURE__ */ (0, u.jsx)("div", { children: "Loading..." }),
+			n && /* @__PURE__ */ (0, u.jsx)("div", {
+				style: { color: "red" },
+				children: n
+			}),
+			/* @__PURE__ */ (0, u.jsx)("ul", { children: e.map((e) => /* @__PURE__ */ (0, u.jsxs)("li", { children: [/* @__PURE__ */ (0, u.jsx)("strong", { children: e.title }), /* @__PURE__ */ (0, u.jsx)("div", { children: e.body })] }, e.id)) })
+		] });
+	}
+};
+function P() {
+	return /* @__PURE__ */ (0, u.jsx)("div", {
+		className: "program-page",
+		children: /* @__PURE__ */ (0, u.jsx)(N, {})
+	});
+}
+//#endregion
+export { f as Home, p as Program1, P as Program10, g as Program2, _ as Program3, y as Program4, C as Program5, T as Program6, D as Program7, O as Program8, M as Program9 };