[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_763":764,"_765":766},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_107":85,"_26":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":24,"_124":125,"_126":57,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",195,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","ui-kit/.storybook/main.ts","latestPath","fileId","87635426-4d8d-11f0-b1c5-76b3cceeab13","name","main.ts","fileType","script","content","import type { StorybookConfig } from \"@storybook/react-vite\";\n\nconst config: StorybookConfig = {\n stories: [\"../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)\"],\n addons: [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-interactions\",\n ],\n framework: {\n name: \"@storybook/react-vite\",\n options: {},\n },\n docs: {\n autodocs: \"tag\",\n },\n typescript: {\n check: false,\n reactDocgen: \"react-docgen-typescript\",\n reactDocgenTypescriptOptions: {\n shouldExtractLiteralValuesFromEnum: true,\n propFilter: (prop) =>\n prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,\n },\n },\n};\n\nexport default config;\n","createdAt",["D",1750393070242],"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",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":53,"_103":104,"_105":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":93,"_94":95,"_96":44,"_97":98},"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",{"_42":43,"_31":44,"_37":759,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":760,"_79":761,"_81":762,"_83":24},"tree",[247,251,261,268,274,276,306,307,308,309,310,311],"files",[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,301,302,303,304,305,306,307,308,309,310,311],"counts",{"_236":169,"_237":61,"_238":61,"_239":240,"_241":242},"contents",[142,143,144,145,146,147,148,149,150,151,152,153],"upstreamProject",{"_42":93,"_31":139,"_51":-5,"_52":-5,"_48":49,"_77":140},"upstreamBranch",{"_42":88,"_37":131,"_132":133,"_31":85,"_86":93,"_13":90,"_87":134,"_89":135,"_136":137,"_46":-5,"_83":24,"_48":49,"_97":138,"_62":95,"_96":139},"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",{"_99":138,"_106":141},"https://secure.gravatar.com/avatar/94262cddd28e127e29dacba5f09c8125.jpg?s=200&d=identicon",{"_42":230,"_31":231,"_29":232,"_157":-5,"_40":41,"_39":233,"_159":57,"_37":234,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_26":235},{"_42":224,"_31":225,"_29":226,"_157":-5,"_40":41,"_39":227,"_159":57,"_37":228,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_26":229},{"_42":218,"_31":219,"_29":220,"_157":-5,"_40":41,"_39":221,"_159":57,"_37":222,"_13":61,"_33":205,"_35":-5,"_23":24,"_162":-5,"_26":223},{"_42":212,"_31":213,"_29":214,"_157":-5,"_40":41,"_39":215,"_159":57,"_37":216,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_26":217},{"_42":207,"_31":208,"_29":209,"_157":-5,"_40":41,"_39":61,"_159":57,"_37":210,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_26":211},{"_42":200,"_31":201,"_29":202,"_157":-5,"_40":41,"_39":203,"_159":57,"_37":204,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_26":206},{"_42":194,"_31":195,"_29":196,"_157":-5,"_40":41,"_39":61,"_159":57,"_37":197,"_13":169,"_33":20,"_35":198,"_23":24,"_162":-5,"_26":199},{"_42":187,"_31":188,"_29":189,"_157":-5,"_40":41,"_39":190,"_159":57,"_37":191,"_13":61,"_33":20,"_35":192,"_23":24,"_162":-5,"_26":193},{"_42":180,"_31":181,"_29":182,"_157":-5,"_40":41,"_39":183,"_159":57,"_37":184,"_13":177,"_33":20,"_35":185,"_23":24,"_162":-5,"_26":186},{"_42":172,"_31":173,"_29":174,"_157":-5,"_40":41,"_39":175,"_159":57,"_37":176,"_13":177,"_33":20,"_35":178,"_23":24,"_162":-5,"_26":179},{"_42":164,"_31":165,"_29":166,"_157":-5,"_40":41,"_39":167,"_159":24,"_37":168,"_13":169,"_33":20,"_35":170,"_23":24,"_162":-5,"_26":171},{"_42":154,"_31":155,"_29":156,"_157":-5,"_40":41,"_39":158,"_159":24,"_37":160,"_13":61,"_33":34,"_35":161,"_23":24,"_162":-5,"_26":163},"e38d1ac2-44e4-11f0-937c-76b3cceeab13","vite.config.ts","0693ad28-3e51-11f0-9e80-76b3cceeab13","parentId",158,"latest",["D",1749441030930],"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n plugins: [react()],\n server: {\n proxy: {\n \"/api\": \"http://localhost:3000\",\n \"/auth\": \"http://localhost:3000\",\n },\n },\n resolve: {\n alias: {\n \"@\": \"/frontend\",\n },\n },\n});\n","label",[155],"e352a7fc-44e4-11f0-b4ed-76b3cceeab13","package.json","e352a8c4-44e4-11f0-b4ed-76b3cceeab13",150,["D",1749441030551],0,"{\n \"name\": \"personal-shopper\",\n \"version\": \"1.0.0\",\n \"description\": \"AI-powered grocery shopping with Kroger\",\n \"scripts\": {\n \"storybook\": \"storybook dev -p 6006\",\n \"build-storybook\": \"storybook build\"\n },\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n },\n \"devDependencies\": {\n \"@storybook/addon-essentials\": \"^7.6.17\",\n \"@storybook/addon-interactions\": \"^7.6.17\",\n \"@storybook/addon-links\": \"^7.6.17\",\n \"@storybook/blocks\": \"^7.6.17\",\n \"@storybook/react\": \"^7.6.17\",\n \"@storybook/react-vite\": \"^7.6.17\",\n \"@storybook/testing-library\": \"^0.2.2\",\n \"storybook\": \"^7.6.17\",\n \"typescript\": \"^5.3.3\",\n \"vite\": \"^5.1.4\"\n },\n \"packageManager\": \"pnpm@8.15.4+sha512.0bd3a9be9eb0e9a692676deec00a303ba218ba279d99241475616b398dbaeedd11146f92c2843458f557b1d127e09d4c171e105bdcd6b61002b39685a8016b9e\"\n}\n",[165],"e365355c-44e4-11f0-937c-76b3cceeab13","deno.json","f544c966-3dd4-11f0-ae70-76b3cceeab13",152,["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",[173],"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.",[181],"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",[188],"a527b8e0-3c43-11f0-baed-9e149126039e",".cursorrules","5b776fdb-b581-4e9e-a17f-0d15b7a21e1b",["D",1748492167939],"# 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",[195],"868eda70-4d8d-11f0-b958-76b3cceeab13","ui-kit","868edb7e-4d8d-11f0-b958-76b3cceeab13",166,["D",1750393069165],"directory",[201],"a527b656-3c43-11f0-baed-9e149126039e","shared","f51258e7-ba5a-41ab-9356-127b9178fe98",["D",1748492167939],[208],"9dba5c4a-3c46-11f0-b3a3-9e149126039e","frontend","2c2592a9-213d-42d8-b3c8-e300bf3eaa04",28,["D",1748493443987],[213],"397162ac-3c45-11f0-9e6e-9e149126039e","docs","3679b36a-3c45-11f0-9e6e-9e149126039e",5,["D",1748492846253],[219],"018e8d82-3c46-11f0-b1b1-9e149126039e","backend","b913e97a-f723-4624-98c5-8a0153655046",23,["D",1748493181993],[225],"e2b98a54-44e4-11f0-b4e2-76b3cceeab13",".storybook","e2b98b30-44e4-11f0-b4e2-76b3cceeab13",131,["D",1749441029546],[231],"pulls","branches","forks","envVars",{"_243":245,"_246":169},"connections",{"_243":169,"_244":169},"count","unfilledCount",4,"emptyCount",{"_42":230,"_31":231,"_29":232,"_157":-5,"_40":41,"_39":233,"_159":57,"_37":756,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":757,"_26":758},{"_42":749,"_31":32,"_29":750,"_157":232,"_40":41,"_39":751,"_159":57,"_37":752,"_13":169,"_33":34,"_35":753,"_23":24,"_162":-5,"_313":754,"_26":755},{"_42":741,"_31":742,"_29":743,"_157":232,"_40":41,"_39":744,"_159":57,"_37":745,"_13":169,"_33":20,"_35":746,"_23":24,"_162":-5,"_313":747,"_26":748},{"_42":733,"_31":734,"_29":735,"_157":232,"_40":41,"_39":736,"_159":57,"_37":737,"_13":169,"_33":34,"_35":738,"_23":24,"_162":-5,"_313":739,"_26":740},{"_42":224,"_31":225,"_29":226,"_157":-5,"_40":41,"_39":227,"_159":57,"_37":730,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":731,"_26":732},{"_42":726,"_31":709,"_29":703,"_157":226,"_40":41,"_39":227,"_159":57,"_37":727,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":728,"_26":729},{"_42":718,"_31":719,"_29":720,"_157":703,"_40":41,"_39":721,"_159":57,"_37":722,"_13":620,"_33":34,"_35":723,"_23":24,"_162":-5,"_313":724,"_26":725},{"_42":710,"_31":711,"_29":712,"_157":703,"_40":41,"_39":713,"_159":57,"_37":714,"_13":61,"_33":34,"_35":715,"_23":24,"_162":-5,"_313":716,"_26":717},{"_42":700,"_31":701,"_29":702,"_157":703,"_40":41,"_39":704,"_159":57,"_37":705,"_13":61,"_33":34,"_35":706,"_23":24,"_162":-5,"_313":707,"_26":708},{"_42":695,"_31":686,"_29":679,"_157":226,"_40":41,"_39":696,"_159":57,"_37":697,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":698,"_26":699},{"_42":687,"_31":688,"_29":689,"_157":679,"_40":41,"_39":690,"_159":57,"_37":691,"_13":61,"_33":34,"_35":692,"_23":24,"_162":-5,"_313":693,"_26":694},{"_42":676,"_31":677,"_29":678,"_157":679,"_40":41,"_39":680,"_159":57,"_37":681,"_13":682,"_33":34,"_35":683,"_23":24,"_162":-5,"_313":684,"_26":685},{"_42":668,"_31":669,"_29":670,"_157":226,"_40":41,"_39":671,"_159":57,"_37":672,"_13":61,"_33":34,"_35":673,"_23":24,"_162":-5,"_313":674,"_26":675},{"_42":658,"_31":659,"_29":55,"_157":226,"_40":41,"_39":660,"_159":24,"_37":661,"_13":662,"_33":663,"_35":664,"_23":24,"_162":665,"_313":666,"_26":667},{"_42":218,"_31":219,"_29":220,"_157":-5,"_40":41,"_39":221,"_159":57,"_37":655,"_13":61,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":656,"_26":657},{"_42":648,"_31":649,"_29":650,"_157":220,"_40":41,"_39":90,"_159":57,"_37":651,"_13":620,"_33":20,"_35":652,"_23":24,"_162":-5,"_313":653,"_26":654},{"_42":640,"_31":641,"_29":642,"_157":220,"_40":41,"_39":643,"_159":57,"_37":644,"_13":620,"_33":20,"_35":645,"_23":24,"_162":-5,"_313":646,"_26":647},{"_42":632,"_31":633,"_29":634,"_157":220,"_40":41,"_39":635,"_159":57,"_37":636,"_13":620,"_33":20,"_35":637,"_23":24,"_162":-5,"_313":638,"_26":639},{"_42":624,"_31":625,"_29":626,"_157":220,"_40":41,"_39":627,"_159":57,"_37":628,"_13":61,"_33":20,"_35":629,"_23":24,"_162":-5,"_313":630,"_26":631},{"_42":615,"_31":616,"_29":617,"_157":220,"_40":41,"_39":618,"_159":57,"_37":619,"_13":620,"_33":20,"_35":621,"_23":24,"_162":-5,"_313":622,"_26":623},{"_42":607,"_31":608,"_29":609,"_157":220,"_40":41,"_39":610,"_159":57,"_37":611,"_13":169,"_33":20,"_35":612,"_23":24,"_162":-5,"_313":613,"_26":614},{"_42":212,"_31":213,"_29":214,"_157":-5,"_40":41,"_39":215,"_159":57,"_37":604,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":605,"_26":606},{"_42":599,"_31":434,"_29":593,"_157":214,"_40":41,"_39":600,"_159":24,"_37":601,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":602,"_26":603},{"_42":590,"_31":591,"_29":592,"_157":593,"_40":41,"_39":594,"_159":24,"_37":595,"_13":169,"_33":34,"_35":596,"_23":24,"_162":-5,"_313":597,"_26":598},{"_42":581,"_31":582,"_29":583,"_157":214,"_40":41,"_39":584,"_159":57,"_37":585,"_13":586,"_33":20,"_35":587,"_23":24,"_162":-5,"_313":588,"_26":589},{"_42":572,"_31":573,"_29":574,"_157":214,"_40":41,"_39":575,"_159":24,"_37":576,"_13":577,"_33":34,"_35":578,"_23":24,"_162":-5,"_313":579,"_26":580},{"_42":564,"_31":565,"_29":566,"_157":214,"_40":41,"_39":567,"_159":57,"_37":568,"_13":169,"_33":20,"_35":569,"_23":24,"_162":-5,"_313":570,"_26":571},{"_42":207,"_31":208,"_29":209,"_157":-5,"_40":41,"_39":61,"_159":57,"_37":561,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":562,"_26":563},{"_42":554,"_31":426,"_29":555,"_157":209,"_40":41,"_39":556,"_159":57,"_37":557,"_13":221,"_33":34,"_35":558,"_23":24,"_162":-5,"_313":559,"_26":560},{"_42":200,"_31":201,"_29":202,"_157":-5,"_40":41,"_39":203,"_159":57,"_37":551,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":552,"_26":553},{"_42":546,"_31":231,"_29":536,"_157":202,"_40":41,"_39":547,"_159":57,"_37":548,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":549,"_26":550},{"_42":542,"_31":32,"_29":30,"_157":536,"_40":41,"_39":14,"_159":57,"_37":543,"_13":169,"_33":34,"_35":36,"_23":24,"_162":-5,"_313":544,"_26":545},{"_42":533,"_31":534,"_29":535,"_157":536,"_40":41,"_39":537,"_159":57,"_37":538,"_13":169,"_33":34,"_35":539,"_23":24,"_162":-5,"_313":540,"_26":541},{"_42":528,"_31":417,"_29":411,"_157":202,"_40":41,"_39":529,"_159":57,"_37":530,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":531,"_26":532},{"_42":523,"_31":434,"_29":428,"_157":411,"_40":41,"_39":524,"_159":57,"_37":525,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":526,"_26":527},{"_42":515,"_31":516,"_29":517,"_157":428,"_40":41,"_39":518,"_159":57,"_37":519,"_13":61,"_33":34,"_35":520,"_23":24,"_162":-5,"_313":521,"_26":522},{"_42":507,"_31":508,"_29":509,"_157":428,"_40":41,"_39":510,"_159":24,"_37":511,"_13":61,"_33":34,"_35":512,"_23":24,"_162":-5,"_313":513,"_26":514},{"_42":499,"_31":500,"_29":501,"_157":428,"_40":41,"_39":502,"_159":24,"_37":503,"_13":61,"_33":34,"_35":504,"_23":24,"_162":-5,"_313":505,"_26":506},{"_42":491,"_31":492,"_29":493,"_157":428,"_40":41,"_39":494,"_159":57,"_37":495,"_13":61,"_33":34,"_35":496,"_23":24,"_162":-5,"_313":497,"_26":498},{"_42":483,"_31":484,"_29":485,"_157":428,"_40":41,"_39":486,"_159":24,"_37":487,"_13":61,"_33":34,"_35":488,"_23":24,"_162":-5,"_313":489,"_26":490},{"_42":475,"_31":476,"_29":477,"_157":428,"_40":41,"_39":478,"_159":24,"_37":479,"_13":61,"_33":34,"_35":480,"_23":24,"_162":-5,"_313":481,"_26":482},{"_42":467,"_31":468,"_29":469,"_157":428,"_40":41,"_39":470,"_159":57,"_37":471,"_13":61,"_33":34,"_35":472,"_23":24,"_162":-5,"_313":473,"_26":474},{"_42":459,"_31":460,"_29":461,"_157":428,"_40":41,"_39":462,"_159":24,"_37":463,"_13":61,"_33":34,"_35":464,"_23":24,"_162":-5,"_313":465,"_26":466},{"_42":451,"_31":452,"_29":453,"_157":428,"_40":41,"_39":454,"_159":57,"_37":455,"_13":61,"_33":34,"_35":456,"_23":24,"_162":-5,"_313":457,"_26":458},{"_42":443,"_31":444,"_29":445,"_157":428,"_40":41,"_39":446,"_159":24,"_37":447,"_13":61,"_33":34,"_35":448,"_23":24,"_162":-5,"_313":449,"_26":450},{"_42":435,"_31":436,"_29":437,"_157":428,"_40":41,"_39":438,"_159":24,"_37":439,"_13":169,"_33":34,"_35":440,"_23":24,"_162":-5,"_313":441,"_26":442},{"_42":425,"_31":426,"_29":427,"_157":428,"_40":41,"_39":429,"_159":57,"_37":430,"_13":61,"_33":34,"_35":431,"_23":24,"_162":-5,"_313":432,"_26":433},{"_42":418,"_31":419,"_29":420,"_157":411,"_40":41,"_39":421,"_159":57,"_37":422,"_13":169,"_33":205,"_35":-5,"_23":24,"_162":-5,"_313":423,"_26":424},{"_42":408,"_31":409,"_29":410,"_157":411,"_40":41,"_39":412,"_159":57,"_37":413,"_13":169,"_33":34,"_35":414,"_23":24,"_162":-5,"_313":415,"_26":416},{"_42":400,"_31":401,"_29":402,"_157":202,"_40":41,"_39":403,"_159":57,"_37":404,"_13":169,"_33":20,"_35":405,"_23":24,"_162":-5,"_313":406,"_26":407},{"_42":392,"_31":393,"_29":394,"_157":202,"_40":41,"_39":395,"_159":57,"_37":396,"_13":169,"_33":20,"_35":397,"_23":24,"_162":-5,"_313":398,"_26":399},{"_42":385,"_31":181,"_29":386,"_157":202,"_40":41,"_39":387,"_159":57,"_37":388,"_13":169,"_33":20,"_35":389,"_23":24,"_162":-5,"_313":390,"_26":391},{"_42":378,"_31":165,"_29":379,"_157":202,"_40":41,"_39":380,"_159":57,"_37":381,"_13":169,"_33":20,"_35":382,"_23":24,"_162":-5,"_313":383,"_26":384},{"_42":370,"_31":371,"_29":372,"_157":202,"_40":41,"_39":373,"_159":57,"_37":374,"_13":169,"_33":34,"_35":375,"_23":24,"_162":-5,"_313":376,"_26":377},{"_42":362,"_31":363,"_29":364,"_157":202,"_40":41,"_39":365,"_159":57,"_37":366,"_13":169,"_33":34,"_35":367,"_23":24,"_162":-5,"_313":368,"_26":369},{"_42":354,"_31":355,"_29":356,"_157":202,"_40":41,"_39":357,"_159":57,"_37":358,"_13":169,"_33":20,"_35":359,"_23":24,"_162":-5,"_313":360,"_26":361},{"_42":346,"_31":347,"_29":348,"_157":202,"_40":41,"_39":349,"_159":57,"_37":350,"_13":169,"_33":20,"_35":351,"_23":24,"_162":-5,"_313":352,"_26":353},{"_42":339,"_31":155,"_29":340,"_157":202,"_40":41,"_39":341,"_159":57,"_37":342,"_13":169,"_33":34,"_35":343,"_23":24,"_162":-5,"_313":344,"_26":345},{"_42":331,"_31":332,"_29":333,"_157":202,"_40":41,"_39":334,"_159":57,"_37":335,"_13":169,"_33":34,"_35":336,"_23":24,"_162":-5,"_313":337,"_26":338},{"_42":194,"_31":195,"_29":196,"_157":-5,"_40":41,"_39":61,"_159":57,"_37":328,"_13":169,"_33":20,"_35":198,"_23":24,"_162":-5,"_313":329,"_26":330},{"_42":187,"_31":188,"_29":189,"_157":-5,"_40":41,"_39":190,"_159":57,"_37":325,"_13":61,"_33":20,"_35":192,"_23":24,"_162":-5,"_313":326,"_26":327},{"_42":180,"_31":181,"_29":182,"_157":-5,"_40":41,"_39":183,"_159":57,"_37":322,"_13":177,"_33":20,"_35":185,"_23":24,"_162":-5,"_313":323,"_26":324},{"_42":172,"_31":173,"_29":174,"_157":-5,"_40":41,"_39":175,"_159":57,"_37":319,"_13":177,"_33":20,"_35":178,"_23":24,"_162":-5,"_313":320,"_26":321},{"_42":164,"_31":165,"_29":166,"_157":-5,"_40":41,"_39":167,"_159":24,"_37":316,"_13":169,"_33":20,"_35":170,"_23":24,"_162":-5,"_313":317,"_26":318},{"_42":154,"_31":155,"_29":156,"_157":-5,"_40":41,"_39":158,"_159":24,"_37":312,"_13":61,"_33":34,"_35":161,"_23":24,"_162":-5,"_313":314,"_26":315},["D",1749441030930],"children",[],[155],["D",1749441030551],[],[165],["D",1749441030650],[],[173],["D",1748493484473],[],[181],["D",1748667949184],[],[188],["D",1748492167939],[],[195],"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",[],[201,332],"87482a7a-4d8d-11f0-ade6-76b3cceeab13","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",[],[201,155],"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",[],[201,347],"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",[],[201,355],"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",[],[201,363],"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",[],[201,371],"873c5af6-4d8d-11f0-a392-76b3cceeab13","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",[],[201,165],"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.",[],[201,181],"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",[],[201,393],"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",[],[201,401],"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",[],[201,417,409],"src","86c699c4-4d8d-11f0-b958-76b3cceeab13","styles","86c69a6e-4d8d-11f0-b958-76b3cceeab13",169,["D",1750393069531],[],[201,417,419],"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",[],[201,417,434,426],"components","875d12b4-4d8d-11f0-a41f-76b3cceeab13","ProductCard.tsx","875d137c-4d8d-11f0-a41f-76b3cceeab13",194,["D",1750393070517],"/** @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",[],[201,417,434,436],"87152abc-4d8d-11f0-a2e6-76b3cceeab13","Navbar.tsx","e3a69f4c-44e4-11f0-9b0b-76b3cceeab13",179,["D",1750393070041],"import { NavbarProps } from \"./types\";\n\nexport function Navbar({ userData }: NavbarProps): JSX.Element {\n const handleLogout = async (): Promise => {\n try {\n await fetch(\"/auth/logout\", { method: \"POST\" });\n window.location.reload();\n } catch (error) {\n console.error(\"Logout failed:\", error);\n }\n };\n\n return (\n \n );\n}\n",[],[201,417,434,444],"8706fe24-4d8d-11f0-be1b-76b3cceeab13","Navbar.stories.tsx","e3270b88-44e4-11f0-afb0-76b3cceeab13",176,["D",1750393069936],"import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Navbar } from \"./Navbar\";\n\nconst meta = {\n title: \"Components/Navbar\",\n component: Navbar,\n parameters: {\n layout: \"fullscreen\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n args: {\n userData: {\n id: \"user-123\",\n createdAt: 1640995200000,\n krogerProfileId: \"12345\",\n preferredLocationId: \"67890\",\n preferredLocation: {\n locationId: \"67890\",\n name: \"Kroger Marketplace\",\n storeNumber: \"123\",\n phone: \"555-0123\",\n address: {\n addressLine1: \"123 Main St\",\n addressLine2: \"Suite 100\",\n city: \"Cincinnati\",\n state: \"OH\",\n zipCode: \"45202\",\n },\n },\n },\n },\n};\n",[],[201,417,434,452],"8710b2ac-4d8d-11f0-ae04-76b3cceeab13","LoginPage.tsx","e2fb376a-44e4-11f0-819e-76b3cceeab13",178,["D",1750393069981],"export function LoginPage(): JSX.Element {\n return (\n

\n Personal Shopper\n

\n AI-powered grocery shopping with Kroger\n

\n Sign in with Kroger\n

\n Connect your Kroger account to start building your personalized\n shopping experience.\n

\n (window.location.href = \"/auth/login\")}\n className=\"group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md 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 \n \n Connect with Kroger\n \n

\n );\n}\n",[],[201,417,434,460],"870b78b4-4d8d-11f0-b1c5-76b3cceeab13","LoginPage.stories.tsx","e2e5deec-44e4-11f0-937c-76b3cceeab13",177,["D",1750393069981],"import type { Meta, StoryObj } from \"@storybook/react\";\nimport { LoginPage } from \"./LoginPage\";\n\nconst meta = {\n title: \"Components/LoginPage\",\n component: LoginPage,\n parameters: {\n layout: \"fullscreen\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n args: {},\n};\n",[],[201,417,434,468],"86e8eae2-4d8d-11f0-9d69-76b3cceeab13","LocationSearch.tsx","e32edf16-44e4-11f0-91f2-76b3cceeab13",171,["D",1750393069753],"import { useState } from \"react\";\nimport { LocationSearchProps } from \"./types\";\nimport { Location } from \"../../shared/types\";\n\nexport function LocationSearch({\n onLocationSelected,\n}: LocationSearchProps): JSX.Element {\n const [zipCode, setZipCode] = useState(\"\");\n const [locations, setLocations] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [showResults, setShowResults] = useState(false);\n\n const handleSearch = async (): Promise => {\n if (!zipCode.trim()) {\n alert(\"Please enter a zip code\");\n return;\n }\n\n setIsLoading(true);\n setShowResults(false);\n\n try {\n const response = await fetch(\n `/api/locations/search?zipCode=${encodeURIComponent(\n zipCode\n )}&radius=25&limit=10`\n );\n const data = await response.json();\n\n if (!response.ok) {\n throw new Error(data.error || \"Failed to search locations\");\n }\n\n setLocations(data.data);\n setShowResults(true);\n } catch (error) {\n console.error(\"Error searching locations:\", error);\n alert(`Error searching for locations: ${(error as Error).message}`);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleSelectLocation = async (location: Location): Promise => {\n try {\n const response = await fetch(\"/api/user/location\", {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ locationId: location.locationId }),\n });\n\n if (response.ok) {\n setZipCode(\"\");\n setShowResults(false);\n alert(\"Store location updated successfully!\");\n if (onLocationSelected) {\n onLocationSelected();\n }\n window.location.reload(); // Refresh to update the current location display\n } else {\n const data = await response.json();\n alert(`Failed to update location: ${data.error || \"Unknown error\"}`);\n }\n } catch (error) {\n console.error(\"Error updating location:\", error);\n alert(`Error updating location: ${(error as Error).message}`);\n }\n };\n\n return (\n

\n Store Location\n

Search for your preferred Kroger store location by zip code.

\n\n

\n \n Search by Zip Code\n \n

\n ) =>\n setZipCode(e.target.value)\n }\n placeholder=\"Enter zip code (e.g., 45044)\"\n className=\"flex-1 block border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n />\n \n \n \n \n Search\n \n

\n\n {isLoading && (\n

\n \n \n \n \n \n Searching for locations...\n \n

\n )}\n\n {showResults && (\n

\n Search Results\n

\n {locations.length === 0 ? (\n

\n \n \n \n \n

No locations found for this zip code

\n ) : (\n locations.map((location) => (\n handleSelectLocation(location)}\n >\n

\n {location.name}\n

\n {location.address.addressLine1}\n {location.address.addressLine2\n ? `, ${location.address.addressLine2}`\n : \"\"}\n

\n {location.address.city}, {location.address.state}{\" \"}\n {location.address.zipCode}\n

\n Store #{location.storeNumber} • {location.phone}\n

\n \n

\n ))\n )}\n

\n )}\n

\n \n );\n}\n",[],[201,417,434,476],"86f31d3c-4d8d-11f0-a392-76b3cceeab13","DashboardCard.tsx","e3093d88-44e4-11f0-8fe0-76b3cceeab13",173,["D",1750393069818],"import { DashboardCardProps } from \"./types\";\n\nexport function DashboardCard({\n title,\n count,\n icon,\n actionText,\n onAction,\n}: DashboardCardProps): JSX.Element {\n return (\n

{icon}

\n {title}\n: {count}

\n \n {actionText} →\n \n

\n );\n}\n",[],[201,417,434,484],"87020e0a-4d8d-11f0-a41f-76b3cceeab13","DashboardCard.stories.tsx","e30ee620-44e4-11f0-9f8f-76b3cceeab13",175,["D",1750393069754],"import type { Meta, StoryObj } from \"@storybook/react\";\nimport { DashboardCard } from \"./DashboardCard\";\n\nconst meta = {\n title: \"Components/DashboardCard\",\n component: DashboardCard,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n args: {\n title: \"Preferences\",\n count: \"5 items\",\n icon: (\n \n \n \n \n ),\n actionText: \"Manage preferences\",\n onAction: () => alert(\"Action clicked!\"),\n },\n};\n\nexport const WithZeroCount: Story = {\n args: {\n ...Default.args,\n count: \"0 items\",\n },\n};\n\nexport const WithLargeCount: Story = {\n args: {\n ...Default.args,\n count: \"1,234 items\",\n },\n};\n",[],[201,417,434,492],"86faab88-4d8d-11f0-a09a-76b3cceeab13","Dashboard.tsx","e2f7ebfa-44e4-11f0-b4e2-76b3cceeab13",174,["D",1750393069866],"import { useState, useEffect } from \"react\";\nimport { DashboardProps } from \"./types\";\nimport { Location } from \"../../../shared/types\";\nimport { Navbar } from \"./Navbar\";\nimport { DashboardCard } from \"./DashboardCard\";\nimport { LocationSearch } from \"./LocationSearch\";\nimport { CurrentLocationIndicator } from \"./CurrentLocationIndicator\";\nimport { ShoppingListCreator } from \"./ShoppingListCreator\";\n\nexport function Dashboard({ userData }: DashboardProps): JSX.Element {\n const [guidanceCount, setGuidanceCount] = useState(\"Loading...\");\n const [selectionsCount, setSelectionsCount] = useState(\"Loading...\");\n const [currentLocation, setCurrentLocation] = useState(\n userData.preferredLocation || null\n );\n const [showLocationPicker, setShowLocationPicker] = useState(\n !userData.preferredLocation\n );\n\n useEffect(() => {\n const loadCounts = async (): Promise => {\n try {\n const [guidanceResponse, selectionsResponse] = await Promise.all([\n fetch(\"/api/guidance\"),\n fetch(\"/api/selections\"),\n ]);\n\n const guidance = await guidanceResponse.json();\n const selections = await selectionsResponse.json();\n\n setGuidanceCount(guidance.length.toString());\n setSelectionsCount(selections.length.toString());\n } catch (error) {\n console.error(\"Error loading counts:\", error);\n setGuidanceCount(\"Error\");\n setSelectionsCount(\"Error\");\n }\n };\n\n const loadCurrentLocation = async (): Promise => {\n if (\n userData.preferredLocationId !== userData.preferredLocation?.locationId\n ) {\n try {\n const response = await fetch(\n `/api/locations/${userData.preferredLocationId}`\n );\n if (response.ok) {\n const data = await response.json();\n setCurrentLocation(data.data);\n }\n } catch (error) {\n console.error(\"Error loading current location details:\", error);\n }\n }\n };\n\n loadCounts();\n loadCurrentLocation();\n }, [userData.preferredLocationId, userData.preferredLocation?.locationId]);\n\n const handleLocationIndicatorClick = (): void => {\n setShowLocationPicker(!showLocationPicker);\n };\n\n const handleLocationSelected = (): void => {\n setShowLocationPicker(false);\n };\n\n return (\n

\n \n

\n {/* Location indicator - always visible */}\n

\n \n

\n\n {/* Location picker - only show when no location selected OR when clicked */}\n {showLocationPicker && (\n

\n \n

\n )}\n\n {/* Shopping List Creator - Full Width */}\n

\n \n

\n\n {/* Dashboard Cards */}\n

\n \n \n \n \n }\n actionText=\"Manage preferences\"\n onAction={() => alert(\"Guidance management coming soon!\")}\n />\n \n \n \n }\n actionText=\"View selections\"\n onAction={() => alert(\"Selections management coming soon!\")}\n />\n

\n );\n}\n",[],[201,417,434,500],"86ee0126-4d8d-11f0-b1c5-76b3cceeab13","CurrentLocationIndicator.tsx","e31b244e-44e4-11f0-b4ed-76b3cceeab13",172,["D",1750393069753],"import { CurrentLocationIndicatorProps } from \"./types\";\n\nexport function CurrentLocationIndicator({\n location,\n onClick,\n}: CurrentLocationIndicatorProps): JSX.Element {\n if (!location) {\n return (\n \n

\n \n \n \n

\n No store location selected\n

Click to select a store

\n \n );\n }\n\n const address = `${location.address.addressLine1}, ${location.address.city}, ${location.address.state} ${location.address.zipCode}`;\n\n return (\n \n

\n \n \n \n

{location.name}

{address}

\n \n \n \n

\n \n );\n}\n",[],[201,417,434,508],"871ee804-4d8d-11f0-a392-76b3cceeab13","CurrentLocationIndicator.stories.tsx","e2e22996-44e4-11f0-b914-76b3cceeab13",181,["D",1750393070091],"import type { Meta, StoryObj } from \"@storybook/react\";\nimport { CurrentLocationIndicator } from \"./CurrentLocationIndicator\";\n\nconst meta = {\n title: \"Components/CurrentLocationIndicator\",\n component: CurrentLocationIndicator,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const NoLocation: Story = {\n args: {\n location: null,\n onClick: () => alert(\"Location indicator clicked!\"),\n },\n};\n\nexport const WithLocation: Story = {\n args: {\n location: {\n locationId: \"123\",\n name: \"Kroger Marketplace\",\n storeNumber: \"123\",\n phone: \"555-0123\",\n address: {\n addressLine1: \"123 Main St\",\n addressLine2: \"Suite 100\",\n city: \"Cincinnati\",\n state: \"OH\",\n zipCode: \"45202\",\n },\n },\n onClick: () => alert(\"Location indicator clicked!\"),\n },\n};\n",[],[201,417,434,516],"86d7223a-4d8d-11f0-bcd0-76b3cceeab13",170,["D",1750393069638],[282,283,284,285,286,287,288,289,290,291,292,293],[201,417,434],"86b5ccfc-4d8d-11f0-9d77-76b3cceeab13",168,["D",1750393069421],[281,294,295],[201,417],"873835d4-4d8d-11f0-863f-76b3cceeab13","preview.ts","87383728-4d8d-11f0-863f-76b3cceeab13","86a4aeea-4d8d-11f0-8a7d-76b3cceeab13",187,["D",1750393070243],"import type { Preview } from '@storybook/react';\nimport '../src/styles/globals.css';\n\nconst preview: Preview = {\n parameters: {\n actions: { argTypesRegex: '^on[A-Z].*' },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n layout: 'centered',\n backgrounds: {\n default: 'light',\n values: [\n {\n name: 'light',\n value: '#ffffff',\n },\n {\n name: 'dark',\n value: '#1f2937',\n },\n {\n name: 'gray',\n value: '#f3f4f6',\n },\n ],\n },\n },\n globalTypes: {\n theme: {\n description: 'Global theme for components',\n defaultValue: 'light',\n toolbar: {\n title: 'Theme',\n icon: 'circlehollow',\n items: ['light', 'dark'],\n dynamicTitle: true,\n },\n },\n },\n};\n\nexport default preview;\n",[],[201,231,534],"87635386-4d8d-11f0-b1c5-76b3cceeab13",["D",1750393070242],[],[201,231,32],"86a4ae2c-4d8d-11f0-8a7d-76b3cceeab13",167,["D",1750393069309],[278,279],[201,231],["D",1750393069165],[277,280,296,297,298,299,300,301,302,303,304,305],[201],"e383317e-44e4-11f0-859b-76b3cceeab13","1a5b951a-c8ee-4136-bd84-5ec6d4f79ce1",157,["D",1749441030861],"export interface Memory {\n id: string;\n date: string;\n text: string;\n tags: string | null;\n\n // New fields from schema\n createdBy?: string;\n createdDate?: number;\n}\n\n// Kroger OAuth and User types\nexport interface KrogerUser {\n id: string;\n krogerProfileId: string;\n accessToken: string;\n refreshToken: string;\n tokenExpiresAt: number;\n preferredLocationId?: string;\n createdAt: number;\n updatedAt: number;\n}\n\nexport interface Location {\n locationId: string;\n name: string;\n storeNumber: string;\n phone: string;\n address: {\n addressLine1: string;\n addressLine2?: string;\n city: string;\n state: string;\n zipCode: string;\n };\n}\n\nexport interface UserData {\n id: string;\n createdAt: number;\n krogerProfileId: string;\n preferredLocationId?: string;\n preferredLocation?: Location;\n}\n\nexport interface KrogerTokenResponse {\n access_token: string;\n token_type: string;\n expires_in: number;\n refresh_token: string;\n}\n\nexport interface KrogerProfileResponse {\n data: {\n id: string;\n };\n meta: {\n pagination: {\n total: number;\n start: number;\n limit: number;\n };\n warnings: string[];\n };\n}\n\nexport interface Guidance {\n id: string;\n userId: string;\n itemName: string;\n guidance: string;\n createdAt: number;\n updatedAt: number;\n}\n\nexport interface Selection {\n id: string;\n userId: string;\n itemName: string;\n upc: string;\n productName: string;\n createdAt: number;\n updatedAt: number;\n}\n\n// Kroger Location types\nexport interface KrogerLocation {\n locationId: string;\n name: string;\n chain: string;\n storeNumber: string;\n divisionNumber: string;\n address: {\n addressLine1: string;\n addressLine2?: string;\n city: string;\n county: string;\n state: string;\n zipCode: string;\n };\n phone: string;\n geolocation: {\n latLng: string;\n latitude: number;\n longitude: number;\n };\n hours: {\n Open24: boolean;\n gmtOffset: string;\n timezone: string;\n monday?: DayHours;\n tuesday?: DayHours;\n wednesday?: DayHours;\n thursday?: DayHours;\n friday?: DayHours;\n saturday?: DayHours;\n sunday?: DayHours;\n };\n departments: Department[];\n}\n\nexport interface DayHours {\n open: string;\n close: string;\n open24: boolean;\n}\n\nexport interface Department {\n departmentId: string;\n name: string;\n phone: string;\n hours: {\n Open24: boolean;\n monday?: DayHours;\n tuesday?: DayHours;\n wednesday?: DayHours;\n thursday?: DayHours;\n friday?: DayHours;\n saturday?: DayHours;\n sunday?: DayHours;\n };\n}\n\nexport interface KrogerLocationsResponse {\n data: KrogerLocation[];\n meta: {\n pagination: {\n total: number;\n start: number;\n limit: number;\n };\n warnings: string[];\n };\n}\n\nexport interface KrogerLocationResponse {\n data: KrogerLocation;\n}\n\nexport interface IKrogerAuthService {\n isConfigured(): boolean;\n getAuthorizationUrl(state?: string): string;\n exchangeCodeForToken(code: string): Promise;\n refreshToken(refreshToken: string): Promise;\n getUserProfile(accessToken: string): Promise;\n isTokenExpired(expiresAt: number): boolean;\n getValidAccessToken(\n currentToken: string,\n refreshToken: string,\n expiresAt: number\n ): Promise<{\n accessToken: string;\n refreshToken: string;\n expiresIn: number;\n } | null>;\n searchLocationsByZipCode(\n accessToken: string,\n zipCode: string,\n radiusInMiles?: number,\n limit?: number\n ): Promise;\n getLocationById(\n accessToken: string,\n locationId: string\n ): Promise;\n}\n",[],[208,426],["D",1748492167939],[275],[208],"e32b79b6-44e4-11f0-826e-76b3cceeab13","style.css","e32b7a7e-44e4-11f0-826e-76b3cceeab13",143,["D",1749441030294],"/* Base styles */\n:root {\n --primary-color: #3b82f6;\n --secondary-color: #1e40af;\n --background-color: #f3f4f6;\n --text-color: #1f2937;\n --border-color: #e5e7eb;\n}\n\nbody {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n}\n\n/* Button styles */\n.btn {\n display: inline-block;\n padding: 0.5rem 1rem;\n border-radius: 0.375rem;\n font-weight: 500;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n color: white;\n border: none;\n}\n\n.btn-primary:hover {\n background-color: var(--secondary-color);\n}\n\n/* Card styles */\n.card {\n background-color: white;\n border-radius: 0.5rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n padding: 1rem;\n margin: 1rem 0;\n}\n\n/* Form styles */\n.form-input {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid var(--border-color);\n border-radius: 0.375rem;\n margin-bottom: 1rem;\n}\n\n/* Layout styles */\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-col {\n flex-direction: column;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-4 {\n gap: 1rem;\n}\n\n/* Text styles */\n.text-center {\n text-align: center;\n}\n\n.text-lg {\n font-size: 1.125rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n/* Margin and padding utilities */\n.m-4 {\n margin: 1rem;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.mt-4 {\n margin-top: 1rem;\n}\n\n.mb-4 {\n margin-bottom: 1rem;\n}\n\n/* Grid styles */\n.grid {\n display: grid;\n gap: 1rem;\n}\n\n.grid-cols-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n@media (max-width: 768px) {\n .grid-cols-2 {\n grid-template-columns: 1fr;\n }\n}\n",[],[213,565],"e35f534e-44e4-11f0-afb0-76b3cceeab13","index.tsx","0689c556-3e51-11f0-9b71-76b3cceeab13",151,["D",1749441030568],12,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport { LoginPage } from \"./components/LoginPage.tsx\";\nimport { Dashboard } from \"./components/Dashboard.tsx\";\n\nfunction App(): JSX.Element {\n const userData = (window as any).__USER_DATA__;\n return userData ? : ;\n}\n\n// Initialize the app\nconst root = createRoot(document.getElementById(\"app\")!);\nroot.render();\n",[],[213,573],"425ee2e6-3e51-11f0-9b68-76b3cceeab13","index.html","9dba240a-3c46-11f0-b3a3-9e149126039e",100,["D",1748717917515],16,"\n\n \n \n \n Personal Shopper - Kroger Integration\n \n \n\n \n \n

\n \n \n\n",[],[213,582],"e31edd32-44e4-11f0-be29-76b3cceeab13","ShoppingListCreator.tsx","e31ede04-44e4-11f0-be29-76b3cceeab13","e2d14b4e-44e4-11f0-8fe0-76b3cceeab13",141,["D",1749441030212],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function ShoppingListCreator(): JSX.Element {\n const [currentItem, setCurrentItem] = useState(\"\");\n const [items, setItems] = useState([]);\n\n const handleInputChange = (e: React.ChangeEvent) => {\n setCurrentItem(e.target.value);\n };\n\n const addItem = () => {\n const trimmedItem = currentItem.trim();\n if (trimmedItem && !items.includes(trimmedItem)) {\n setItems([...items, trimmedItem]);\n setCurrentItem(\"\");\n }\n };\n\n const handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n addItem();\n }\n };\n\n const removeItem = (indexToRemove: number) => {\n setItems(items.filter((_, index) => index !== indexToRemove));\n };\n\n const clearAll = () => {\n setItems([]);\n };\n\n return (\n

\n Create Shopping List\n

\n\n {/* Add Item Input */}\n

\n \n \n Add\n \n

\n\n {/* Shopping List */}\n {items.length > 0 && (\n

\n Shopping List ({items.length} items)\n

\n \n Clear all\n \n

\n\n

\n {item}\n removeItem(index)}\n className=\"text-red-600 hover:text-red-800 text-sm font-medium\"\n aria-label={`Remove ${item}`}\n >\n ✕\n \n \n ))}\n

\n )}\n\n {/* Empty State */}\n {items.length === 0 && (\n

No items added yet.

\n Type an item above and press Enter or click Add.\n

\n )}\n\n {/* Process Button */}\n {items.length > 0 && (\n

\n alert(\"Shopping list processing coming soon!\")}\n className=\"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500\"\n >\n Process List ({items.length} items)\n \n

\n )}\n

\n );\n}\n",[],[213,434,591],"e2d14a4a-44e4-11f0-8fe0-76b3cceeab13",132,["D",1749441029702],[270],[213,434],["D",1748493443987],[269,271,272,273],[213],"f60d64be-3c46-11f0-b3c0-9e149126039e","oauth-setup.md","f60d65a4-3c46-11f0-b3c0-9e149126039e",36,["D",1748493592189],"# Kroger OAuth Setup Guide\n\nThis guide walks you through setting up Kroger OAuth authentication for the Personal Shopper application.\n\n## Prerequisites\n\n1. **Kroger Developer Account**: You need to register as a developer with Kroger\n2. **Val Town Account**: Your application should be deployed on Val Town\n\n## Step 1: Register with Kroger Developer Portal\n\n1. Visit the [Kroger Developer Portal](https://developer.kroger.com/)\n2. Create an account or sign in\n3. Create a new application\n4. Note down your `Client ID` and `Client Secret`\n\n## Step 2: Configure Redirect URI\n\nIn your Kroger application settings, set the redirect URI to:\n```\nhttps://your-val-name.web.val.run/auth/callback\n```\n\nReplace `your-val-name` with your actual Val Town username and val name.\n\n## Step 3: Set Environment Variables\n\nIn your Val Town environment, set these variables:\n\n### Required Variables\n\n- **KROGER_CLIENT_ID**: Your Kroger application's client ID\n- **KROGER_CLIENT_SECRET**: Your Kroger application's client secret \n- **KROGER_REDIRECT_URI**: The redirect URI you registered (e.g., `https://your-val-name.web.val.run/auth/callback`)\n\n### How to Set Environment Variables in Val Town\n\n1. Go to your Val Town dashboard\n2. Click on your val\n3. Go to the \"Environment\" tab\n4. Add the three variables listed above\n\n## Step 4: Test the OAuth Flow\n\n1. Visit your application URL\n2. Click \"Connect with Kroger\"\n3. You should be redirected to Kroger's login page\n4. After logging in and authorizing, you'll be redirected back to your app\n\n## OAuth Flow Details\n\n### 1. Authorization Request\nWhen a user clicks \"Connect with Kroger\", they're redirected to:\n```\nhttps://api.kroger.com/v1/connect/oauth2/authorize?\n client_id=YOUR_CLIENT_ID&\n redirect_uri=YOUR_REDIRECT_URI&\n response_type=code&\n scope=profile.compact cart.basic:write product.compact&\n state=RANDOM_STATE_STRING\n```\n\n### 2. Authorization Callback\nKroger redirects back to your callback URL with:\n- `code`: Authorization code to exchange for tokens\n- `state`: The same state value you sent (for security)\n\n### 3. Token Exchange\nYour app exchanges the authorization code for:\n- `access_token`: Used to make API calls on behalf of the user\n- `refresh_token`: Used to get new access tokens when they expire\n- `expires_in`: How long the access token is valid (in seconds)\n\n### 4. Profile Retrieval\nYour app uses the access token to get the user's Kroger profile ID from:\n```\nGET https://api.kroger.com/v1/identity/profile\nAuthorization: Bearer ACCESS_TOKEN\n```\n\n### 5. User Session\nThe app creates a local user record and sets a session cookie for future requests.\n\n## Scopes Requested\n\nThe application requests these OAuth scopes:\n\n- **profile.compact**: Access to user's basic profile information\n- **cart.basic:write**: Ability to add items to the user's cart\n- **product.compact**: Access to search products in the catalog\n\n## Security Features\n\n- **State Parameter**: Prevents CSRF attacks during OAuth flow\n- **HTTP-Only Cookies**: Session cookies are not accessible via JavaScript\n- **Token Refresh**: Automatic refresh of expired access tokens\n- **Secure Storage**: Tokens are stored securely in the database\n\n## Troubleshooting\n\n### \"OAuth not configured\" Error\n- Ensure all three environment variables are set correctly\n- Check that there are no extra spaces in the variable values\n\n### \"Invalid redirect URI\" Error\n- Verify the redirect URI in Kroger's developer portal matches exactly\n- Ensure you're using HTTPS (required by Kroger)\n\n### \"Invalid client\" Error\n- Double-check your client ID and secret\n- Ensure your Kroger application is active\n\n### Token Refresh Issues\n- The app automatically handles token refresh\n- If refresh fails, users will need to re-authenticate\n\n## API Endpoints\n\nOnce OAuth is configured, these endpoints become available:\n\n### Authentication\n- `GET /auth/login` - Start OAuth flow\n- `GET /auth/callback` - Handle OAuth callback\n- `POST /auth/logout` - End user session\n\n### User Management\n- `GET /api/user` - Get current user info\n- `PUT /api/user/location` - Update preferred store location\n\n### Data Management\n- `GET /api/guidance` - Get user's shopping preferences\n- `POST /api/guidance` - Add new preference\n- `GET /api/selections` - Get user's saved product selections\n- `POST /api/selections` - Save new product selection\n\n## Next Steps\n\nAfter OAuth is working:\n\n1. **Test the full flow** with a real Kroger account\n2. **Implement product search** using the Kroger Products API\n3. **Add cart management** using the Kroger Cart API\n4. **Integrate AI/LLM** for intelligent product selection\n5. **Build the shopping list interface**\n\n## Support\n\nFor Kroger API issues:\n- [Kroger Developer Documentation](https://developer.kroger.com/documentation)\n- [Kroger Developer Support](https://developer.kroger.com/support)\n\nFor Val Town issues:\n- [Val Town Documentation](https://docs.val.town/)\n- [Val Town Discord](https://discord.gg/dHv45uN5RY)",[],[219,608],"52278bf0-3c45-11f0-9e79-9e149126039e","kroger-products.md","4bd7b4aa-3c45-11f0-8122-9e149126039e",13,["D",1748492887714],3,"## Products API (1.2.4)\n\nThe Products API allows you to search the Kroger product catalog.\n\n### Rate Limit\n\nThe Public Products API has a 10,000 call per day rate limit.\n\nFor all Public APIs, we enforce the rate limit by the number of calls the client makes to the endpoint, not individual API operations. This means you can distribute the 10,000 calls across all API operations using the /products endpoint as you see fit.\n\n### Pagination\n\nThe Product Search operation supports pagination with a default value of 10 results per page. Using the following parameters, you can extend and skip results in the response:\n\n- `filter.limit` - Sets a limit on the number of products returned.\n- `filter.start` - Sets a number of results to skip in the response.\n\nNote: Since searching by a term acts as a fuzzy search, the order of the results can change with each new request.\n\n### API Operations\n\nThe Products API supports the following operations:\n\n| Name | Method | Description |\n| --------------- | ------ | ----------------------------------------------------------------------------- |\n| Product search | GET | Allows you to find products by passing in either a search term or product Id. |\n| Product details | GET | Returns product details for a specific product. |\n\n### Additional Response Data\n\nTo return the following data from the /products endpoint, you must include a locationId in the request. All operations for the products endpoint accept the filter.locationId query parameter.\n\n### Price\n\nReturns the following price objects:\n\nprice - Includes both the regular price of the item and the promo price of the item.\nnationalPrice - Includes both the regular national price of the item and the national promo price of the item.\n\nNote: Seasonal products only return a price when available. Some items may not have a national prices available.\n\n### Fulfillment Type\n\nReturns the following boolean objects to indicate an item's fulfillment availability:\n\ninstore - The item is sold in store at the given location.\nshiptohome - The item is available to be shipped to home.\ndelivery - The item is available for delivery from the given location.\ncurbside - The item is available for curbside pickup from the given location.\n\nNote: The instore fulfillment type only indicated that the item is sold by the given location, not that it is in stock.\n\n### Aisle Locations\n\nReturns the aisle locations of the item for the given location.\n\n### Inventory\n\nReturns the stockLevel of the item. This property is omitted when unavailable:\n\nHIGH - The stock level is high.\nLOW - The stock level is low.\nTEMPORARILY_OUT_OF_STOCK - The item is temporarily out of stock.\n\n## Example\n\n### /v1/products\n\n```sh\ncurl -X GET \\\n 'https://api.kroger.com/v1/products?filter.brand={{BRAND}}&filter.term={{TERM}}&filter.locationId={{LOCATION_ID}}' \\\n -H 'Accept: application/json' \\\n -H 'Authorization: Bearer {{TOKEN}}'\n```\n\n```json\n{\n \"data\": [\n {\n \"productId\": \"0001111041700\",\n \"productPageURI\": \"/p/kroger-2-reduced-fat-milk/0001111041700?cid=dis.api.tpi_products-api_20240521_b:all_c:p_t:\",\n \"aisleLocations\": [\n {\n \"bayNumber\": \"13\",\n \"description\": \"Aisle 35\",\n \"number\": \"35\",\n \"numberOfFacings\": \"5\",\n \"sequenceNumber\": \"3\",\n \"side\": \"L\",\n \"shelfNumber\": \"2\",\n \"shelfPositionInBay\": \"1\"\n }\n ],\n \"brand\": \"Kroger\",\n \"categories\": [\"Dairy\"],\n \"countryOrigin\": \"United States\",\n \"description\": \"Kroger 2% Reduced Fat Milk\",\n \"items\": [\n {\n \"itemId\": \"0001111041700\",\n \"inventory\": {\n \"stockLevel\": \"HIGH\"\n },\n \"favorite\": true,\n \"fulfillment\": {\n \"curbside\": true,\n \"delivery\": true,\n \"instore\": true,\n \"shiptohome\": true\n },\n \"price\": {\n \"regular\": 1.99,\n \"promo\": 1.59,\n \"regularPerUnitEstimate\": 1.99,\n \"promoPerUnitEstimate\": 1.59\n },\n \"nationalPrice\": {\n \"regular\": 1.99,\n \"promo\": 1.59,\n \"regularPerUnitEstimate\": 1.99,\n \"promoPerUnitEstimate\": 1.59\n },\n \"size\": \"1 gal\",\n \"soldBy\": \"unit\"\n }\n ],\n \"itemInformation\": {\n \"depth\": \"3.5\",\n \"height\": \"2.0\",\n \"width\": \"4.75\"\n },\n \"temperature\": {\n \"indicator\": \"Refrigerated\",\n \"heatSensitive\": true\n },\n \"images\": [\n {\n \"id\": \"string\",\n \"perspective\": \"front\",\n \"default\": true,\n \"sizes\": [\n {\n \"id\": \"7df2d0a3-8349-44d4-9512-1dab89e675a9\",\n \"size\": \"medium\",\n \"url\": \"https://www.kroger.com/product/images/medium/front/0001111041700\"\n }\n ]\n }\n ],\n \"upc\": \"0001111041700\"\n }\n ],\n \"meta\": {}\n}\n```\n\n### /v1/products/{productId}\n\n```sh\ncurl -X GET \\\n 'https://api.kroger.com/v1/products/{{ID}}?filter.locationId={{LOCATION_ID}}' \\\n -H 'Accept: application/json' \\\n -H 'Authorization: Bearer {{TOKEN}}'\n```\n\n```json\n{\n \"data\": {\n \"productId\": \"0001111041700\",\n \"productPageURI\": \"/p/kroger-2-reduced-fat-milk/0001111041700?cid=dis.api.tpi_products-api_20240521_b:all_c:p_t:\",\n \"aisleLocations\": [\n {\n \"bayNumber\": \"13\",\n \"description\": \"Aisle 35\",\n \"number\": \"35\",\n \"numberOfFacings\": \"5\",\n \"sequenceNumber\": \"3\",\n \"side\": \"L\",\n \"shelfNumber\": \"2\",\n \"shelfPositionInBay\": \"1\"\n }\n ],\n \"brand\": \"Kroger\",\n \"categories\": [\"Dairy\"],\n \"countryOrigin\": \"United States\",\n \"description\": \"Kroger 2% Reduced Fat Milk\",\n \"items\": [\n {\n \"itemId\": \"0001111041700\",\n \"inventory\": {\n \"stockLevel\": \"HIGH\"\n },\n \"favorite\": true,\n \"fulfillment\": {\n \"curbside\": true,\n \"delivery\": true,\n \"instore\": true,\n \"shiptohome\": true\n },\n \"price\": {\n \"regular\": 1.99,\n \"promo\": 1.59,\n \"regularPerUnitEstimate\": 1.99,\n \"promoPerUnitEstimate\": 1.59\n },\n \"nationalPrice\": {\n \"regular\": 1.99,\n \"promo\": 1.59,\n \"regularPerUnitEstimate\": 1.99,\n \"promoPerUnitEstimate\": 1.59\n },\n \"size\": \"1 gal\",\n \"soldBy\": \"unit\"\n }\n ],\n \"itemInformation\": {\n \"depth\": \"3.5\",\n \"height\": \"2.0\",\n \"width\": \"4.75\"\n },\n \"temperature\": {\n \"indicator\": \"Refrigerated\",\n \"heatSensitive\": true\n },\n \"images\": [\n {\n \"id\": \"string\",\n \"perspective\": \"front\",\n \"default\": true,\n \"sizes\": [\n {\n \"id\": \"7df2d0a3-8349-44d4-9512-1dab89e675a9\",\n \"size\": \"medium\",\n \"url\": \"https://www.kroger.com/product/images/medium/front/0001111041700\"\n }\n ]\n }\n ],\n \"upc\": \"0001111041700\"\n },\n \"meta\": {}\n}\n```",[],[219,616],"eada0650-3ddc-11f0-8008-76b3cceeab13","kroger-location.md","895a3096-3dda-11f0-9c21-76b3cceeab13",85,["D",1748667949063],"# Kroger Locations\n\n## Locations\n\n### GET /v1/locations\n\n#### Request\n\nProvides access to a list of locations. If the parameter filter.chain is not provided, the results include all locations and chains owned by The Kroger Co.\nYou may include one of the following parameters to narrow search results within a geographic area:\n\n- `filter.zipCode.near`\n- `filter.latLong.near`\n- `filter.lat.near` and `filter.lon.near`\n\n#### Parameters\n\n- `filter.zipCode.near`\n\n - Description: The zip code to use as a starting point for results.\n - Example: `45044`\n - Type: `string`\n - Required: `false`\n - Query: `filter.zipCode.near`\n\n- `filter.latLong.near`\n\n - Description: The latitude and longitude to use as a starting point for results.\n - Example: `filter.latLong.near=39.306346,-84.278902`\n - Type: `string`\n - Required: `false`\n - Query: `filter.latLong.near`\n\n- `filter.lat.near` and `filter.lon.near`\n\n - Description: The latitude and longitude to use as a starting point for results.\n - Example: `filter.lat.near=39.306346&filter.lon.near=-84.278902`\n - Type: `string`\n - Required: `false`\n - Query: `filter.lat.near` and `filter.lon.near`\n\n- `filter.radiusInMiles`\n\n - Description: The mile radius of results. This will be ignored if you do not use one of the 3 starting point filters (zipCode, latLong, or lat and lon).\n - Example: `10`\n - Type: `integer`\n - Required: `false`\n - Query: `filter.radiusInMiles`\n\n- `filter.limit`\n - Description: The number of results to return.\n - Example: `10`\n - Type: `integer`\n - Required: `false`\n - Query: `filter.limit`\n\n10\n\n- `filter.chain`\n - Description: The chain name of the chain. When using this filter, only stores matching the provided chain name are returned.\n - Example: `Kroger`\n - Type: `string`\n - Required: `false`\n - Query: `filter.chain`\n\nExample : Kroger\n\n- `filter.department`\n\n - Description: The departmentId of the department. Lists must be comma-separated. When using this filter, only stores that have all of the departments provided are returned.\n - Example: `13`\n - Type: `string`\n - Required: `false`\n - Query: `filter.department`\n\n- `filter.locationId`\n - Description: Comma-separated list of locationIds.\n - Example: `01400390`\n - Type: `string`\n - Required: `false`\n - Query: `filter.locationId`\n\n#### Responses\n\n- `200`\n - Description: OK\n - Links: None\n\nOK\n\n#### Media type\n\n- `application/json`\n - Controls Accept header.\n\n#### Example Value\n\n```json\n{\n \"data\": [\n {\n \"address\": {\n \"addressLine1\": \"2900 W. St. Rt. 22 & 3\",\n \"addressLine2\": \"\",\n \"city\": \"Maineville\",\n \"county\": \"WARREN COUNTY\",\n \"state\": \"OH\",\n \"zipCode\": \"45039\"\n },\n \"chain\": \"KROGER\",\n \"phone\": \"5551234567\",\n \"departments\": [\n {\n \"departmentId\": \"01\",\n \"name\": \"Drug & General Merchandise\",\n \"phone\": \"5551234567\",\n \"hours\": {\n \"Open24\": false,\n \"monday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"tuesday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"wednesday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"thursday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"friday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"saturday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"sunday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n }\n }\n }\n ],\n \"geolocation\": {\n \"latLng\": \"39.3110881,-84.2751167\",\n \"latitude\": 39.3110881,\n \"longitude\": -84.2751167\n },\n \"hours\": {\n \"Open24\": true,\n \"gmtOffset\": \"(UTC-05:00) Eastern Time (US Canada)\",\n \"timezone\": \"America/New_York\",\n \"friday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"monday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"saturday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"sunday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"thursday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"tuesday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"wednesday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n }\n },\n \"locationId\": \"01400376\",\n \"storeNumber\": \"00376\",\n \"divisionNumber\": \"014\",\n \"name\": \"Kroger Landen\"\n }\n ],\n \"meta\": {\n \"pagination\": {\n \"total\": 0,\n \"start\": 0,\n \"limit\": 0\n },\n \"warnings\": [\"string\"]\n }\n}\n```\n\n### GET /v1/locations/{locationId}\n\n#### Request\n\nProvides access to the details of a specific location by using the locationId.\n\n#### Parameters\n\n- `locationId`\n - Description: The locationId of the store.\n - Example: `01400943`\n - Type: `string`\n - Required: `true`\n - Query: `locationId`\n\n#### Responses\n\n- `200`\n - Description: OK\n - Links: None\n\n01400943\n\n#### Media type\n\n- `application/json`\n - Controls Accept header.\n\n#### Example Value\n\n```json\n{\n \"data\": {\n \"address\": {\n \"addressLine1\": \"2900 W. St. Rt. 22 & 3\",\n \"addressLine2\": \"\",\n \"city\": \"Maineville\",\n \"county\": \"WARREN COUNTY\",\n \"state\": \"OH\",\n \"zipCode\": \"45039\"\n },\n \"chain\": \"KROGER\",\n \"phone\": \"5551234567\",\n \"departments\": [\n {\n \"departmentId\": \"01\",\n \"name\": \"Drug & General Merchandise\",\n \"phone\": \"5551234567\",\n \"hours\": {\n \"Open24\": false,\n \"monday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"tuesday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"wednesday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"thursday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"friday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"saturday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"sunday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n }\n }\n }\n ],\n \"geolocation\": {\n \"latLng\": \"39.3110881,-84.2751167\",\n \"latitude\": 39.3110881,\n \"longitude\": -84.2751167\n },\n \"hours\": {\n \"Open24\": true,\n \"gmtOffset\": \"(UTC-05:00) Eastern Time (US Canada)\",\n \"timezone\": \"America/New_York\",\n \"friday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"monday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"saturday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"sunday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"thursday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"tuesday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n },\n \"wednesday\": {\n \"open\": \"05:00\",\n \"close\": \"1380\",\n \"open24\": false\n }\n },\n \"locationId\": \"01400376\",\n \"storeNumber\": \"00376\",\n \"divisionNumber\": \"014\",\n \"name\": \"Kroger Landen\"\n },\n \"meta\": {\n \"pagination\": {\n \"total\": 0,\n \"start\": 0,\n \"limit\": 0\n },\n \"warnings\": [\"string\"]\n }\n}\n```\n",[],[219,625],"7bf8f82e-3c45-11f0-8b75-9e149126039e","kroger-identity.md","68511d74-3c45-11f0-8d55-9e149126039e",17,["D",1748492957873],"# Kroger Identity\n\n## GET `/v1/identity/profile`\n\nUser profile information\n\nProvides access to the profile id of an authenticated customer.\n\nNote: the customer must be authenticated using the OAuth2 Authorization Code grant type.\n\n### Parameters\n\n- None\n\n### Responses\n\n#### 200 OK\n\n#### Media type\n\napplication/json\n\n#### Example Value\n\n```json\n{\n \"data\": {\n \"id\": \"53990804-cfd1-43f3-8256-bdc9817a4fd0\"\n },\n \"meta\": {\n \"pagination\": {\n \"total\": 0,\n \"start\": 0,\n \"limit\": 0\n },\n \"warnings\": [\"string\"]\n }\n}\n```",[],[219,633],"9cf0f8e2-3c45-11f0-9fec-9e149126039e","kroger-cart.md","9889b4ce-3c45-11f0-85e2-9e149126039e",21,["D",1748493013184],"# Kroger Cart API\n\n## PUT `/v1/cart/add`\n\n### Add to cart\n\nProvides access to add items to an authenticated customer's cart.\n\nNote: the customer must be authenticated using the OAuth2 Authorization Code grant type.\n\n### Parameters\n\n- None\n\n### Request body\n\n- application/json\n- A list of items that you are adding to the cart.\n\n### Example Value\n\n```json\n{\n \"items\": [\n {\n \"quantity\": 1,\n \"upc\": \"0001111060903\",\n \"modality\": \"PICKUP\"\n }\n ]\n}\n```",[],[219,641],"4a2512ec-3c45-11f0-b917-9e149126039e","kroger-authorize.md","3d95585c-3c45-11f0-b917-9e149126039e",["D",1748492874278],"# Kroger Authorize\n\n## Authorization Code\n\nGET `/v1/connect/oauth2/authorize`\n\nThis endpoint is used when the end user must approve access to a protected resource (such as a cart) before a service can act on the user's behalf. Here's how it works:\n\nYour service or application calls this endpoint and includes the redirect URL (what the end user should see after this service executes) and scopes (defines the actions your application or service can take on behalf of the user).\nThis endpoint displays a login screen, where the end user enters their email address and password.\nThe end user is then asked to give the application permission to access the resource on their behalf.\nWhen the user agrees, this service returns the redirect URL with an authorization code as a parameter.\nAfter this endpoint returns, your service or application must call the /token endpoint with the authorization_code grant type and code value to get an access token. The access token is then sent to the endpoint being called to prove that your service or application is authorized to act on a user's behalf.\n\n### Parameters\n\n- `scope` \\*\n\n - string\n - (query)\n The level of access your application is requesting.\n\n- `client_id` \\*\n\n - string\n - (query)\n Your application's client ID.\n\n- `redirect_uri` \\*\n\n - string\n - (query)\n Your registered redirect URL. The redirect URL tells this endpoint which URL to display after the user approves access to the protected resource.\n\n- `response_type` \\*\n\n - string\n - (query)\n Is always `code`.\n\n- `state`\n\n - string\n - (query)\n A random string to verify that the response belongs to the initiated request. The server should always return the same state value as the one specified in the request to protect against forgery attacks.\n\n- `banner`\n\n - string\n - (query)\n - Sets the chain specific branding displayed on the authorization consent screen presented to the end user for shopper logins. When this parameter is not supplied the default chain branding (Kroger) will be used. Only one option may be used at a time and the available options are the following:\n\n- `bakers` - Bakers' Plus\n- `citymarket` - City Market\n- `dillons` - Dillons\n- `fredmeyer` - Fred Meyer\n- `frys` - Fry's Food\n- `gerbes` - Gerbes\n- `kingsoopers` - King Soopers\n- `kroger` - Kroger (default if no banner provided)\n- `metromarket` - Metro Market\n- `picknsave` - Pick 'n Save\n- `qfc` - QFC\n- `ralphs` - Ralphs\n- `smiths` - Smiths Food and Drug\n- `food4less` - Food 4 Less\n- `foodsco` - Foods Co.\n- `harristeeter` - Harris Teeter\n- `vons` - Vons\n- `fredmeyerjewelers` - Fred Meyer\n- `jaycfoods` - Jay C\n- `marianos` - Marianos\n- `payless` - Pay Less\n- `ppsrx` - Postal Prescription Services (PPSRX)\n- `rulerfoods` - Ruler Foods\n- `copps` - Copps\n\n## Access Token\n\nPOST `/v1/connect/oauth2/token`\n\nAll Oauth2 applications are issued \"client credentials\" in the form of a unique client_id and client_secret after registration. The credentials are used to authorize the application.\n\nThere are 3 grant type flows that the token endpoint offers:\n\nauthorization_code - Uses the code returned from the /authorize endpoint to get a token, allowing your service or application to make API requests on an end user's behalf, including accessing personal data. The service is only able to perform the actions specified in the approved scopes.\nclient_credentials - Uses the client credentials to provide a token that allows your service or application to call endpoints that do not require user approval.\nrefresh_token - Allows the application to \"refresh\" an access token that has expired. Refresh tokens are only granted when using the Authorization Code grant type. Using the refresh token eliminates the need to re-authenticate the customer when the access token expires.\nThe access_token received from this step is sent to the endpoint being called to prove that your service or application is authorized to call the API. The token_type field indicates what type of token it is so that you can correctly pass it to the API.\n\n### Parameters\n\n- `Authorization` \\*\n\n - string\n - (header)\n Your client_id:client_secret base64 encoded.\n\n- `Request body`\n - application/x-www-form-urlencoded\n\n### Example Request Body\n\n```json\n{\n \"grant_type\": \"code\",\n \"code\": \"zWrT1GkdshSadIowJW0Rm4w2kKhOzv1W\",\n \"redirect_uri\": \"https://example.com/callback\"\n}\n```\n\n### Example Response\n\n```json\n{\n \"expires_in\": 1800,\n \"access_token\": \"eyJh5GciOiJSUzI1NiGsImtpZCI6Ilo0RnQzbXNrSUj4OGlydDdMQjVjNmc2PSIsInR5cCI6IkpXVmJ9.eqJzY29wZSI6InByb2T1Y3QuY29tcGFjdCBjb3Vwb24uYmFzaWMiLCJhdXRoQXQiOjE1NjUwOTk0OTUzMzIzOTIxMTIsImF1ZCI6InBlcmsvcm1hbmNlLWFnZW50LXB1YmxpYyIsImV4cCI6MTU2NTEwMTI5NSwiaWF0IjoxNTY1MDk5BDkwLCJpc3MiOiJhcGkua3JvZ2VyLmNvbSIsInN1YiI6IjBmZjdkMGIwLWVkOGItNDJmOS1hNTExLWEzMGQyYTAyZDljNSJ9.ej0mov6SGV4n4HiAvduTdYCceMlSo3T06M4Nfh3MfpIjSKzKaLWgd5S0W1EKDXrWz8IE7NTg8EIrL-WKhwdZPt-TWaS7LLjRXLJ0w5rKc44DStgBdvDiCcnKeMsnimjhBlHOiiKUV5y3GbVqJzaDVZwg0j8lP9qtwZP9EIIQ7k409nkskY1pz7l1lZrGotYRJKmnteN5vVQeZ3R8jywIwOOSEbKSgQALVA3Oj02964P7lI6h1GsZ66V5FLA9KU8QXm4ejrFHf1beAIA2zi_fQI3dmW7yj57pWoCECZIjq7Sfo3nGR5rkjEwfyXEK7aTn8oj4_14YHgKRTY-28L96cw\",\n \"token_type\": \"bearer\",\n \"refresh_token\": \"FN20LbaF2EWC6MPMWdemBwwnP4ZmX8\"\n}\n```",[],[219,649],["D",1748492846253],[262,263,264,265,266,267],[219],"e3729468-44e4-11f0-97d6-76b3cceeab13","index.ts",154,["D",1749441030751],42,"http","import { nanoid } from \"https://esm.sh/nanoid@5.0.5\";\nimport { Hono } from \"npm:hono\";\nimport {\n deleteCookie,\n getCookie,\n getSignedCookie,\n setCookie,\n setSignedCookie,\n} from \"npm:hono/cookie\";\n\nimport {\n createGuidance,\n createSelection,\n createUser,\n deleteGuidance,\n deleteSelection,\n getGuidanceByUserId,\n getSelectionByUserAndItem,\n getSelectionsByUserId,\n getUserById,\n getUserByKrogerProfileId,\n searchGuidance,\n updateGuidance,\n updateSelection,\n updateUserLocation,\n updateUserTokens,\n} from \"./database/krogerQueries.ts\";\nimport { runMigrations } from \"./database/migrations.ts\";\n// import { KrogerAuthService } from \"./services/krogerAuth.ts\";\nimport { MockKrogerAuthService } from \"./services/fakeKrogerAuth.ts\";\nimport { UserData } from \"../shared/types.ts\";\nimport { files } from \"./files.ts\";\n\nconst app = new Hono();\n\n// Initialize database on startup\nawait runMigrations();\n\n// Initialize Kroger Auth Service\n// const krogerAuth = new KrogerAuthService();\nconst krogerAuth = new MockKrogerAuthService();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(\"Error in Hono route:\", err);\n return c.json({ error: \"Internal Server Error\", details: err.message }, 500);\n});\n\n// Middleware to get current user from session\nasync function getCurrentUser(c: any) {\n const sessionId = await getSignedCookie(\n c,\n Deno.env.get(\"SESSION_SECRET\"),\n \"session_id\"\n );\n if (!sessionId) return null;\n\n try {\n return await getUserById(sessionId);\n } catch (error) {\n console.error(\"Error getting current user:\", error);\n return null;\n }\n}\n\n// --- OAuth Routes ---\n\n// Start OAuth flow\napp.get(\"/auth/login\", (c) => {\n if (!krogerAuth.isConfigured()) {\n return c.json(\n {\n error: \"OAuth not configured\",\n message:\n \"Please set KROGER_CLIENT_ID, KROGER_CLIENT_SECRET, and KROGER_REDIRECT_URI environment variables\",\n },\n 500\n );\n }\n\n const state = nanoid(16);\n setCookie(c, \"oauth_state\", state, {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n maxAge: 600, // 10 minutes\n });\n\n const authUrl = krogerAuth.getAuthorizationUrl(state);\n return c.redirect(authUrl);\n});\n\n// OAuth callback\napp.get(\"/auth/callback\", async (c) => {\n const code = c.req.query(\"code\");\n const state = c.req.query(\"state\");\n const storedState = getCookie(c, \"oauth_state\");\n\n if (!code) {\n return c.json({ error: \"Authorization code not provided\" }, 400);\n }\n\n if (!state || state !== storedState) {\n return c.json({ error: \"Invalid state parameter\" }, 400);\n }\n\n try {\n // Exchange code for token\n const tokenResponse = await krogerAuth.exchangeCodeForToken(code);\n\n // Get user profile\n const profileResponse = await krogerAuth.getUserProfile(\n tokenResponse.access_token\n );\n const krogerProfileId = profileResponse.data.id;\n\n // Check if user exists\n let user = await getUserByKrogerProfileId(krogerProfileId);\n\n if (user) {\n // Update existing user's tokens\n await updateUserTokens(\n user.id,\n tokenResponse.access_token,\n tokenResponse.refresh_token,\n tokenResponse.expires_in\n );\n user = await getUserById(user.id);\n } else {\n // Create new user\n user = await createUser({\n krogerProfileId,\n accessToken: tokenResponse.access_token,\n refreshToken: tokenResponse.refresh_token,\n tokenExpiresAt: Date.now() + tokenResponse.expires_in * 1000,\n });\n }\n\n // Set session cookie\n await setSignedCookie(\n c,\n \"session_id\",\n user!.id,\n Deno.env.get(\"SESSION_SECRET\"),\n {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n maxAge: 30 * 24 * 60 * 60, // 30 days\n }\n );\n\n // Clear OAuth state\n deleteCookie(c, \"oauth_state\");\n\n return c.redirect(\"/\");\n } catch (error) {\n console.error(\"OAuth callback error:\", error);\n return c.json(\n { error: \"Authentication failed\", details: error.message },\n 500\n );\n }\n});\n\n// Logout\napp.post(\"/auth/logout\", (c) => {\n deleteCookie(c, \"session_id\");\n return c.json({ success: true });\n});\n\n// Get current user info\napp.get(\"/api/user\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n // Don't return sensitive token information\n return c.json({\n id: user.id,\n krogerProfileId: user.krogerProfileId,\n preferredLocationId: user.preferredLocationId,\n createdAt: user.createdAt,\n });\n});\n\n// Update user location\napp.put(\"/api/user/location\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const { locationId } = await c.req.json();\n if (!locationId) {\n return c.json({ error: \"Location ID is required\" }, 400);\n }\n\n await updateUserLocation(user.id, locationId);\n return c.json({ success: true });\n});\n\n// Search locations by zip code\napp.get(\"/api/locations/search\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const zipCode = c.req.query(\"zipCode\");\n const radiusInMiles = parseInt(c.req.query(\"radius\") || \"10\");\n const limit = parseInt(c.req.query(\"limit\") || \"20\");\n\n if (!zipCode) {\n return c.json({ error: \"Zip code is required\" }, 400);\n }\n\n try {\n // Get a valid access token\n const tokenInfo = await krogerAuth.getValidAccessToken(\n user.accessToken,\n user.refreshToken,\n user.tokenExpiresAt\n );\n\n if (!tokenInfo) {\n return c.json({ error: \"Failed to get valid access token\" }, 401);\n }\n\n // Update user tokens if they were refreshed\n if (tokenInfo.accessToken !== user.accessToken) {\n await updateUserTokens(\n user.id,\n tokenInfo.accessToken,\n tokenInfo.refreshToken,\n tokenInfo.expiresIn\n );\n }\n\n // Search for locations\n const locations = await krogerAuth.searchLocationsByZipCode(\n tokenInfo.accessToken,\n zipCode,\n radiusInMiles,\n limit\n );\n\n return c.json(locations);\n } catch (error) {\n console.error(\"Location search error:\", error);\n return c.json(\n { error: \"Failed to search locations\", details: error.message },\n 500\n );\n }\n});\n\n// Get location details by ID\napp.get(\"/api/locations/:locationId\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const locationId = c.req.param(\"locationId\");\n\n try {\n // Get a valid access token\n const tokenInfo = await krogerAuth.getValidAccessToken(\n user.accessToken,\n user.refreshToken,\n user.tokenExpiresAt\n );\n\n if (!tokenInfo) {\n return c.json({ error: \"Failed to get valid access token\" }, 401);\n }\n\n // Update user tokens if they were refreshed\n if (tokenInfo.accessToken !== user.accessToken) {\n await updateUserTokens(\n user.id,\n tokenInfo.accessToken,\n tokenInfo.refreshToken,\n tokenInfo.expiresIn\n );\n }\n\n // Get location details\n const location = await krogerAuth.getLocationById(\n tokenInfo.accessToken,\n locationId\n );\n\n return c.json(location);\n } catch (error) {\n console.error(\"Location fetch error:\", error);\n return c.json(\n { error: \"Failed to fetch location\", details: error.message },\n 500\n );\n }\n});\n\n// --- Guidance Routes ---\n\n// Get all guidance for current user\napp.get(\"/api/guidance\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const guidance = await getGuidanceByUserId(user.id);\n return c.json(guidance);\n});\n\n// Search guidance\napp.get(\"/api/guidance/search\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const itemName = c.req.query(\"q\");\n if (!itemName) {\n return c.json({ error: \"Search query is required\" }, 400);\n }\n\n const guidance = await searchGuidance(user.id, itemName);\n return c.json(guidance);\n});\n\n// Create guidance\napp.post(\"/api/guidance\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const { itemName, guidance } = await c.req.json();\n if (!itemName || !guidance) {\n return c.json({ error: \"Item name and guidance are required\" }, 400);\n }\n\n const newGuidance = await createGuidance({\n userId: user.id,\n itemName,\n guidance,\n });\n\n return c.json(newGuidance, 201);\n});\n\n// Update guidance\napp.put(\"/api/guidance/:id\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const id = c.req.param(\"id\");\n const updates = await c.req.json();\n\n await updateGuidance(id, updates);\n return c.json({ success: true });\n});\n\n// Delete guidance\napp.delete(\"/api/guidance/:id\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const id = c.req.param(\"id\");\n await deleteGuidance(id);\n return c.json({ success: true });\n});\n\n// --- Selection Routes ---\n\n// Get all selections for current user\napp.get(\"/api/selections\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const selections = await getSelectionsByUserId(user.id);\n return c.json(selections);\n});\n\n// Get selection by item name\napp.get(\"/api/selections/item/:itemName\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const itemName = decodeURIComponent(c.req.param(\"itemName\"));\n const selection = await getSelectionByUserAndItem(user.id, itemName);\n\n if (!selection) {\n return c.json({ error: \"Selection not found\" }, 404);\n }\n\n return c.json(selection);\n});\n\n// Create or update selection\napp.post(\"/api/selections\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const { itemName, upc, productName } = await c.req.json();\n if (!itemName || !upc || !productName) {\n return c.json(\n { error: \"Item name, UPC, and product name are required\" },\n 400\n );\n }\n\n const selection = await createSelection({\n userId: user.id,\n itemName,\n upc,\n productName,\n });\n\n return c.json(selection, 201);\n});\n\n// Update selection\napp.put(\"/api/selections/:id\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const id = c.req.param(\"id\");\n const updates = await c.req.json();\n\n await updateSelection(id, updates);\n return c.json({ success: true });\n});\n\n// Delete selection\napp.delete(\"/api/selections/:id\", async (c) => {\n const user = await getCurrentUser(c);\n if (!user) {\n return c.json({ error: \"Not authenticated\" }, 401);\n }\n\n const id = c.req.param(\"id\");\n await deleteSelection(id);\n return c.json({ success: true });\n});\n\n// --- Static File Serving ---\n\n// Serve index.html at the root\napp.get(\"/\", async (c) => {\n let html = await files.readFile(\"/frontend/index.html\", import.meta.url);\n\n // Check if user is authenticated and inject user data\n const user = await getCurrentUser(c);\n if (user) {\n const userData = {\n id: user.id,\n krogerProfileId: user.krogerProfileId,\n preferredLocationId: user.preferredLocationId,\n createdAt: user.createdAt,\n preferredLocation: null,\n } satisfies UserData;\n if (user.preferredLocationId) {\n try {\n // Get a valid access token\n const tokenInfo = await krogerAuth.getValidAccessToken(\n user.accessToken,\n user.refreshToken,\n user.tokenExpiresAt\n );\n\n if (tokenInfo) {\n const location = await krogerAuth.getLocationById(\n tokenInfo.accessToken,\n user.preferredLocationId\n );\n // Map KrogerLocation to Location type\n userData.preferredLocation = {\n locationId: location.data.locationId,\n name: location.data.name,\n storeNumber: location.data.storeNumber,\n phone: location.data.phone,\n address: {\n addressLine1: location.data.address.addressLine1,\n addressLine2: location.data.address.addressLine2,\n city: location.data.address.city,\n state: location.data.address.state,\n zipCode: location.data.address.zipCode,\n },\n };\n }\n } catch (error) {\n console.error(\"Error fetching preferred location:\", error);\n // Continue without location data\n }\n }\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n }\n\n return c.html(html);\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => files.serveFile(c, c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => files.serveFile(c, c.req.path, import.meta.url));\n\nexport default app.fetch;\n\nif (import.meta.main) {\n const port = parseInt(Deno.env.get(\"PORT\") || \"8080\");\n console.log(`Server running on http://localhost:${port}`);\n Deno.serve({ port }, app.fetch);\n}\n","bgschiller-personal-shopper",[],[225,659],"c22e193c-45b4-11f0-8760-76b3cceeab13","files.ts","e33accae-44e4-11f0-97d6-76b3cceeab13",165,["D",1749530310262],"import {\n readFile as valTownReadFile,\n serveFile as valTownServeFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { serveStatic } from \"npm:hono/deno\";\nimport { Context } from \"npm:hono\";\n\nexport interface FileClient {\n readFile(path: string, metaUrl: string): Promise;\n serveFile(c: Context, path: string, metaUrl: string): Promise;\n}\n\nclass ValTownFileClient implements FileClient {\n async readFile(path: string, metaUrl: string): Promise {\n return await valTownReadFile(path, metaUrl);\n }\n\n async serveFile(\n c: Context,\n path: string,\n metaUrl: string\n ): Promise {\n return await valTownServeFile(path, metaUrl);\n }\n}\n\nclass LocalFileClient implements FileClient {\n async readFile(path: string, metaUrl: string): Promise {\n const filePath = new URL(path, metaUrl).pathname;\n return await Deno.readTextFile(filePath);\n }\n\n async serveFile(\n c: Context,\n path: string,\n metaUrl: string\n ): Promise {\n try {\n const filePath = new URL(path, metaUrl).pathname;\n const file = await Deno.readFile(filePath);\n const contentType = getContentType(filePath);\n return new Response(file, {\n headers: {\n \"Content-Type\": contentType,\n },\n });\n } catch (error) {\n if (error instanceof Deno.errors.NotFound) {\n return new Response(\"File not found\", { status: 404 });\n }\n throw error;\n }\n }\n}\n\nfunction getContentType(path: string): string {\n const ext = path.split(\".\").pop()?.toLowerCase();\n switch (ext) {\n case \"html\":\n return \"text/html\";\n case \"css\":\n return \"text/css\";\n case \"js\":\n return \"application/javascript\";\n case \"json\":\n return \"application/json\";\n case \"svg\":\n return \"image/svg+xml\";\n default:\n return \"text/plain\";\n }\n}\n\n// Factory function to create the appropriate file client\nexport function createFileClient(): FileClient {\n // Check if we're running in Val Town\n const isValTown = true; // Deno.env.get(\"VAL_TOWN\") === \"true\";\n\n if (isValTown) {\n return new ValTownFileClient();\n } else {\n return new LocalFileClient();\n }\n}\n\n// Export a singleton instance\nexport const files = createFileClient();\n",[],[225,669],"e37ccd8e-44e4-11f0-859b-76b3cceeab13","krogerAuth.ts","1fdd8df6-3c46-11f0-8692-9e149126039e","b2cee33c-39af-4edf-b69f-34009317b6d6",156,["D",1749441030824],6,"import { KrogerLocationResponse } from \"../../shared/types.ts\";\nimport {\n KrogerTokenResponse,\n KrogerProfileResponse,\n KrogerLocationsResponse,\n} from \"../../shared/types.ts\";\nimport { IKrogerAuthService } from \"../../shared/types.ts\";\n\nconst KROGER_BASE_URL = \"https://api.kroger.com\";\n\nexport class KrogerAuthService implements IKrogerAuthService {\n private clientId: string;\n private clientSecret: string;\n private redirectUri: string;\n\n constructor() {\n this.clientId = Deno.env.get(\"KROGER_CLIENT_ID\") || \"\";\n this.clientSecret = Deno.env.get(\"KROGER_CLIENT_SECRET\") || \"\";\n this.redirectUri = Deno.env.get(\"KROGER_REDIRECT_URI\") || \"\";\n\n if (!this.clientId || !this.clientSecret || !this.redirectUri) {\n console.warn(\n \"Missing Kroger OAuth environment variables. OAuth features will be disabled.\"\n );\n console.warn(\n \"Required variables: KROGER_CLIENT_ID, KROGER_CLIENT_SECRET, KROGER_REDIRECT_URI\"\n );\n }\n }\n\n /**\n * Check if OAuth is properly configured\n */\n isConfigured(): boolean {\n return !!(this.clientId && this.clientSecret && this.redirectUri);\n }\n\n /**\n * Generate the authorization URL for the OAuth flow\n */\n getAuthorizationUrl(state?: string): string {\n const params = new URLSearchParams({\n client_id: this.clientId,\n redirect_uri: this.redirectUri,\n response_type: \"code\",\n scope: \"profile.compact cart.basic:write product.compact\",\n ...(state && { state }),\n });\n\n return `${KROGER_BASE_URL}/v1/connect/oauth2/authorize?${params.toString()}`;\n }\n\n /**\n * Exchange authorization code for access token\n */\n async exchangeCodeForToken(code: string): Promise {\n const credentials = btoa(`${this.clientId}:${this.clientSecret}`);\n\n const response = await fetch(`${KROGER_BASE_URL}/v1/connect/oauth2/token`, {\n method: \"POST\",\n headers: {\n Authorization: `Basic ${credentials}`,\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n },\n body: new URLSearchParams({\n grant_type: \"authorization_code\",\n code,\n redirect_uri: this.redirectUri,\n }),\n });\n\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Token exchange failed: ${response.status} ${errorText}`);\n }\n\n return (await response.json()) as KrogerTokenResponse;\n }\n\n /**\n * Refresh an expired access token\n */\n async refreshToken(refreshToken: string): Promise {\n const credentials = btoa(`${this.clientId}:${this.clientSecret}`);\n\n const response = await fetch(`${KROGER_BASE_URL}/v1/connect/oauth2/token`, {\n method: \"POST\",\n headers: {\n Authorization: `Basic ${credentials}`,\n \"Content-Type\": \"application/x-www-form-urlencoded\",\n },\n body: new URLSearchParams({\n grant_type: \"refresh_token\",\n refresh_token: refreshToken,\n }),\n });\n\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Token refresh failed: ${response.status} ${errorText}`);\n }\n\n return (await response.json()) as KrogerTokenResponse;\n }\n\n /**\n * Get user profile information\n */\n async getUserProfile(accessToken: string): Promise {\n const response = await fetch(`${KROGER_BASE_URL}/v1/identity/profile`, {\n headers: {\n Authorization: `Bearer ${accessToken}`,\n Accept: \"application/json\",\n },\n });\n\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Profile fetch failed: ${response.status} ${errorText}`);\n }\n\n return (await response.json()) as KrogerProfileResponse;\n }\n\n /**\n * Check if a token is expired (with 5 minute buffer)\n */\n isTokenExpired(expiresAt: number): boolean {\n const bufferMs = 5 * 60 * 1000; // 5 minutes\n return Date.now() >= expiresAt - bufferMs;\n }\n\n /**\n * Get a valid access token, refreshing if necessary\n */\n async getValidAccessToken(\n currentToken: string,\n refreshToken: string,\n expiresAt: number\n ): Promise<{\n accessToken: string;\n refreshToken: string;\n expiresIn: number;\n } | null> {\n if (!this.isTokenExpired(expiresAt)) {\n return {\n accessToken: currentToken,\n refreshToken,\n expiresIn: Math.floor((expiresAt - Date.now()) / 1000),\n };\n }\n\n try {\n const tokenResponse = await this.refreshToken(refreshToken);\n return {\n accessToken: tokenResponse.access_token,\n refreshToken: tokenResponse.refresh_token,\n expiresIn: tokenResponse.expires_in,\n };\n } catch (error) {\n console.error(\"Failed to refresh token:\", error);\n return null;\n }\n }\n\n /**\n * Search for Kroger locations by zip code\n */\n async searchLocationsByZipCode(\n accessToken: string,\n zipCode: string,\n radiusInMiles: number = 10,\n limit: number = 20\n ): Promise {\n const params = new URLSearchParams({\n \"filter.zipCode.near\": zipCode,\n \"filter.radiusInMiles\": radiusInMiles.toString(),\n \"filter.limit\": limit.toString(),\n });\n\n const response = await fetch(\n `${KROGER_BASE_URL}/v1/locations?${params.toString()}`,\n {\n headers: {\n Authorization: `Bearer ${accessToken}`,\n Accept: \"application/json\",\n },\n }\n );\n\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(\n `Location search failed: ${response.status} ${errorText}`\n );\n }\n\n return (await response.json()) as KrogerLocationsResponse;\n }\n\n /**\n * Get location details by location ID\n */\n async getLocationById(\n accessToken: string,\n locationId: string\n ): Promise {\n const response = await fetch(\n `${KROGER_BASE_URL}/v1/locations/${locationId}`,\n {\n headers: {\n Authorization: `Bearer ${accessToken}`,\n Accept: \"application/json\",\n },\n }\n );\n\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Location fetch failed: ${response.status} ${errorText}`);\n }\n\n return (await response.json()) as KrogerLocationResponse;\n }\n}\n",[],[225,686,677],"services","e378c95a-44e4-11f0-b49c-76b3cceeab13","fakeKrogerAuth.ts","bc4a479c-3e53-11f0-8b3d-76b3cceeab13",155,["D",1749441030790],"import { IKrogerAuthService } from \"../../shared/types.ts\";\nimport {\n KrogerLocation,\n KrogerLocationResponse,\n KrogerLocationsResponse,\n KrogerProfileResponse,\n KrogerTokenResponse,\n} from \"../../shared/types.ts\";\n\nexport class MockKrogerAuthService implements IKrogerAuthService {\n private redirectUri: string;\n\n constructor() {\n this.redirectUri = Deno.env.get(\"KROGER_REDIRECT_URI\") || \"\";\n\n if (!this.redirectUri) {\n console.warn(\n \"Missing Kroger OAuth environment variables. OAuth features will be disabled.\"\n );\n console.warn(\"Required variables: KROGER_REDIRECT_URI\");\n }\n }\n\n private mockLocations: KrogerLocation[] = [\n {\n storeNumber: \"123\",\n divisionNumber: \"001\",\n geolocation: {\n latLng: \"39.1031,-84.5120\",\n latitude: 39.1031,\n longitude: -84.512,\n },\n departments: [],\n locationId: \"123\",\n chain: \"KROGER\",\n name: \"Mock Kroger Store\",\n address: {\n addressLine1: \"123 Main St\",\n county: \"HAMILTON\",\n city: \"Cincinnati\",\n state: \"OH\",\n zipCode: \"45202\",\n },\n phone: \"555-0123\",\n hours: {\n Open24: false,\n gmtOffset: \"UTC-05:00\",\n timezone: \"America/New_York\",\n monday: { open: \"06:00\", close: \"23:00\", open24: false },\n tuesday: { open: \"06:00\", close: \"23:00\", open24: false },\n wednesday: { open: \"06:00\", close: \"23:00\", open24: false },\n thursday: { open: \"06:00\", close: \"23:00\", open24: false },\n friday: { open: \"06:00\", close: \"23:00\", open24: false },\n saturday: { open: \"06:00\", close: \"23:00\", open24: false },\n sunday: { open: \"06:00\", close: \"23:00\", open24: false },\n },\n },\n ];\n\n isConfigured(): boolean {\n return true;\n }\n\n getAuthorizationUrl(state?: string): string {\n return this.redirectUri + \"?state=\" + state;\n }\n\n async exchangeCodeForToken(_code: string): Promise {\n return {\n access_token: \"mock_access_token\",\n refresh_token: \"mock_refresh_token\",\n expires_in: 3600,\n token_type: \"Bearer\",\n };\n }\n\n async refreshToken(_refreshToken: string): Promise {\n return {\n access_token: \"mock_access_token\",\n refresh_token: \"mock_refresh_token\",\n expires_in: 3600,\n token_type: \"Bearer\",\n };\n }\n\n async getUserProfile(_accessToken: string): Promise {\n return {\n data: {\n id: \"mock_user_id\",\n },\n meta: {\n warnings: [],\n pagination: {\n start: 0,\n limit: 1,\n total: 1,\n },\n },\n };\n }\n\n isTokenExpired(expiresAt: number): boolean {\n return Date.now() >= expiresAt;\n }\n\n async getValidAccessToken(\n currentToken: string,\n refreshToken: string,\n expiresAt: number\n ): Promise<{\n accessToken: string;\n refreshToken: string;\n expiresIn: number;\n } | null> {\n if (!this.isTokenExpired(expiresAt)) {\n return {\n accessToken: currentToken,\n refreshToken,\n expiresIn: Math.floor((expiresAt - Date.now()) / 1000),\n };\n }\n\n try {\n const tokenResponse = await this.refreshToken(refreshToken);\n return {\n accessToken: tokenResponse.access_token,\n refreshToken: tokenResponse.refresh_token,\n expiresIn: tokenResponse.expires_in,\n };\n } catch (error) {\n console.error(\"Failed to refresh token:\", error);\n return null;\n }\n }\n\n async searchLocationsByZipCode(\n _accessToken: string,\n _zipCode: string,\n _radiusInMiles: number = 10,\n limit: number = 20\n ): Promise {\n return {\n data: this.mockLocations,\n meta: {\n warnings: [],\n pagination: {\n start: 0,\n limit,\n total: this.mockLocations.length,\n },\n },\n };\n }\n\n async getLocationById(\n accessToken: string,\n locationId: string\n ): Promise {\n const location = this.mockLocations.find(\n (loc) => loc.locationId === locationId\n );\n if (!location) {\n throw new Error(`Location not found: ${locationId}`);\n }\n return { data: location };\n }\n}\n",[],[225,686,688],"1fddabba-3c46-11f0-8692-9e149126039e",25,["D",1748493232842],[257,258],[225,686],"e3be8f44-44e4-11f0-bff1-76b3cceeab13","migrations.ts","018e6da2-3c46-11f0-b1b1-9e149126039e","535efc0c-e0d1-40a5-835e-46a55d512690",161,["D",1749441030607],"import { db } from \"./db.ts\";\n\n// Table names - change these when modifying schemas\nconst USERS_TABLE = \"kroger_users_1\";\nconst GUIDANCE_TABLE = \"guidance_1\";\nconst SELECTIONS_TABLE = \"selections_1\";\n\nexport async function runMigrations() {\n // Create users table\n await db.execute(`\n CREATE TABLE IF NOT EXISTS ${USERS_TABLE} (\n id TEXT PRIMARY KEY,\n krogerProfileId TEXT UNIQUE NOT NULL,\n accessToken TEXT NOT NULL,\n refreshToken TEXT NOT NULL,\n tokenExpiresAt INTEGER NOT NULL,\n preferredLocationId TEXT,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL\n )\n `);\n\n // Create guidance table\n await db.execute(`\n CREATE TABLE IF NOT EXISTS ${GUIDANCE_TABLE} (\n id TEXT PRIMARY KEY,\n userId TEXT NOT NULL,\n itemName TEXT NOT NULL,\n guidance TEXT NOT NULL,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL,\n FOREIGN KEY (userId) REFERENCES ${USERS_TABLE}(id) ON DELETE CASCADE\n )\n `);\n\n // Create selections table\n await db.execute(`\n CREATE TABLE IF NOT EXISTS ${SELECTIONS_TABLE} (\n id TEXT PRIMARY KEY,\n userId TEXT NOT NULL,\n itemName TEXT NOT NULL,\n upc TEXT NOT NULL,\n productName TEXT NOT NULL,\n createdAt INTEGER NOT NULL,\n updatedAt INTEGER NOT NULL,\n FOREIGN KEY (userId) REFERENCES ${USERS_TABLE}(id) ON DELETE CASCADE,\n UNIQUE(userId, itemName)\n )\n `);\n\n // Create indexes for better performance\n await db.execute(`\n CREATE INDEX IF NOT EXISTS idx_guidance_user_item\n ON ${GUIDANCE_TABLE}(userId, itemName)\n `);\n\n await db.execute(`\n CREATE INDEX IF NOT EXISTS idx_selections_user_item\n ON ${SELECTIONS_TABLE}(userId, itemName)\n `);\n}\n\nexport { USERS_TABLE, GUIDANCE_TABLE, SELECTIONS_TABLE };\n",[],[225,709,701],"database","e36b2660-44e4-11f0-97d6-76b3cceeab13","krogerQueries.ts","13ca9f2c-3c46-11f0-8b7c-9e149126039e",153,["D",1749441030707],"import { nanoid } from \"https://esm.sh/nanoid@5.0.5\";\nimport { KrogerUser, Guidance, Selection } from \"../../shared/types.ts\";\nimport { USERS_TABLE, GUIDANCE_TABLE, SELECTIONS_TABLE } from \"./migrations.ts\";\nimport { db } from \"./db.ts\";\n\n// User queries\nexport async function createUser(\n userData: Omit\n): Promise {\n const id = nanoid(10);\n const now = Date.now();\n\n const user: KrogerUser = {\n ...userData,\n id,\n createdAt: now,\n updatedAt: now,\n };\n\n await db.execute(\n `\n INSERT INTO ${USERS_TABLE}\n (id, krogerProfileId, accessToken, refreshToken, tokenExpiresAt, preferredLocationId, createdAt, updatedAt)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?)\n `,\n [\n user.id,\n user.krogerProfileId,\n user.accessToken,\n user.refreshToken,\n user.tokenExpiresAt,\n user.preferredLocationId || null,\n user.createdAt,\n user.updatedAt,\n ]\n );\n\n return user;\n}\n\nexport async function getUserByKrogerProfileId(\n krogerProfileId: string\n): Promise {\n const result = await db.execute(\n `\n SELECT * FROM ${USERS_TABLE} WHERE krogerProfileId = ?\n `,\n [krogerProfileId]\n );\n\n if (result.rows.length === 0) return null;\n\n const row = result.rows[0];\n return {\n id: row.id as string,\n krogerProfileId: row.krogerProfileId as string,\n accessToken: row.accessToken as string,\n refreshToken: row.refreshToken as string,\n tokenExpiresAt: row.tokenExpiresAt as number,\n preferredLocationId: row.preferredLocationId as string | undefined,\n createdAt: row.createdAt as number,\n updatedAt: row.updatedAt as number,\n };\n}\n\nexport async function getUserById(id: string): Promise {\n const result = await db.execute(\n `\n SELECT * FROM ${USERS_TABLE} WHERE id = ?\n `,\n [id]\n );\n\n if (result.rows.length === 0) return null;\n\n const row = result.rows[0];\n return {\n id: row.id as string,\n krogerProfileId: row.krogerProfileId as string,\n accessToken: row.accessToken as string,\n refreshToken: row.refreshToken as string,\n tokenExpiresAt: row.tokenExpiresAt as number,\n preferredLocationId: row.preferredLocationId as string | undefined,\n createdAt: row.createdAt as number,\n updatedAt: row.updatedAt as number,\n };\n}\n\nexport async function updateUserTokens(\n userId: string,\n accessToken: string,\n refreshToken: string,\n expiresIn: number\n): Promise {\n const tokenExpiresAt = Date.now() + expiresIn * 1000;\n const updatedAt = Date.now();\n\n await db.execute(\n `\n UPDATE ${USERS_TABLE}\n SET accessToken = ?, refreshToken = ?, tokenExpiresAt = ?, updatedAt = ?\n WHERE id = ?\n `,\n [accessToken, refreshToken, tokenExpiresAt, updatedAt, userId]\n );\n}\n\nexport async function updateUserLocation(\n userId: string,\n locationId: string\n): Promise {\n const updatedAt = Date.now();\n\n await db.execute(\n `\n UPDATE ${USERS_TABLE}\n SET preferredLocationId = ?, updatedAt = ?\n WHERE id = ?\n `,\n [locationId, updatedAt, userId]\n );\n}\n\n// Guidance queries\nexport async function createGuidance(\n guidanceData: Omit\n): Promise {\n const id = nanoid(10);\n const now = Date.now();\n\n const guidance: Guidance = {\n ...guidanceData,\n id,\n createdAt: now,\n updatedAt: now,\n };\n\n await db.execute(\n `\n INSERT INTO ${GUIDANCE_TABLE}\n (id, userId, itemName, guidance, createdAt, updatedAt)\n VALUES (?, ?, ?, ?, ?, ?)\n `,\n [\n guidance.id,\n guidance.userId,\n guidance.itemName,\n guidance.guidance,\n guidance.createdAt,\n guidance.updatedAt,\n ]\n );\n\n return guidance;\n}\n\nexport async function getGuidanceByUserId(userId: string): Promise {\n const result = await db.execute(\n `\n SELECT * FROM ${GUIDANCE_TABLE} WHERE userId = ? ORDER BY updatedAt DESC\n `,\n [userId]\n );\n\n return result.rows.map((row) => ({\n id: row.id as string,\n userId: row.userId as string,\n itemName: row.itemName as string,\n guidance: row.guidance as string,\n createdAt: row.createdAt as number,\n updatedAt: row.updatedAt as number,\n }));\n}\n\nexport async function searchGuidance(\n userId: string,\n itemName: string\n): Promise {\n const result = await db.execute(\n `\n SELECT * FROM ${GUIDANCE_TABLE}\n WHERE userId = ? AND (itemName LIKE ? OR guidance LIKE ?)\n ORDER BY\n CASE WHEN itemName LIKE ? THEN 1 ELSE 2 END,\n updatedAt DESC\n `,\n [userId, `%${itemName}%`, `%${itemName}%`, `%${itemName}%`]\n );\n\n return result.rows.map((row) => ({\n id: row.id as string,\n userId: row.userId as string,\n itemName: row.itemName as string,\n guidance: row.guidance as string,\n createdAt: row.createdAt as number,\n updatedAt: row.updatedAt as number,\n }));\n}\n\nexport async function updateGuidance(\n id: string,\n updates: Partial>\n): Promise {\n const fields = Object.keys(updates);\n const values = Object.values(updates);\n\n if (fields.length === 0) return;\n\n const setClause = fields.map((field) => `${field} = ?`).join(\", \");\n const updatedAt = Date.now();\n\n await db.execute(\n `\n UPDATE ${GUIDANCE_TABLE}\n SET ${setClause}, updatedAt = ?\n WHERE id = ?\n `,\n [...values, updatedAt, id]\n );\n}\n\nexport async function deleteGuidance(id: string): Promise {\n await db.execute(`DELETE FROM ${GUIDANCE_TABLE} WHERE id = ?`, [id]);\n}\n\n// Selection queries\nexport async function createSelection(\n selectionData: Omit\n): Promise {\n const id = nanoid(10);\n const now = Date.now();\n\n const selection: Selection = {\n ...selectionData,\n id,\n createdAt: now,\n updatedAt: now,\n };\n\n await db.execute(\n `\n INSERT OR REPLACE INTO ${SELECTIONS_TABLE}\n (id, userId, itemName, upc, productName, createdAt, updatedAt)\n VALUES (?, ?, ?, ?, ?, ?, ?)\n `,\n [\n selection.id,\n selection.userId,\n selection.itemName,\n selection.upc,\n selection.productName,\n selection.createdAt,\n selection.updatedAt,\n ]\n );\n\n return selection;\n}\n\nexport async function getSelectionByUserAndItem(\n userId: string,\n itemName: string\n): Promise {\n const result = await db.execute(\n `\n SELECT * FROM ${SELECTIONS_TABLE} WHERE userId = ? AND itemName = ?\n `,\n [userId, itemName]\n );\n\n if (result.rows.length === 0) return null;\n\n const row = result.rows[0];\n return {\n id: row.id as string,\n userId: row.userId as string,\n itemName: row.itemName as string,\n upc: row.upc as string,\n productName: row.productName as string,\n createdAt: row.createdAt as number,\n updatedAt: row.updatedAt as number,\n };\n}\n\nexport async function getSelectionsByUserId(\n userId: string\n): Promise {\n const result = await db.execute(\n `\n SELECT * FROM ${SELECTIONS_TABLE} WHERE userId = ? ORDER BY updatedAt DESC\n `,\n [userId]\n );\n\n return result.rows.map((row) => ({\n id: row.id as string,\n userId: row.userId as string,\n itemName: row.itemName as string,\n upc: row.upc as string,\n productName: row.productName as string,\n createdAt: row.createdAt as number,\n updatedAt: row.updatedAt as number,\n }));\n}\n\nexport async function updateSelection(\n id: string,\n updates: Partial>\n): Promise {\n const fields = Object.keys(updates);\n const values = Object.values(updates);\n\n if (fields.length === 0) return;\n\n const setClause = fields.map((field) => `${field} = ?`).join(\", \");\n const updatedAt = Date.now();\n\n await db.execute(\n `\n UPDATE ${SELECTIONS_TABLE}\n SET ${setClause}, updatedAt = ?\n WHERE id = ?\n `,\n [...values, updatedAt, id]\n );\n}\n\nexport async function deleteSelection(id: string): Promise {\n await db.execute(`DELETE FROM ${SELECTIONS_TABLE} WHERE id = ?`, [id]);\n}\n",[],[225,709,711],"7ceadc3e-45b4-11f0-9d1b-76b3cceeab13","db.ts","e335193a-44e4-11f0-bb93-76b3cceeab13",164,["D",1749530194052],"import {\n InValue,\n sqlite as valTownSqlite,\n} from \"https://esm.town/v/stevekrouse/sqlite\";\n// import { BindParameters, Database } from \"https://deno.land/x/sqlite3/mod.ts\";\n\nexport interface QueryResult {\n rows: Record[];\n rowCount?: number;\n}\n\nexport interface DatabaseClient {\n execute(query: string, params?: unknown[]): Promise;\n}\n\nclass ValTownDatabaseClient implements DatabaseClient {\n async execute(query: string, params: InValue[] = []): Promise {\n const result = await valTownSqlite.execute(query, params);\n return {\n rows: result.rows,\n rowCount: result.rows.length,\n };\n }\n}\n\n// class LocalDatabaseClient implements DatabaseClient {\n// private db: Database;\n\n// constructor(dbPath: string) {\n// this.db = new Database(dbPath);\n// }\n\n// async execute(\n// query: string,\n// params: BindParameters[] = []\n// ): Promise {\n// const stmt = this.db.prepare(query);\n// const rows = stmt.all(params) as Record[];\n// return {\n// rows,\n// rowCount: rows.length,\n// };\n// }\n\n// close() {\n// this.db.close();\n// }\n// }\n\n// Factory function to create the appropriate database client\nexport function createDatabaseClient(): DatabaseClient {\n // Check if we're running in Val Town\n // const isValTown = Deno.env.get(\"VAL_TOWN\") === \"true\";\n\n // if (isValTown) {\n return new ValTownDatabaseClient();\n // } else {\n // For local development, use a file-based SQLite database\n // const dbPath = Deno.env.get(\"DB_PATH\") || \"./local.db\";\n // return new LocalDatabaseClient(dbPath);\n // }\n}\n\n// Export a singleton instance\nexport const db = createDatabaseClient();\n",[],[225,709,719],"018e900c-3c46-11f0-b1b1-9e149126039e",["D",1748493181993],[253,254,255],[225,709],["D",1748493181993],[252,256,259,260],[225],"e344817c-44e4-11f0-97d6-76b3cceeab13","preview.tsx","e344824e-44e4-11f0-97d6-76b3cceeab13",148,["D",1749441030458],"import type { Preview } from \"@storybook/react\";\nimport \"../frontend/style.css\";\n\nconst preview: Preview = {\n parameters: {\n actions: { argTypesRegex: \"^on[A-Z].*\" },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n layout: \"centered\",\n },\n};\n\nexport default preview;\n",[],[231,734],"e34a663c-44e4-11f0-b4ed-76b3cceeab13","preview-head.html","e34a670e-44e4-11f0-b4ed-76b3cceeab13",149,["D",1749441030497],"\n",[],[231,742],"e34040c6-44e4-11f0-bff1-76b3cceeab13","e34041c0-44e4-11f0-bff1-76b3cceeab13",147,["D",1749441030429],"import type { StorybookConfig } from \"@storybook/react-vite\";\n\nconst config: StorybookConfig = {\n stories: [\"../frontend/components/**/*.stories.tsx\"],\n addons: [\n \"@storybook/addon-links\",\n \"@storybook/addon-essentials\",\n \"@storybook/addon-interactions\",\n ],\n framework: {\n name: \"@storybook/react-vite\",\n options: {},\n },\n docs: {\n autodocs: \"tag\",\n },\n viteFinal: async (config) => {\n return {\n ...config,\n resolve: {\n ...config.resolve,\n alias: {\n ...config.resolve?.alias,\n \"@\": \"/frontend\",\n },\n },\n };\n },\n};\n\nexport default config;\n",[],[231,32],["D",1749441029546],[248,249,250],[231],["D",1748492167939],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":53,"_103":104,"_105":24},{"_13":84,"_31":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":93,"_94":95,"_96":44,"_97":98},"ctx",{"_77":-5,"_128":796,"_797":798,"_799":800,"_801":24,"_802":24,"_803":24,"_804":57,"_805":-5,"_806":-7,"_807":-7,"_808":169,"_809":24,"_810":24,"_811":-5,"_812":24,"_813":24,"_814":24,"_815":-5},"ENV",{"_767":768,"_769":770,"_771":85,"_772":773,"_774":775,"_776":777,"_778":779,"_780":781,"_782":783,"_784":785,"_786":787,"_788":789,"_790":791,"_792":793,"_794":795},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v195