gudu-programs 1.0.0

package/dist/gudu-programs.umd.cjs

@@ -0,0 +1,6 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react-router-dom"),require("react")):typeof define==`function`&&define.amd?define([`exports`,`react-router-dom`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.guduPrograms={},e.ReactRouterDOM,e.React))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:r(s(e)),u(t||!e||!e.__esModule?i(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var d=l((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})),f=l((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D: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 g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E: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===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!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 l(){var e=t(this.type);return P[e]||(P[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 u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,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:l}),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 d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}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 f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),p=l(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=d():t.exports=f()}))(),m=[{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 h(){return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h1`,{children:`React Programs Collection`}),(0,p.jsx)(`p`,{className:`lead`,children:`Click any card to open the program.`}),(0,p.jsx)(`div`,{className:`cards-grid`,children:m.map(e=>(0,p.jsx)(t.Link,{to:`/program-${e.id}`,className:`program-card`,children:(0,p.jsxs)(`div`,{className:`card-inner`,children:[(0,p.jsx)(`div`,{className:`card-icon`,children:e.id}),(0,p.jsx)(`h3`,{children:e.title}),(0,p.jsx)(`p`,{children:e.desc})]})},e.id))})]})}function g(){let[e,t]=(0,n.useState)(``);return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 1 — Dynamic Input`}),(0,p.jsxs)(`div`,{className:`controls`,children:[(0,p.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`}}),(0,p.jsxs)(`p`,{style:{marginTop:12},children:[`You typed: `,(0,p.jsx)(`strong`,{children:e||(0,p.jsx)(`em`,{children:`nothing yet`})})]})]})]})}function _({title:e}){return(0,p.jsx)(`header`,{children:(0,p.jsx)(`h2`,{children:e})})}function v({tagline:e,copyright:t}){return(0,p.jsxs)(`footer`,{style:{marginTop:12},children:[(0,p.jsx)(`small`,{children:e}),(0,p.jsx)(`div`,{style:{color:`#666`},children:t})]})}function y(){return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(_,{title:`My Props Demo App`}),(0,p.jsx)(`main`,{children:(0,p.jsx)(`p`,{children:`This app shows how props pass data from parent to children.`})}),(0,p.jsx)(v,{tagline:`Passing data via props is simple and powerful.`,copyright:`© 2026 Example Corp.`})]})}function b(){let[e,t]=(0,n.useState)(0),[r,i]=(0,n.useState)(1);return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 3 — Counter`}),(0,p.jsx)(`div`,{style:{fontSize:48,margin:`12px 0`,fontWeight:700},children:e}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:8},children:[(0,p.jsx)(`button`,{onClick:()=>t(e=>Math.max(0,e-Number(r))),className:`btn`,children:`-`}),(0,p.jsx)(`button`,{onClick:()=>t(e=>e+Number(r)),className:`btn`,children:`+`}),(0,p.jsx)(`button`,{onClick:()=>t(0),className:`btn`,children:`Reset`})]}),(0,p.jsx)(`div`,{style:{marginTop:12},children:(0,p.jsxs)(`label`,{children:[`Step:`,` `,(0,p.jsx)(`input`,{type:`number`,value:r,min:`1`,onChange:e=>i(e.target.value),style:{width:80}})]})})]})}function x(){let[e,t]=(0,n.useState)([]),[r,i]=(0,n.useState)(``),a=()=>{let e=r.trim();e&&(t(t=>[...t,{id:Date.now(),text:e,done:!1}]),i(``))},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(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h2`,{children:`Program 4 — To-Do List`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:8},children:[(0,p.jsx)(`input`,{value:r,onChange:e=>i(e.target.value),placeholder:`New task`}),(0,p.jsx)(`button`,{onClick:a,children:`Add`})]}),(0,p.jsx)(`ul`,{style:{marginTop:12},children:e.map(e=>(0,p.jsxs)(`li`,{style:{display:`flex`,gap:8,alignItems:`center`},children:[(0,p.jsx)(`input`,{type:`checkbox`,checked:e.done,onChange:()=>o(e.id)}),(0,p.jsx)(`span`,{style:{textDecoration:e.done?`line-through`:`none`},children:e.text}),(0,p.jsx)(`button`,{onClick:()=>s(e.id),style:{marginLeft:`auto`},children:`Delete`})]},e.id))})]})}function S(){return(0,p.jsx)(`div`,{className:`program-page`,children:(0,p.jsx)(x,{})})}function C({src:e,caption:t,onRemove:n}){return(0,p.jsxs)(`figure`,{style:{border:`1px solid #ddd`,padding:8,borderRadius:6},children:[(0,p.jsx)(`img`,{src:e,alt:t,style:{maxWidth:200,display:`block`,marginBottom:6}}),(0,p.jsx)(`figcaption`,{children:t}),n&&(0,p.jsx)(`button`,{onClick:n,style:{marginTop:6},children:`Remove`})]})}var w=[{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 T(){let[e,t]=(0,n.useState)(w),[r,i]=(0,n.useState)(``),[a,o]=(0,n.useState)(``),s=()=>{r.trim()&&(t(e=>[...e,{id:Date.now(),src:r.trim(),caption:a.trim()}]),i(``),o(``))},c=e=>t(t=>t.filter(t=>t.id!==e));return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h2`,{children:`Figures`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:8,marginBottom:8},children:[(0,p.jsx)(`input`,{placeholder:`Image URL`,value:r,onChange:e=>i(e.target.value)}),(0,p.jsx)(`input`,{placeholder:`Caption`,value:a,onChange:e=>o(e.target.value)}),(0,p.jsx)(`button`,{onClick:s,children:`Add`})]}),(0,p.jsx)(`div`,{style:{display:`grid`,gridTemplateColumns:`repeat(auto-fit, minmax(220px, 1fr))`,gap:12},children:e.map(e=>(0,p.jsx)(C,{src:e.src,caption:e.caption,onRemove:()=>c(e.id)},e.id))})]})}function E(){return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 5 — Figure Gallery`}),(0,p.jsx)(T,{})]})}var D=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;function O(){let[e,t]=(0,n.useState)(``),[r,i]=(0,n.useState)(``),[a,o]=(0,n.useState)(``),[s,c]=(0,n.useState)(!1),[l,u]=(0,n.useState)({}),d=e=>e.replace(/[<>]/g,``);return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 6 — Form Validation`}),(0,p.jsxs)(`form`,{onSubmit:t=>{t.preventDefault();let n={};if(e.trim()||(n.name=`Name required`),D.test(r)||(n.email=`Invalid email`),a.length<6&&(n.password=`Password too short`),u(n),Object.keys(n).length===0){let t={name:d(e),email:d(r),password:`***`};alert(`Submitted: `+JSON.stringify(t))}},noValidate:!0,children:[(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`label`,{children:`Name`}),(0,p.jsx)(`input`,{value:e,onChange:e=>t(e.target.value),style:{borderColor:l.name?`red`:void 0}}),(0,p.jsx)(`div`,{style:{color:`red`},children:l.name})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`label`,{children:`Email`}),(0,p.jsx)(`input`,{value:r,onChange:e=>i(e.target.value),style:{borderColor:l.email?`red`:void 0}}),(0,p.jsx)(`div`,{style:{color:`red`},children:l.email})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`label`,{children:`Password`}),(0,p.jsx)(`input`,{type:s?`text`:`password`,value:a,onChange:e=>o(e.target.value),style:{borderColor:l.password?`red`:void 0}}),(0,p.jsx)(`div`,{style:{color:`red`},children:l.password})]}),(0,p.jsxs)(`label`,{children:[(0,p.jsx)(`input`,{type:`checkbox`,checked:s,onChange:e=>c(e.target.checked)}),` Show Password`]}),(0,p.jsx)(`div`,{children:(0,p.jsx)(`button`,{type:`submit`,children:`Submit`})})]})]})}function k({name:e,bio:t,img:n,bg:r}){return(0,p.jsxs)(`div`,{className:`profile-card`,style:{background:r||`#fff`},children:[(0,p.jsx)(`img`,{src:n,alt:e}),(0,p.jsx)(`h3`,{children:e}),(0,p.jsx)(`p`,{children:t})]})}function A(){let[e,t]=(0,n.useState)(`#ffffff`);return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 7 — Profile Card`}),(0,p.jsx)(`div`,{className:`controls`,children:(0,p.jsxs)(`label`,{children:[`Card background: `,(0,p.jsx)(`input`,{value:e,onChange:e=>t(e.target.value)})]})}),(0,p.jsx)(`div`,{style:{marginTop:12},children:(0,p.jsx)(k,{name:`Jane Doe`,bio:`Frontend engineer and React enthusiast.`,img:`https://via.placeholder.com/150`,bg:e})})]})}function j(){let[e,t]=(0,n.useState)([]),[r,i]=(0,n.useState)(``),[a,o]=(0,n.useState)(``),[s,c]=(0,n.useState)(``),[l,u]=(0,n.useState)(`all`),d=()=>{r.trim()&&(t(e=>[...e,{id:Date.now(),name:r.trim(),date:a,desc:s,done:!1}]),i(``),o(``),c(``))},f=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(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 8 — Reminder App`}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`input`,{placeholder:`Task`,value:r,onChange:e=>i(e.target.value)}),(0,p.jsx)(`input`,{type:`date`,value:a,onChange:e=>o(e.target.value)}),(0,p.jsx)(`input`,{placeholder:`Description (optional)`,value:s,onChange:e=>c(e.target.value)}),(0,p.jsx)(`button`,{onClick:d,children:`Add`})]}),(0,p.jsxs)(`div`,{style:{marginTop:8},children:[(0,p.jsxs)(`label`,{children:[(0,p.jsx)(`input`,{type:`radio`,name:`f`,checked:l===`all`,onChange:()=>u(`all`)}),` All`]}),(0,p.jsxs)(`label`,{children:[(0,p.jsx)(`input`,{type:`radio`,name:`f`,checked:l===`done`,onChange:()=>u(`done`)}),` Completed`]}),(0,p.jsxs)(`label`,{children:[(0,p.jsx)(`input`,{type:`radio`,name:`f`,checked:l===`pending`,onChange:()=>u(`pending`)}),` Pending`]})]}),(0,p.jsx)(`ul`,{style:{marginTop:12},children:m.map(e=>(0,p.jsxs)(`li`,{style:{display:`flex`,gap:8,alignItems:`center`},children:[(0,p.jsx)(`input`,{type:`checkbox`,checked:e.done,onChange:()=>f(e.id)}),(0,p.jsxs)(`div`,{children:[(0,p.jsxs)(`div`,{style:{fontWeight:600},children:[e.name,` `,(0,p.jsx)(`small`,{style:{color:`#666`},children:e.date})]}),(0,p.jsx)(`div`,{style:{color:`#444`},children:e.desc})]})]},e.id))})]})}function M(){return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h3`,{children:`Home`}),(0,p.jsx)(`p`,{children:`Welcome to the Home page.`})]})}function N(){return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h3`,{children:`About`}),(0,p.jsx)(`p`,{children:`About page content.`})]})}function P(){return(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h3`,{children:`Contact`}),(0,p.jsx)(`p`,{children:`Contact details here.`})]})}function F(){return(0,p.jsxs)(`div`,{className:`program-page`,children:[(0,p.jsx)(`h2`,{children:`Program 9 — Routing Example`}),(0,p.jsxs)(`nav`,{style:{display:`flex`,gap:8,marginBottom:8},children:[(0,p.jsx)(t.NavLink,{to:`/program-9/`,end:!0,children:`Home`}),(0,p.jsx)(t.NavLink,{to:`/program-9/about`,children:`About`}),(0,p.jsx)(t.NavLink,{to:`/program-9/contact`,children:`Contact`})]}),(0,p.jsx)(`div`,{style:{background:`#fff`},children:(0,p.jsxs)(t.Routes,{children:[(0,p.jsx)(t.Route,{path:`/`,element:(0,p.jsx)(M,{})}),(0,p.jsx)(t.Route,{path:`about`,element:(0,p.jsx)(N,{})}),(0,p.jsx)(t.Route,{path:`contact`,element:(0,p.jsx)(P,{})})]})})]})}var I=class extends n.default.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(0,p.jsxs)(`div`,{children:[(0,p.jsx)(`h2`,{children:`Program 10 — Class Component & API`}),(0,p.jsxs)(`div`,{style:{marginBottom:8},children:[(0,p.jsxs)(`label`,{children:[`Query (not used for API but triggers update): `,(0,p.jsx)(`input`,{onChange:e=>this.setState({query:e.target.value})})]}),(0,p.jsx)(`button`,{onClick:()=>this.fetchData(),children:`Refresh`})]}),t&&(0,p.jsx)(`div`,{children:`Loading...`}),n&&(0,p.jsx)(`div`,{style:{color:`red`},children:n}),(0,p.jsx)(`ul`,{children:e.map(e=>(0,p.jsxs)(`li`,{children:[(0,p.jsx)(`strong`,{children:e.title}),(0,p.jsx)(`div`,{children:e.body})]},e.id))})]})}};function L(){return(0,p.jsx)(`div`,{className:`program-page`,children:(0,p.jsx)(I,{})})}e.Home=h,e.Program1=g,e.Program10=L,e.Program2=y,e.Program3=b,e.Program4=S,e.Program5=E,e.Program6=O,e.Program7=A,e.Program8=j,e.Program9=F});

package/dist/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "gudu-programs",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "prepare": "npm run build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "files": ["dist","src","README.md"],
+  "main": "dist/gudu-programs.cjs.js",
+  "module": "dist/gudu-programs.es.js",
+  "exports": {
+    "import": "./dist/gudu-programs.es.js",
+    "require": "./dist/gudu-programs.cjs.js"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "react-router-dom": "^6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "vite": "^8.0.12"
+  }
+}

package/src/App.css

@@ -0,0 +1,228 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.app-root { min-height: 100vh; display: flex; flex-direction: column; background: var(--page-bg); color: var(--text) }
+.topbar { padding: 12px 20px; border-bottom: 1px solid rgba(0,0,0,0.06); background: linear-gradient(90deg,var(--topbar-start),var(--topbar-end)); display:flex; align-items:center; justify-content:space-between }
+.site-title { margin: 0; font-size: 20px }
+.site-title a { color: var(--text); text-decoration: none }
+.top-actions { display:flex; gap:8px }
+.content { padding: 28px; flex: 1; max-width: 1100px; margin: 18px auto }
+
+:root {
+  --page-bg: linear-gradient(180deg,#f6fbff,#eef6ff);
+  --card-bg: linear-gradient(180deg,#ffffff,#fbfdff);
+  --card-border: #e6eef9;
+  --text: #0f1720;
+  --muted: #6b7280;
+  --topbar-start: #ffffff;
+  --topbar-end: #f6fbff;
+  --accent: #0366d6;
+}
+
+[data-theme="dark"] {
+  --page-bg: linear-gradient(180deg,#0f1720,#0b1116);
+  --card-bg: linear-gradient(180deg,#0b1116,#0f1720);
+  --card-border: rgba(255,255,255,0.04);
+  --text: #e6eef9;
+  --muted: #9aa4b2;
+  --topbar-start: #071019;
+  --topbar-end: #0b1620;
+  --accent: #66b2ff;
+}
+
+.lead { color: var(--muted); margin-top: -6px }
+.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 18px }
+.program-card { text-decoration: none; color: inherit }
+.program-card .card-inner { background: var(--card-bg); border: 1px solid var(--card-border); padding: 18px; border-radius: 12px; transition: transform .18s ease, box-shadow .18s ease }
+.program-card:hover .card-inner { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(2,6,23,0.24) }
+.card-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(3,102,214,0.08); display:flex; align-items:center; justify-content:center; font-weight:700; color: var(--accent); margin-bottom: 8px }
+.program-page { background: var(--card-bg); padding: 22px; border-radius: 12px; box-shadow: 0 8px 28px rgba(2,6,23,0.06) }
+.program-page h2 { margin-top: 0 }
+.program-page .controls { margin-top: 12px }
+
+.btn { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,252,0.9)); cursor: pointer }
+.btn:hover { transform: translateY(-2px) }
+input { padding: 8px; border-radius: 6px; border: 1px solid var(--card-border); background: transparent }
+label { display: inline-block; margin-right: 8px }
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

package/src/App.jsx

@@ -0,0 +1,54 @@
+import './App.css'
+import { Routes, Route, Link } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import Home from './pages/Home'
+import Program1 from './program-1/Program1'
+import Program2 from './program-2/Program2'
+import Program3 from './program-3/Program3'
+import Program4 from './program-4/Program4'
+import Program5 from './program-5/Program5'
+import Program6 from './program-6/Program6'
+import Program7 from './program-7/Program7'
+import Program8 from './program-8/Program8'
+import Program9 from './program-9/Program9'
+import Program10 from './program-10/Program10'
+
+function App() {
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light')
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('theme', theme)
+  }, [theme])
+
+  return (
+    <div className="app-root">
+      <header className="topbar">
+        <h1 className="site-title"><Link to="/">React Programs</Link></h1>
+        <div className="top-actions">
+          <button className="btn" onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+            {theme === 'light' ? 'Dark' : 'Light'} mode
+          </button>
+        </div>
+      </header>
+
+      <main className="content">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/program-1" element={<Program1 />} />
+          <Route path="/program-2" element={<Program2 />} />
+          <Route path="/program-3" element={<Program3 />} />
+          <Route path="/program-4" element={<Program4 />} />
+          <Route path="/program-5" element={<Program5 />} />
+          <Route path="/program-6" element={<Program6 />} />
+          <Route path="/program-7" element={<Program7 />} />
+          <Route path="/program-8" element={<Program8 />} />
+          <Route path="/program-9/*" element={<Program9 />} />
+          <Route path="/program-10" element={<Program10 />} />
+        </Routes>
+      </main>
+    </div>
+  )
+}
+
+export default App

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

package/src/index.css

@@ -0,0 +1,111 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+body {
+  margin: 0;
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}

package/src/index.jsx

@@ -0,0 +1,15 @@
+// Library entry for gudu-programs
+export { default as Home } from './pages/Home'
+export { default as Program1 } from './program-1/Program1'
+export { default as Program2 } from './program-2/Program2'
+export { default as Program3 } from './program-3/Program3'
+export { default as Program4 } from './program-4/Program4'
+export { default as Program5 } from './program-5/Program5'
+export { default as Program6 } from './program-6/Program6'
+export { default as Program7 } from './program-7/Program7'
+export { default as Program8 } from './program-8/Program8'
+export { default as Program9 } from './program-9/Program9'
+export { default as Program10 } from './program-10/Program10'
+
+// Default export: a simple object
+// No default export to avoid mixed exports in the build

package/src/main.jsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+)

package/src/pages/Home.jsx

@@ -0,0 +1,35 @@
+import { Link } from 'react-router-dom'
+
+const items = [
+  { 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' },
+]
+
+export default function Home() {
+  return (
+    <div>
+      <h1>React Programs Collection</h1>
+      <p className="lead">Click any card to open the program.</p>
+
+      <div className="cards-grid">
+        {items.map((it) => (
+          <Link to={`/program-${it.id}`} key={it.id} className="program-card">
+            <div className="card-inner">
+              <div className="card-icon">{it.id}</div>
+              <h3>{it.title}</h3>
+              <p>{it.desc}</p>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/program-1/Program1.jsx

@@ -0,0 +1,20 @@
+import { useState } from 'react'
+
+export default function Program1() {
+  const [text, setText] = useState('')
+
+  return (
+    <div className="program-page">
+      <h2>Program 1 — Dynamic Input</h2>
+      <div className="controls">
+        <input
+          placeholder="Type something..."
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          style={{ padding: 10, width: '100%', maxWidth: 520, borderRadius: 8, border: '1px solid #e4eefb' }}
+        />
+        <p style={{ marginTop: 12 }}>You typed: <strong>{text || <em>nothing yet</em>}</strong></p>
+      </div>
+    </div>
+  )
+}