[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_788":789,"_790":791},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_109":87,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":59,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",209,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","ui-kit/src/components/ProductCard.tsx","latestPath","fileId","875d137c-4d8d-11f0-a41f-76b3cceeab13","name","ProductCard.tsx","fileType","script","content","/** @jsxImportSource react */\nimport React from \"react\";\n\n/**\n * Types adapted from Kroger Products API response.\n * Extend or adjust as needed for your app.\n */\ntype Fulfillment = {\n curbside?: boolean;\n delivery?: boolean;\n instore?: boolean;\n shiptohome?: boolean;\n};\n\ntype Price = {\n regular: number;\n promo?: number;\n regularPerUnitEstimate?: number;\n promoPerUnitEstimate?: number;\n};\n\ntype Inventory = {\n stockLevel?: \"HIGH\" | \"LOW\" | \"TEMPORARILY_OUT_OF_STOCK\";\n};\n\ntype Item = {\n itemId: string;\n inventory?: Inventory;\n favorite?: boolean;\n fulfillment?: Fulfillment;\n price?: Price;\n nationalPrice?: Price;\n size?: string;\n soldBy?: string;\n};\n\ntype ImageSize = {\n id: string;\n size: string;\n url: string;\n};\n\ntype Image = {\n id: string;\n perspective: string;\n default: boolean;\n sizes: ImageSize[];\n};\n\nexport type Product = {\n productId: string;\n description: string;\n brand?: string;\n items: Item[];\n images?: Image[];\n};\n\nexport interface ProductCardProps {\n product: Product;\n className?: string;\n /**\n * Current quantity of this product.\n */\n quantity?: number;\n /**\n * Called with new quantity when user clicks +/-\n */\n onQuantityChange?: (newQuantity: number) => void;\n}\n\n/**\n * ProductCard component displays a single product result from the Kroger API.\n */\nexport function ProductCard({\n product,\n className = \"\",\n quantity = 0,\n onQuantityChange,\n}: ProductCardProps): JSX.Element {\n const item = product.items[0];\n const price = item?.price;\n\n // Chosen state is derived from quantity\n const chosen = quantity > 0;\n\n // Handle card click: if quantity is 0, set to 1\n const handleCardClick = (e: React.MouseEvent) => {\n // Prevent click if it originated from a button inside the card\n if (\n (e.target as HTMLElement).closest(\"button\") ||\n (e.target as HTMLElement).getAttribute(\"role\") === \"button\"\n ) {\n return;\n }\n if (quantity === 0 && onQuantityChange) {\n onQuantityChange(1);\n }\n };\n const image =\n product.images?.[0]?.sizes.find((s) => s.size === \"medium\") ||\n product.images?.[0]?.sizes[0];\n\n return (\n \n {image && (\n \n \n \n )}\n

\n \n {product.description}\n

\n {product.brand && (\n

\n {product.brand}\n

\n )}\n

\n {item?.size && (\n \n {item.size}\n \n )}\n {item?.soldBy && (\n \n Sold by: {item.soldBy}\n \n )}\n

\n {price && (\n <>\n \n ${price.promo?.toFixed(2) ?? price.regular.toFixed(2)}\n \n {price.promo && (\n \n ${price.regular.toFixed(2)}\n \n )}\n \n )}\n

\n {/* Quantity controls */}\n {typeof quantity === \"number\" && onQuantityChange && (\n

\n onQuantityChange(Math.max(0, quantity - 1))}\n disabled={quantity <= 0}\n tabIndex={0}\n >\n –\n \n \n {quantity}\n \n onQuantityChange(quantity + 1)}\n tabIndex={0}\n >\n +\n \n

\n )}\n {/* Badges for fulfillment and stock level removed */}\n \n \n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n/**\n * Types adapted from Kroger Products API response.\n * Extend or adjust as needed for your app.\n */\ntype Fulfillment = {\n curbside?: boolean;\n delivery?: boolean;\n instore?: boolean;\n shiptohome?: boolean;\n};\n\ntype Price = {\n regular: number;\n promo?: number;\n regularPerUnitEstimate?: number;\n promoPerUnitEstimate?: number;\n};\n\ntype Inventory = {\n stockLevel?: \"HIGH\" | \"LOW\" | \"TEMPORARILY_OUT_OF_STOCK\";\n};\n\ntype Item = {\n itemId: string;\n inventory?: Inventory;\n favorite?: boolean;\n fulfillment?: Fulfillment;\n price?: Price;\n nationalPrice?: Price;\n size?: string;\n soldBy?: string;\n};\n\ntype ImageSize = {\n id: string;\n size: string;\n url: string;\n};\n\ntype Image = {\n id: string;\n perspective: string;\n default: boolean;\n sizes: ImageSize[];\n};\n\nexport type Product = {\n productId: string;\n description: string;\n brand?: string;\n items: Item[];\n images?: Image[];\n};\n\nexport interface ProductCardProps {\n product: Product;\n className?: string;\n /**\n * Current quantity of this product.\n */\n quantity?: number;\n /**\n * Called with new quantity when user clicks +/-\n */\n onQuantityChange?: (newQuantity: number) => void;\n}\n\n/**\n * ProductCard component displays a single product result from the Kroger API.\n */\nexport function ProductCard({\n product,\n className = \"\",\n quantity = 0,\n onQuantityChange,\n}: ProductCardProps): JSX.Element {\n const item = product.items[0];\n const price = item?.price;\n\n // Chosen state is derived from quantity\n const chosen = quantity > 0;\n\n // Handle card click: if quantity is 0, set to 1\n const handleCardClick = (e: React.MouseEvent) => {\n // Prevent click if it originated from a button inside the card\n if (\n (e.target as HTMLElement).closest(\"button\") ||\n (e.target as HTMLElement).getAttribute(\"role\") === \"button\"\n ) {\n return;\n }\n if (quantity === 0 && onQuantityChange) {\n onQuantityChange(1);\n }\n };\n const image =\n product.images?.[0]?.sizes.find((s) => s.size === \"medium\") ||\n product.images?.[0]?.sizes[0];\n\n return (\n \n {image && (\n \n \n \n )}\n

\n \n {product.description}\n

\n {product.brand && (\n

\n {product.brand}\n

\n )}\n

\n {item?.size && (\n \n {item.size}\n \n )}\n {item?.soldBy && (\n \n Sold by: {item.soldBy}\n \n )}\n

\n {price && (\n <>\n \n ${price.promo?.toFixed(2) ?? price.regular.toFixed(2)}\n \n {price.promo && (\n \n ${price.regular.toFixed(2)}\n \n )}\n \n )}\n

\n {/* Quantity controls */}\n {typeof quantity === \"number\" && onQuantityChange && (\n

\n onQuantityChange(Math.max(0, quantity - 1))}\n disabled={quantity <= 0}\n tabIndex={0}\n >\n –\n \n \n {quantity}\n \n onQuantityChange(quantity + 1)}\n tabIndex={0}\n >\n +\n \n

\n )}\n {/* Badges for fulfillment and stock level removed */}\n \n \n );\n}\n","createdAt",["D",1750393319381],"branchVersion","branchId","a523f804-3c43-11f0-baed-9e149126039e","id","a5228f14-3c43-11f0-baed-9e149126039e","personalShopper",["D",1748492167939],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","70d1fa10-3c43-11f0-8f77-839c97346035","pinnedFileId","7bbe5560-3c46-11f0-bcc1-9e149126039e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","5448abbb-bf1c-494f-95e1-0b9bc21d0698","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":55,"_105":106,"_107":25},"branch",{"_13":86,"_32":87,"_44":43,"_88":45,"_89":90,"_91":92,"_93":51,"_94":95,"_96":97,"_98":46,"_99":100},"isOwned",218,"main","projectId","forkedBranchId","f2b37196-17c5-11f0-8a41-569c3dd06744","forkedBranchVersion",9,"forkedProjectPrivacy","forkedProjectId","f2b0e6b0-17c5-11f0-8a41-569c3dd06744","forkedProjectOrgId","69d201b4-10ca-4770-a6d6-a8839b626fda","projectName","userHandle","bgschiller","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeGtwbDJtR1BUTXlCMWc5R1Qwb2ZzTlFYQzgifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":784,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":785,"_81":786,"_83":787,"_85":25},"tree",[233,237,247,254,258,260,297,298,299,300],"files",[233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300],"counts",{"_222":183,"_223":63,"_224":63,"_225":226,"_227":228},"contents",[144,145,146,147,148,149,150,151,152,153],"upstreamProject",{"_44":95,"_32":141,"_53":-5,"_54":-5,"_50":51,"_79":142},"upstreamBranch",{"_44":90,"_39":133,"_134":135,"_32":87,"_88":95,"_13":92,"_89":136,"_91":137,"_138":139,"_48":-5,"_85":25,"_50":51,"_99":140,"_64":97,"_98":141},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1744479939609],"updatedAt",["D",1744990353681],"419a43c8-147b-11f0-96a2-569c3dd06744",228,"lockfileKey","1767112378995-esm.town_v_geoffreylitt_stevensDemo@9-main","geoffreylitt","stevensDemo",{"_101":140,"_108":143},"https://secure.gravatar.com/avatar/94262cddd28e127e29dacba5f09c8125.jpg?s=200&d=identicon",{"_44":216,"_32":217,"_30":218,"_157":-5,"_42":43,"_41":219,"_159":59,"_39":220,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_27":221},{"_44":210,"_32":211,"_30":212,"_157":-5,"_42":43,"_41":213,"_159":59,"_39":214,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_27":215},{"_44":204,"_32":205,"_30":206,"_157":-5,"_42":43,"_41":207,"_159":59,"_39":208,"_13":63,"_34":191,"_36":-5,"_24":25,"_163":-5,"_27":209},{"_44":198,"_32":199,"_30":200,"_157":-5,"_42":43,"_41":201,"_159":59,"_39":202,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_27":203},{"_44":193,"_32":194,"_30":195,"_157":-5,"_42":43,"_41":63,"_159":59,"_39":196,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_27":197},{"_44":186,"_32":187,"_30":188,"_157":-5,"_42":43,"_41":189,"_159":59,"_39":190,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_27":192},{"_44":179,"_32":180,"_30":181,"_157":-5,"_42":43,"_41":63,"_159":59,"_39":182,"_13":183,"_34":20,"_36":184,"_24":25,"_163":-5,"_27":185},{"_44":172,"_32":173,"_30":174,"_157":-5,"_42":43,"_41":175,"_159":59,"_39":176,"_13":63,"_34":20,"_36":177,"_24":25,"_163":-5,"_27":178},{"_44":165,"_32":166,"_30":167,"_157":-5,"_42":43,"_41":168,"_159":59,"_39":169,"_13":161,"_34":20,"_36":170,"_24":25,"_163":-5,"_27":171},{"_44":154,"_32":155,"_30":156,"_157":-5,"_42":43,"_41":158,"_159":59,"_39":160,"_13":161,"_34":20,"_36":162,"_24":25,"_163":-5,"_27":164},"e365355c-44e4-11f0-937c-76b3cceeab13","deno.json","f544c966-3dd4-11f0-ae70-76b3cceeab13","parentId",152,"latest",["D",1749441030650],2,"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"jsx\": \"react-jsx\",\n \"jsxImportSource\": \"https://esm.sh/react@18.2.0\"\n },\n \"lint\": {\n \"files\": {\n \"include\": [\"deno:/https/esm.town/**/*\"]\n },\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"nodeModulesDir\": \"auto\",\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n","label",[155],"b5d9b24e-3c46-11f0-bde3-9e149126039e","README.md","80b611a2-c042-4094-a22c-81cb2ded5934",29,["D",1748493484473],"# Personal Shopper\n\n## Description\n\nThis is an AI-powered Grocery Shopping assistant that turns an imprecise list of items like \"milk, bread, eggs\" into a Kroger cart full of groceries. It relies on the Kroger API to search each item, then uses an LLM to decide which specific UPC to add to the cart (again, using the Kroger API). Once an item is selected, we store the UPC in the database so we can avoid consulting the LLM for that item again.\n\nHouseholds have preferences for which items to buy, and what priorities they have for each item. For example, we prefer to buy free range eggs and poultry, but don't particularly care whether they are organic or not. These details are stored in a database, which should also be consulted to add context to the LLM's decisions.\n\n## Kroger OAuth Implementation\n\nThe application now includes a complete OAuth2 flow for Kroger authentication:\n\n### Environment Variables Required\n\nSet these in your Val Town environment:\n\n- `KROGER_CLIENT_ID` - Your Kroger API client ID\n- `KROGER_CLIENT_SECRET` - Your Kroger API client secret \n- `KROGER_REDIRECT_URI` - Your registered redirect URI (e.g., `https://your-val.web.val.run/auth/callback`)\n\n### OAuth Flow\n\n1. **Login**: User clicks \"Connect with Kroger\" → redirected to `/auth/login`\n2. **Authorization**: App redirects to Kroger's OAuth endpoint with proper parameters\n3. **Callback**: Kroger redirects back to `/auth/callback` with authorization code\n4. **Token Exchange**: App exchanges code for access/refresh tokens\n5. **Profile Fetch**: App gets user's Kroger profile ID\n6. **Session**: User is logged in with session cookie\n\n### Authentication Features\n\n- **Secure Sessions**: HTTP-only cookies with proper security settings\n- **Token Refresh**: Automatic refresh of expired access tokens\n- **State Validation**: CSRF protection using state parameter\n- **User Management**: Create/update users based on Kroger profile ID\n\n## Database Schema\n\nThe database consists of the following tables:\n\n### kroger_users_1\n- `id` - Unique user ID (primary key)\n- `krogerProfileId` - Kroger's unique user identifier\n- `accessToken` - Current OAuth access token\n- `refreshToken` - OAuth refresh token\n- `tokenExpiresAt` - Token expiration timestamp\n- `preferredLocationId` - User's preferred Kroger store location\n- `createdAt` / `updatedAt` - Timestamps\n\n### guidance_1\n- `id` - Unique guidance ID (primary key)\n- `userId` - Foreign key to kroger_users_1\n- `itemName` - Name of the item (e.g., \"milk\", \"bread\")\n- `guidance` - Textual preferences (e.g., \"prefer free range eggs\")\n- `createdAt` / `updatedAt` - Timestamps\n\n### selections_1\n- `id` - Unique selection ID (primary key)\n- `userId` - Foreign key to kroger_users_1\n- `itemName` - User's free text item name\n- `upc` - Selected product UPC code\n- `productName` - Full product name from Kroger\n- `createdAt` / `updatedAt` - Timestamps\n- Unique constraint on (userId, itemName)\n\n## API Endpoints\n\n### Authentication\n- `GET /auth/login` - Start OAuth flow\n- `GET /auth/callback` - OAuth callback handler\n- `POST /auth/logout` - Logout user\n- `GET /api/user` - Get current user info\n- `PUT /api/user/location` - Update preferred store location\n\n### Guidance Management\n- `GET /api/guidance` - Get all guidance for current user\n- `GET /api/guidance/search?q=item` - Search guidance by item name\n- `POST /api/guidance` - Create new guidance\n- `PUT /api/guidance/:id` - Update guidance\n- `DELETE /api/guidance/:id` - Delete guidance\n\n### Selection Management\n- `GET /api/selections` - Get all selections for current user\n- `GET /api/selections/item/:itemName` - Get selection for specific item\n- `POST /api/selections` - Create/update selection\n- `PUT /api/selections/:id` - Update selection\n- `DELETE /api/selections/:id` - Delete selection\n\n## Shopping Process\n\n1. The user supplies a list of items they want to buy.\n2. We search the Kroger API, getting a list of products that match the free text name.\n3. For each item, we:\n 1. Try to find it in selections. If we can't find it there,\n 2. Use full-text search to find the most relevant guidance. Then ask the LLM to decide which specific UPC to add to the cart. Store this in the selections table for next time.\n4. We use the Kroger API to add the item to the cart.\n5. Repeat for each item.\n\nThere is no need to check out the cart, as the user will review the cart in the app and make any necessary changes.\n\n### Secondary flows\n\n- The user can add new items to the guidance table.\n- The user can CRUD their selections.\n- The user can change their Kroger location ID.\n- The user can log out.\n\n## Tech Stack\n\n- TypeScript\n- Val.Town with SQLite integration\n- Hono for the API\n- TailwindCSS for styling\n- Kroger API for product data and cart management\n\n## File Structure\n\n```\n├── backend/\n│ ├── index.ts # Main HTTP handler with OAuth routes\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── krogerQueries.ts # Database query functions\n│ └── services/\n│ └── krogerAuth.ts # Kroger OAuth service\n├── frontend/\n│ └── index.html # Single-page application\n├── shared/\n│ └── types.ts # Shared TypeScript interfaces\n└── docs/ # Kroger API documentation\n```\n\nSee .cursorrules for more details.",[166],"eaec26d2-3ddc-11f0-b9b0-76b3cceeab13",".vtignore","f53a2524-3dd4-11f0-831a-76b3cceeab13",88,["D",1748667949184],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor\n.envrc\n",[173],"a527b8e0-3c43-11f0-baed-9e149126039e",".cursorrules","5b776fdb-b581-4e9e-a17f-0d15b7a21e1b",["D",1748492167939],0,"# Val Town Project Rules and Guidelines\n\nYou are an advanced assistant specialized in generating Val Town code.\n\n\n## Types of Vals\n\n### 1. Script Vals\n\n- Basic JavaScript/TypeScript functions\n- Can be imported by other vals\n- Example structure:\n\n```typescript\nexport function myFunction() {\n // Your code here\n}\n```\n\n### 2. HTTP Vals\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```typescript\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\n### 3. Cron Vals\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```typescript\nexport default async function () {\n // Scheduled task code\n}\n```\n\n### 4. Email Vals\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```typescript\nexport default async function (email: Email) {\n // Process email\n}\n```\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({\n subject: \"Hi\",\n text: \"Hi\",\n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\nAlways import utilities with version pins to avoid breaking changes:\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n1. **parseProject** - Extract information about the current project from import.meta.url:\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\n2. **readFile** - Read files from within the project:\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n3. **serveFile** - Serve project files with proper content types:\n```ts\n// Serve a file from the project with proper Content-Type header\napp.get(\"/public/style.css\", c => serveFile(\"/frontend/style.css\", import.meta.url));\n```\n\n4. **listFiles** - List all files in the project:\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n5. **fetchTranspiledJavaScript** - Fetch and transpile TypeScript to JavaScript:\n```ts\nconst jsCode = await fetchTranspiledJavaScript(\"https://esm.town/v/username/project/path/to/file.ts\");\n```\n\n6. **testServer** - Create a test server for running test suites:\n```ts\nexport default testServer([\n {\n name: \"Feature Tests\",\n tests: [\n {\n name: \"should add numbers correctly\",\n function: () => {\n expect(1 + 1).toBe(2);\n },\n }\n ],\n }\n]);\n```\n\n## Val Town Platform Specifics\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link with `import.meta.url.replace(\"esm.town\", \"val.town\")` and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; avoid catches that merely log or return 500s - let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- For persistence, use Val Town SQLite or Blob storage with `import.meta.url` for keys/table names\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and include the `@jsxImportSource` pragma\n- When facing client-side render issues, check if all React dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n // Use the serveFile utility to handle content types automatically\n app.get(\"/public/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Be careful with error handling as Hono tends to swallow errors\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Frontend Best Practices\n- Structure as a standard client-side React app\n- Use SVG for favicons (Val Town only supports text files)\n- Separate components into individual files\n- Access bootstrapped data from `window.__INITIAL_DATA__`\n- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma\n- Follow the React component pattern from the example project\n- Handle API calls properly with proper error catching\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n- Follow the queries and migrations pattern from the example\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:**\n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n - Properly handle CORS if needed for external access",[180],"868eda70-4d8d-11f0-b958-76b3cceeab13","ui-kit","868edb7e-4d8d-11f0-b958-76b3cceeab13",166,["D",1750393069165],"directory",[187],"a527b656-3c43-11f0-baed-9e149126039e","shared","f51258e7-ba5a-41ab-9356-127b9178fe98",["D",1748492167939],[194],"9dba5c4a-3c46-11f0-b3a3-9e149126039e","frontend","2c2592a9-213d-42d8-b3c8-e300bf3eaa04",28,["D",1748493443987],[199],"397162ac-3c45-11f0-9e6e-9e149126039e","docs","3679b36a-3c45-11f0-9e6e-9e149126039e",5,["D",1748492846253],[205],"018e8d82-3c46-11f0-b1b1-9e149126039e","backend","b913e97a-f723-4624-98c5-8a0153655046",23,["D",1748493181993],[211],"e2b98a54-44e4-11f0-b4e2-76b3cceeab13",".storybook","e2b98b30-44e4-11f0-b4e2-76b3cceeab13",131,["D",1749441029546],[217],"pulls","branches","forks","envVars",{"_229":231,"_232":183},"connections",{"_229":183,"_230":183},"count","unfilledCount",4,"emptyCount",{"_44":216,"_32":217,"_30":218,"_157":-5,"_42":43,"_41":219,"_159":59,"_39":781,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":782,"_27":783},{"_44":774,"_32":580,"_30":775,"_157":218,"_42":43,"_41":776,"_159":59,"_39":777,"_13":183,"_34":35,"_36":778,"_24":25,"_163":-5,"_302":779,"_27":780},{"_44":766,"_32":767,"_30":768,"_157":218,"_42":43,"_41":769,"_159":59,"_39":770,"_13":183,"_34":20,"_36":771,"_24":25,"_163":-5,"_302":772,"_27":773},{"_44":758,"_32":759,"_30":760,"_157":218,"_42":43,"_41":761,"_159":59,"_39":762,"_13":183,"_34":35,"_36":763,"_24":25,"_163":-5,"_302":764,"_27":765},{"_44":210,"_32":211,"_30":212,"_157":-5,"_42":43,"_41":213,"_159":59,"_39":755,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":756,"_27":757},{"_44":751,"_32":734,"_30":728,"_157":212,"_42":43,"_41":213,"_159":59,"_39":752,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":753,"_27":754},{"_44":743,"_32":744,"_30":745,"_157":728,"_42":43,"_41":746,"_159":59,"_39":747,"_13":646,"_34":35,"_36":748,"_24":25,"_163":-5,"_302":749,"_27":750},{"_44":735,"_32":736,"_30":737,"_157":728,"_42":43,"_41":738,"_159":59,"_39":739,"_13":63,"_34":35,"_36":740,"_24":25,"_163":-5,"_302":741,"_27":742},{"_44":725,"_32":726,"_30":727,"_157":728,"_42":43,"_41":729,"_159":59,"_39":730,"_13":63,"_34":35,"_36":731,"_24":25,"_163":-5,"_302":732,"_27":733},{"_44":720,"_32":711,"_30":704,"_157":212,"_42":43,"_41":721,"_159":59,"_39":722,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":723,"_27":724},{"_44":712,"_32":713,"_30":714,"_157":704,"_42":43,"_41":715,"_159":59,"_39":716,"_13":63,"_34":35,"_36":717,"_24":25,"_163":-5,"_302":718,"_27":719},{"_44":701,"_32":702,"_30":703,"_157":704,"_42":43,"_41":705,"_159":59,"_39":706,"_13":707,"_34":35,"_36":708,"_24":25,"_163":-5,"_302":709,"_27":710},{"_44":693,"_32":694,"_30":695,"_157":212,"_42":43,"_41":696,"_159":59,"_39":697,"_13":63,"_34":35,"_36":698,"_24":25,"_163":-5,"_302":699,"_27":700},{"_44":684,"_32":404,"_30":57,"_157":212,"_42":43,"_41":685,"_159":25,"_39":686,"_13":687,"_34":688,"_36":689,"_24":25,"_163":690,"_302":691,"_27":692},{"_44":204,"_32":205,"_30":206,"_157":-5,"_42":43,"_41":207,"_159":59,"_39":681,"_13":63,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":682,"_27":683},{"_44":674,"_32":675,"_30":676,"_157":206,"_42":43,"_41":92,"_159":59,"_39":677,"_13":646,"_34":20,"_36":678,"_24":25,"_163":-5,"_302":679,"_27":680},{"_44":666,"_32":667,"_30":668,"_157":206,"_42":43,"_41":669,"_159":59,"_39":670,"_13":646,"_34":20,"_36":671,"_24":25,"_163":-5,"_302":672,"_27":673},{"_44":658,"_32":659,"_30":660,"_157":206,"_42":43,"_41":661,"_159":59,"_39":662,"_13":646,"_34":20,"_36":663,"_24":25,"_163":-5,"_302":664,"_27":665},{"_44":650,"_32":651,"_30":652,"_157":206,"_42":43,"_41":653,"_159":59,"_39":654,"_13":63,"_34":20,"_36":655,"_24":25,"_163":-5,"_302":656,"_27":657},{"_44":642,"_32":643,"_30":644,"_157":206,"_42":43,"_41":618,"_159":59,"_39":645,"_13":646,"_34":20,"_36":647,"_24":25,"_163":-5,"_302":648,"_27":649},{"_44":634,"_32":635,"_30":636,"_157":206,"_42":43,"_41":637,"_159":59,"_39":638,"_13":183,"_34":20,"_36":639,"_24":25,"_163":-5,"_302":640,"_27":641},{"_44":198,"_32":199,"_30":200,"_157":-5,"_42":43,"_41":201,"_159":59,"_39":631,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":632,"_27":633},{"_44":622,"_32":623,"_30":624,"_157":200,"_42":43,"_41":625,"_159":59,"_39":626,"_13":627,"_34":20,"_36":628,"_24":25,"_163":-5,"_302":629,"_27":630},{"_44":613,"_32":614,"_30":615,"_157":200,"_42":43,"_41":616,"_159":59,"_39":617,"_13":618,"_34":35,"_36":619,"_24":25,"_163":-5,"_302":620,"_27":621},{"_44":605,"_32":606,"_30":607,"_157":200,"_42":43,"_41":608,"_159":59,"_39":609,"_13":183,"_34":20,"_36":610,"_24":25,"_163":-5,"_302":611,"_27":612},{"_44":193,"_32":194,"_30":195,"_157":-5,"_42":43,"_41":63,"_159":59,"_39":602,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":603,"_27":604},{"_44":595,"_32":427,"_30":596,"_157":195,"_42":43,"_41":597,"_159":59,"_39":598,"_13":207,"_34":35,"_36":599,"_24":25,"_163":-5,"_302":600,"_27":601},{"_44":186,"_32":187,"_30":188,"_157":-5,"_42":43,"_41":189,"_159":59,"_39":592,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":593,"_27":594},{"_44":587,"_32":217,"_30":573,"_157":188,"_42":43,"_41":588,"_159":59,"_39":589,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":590,"_27":591},{"_44":579,"_32":580,"_30":581,"_157":573,"_42":43,"_41":582,"_159":59,"_39":583,"_13":183,"_34":35,"_36":584,"_24":25,"_163":-5,"_302":585,"_27":586},{"_44":570,"_32":571,"_30":572,"_157":573,"_42":43,"_41":574,"_159":59,"_39":575,"_13":183,"_34":35,"_36":576,"_24":25,"_163":-5,"_302":577,"_27":578},{"_44":565,"_32":402,"_30":396,"_157":188,"_42":43,"_41":566,"_159":59,"_39":567,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":568,"_27":569},{"_44":560,"_32":435,"_30":429,"_157":396,"_42":43,"_41":561,"_159":59,"_39":562,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":563,"_27":564},{"_44":552,"_32":553,"_30":554,"_157":429,"_42":43,"_41":555,"_159":59,"_39":556,"_13":63,"_34":35,"_36":557,"_24":25,"_163":-5,"_302":558,"_27":559},{"_44":544,"_32":545,"_30":546,"_157":429,"_42":43,"_41":547,"_159":25,"_39":548,"_13":63,"_34":35,"_36":549,"_24":25,"_163":-5,"_302":550,"_27":551},{"_44":536,"_32":537,"_30":538,"_157":429,"_42":43,"_41":539,"_159":25,"_39":540,"_13":63,"_34":35,"_36":541,"_24":25,"_163":-5,"_302":542,"_27":543},{"_44":528,"_32":529,"_30":530,"_157":429,"_42":43,"_41":531,"_159":59,"_39":532,"_13":63,"_34":35,"_36":533,"_24":25,"_163":-5,"_302":534,"_27":535},{"_44":520,"_32":521,"_30":522,"_157":429,"_42":43,"_41":523,"_159":25,"_39":524,"_13":63,"_34":35,"_36":525,"_24":25,"_163":-5,"_302":526,"_27":527},{"_44":512,"_32":513,"_30":514,"_157":429,"_42":43,"_41":515,"_159":25,"_39":516,"_13":63,"_34":35,"_36":517,"_24":25,"_163":-5,"_302":518,"_27":519},{"_44":504,"_32":505,"_30":506,"_157":429,"_42":43,"_41":507,"_159":59,"_39":508,"_13":63,"_34":35,"_36":509,"_24":25,"_163":-5,"_302":510,"_27":511},{"_44":496,"_32":497,"_30":498,"_157":429,"_42":43,"_41":499,"_159":25,"_39":500,"_13":63,"_34":35,"_36":501,"_24":25,"_163":-5,"_302":502,"_27":503},{"_44":488,"_32":489,"_30":490,"_157":429,"_42":43,"_41":491,"_159":59,"_39":492,"_13":63,"_34":35,"_36":493,"_24":25,"_163":-5,"_302":494,"_27":495},{"_44":480,"_32":481,"_30":482,"_157":429,"_42":43,"_41":483,"_159":25,"_39":484,"_13":63,"_34":35,"_36":485,"_24":25,"_163":-5,"_302":486,"_27":487},{"_44":472,"_32":473,"_30":474,"_157":429,"_42":43,"_41":475,"_159":59,"_39":476,"_13":183,"_34":35,"_36":477,"_24":25,"_163":-5,"_302":478,"_27":479},{"_44":468,"_32":33,"_30":31,"_157":429,"_42":43,"_41":14,"_159":59,"_39":469,"_13":63,"_34":35,"_36":38,"_24":25,"_163":-5,"_302":470,"_27":471},{"_44":460,"_32":461,"_30":462,"_157":429,"_42":43,"_41":463,"_159":59,"_39":464,"_13":183,"_34":35,"_36":465,"_24":25,"_163":-5,"_302":466,"_27":467},{"_44":452,"_32":453,"_30":454,"_157":429,"_42":43,"_41":455,"_159":25,"_39":456,"_13":183,"_34":35,"_36":457,"_24":25,"_163":-5,"_302":458,"_27":459},{"_44":444,"_32":445,"_30":446,"_157":429,"_42":43,"_41":447,"_159":59,"_39":448,"_13":183,"_34":35,"_36":449,"_24":25,"_163":-5,"_302":450,"_27":451},{"_44":436,"_32":437,"_30":438,"_157":429,"_42":43,"_41":439,"_159":25,"_39":440,"_13":183,"_34":35,"_36":441,"_24":25,"_163":-5,"_302":442,"_27":443},{"_44":426,"_32":427,"_30":428,"_157":429,"_42":43,"_41":430,"_159":59,"_39":431,"_13":63,"_34":35,"_36":432,"_24":25,"_163":-5,"_302":433,"_27":434},{"_44":421,"_32":420,"_30":414,"_157":396,"_42":43,"_41":422,"_159":59,"_39":423,"_13":183,"_34":191,"_36":-5,"_24":25,"_163":-5,"_302":424,"_27":425},{"_44":411,"_32":412,"_30":413,"_157":414,"_42":43,"_41":415,"_159":59,"_39":416,"_13":183,"_34":20,"_36":417,"_24":25,"_163":-5,"_302":418,"_27":419},{"_44":403,"_32":404,"_30":405,"_157":396,"_42":43,"_41":406,"_159":59,"_39":407,"_13":183,"_34":35,"_36":408,"_24":25,"_163":-5,"_302":409,"_27":410},{"_44":393,"_32":394,"_30":395,"_157":396,"_42":43,"_41":397,"_159":59,"_39":398,"_13":183,"_34":35,"_36":399,"_24":25,"_163":-5,"_302":400,"_27":401},{"_44":385,"_32":386,"_30":387,"_157":188,"_42":43,"_41":388,"_159":59,"_39":389,"_13":183,"_34":20,"_36":390,"_24":25,"_163":-5,"_302":391,"_27":392},{"_44":377,"_32":378,"_30":379,"_157":188,"_42":43,"_41":380,"_159":59,"_39":381,"_13":183,"_34":20,"_36":382,"_24":25,"_163":-5,"_302":383,"_27":384},{"_44":370,"_32":166,"_30":371,"_157":188,"_42":43,"_41":372,"_159":59,"_39":373,"_13":183,"_34":20,"_36":374,"_24":25,"_163":-5,"_302":375,"_27":376},{"_44":362,"_32":363,"_30":364,"_157":188,"_42":43,"_41":365,"_159":59,"_39":366,"_13":183,"_34":20,"_36":367,"_24":25,"_163":-5,"_302":368,"_27":369},{"_44":354,"_32":355,"_30":356,"_157":188,"_42":43,"_41":357,"_159":59,"_39":358,"_13":183,"_34":35,"_36":359,"_24":25,"_163":-5,"_302":360,"_27":361},{"_44":346,"_32":347,"_30":348,"_157":188,"_42":43,"_41":349,"_159":59,"_39":350,"_13":183,"_34":35,"_36":351,"_24":25,"_163":-5,"_302":352,"_27":353},{"_44":338,"_32":339,"_30":340,"_157":188,"_42":43,"_41":341,"_159":59,"_39":342,"_13":183,"_34":20,"_36":343,"_24":25,"_163":-5,"_302":344,"_27":345},{"_44":330,"_32":331,"_30":332,"_157":188,"_42":43,"_41":333,"_159":59,"_39":334,"_13":183,"_34":20,"_36":335,"_24":25,"_163":-5,"_302":336,"_27":337},{"_44":322,"_32":323,"_30":324,"_157":188,"_42":43,"_41":325,"_159":59,"_39":326,"_13":183,"_34":35,"_36":327,"_24":25,"_163":-5,"_302":328,"_27":329},{"_44":314,"_32":315,"_30":316,"_157":188,"_42":43,"_41":317,"_159":59,"_39":318,"_13":183,"_34":35,"_36":319,"_24":25,"_163":-5,"_302":320,"_27":321},{"_44":179,"_32":180,"_30":181,"_157":-5,"_42":43,"_41":63,"_159":59,"_39":311,"_13":183,"_34":20,"_36":184,"_24":25,"_163":-5,"_302":312,"_27":313},{"_44":172,"_32":173,"_30":174,"_157":-5,"_42":43,"_41":175,"_159":59,"_39":308,"_13":63,"_34":20,"_36":177,"_24":25,"_163":-5,"_302":309,"_27":310},{"_44":165,"_32":166,"_30":167,"_157":-5,"_42":43,"_41":168,"_159":59,"_39":305,"_13":161,"_34":20,"_36":170,"_24":25,"_163":-5,"_302":306,"_27":307},{"_44":154,"_32":155,"_30":156,"_157":-5,"_42":43,"_41":158,"_159":59,"_39":301,"_13":161,"_34":20,"_36":162,"_24":25,"_163":-5,"_302":303,"_27":304},["D",1749441030650],"children",[],[155],["D",1748493484473],[],[166],["D",1748667949184],[],[173],["D",1748492167939],[],[180],"874c38ea-4d8d-11f0-825e-76b3cceeab13","vitest.config.ts","874c39b2-4d8d-11f0-825e-76b3cceeab13",191,["D",1750393070407],"import { defineConfig } from 'vitest/config';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n plugins: [react()],\n test: {\n environment: 'jsdom',\n setupFiles: ['./src/setupTests.ts'],\n globals: true,\n css: true,\n coverage: {\n reporter: ['text', 'html'],\n exclude: [\n '**/*.d.ts',\n '**/*.stories.*',\n '**/index.ts',\n '**/setupTests.ts',\n ],\n },\n include: [\n 'src/**/*.test.{ts,tsx}',\n 'src/**/*.spec.{ts,tsx}',\n 'src/**/__tests__/*.{ts,tsx}',\n 'src/components/**/*.test.{ts,tsx}',\n ],\n },\n});\n",[],[187,315],"87482a7a-4d8d-11f0-ade6-76b3cceeab13","vite.config.ts","87482b2e-4d8d-11f0-ade6-76b3cceeab13",190,["D",1750393070380],"import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport dts from 'vite-plugin-dts'\nimport { resolve } from 'path'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n react(),\n dts({\n insertTypesEntry: true,\n }),\n ],\n build: {\n lib: {\n entry: resolve(__dirname, 'src/index.ts'),\n name: 'PersonalShopperUIKit',\n formats: ['es'],\n fileName: 'index',\n },\n rollupOptions: {\n external: ['react', 'react-dom', 'react/jsx-runtime'],\n output: {\n globals: {\n react: 'React',\n 'react-dom': 'ReactDOM',\n 'react/jsx-runtime': 'react/jsx-runtime',\n },\n },\n },\n },\n resolve: {\n alias: {\n '@': resolve(__dirname, './src'),\n },\n },\n})\n",[],[187,323],"8721c984-4d8d-11f0-ade6-76b3cceeab13","tsconfig.node.json","8721ca4c-4d8d-11f0-ade6-76b3cceeab13",182,["D",1750393070118],"{\n \"compilerOptions\": {\n \"composite\": true,\n \"skipLibCheck\": true,\n \"module\": \"ESNext\",\n \"moduleResolution\": \"bundler\",\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true\n },\n \"include\": [\"vite.config.ts\", \".storybook/**/*\"]\n}\n",[],[187,331],"8744acba-4d8d-11f0-bb34-76b3cceeab13","tsconfig.json","8744ad82-4d8d-11f0-bb34-76b3cceeab13",189,["D",1750393070359],"{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"useDefineForClassFields\": true,\n \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n\n /* Bundler mode */\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react-jsx\",\n\n /* Linting */\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noFallthroughCasesInSwitch\": true,\n\n /* Path mapping */\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n },\n\n /* Library build */\n \"declaration\": true,\n \"declarationMap\": true,\n \"outDir\": \"./dist\"\n },\n \"include\": [\n \"src/**/*\",\n \"components/**/*\"\n ],\n \"exclude\": [\n \"node_modules\",\n \"dist\",\n \"storybook-static\"\n ],\n \"references\": [{ \"path\": \"./tsconfig.node.json\" }]\n}\n",[],[187,339],"87250ea0-4d8d-11f0-a09a-76b3cceeab13","tailwind.config.js","87250f36-4d8d-11f0-a09a-76b3cceeab13",183,["D",1750393070119],"/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"./components/**/*.{js,ts,jsx,tsx}\",\n \"./src/**/*.{js,ts,jsx,tsx}\",\n \"./.storybook/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {\n colors: {\n primary: {\n 50: '#eff6ff',\n 100: '#dbeafe',\n 200: '#bfdbfe',\n 300: '#93c5fd',\n 400: '#60a5fa',\n 500: '#3b82f6',\n 600: '#2563eb',\n 700: '#1d4ed8',\n 800: '#1e40af',\n 900: '#1e3a8a',\n },\n secondary: {\n 50: '#f9fafb',\n 100: '#f3f4f6',\n 200: '#e5e7eb',\n 300: '#d1d5db',\n 400: '#9ca3af',\n 500: '#6b7280',\n 600: '#4b5563',\n 700: '#374151',\n 800: '#1f2937',\n 900: '#111827',\n },\n success: {\n 50: '#f0fdf4',\n 100: '#dcfce7',\n 200: '#bbf7d0',\n 300: '#86efac',\n 400: '#4ade80',\n 500: '#22c55e',\n 600: '#16a34a',\n 700: '#15803d',\n 800: '#166534',\n 900: '#14532d',\n },\n warning: {\n 50: '#fffbeb',\n 100: '#fef3c7',\n 200: '#fde68a',\n 300: '#fcd34d',\n 400: '#fbbf24',\n 500: '#f59e0b',\n 600: '#d97706',\n 700: '#b45309',\n 800: '#92400e',\n 900: '#78350f',\n },\n error: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n },\n },\n fontFamily: {\n sans: [\n '-apple-system',\n 'BlinkMacSystemFont',\n 'Segoe UI',\n 'Roboto',\n 'Oxygen',\n 'Ubuntu',\n 'Cantarell',\n 'Fira Sans',\n 'Droid Sans',\n 'Helvetica Neue',\n 'sans-serif',\n ],\n },\n spacing: {\n '18': '4.5rem',\n '88': '22rem',\n },\n maxWidth: {\n '8xl': '88rem',\n '9xl': '96rem',\n },\n animation: {\n 'fade-in': 'fadeIn 0.5s ease-in-out',\n 'slide-up': 'slideUp 0.3s ease-out',\n 'slide-down': 'slideDown 0.3s ease-out',\n },\n keyframes: {\n fadeIn: {\n '0%': { opacity: '0' },\n '100%': { opacity: '1' },\n },\n slideUp: {\n '0%': { transform: 'translateY(10px)', opacity: '0' },\n '100%': { transform: 'translateY(0)', opacity: '1' },\n },\n slideDown: {\n '0%': { transform: 'translateY(-10px)', opacity: '0' },\n '100%': { transform: 'translateY(0)', opacity: '1' },\n },\n },\n },\n },\n plugins: [],\n}\n",[],[187,347],"87546a42-4d8d-11f0-ae04-76b3cceeab13","postcss.config.js","87546b82-4d8d-11f0-ae04-76b3cceeab13",192,["D",1750393070462],"export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n",[],[187,355],"873c5af6-4d8d-11f0-a392-76b3cceeab13","package.json","873c5ba0-4d8d-11f0-a392-76b3cceeab13",188,["D",1750393070292],"{\n \"name\": \"personal-shopper-ui-kit\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"type\": \"module\",\n \"main\": \"./dist/index.js\",\n \"module\": \"./dist/index.js\",\n \"types\": \"./dist/index.d.ts\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/index.js\",\n \"types\": \"./dist/index.d.ts\"\n }\n },\n \"files\": [\n \"dist\"\n ],\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc && vite build\",\n \"preview\": \"vite preview\",\n \"test\": \"vitest run\",\n \"test:watch\": \"vitest\",\n \"storybook\": \"storybook dev -p 6006\",\n \"build-storybook\": \"storybook build\",\n \"lint\": \"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0\",\n \"type-check\": \"tsc --noEmit\"\n },\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n },\n \"devDependencies\": {\n \"@storybook/addon-essentials\": \"^7.6.7\",\n \"@storybook/addon-interactions\": \"^7.6.7\",\n \"@storybook/addon-links\": \"^7.6.7\",\n \"@storybook/blocks\": \"^7.6.7\",\n \"@storybook/react\": \"^7.6.7\",\n \"@storybook/react-vite\": \"^7.6.7\",\n \"@storybook/testing-library\": \"^0.2.2\",\n \"@testing-library/jest-dom\": \"^6.1.5\",\n \"@testing-library/react\": \"^14.1.2\",\n \"@testing-library/user-event\": \"^14.5.1\",\n \"@types/react\": \"^18.2.45\",\n \"@types/react-dom\": \"^18.2.18\",\n \"@typescript-eslint/eslint-plugin\": \"^6.14.0\",\n \"@typescript-eslint/parser\": \"^6.14.0\",\n \"@vitejs/plugin-react\": \"^4.2.1\",\n \"autoprefixer\": \"^10.4.16\",\n \"eslint\": \"^8.55.0\",\n \"eslint-plugin-react\": \"^7.37.5\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.5\",\n \"eslint-plugin-storybook\": \"^0.6.15\",\n \"identity-obj-proxy\": \"^3.0.0\",\n \"jsdom\": \"^26.1.0\",\n \"postcss\": \"^8.4.32\",\n \"storybook\": \"^7.6.7\",\n \"tailwindcss\": \"^3.3.6\",\n \"typescript\": \"^5.2.2\",\n \"vite\": \"^5.0.8\",\n \"vite-plugin-dts\": \"^3.6.4\",\n \"vitest\": \"^1.4.0\"\n },\n \"peerDependencies\": {\n \"react\": \">=18.0.0\",\n \"react-dom\": \">=18.0.0\"\n },\n \"packageManager\": \"pnpm@8.15.4+sha512.0bd3a9be9eb0e9a692676deec00a303ba218ba279d99241475616b398dbaeedd11146f92c2843458f557b1d127e09d4c171e105bdcd6b61002b39685a8016b9e\"\n}\n",[],[187,363],"8731de50-4d8d-11f0-aae6-76b3cceeab13","8731df0e-4d8d-11f0-aae6-76b3cceeab13",185,["D",1750393070234],"# Personal Shopper UI Kit\n\nA React component library for the Personal Shopper application, built with Vite, TypeScript, and Tailwind CSS.\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\npnpm install\n```\n\n### Development\n\nStart Storybook for component development:\n\n```bash\npnpm storybook\n```\n\nBuild the library:\n\n```bash\npnpm build\n```\n\nRun type checking:\n\n```bash\npnpm type-check\n```\n\nRun linting:\n\n```bash\npnpm lint\n```\n\n## 📦 Components\n\nThis UI kit includes the following components:\n\n- **Dashboard** - Main dashboard layout with location picker and action cards\n- **DashboardCard** - Reusable card component for dashboard metrics\n- **CurrentLocationIndicator** - Shows current store location or prompts to select one\n- **LocationSearch** - Search and select Kroger store locations by zip code\n- **LoginPage** - OAuth login page for Kroger authentication\n- **Navbar** - Application navigation bar with user info and logout\n- **ShoppingListCreator** - Create and manage shopping lists\n\n## 🛠 Technology Stack\n\n- **React 18** - UI library\n- **TypeScript** - Type safety\n- **Vite** - Build tool and dev server\n- **Tailwind CSS** - Utility-first CSS framework\n- **Storybook** - Component development and documentation\n- **ESLint** - Code linting\n\n## 📁 Project Structure\n\n```\nui-kit/\n├── .storybook/ # Storybook configuration\n├── components/ # React components\n│ ├── *.tsx # Component implementations\n│ ├── *.stories.tsx # Storybook stories\n│ └── types.ts # Component type definitions\n├── src/\n│ ├── components/ # Future home for components (migration)\n│ ├── styles/ # Global styles and CSS\n│ └── index.ts # Main library exports\n├── dist/ # Built library output\n└── storybook-static/ # Built Storybook output\n```\n\n## 🎨 Styling\n\nThis library uses Tailwind CSS for styling. The configuration includes:\n\n- Custom color palette for branding\n- Extended spacing and sizing utilities\n- Custom animations and transitions\n- Component-specific utility classes\n\n### Custom Tailwind Classes\n\n```css\n.btn-primary # Primary button styling\n.btn-secondary # Secondary button styling\n.card # Card container styling\n.form-input # Form input styling\n```\n\n## 📖 Storybook\n\nEach component has corresponding Storybook stories for development and documentation. Stories include:\n\n- Default state examples\n- Various prop combinations\n- Interactive controls for testing\n- Documentation and usage examples\n\nAccess Storybook at `http://localhost:6006` when running `pnpm storybook`.\n\n## 🔧 Build Configuration\n\n### Vite Configuration\n\n- Library mode for component distribution\n- TypeScript declaration generation\n- React plugin for JSX transform\n- Path aliases for cleaner imports\n\n### TypeScript Configuration\n\n- Strict type checking enabled\n- JSX React runtime\n- Declaration file generation\n- Path mapping for imports\n\n## 📝 Usage\n\n### Installing as a Dependency\n\nOnce published, install the UI kit in your project:\n\n```bash\npnpm add personal-shopper-ui-kit\n```\n\n### Importing Components\n\n```tsx\nimport { Dashboard, Navbar, LoginPage } from 'personal-shopper-ui-kit';\nimport type { DashboardProps } from 'personal-shopper-ui-kit';\n```\n\n### Including Styles\n\nMake sure to import the CSS in your main application:\n\n```tsx\nimport 'personal-shopper-ui-kit/dist/style.css';\n```\n\n## 🤝 Contributing\n\n1. Make changes to components in the `components/` directory\n2. Update or add Storybook stories for new features\n3. Run `pnpm type-check` and `pnpm lint` before committing\n4. Test components in Storybook before integration\n\n## 📄 License\n\nThis project is part of the Personal Shopper application and follows the same licensing terms.",[],[187,166],"873573ee-4d8d-11f0-a2e6-76b3cceeab13",".gitignore","87357484-4d8d-11f0-a2e6-76b3cceeab13",186,["D",1750393070257],"# Dependencies\nnode_modules/\n.pnpm-store/\n\n# Build outputs\ndist/\nbuild/\n*.tsbuildinfo\n\n# Storybook\nstorybook-static/\n\n# Environment variables\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# Logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Coverage directory used by tools like istanbul\ncoverage/\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# ESLint cache\n.eslintcache\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Microbundle cache\n.rpt2_cache/\n.rts2_cache_cjs/\n.rts2_cache_es/\n.rts2_cache_umd/\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n.parcel-cache\n\n# Next.js build output\n.next\n\n# Nuxt.js build / generate output\n.nuxt\ndist\n\n# Gatsby files\n.cache/\npublic\n\n# Vuepress build output\n.vuepress/dist\n\n# Serverless directories\n.serverless/\n\n# FuseBox cache\n.fusebox/\n\n# DynamoDB Local files\n.dynamodb/\n\n# TernJS port file\n.tern-port\n\n# Stores VSCode versions used for testing VSCode extensions\n.vscode-test\n\n# Temporary folders\ntmp/\ntemp/\n\n# IDE files\n.vscode/\n.idea/\n*.swp\n*.swo\n*~\n\n# OS generated files\n.DS_Store\n.DS_Store?\n._*\n.Spotlight-V100\n.Trashes\nehthumbs.db\nThumbs.db\n",[],[187,378],"872aa892-4d8d-11f0-a392-76b3cceeab13",".eslintrc.cjs","872aa928-4d8d-11f0-a392-76b3cceeab13",184,["D",1750393070188],"module.exports = {\n root: true,\n env: {\n browser: true,\n es2020: true,\n node: true,\n },\n extends: [\n \"eslint:recommended\",\n \"plugin:@typescript-eslint/recommended\",\n \"plugin:react/recommended\",\n \"plugin:react-hooks/recommended\",\n ],\n ignorePatterns: [\n \"dist\",\n \".eslintrc.cjs\",\n \"storybook-static\",\n \"vite.config.ts\",\n ],\n parser: \"@typescript-eslint/parser\",\n parserOptions: {\n ecmaVersion: \"latest\",\n sourceType: \"module\",\n ecmaFeatures: {\n jsx: true,\n },\n project: \"./tsconfig.json\",\n },\n rules: {\n \"prefer-const\": \"error\",\n \"no-var\": \"error\",\n \"object-shorthand\": \"error\",\n \"prefer-template\": \"error\",\n \"no-unused-vars\": \"off\", // Disable for now to avoid conflicts\n \"react/react-in-jsx-scope\": \"off\",\n \"react/prop-types\": \"off\",\n },\n settings: {\n react: {\n version: \"detect\",\n },\n },\n};\n",[],[187,386],"8757b030-4d8d-11f0-863f-76b3cceeab13","setupTests.ts","8757b102-4d8d-11f0-863f-76b3cceeab13","86b5cd92-4d8d-11f0-9d77-76b3cceeab13",193,["D",1750393070483],"import \"@testing-library/jest-dom\";\n\n// Mock window.alert for tests (Vitest)\nbeforeAll(() => {\n window.alert = vi.fn();\n});\n\n// Only mock setSelectionRange as a no-op for Vitest/jsdom\nbeforeAll(() => {\n Object.defineProperty(HTMLTextAreaElement.prototype, \"setSelectionRange\", {\n writable: true,\n value: () => {},\n });\n});\n",[],[187,402,394],"src","878032a8-4d8d-11f0-a7ec-76b3cceeab13","index.ts","87803352-4d8d-11f0-a7ec-76b3cceeab13",201,["D",1750393070747],"// Main library exports\nexport { Dashboard } from \"src/components/Dashboard\";\nexport { DashboardCard } from \"src/components/DashboardCard\";\nexport { CurrentLocationIndicator } from \"src/components/CurrentLocationIndicator\";\nexport { LocationSearch } from \"src/components/LocationSearch\";\nexport { LoginPage } from \"src/components/LoginPage\";\nexport { Navbar } from \"src/components/Navbar\";\nexport { ShoppingListCreator } from \"src/components/ShoppingListCreator\";\nexport { ProductCard } from \"src/components/ProductCard\";\n\n// Type exports\nexport type {\n DashboardProps,\n DashboardCardProps,\n CurrentLocationIndicatorProps,\n LocationSearchProps,\n NavbarProps,\n} from \"src/components/types\";\nexport type { ProductCardProps, Product } from \"src/components/ProductCard\";\n\n// Re-export shared types for convenience\nexport type { UserData, Location } from \"../../shared/types\";\n",[],[187,402,404],"877016ac-4d8d-11f0-a392-76b3cceeab13","globals.css","87701742-4d8d-11f0-a392-76b3cceeab13","86c69a6e-4d8d-11f0-b958-76b3cceeab13",198,["D",1750393070485],"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* Custom base styles */\n@layer base {\n * {\n box-sizing: border-box;\n }\n\n html,\n body {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button {\n font-family: inherit;\n }\n}\n\n/* Custom component styles */\n@layer components {\n .btn-primary {\n @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;\n }\n\n .btn-secondary {\n @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;\n }\n\n .card {\n @apply bg-white overflow-hidden shadow rounded-lg;\n }\n\n .form-input {\n @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm;\n }\n}\n\n/* Custom utility styles */\n@layer utilities {\n .text-balance {\n text-wrap: balance;\n }\n}\n",[],[187,402,420,412],"styles","86c699c4-4d8d-11f0-b958-76b3cceeab13",169,["D",1750393069531],[284],[187,402,420],"871abfa4-4d8d-11f0-aae6-76b3cceeab13","types.ts","e312bb92-44e4-11f0-bb93-76b3cceeab13","86d722f8-4d8d-11f0-bcd0-76b3cceeab13",180,["D",1750393069755],"import { ReactNode } from \"react\";\nimport { UserData, Location } from \"../../shared/types.ts\";\n\nexport interface DashboardCardProps {\n title: string;\n count: string | number;\n icon: ReactNode;\n actionText: string;\n onAction: () => void;\n}\n\nexport interface NavbarProps {\n userData: UserData;\n}\n\nexport interface DashboardProps {\n userData: UserData;\n}\n\nexport interface LocationSearchProps {\n onLocationSelected?: () => void;\n}\n\nexport interface CurrentLocationIndicatorProps {\n location: Location | null;\n onClick: () => void;\n}\n",[],[187,402,435,427],"components","87cfa356-4d8d-11f0-be1b-76b3cceeab13","ShoppingListCreator.tsx","87cfa3ec-4d8d-11f0-be1b-76b3cceeab13",207,["D",1750393070624],"import React, { useState, useRef } from \"react\";\n\ntype ShoppingListCreatorProps = {\n initialValue?: string | string[];\n onChange?: (value: string[]) => void;\n onCursorLineChange?: (lineNumber: number) => void;\n};\n\n/**\n * Utility to process textarea value into array of items.\n * Removes leading '*' and trims whitespace from each line.\n */\nfunction parseItems(value: string): string[] {\n return value\n .split(\"\\n\")\n .map((line) => line.replace(/^\\s*\\*\\s?/, \"\").trim())\n .filter((line) => line.length > 0);\n}\n\n/**\n * Converts an array of strings (or a string) into textarea value,\n * ensuring each line starts with '* ' and is trimmed.\n */\nfunction toTextareaValue(val: string | string[] | undefined): string {\n if (Array.isArray(val)) {\n return val\n .map((item) => {\n const clean = String(item)\n .replace(/^\\s*\\*\\s?/, \"\")\n .trim();\n return clean.length > 0 ? `* ${clean}` : \"\";\n })\n .filter(Boolean)\n .join(\"\\n\");\n }\n if (typeof val === \"string\") {\n return val;\n }\n return \"\";\n}\n\nexport function ShoppingListCreator({\n initialValue = \"\",\n onChange,\n onCursorLineChange,\n}: ShoppingListCreatorProps): JSX.Element {\n const [value, setValue] = useState(() => toTextareaValue(initialValue));\n const lastLineRef = useRef(null);\n\n // Expose processed items array\n const items = parseItems(value);\n\n const handleChange = (e: React.ChangeEvent) => {\n setValue(e.target.value);\n if (onChange) {\n onChange(parseItems(e.target.value));\n }\n // Also check cursor position on change\n maybeNotifyCursorLine(e.target);\n };\n\n const handleSelect = (e: React.SyntheticEvent) => {\n maybeNotifyCursorLine(e.target as HTMLTextAreaElement);\n };\n\n // Helper to determine line number and call onCursorLineChange if changed\n const maybeNotifyCursorLine = (textarea: HTMLTextAreaElement) => {\n const cursorPos = textarea.selectionStart;\n const textUptoCursor = textarea.value.slice(0, cursorPos);\n const lineNumber = textUptoCursor.split(\"\\n\").length; // 1-based\n if (lastLineRef.current !== lineNumber) {\n lastLineRef.current = lineNumber;\n if (onCursorLineChange) {\n onCursorLineChange(lineNumber);\n }\n }\n };\n\n return (\n

\n Shopping List\n

\n\n {/* Shopping List Textarea */}\n

\n \n

\n );\n}\n",[],[187,402,435,437],"87784f20-4d8d-11f0-a7ec-76b3cceeab13","ShoppingListCreator.stories.tsx","87784ff2-4d8d-11f0-a7ec-76b3cceeab13",200,["D",1750393070695],"import React from \"react\";\nimport { Meta, StoryObj } from \"@storybook/react\";\nimport { ShoppingListCreator } from \"./ShoppingListCreator\";\n\nconst meta: Meta = {\n title: \"Components/ShoppingListCreator\",\n component: ShoppingListCreator,\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const Default: Story = {\n render: () => {\n const [items, setItems] = React.useState([]);\n const [cursorLine, setCursorLine] = React.useState(null);\n\n return (\n

\n {\n setItems(value);\n // eslint-disable-next-line no-console\n console.log(\"onChange:\", value);\n }}\n onCursorLineChange={(line) => {\n setCursorLine(line);\n // eslint-disable-next-line no-console\n console.log(\"onCursorLineChange: line\", line);\n }}\n />\n

\n Current items:\n

\n              {JSON.stringify(items, null, 2)}\n

Diff · v209