@gurpinderjitsingh/recipe-ui 0.2.1 → 0.4.0

package/dist/cjs/app-modal_7.cjs.entry.js

@@ -19,7 +19,7 @@ const RecipeCard = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'c9dc0d8c98899cf188fc46c72b5e809831332f24', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: '12e0512dc7ee78f46843f81483c5f7bf1fbc3616', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: '95ab4db232ee878d61e272ce7a4814a48790c01d', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: 'a2906c670d693a473b87042ff6b0ada03627205b', class: "body" }, index.h("h3", { key: '2b0f4afecfdfd9cc996dcec29bd86957687667e3' }, this.recipeTitle), this.category && index.h("span", { key: '1b9c31d2723d2c87d51021569271366bac550a2f', class: "category" }, this.category), index.h("div", { key: 'd79b1cc33dcced145c3551874f69b581b4734297', class: "actions" }, index.h("slot", { key: '9a43cf770ea8fa189564fbe14f4f135a4d8e9551', name: "actions" })))));
+        return (index.h("div", { key: '72e604b38c4156bfe101f0609fac315cd317c981', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: 'bb707d57e573970201644e029eb6257e100e2276', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: 'bb052a897f227e8b8ca938704a083d8502036037', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: 'e4c139b9bdbdac25e92def0705d8506d89a0ce65', class: "body" }, index.h("h3", { key: 'aea91bd0827cdbe2608d91b428489a11eb7de0fa' }, this.recipeTitle), this.category && index.h("span", { key: '96219817064ee274999487452db6c70dee93d82f', class: "category" }, this.category), index.h("div", { key: 'c2593b0d879744a24c4be179af1d9359e3e904fa', class: "actions" }, index.h("slot", { key: '19e921048e6d469a33531c2bb949067a7925c7ac', name: "actions" })))));
     }
 };
 RecipeCard.style = recipeCardCss();
@@ -55,7 +55,7 @@ const RecipeSearchBar = class {
         this.internalValue = newVal;
     }
     render() {
-        return (index.h("div", { key: 'b55c496d5c2968b4b79c40b9333c62ed4653e76d', class: "wrap" }, index.h("input", { key: '081ae0dfde47acca677c746bc88cda1864eac851', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), index.h("button", { key: '44cde335aec87330bb4486883c9cf836a6855ad0', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
+        return (index.h("div", { key: '7fa4a3ce06ef9b7e68b968a0bf29cce896cc7db0', class: "wrap" }, index.h("input", { key: 'ae2e528fafd1f342de8a88c14f0651857bc0486d', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), index.h("button", { key: 'c9a369dca794014f17cd64cfaa4b7b9f0e06d171', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
     }
     static get watchers() { return {
         "value": [{
@@ -79,7 +79,7 @@ const RecipeFilterBar = class {
     }
     render() {
         const cats = Array.isArray(this.categories) ? this.categories : [];
-        return (index.h("div", { key: '90b26633c07d813221b1cc44705c5fe510de994f', class: "wrap" }, index.h("button", { key: 'a41696529d8611f283460da1efe9205bd0b36260', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (index.h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
+        return (index.h("div", { key: '336e3431325ab3338cda5be917414c6be4be1cf9', class: "wrap" }, index.h("button", { key: 'f1a5c228cf9ef1dd2017b26be55afdd07e27c837', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (index.h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
     }
 };
 RecipeFilterBar.style = recipeFilterBarCss();
@@ -96,21 +96,34 @@ const RecipeRating = class {
     }
     render() {
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (index.h("div", { key: '2d5251ae7d3a24d613b759e89ba78de1568426d8', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (index.h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
+        return (index.h("div", { key: '9e67a7c471e6b20bbc2bc0164a5346c8cd5f10dc', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (index.h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
     }
 };
 RecipeRating.style = recipeRatingCss();
 
-const recipeFormCss = () => `:host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}`;
+const recipeFormCss = () => `:host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea,select{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;background:#fff;transition:border-color 0.15s ease, box-shadow 0.15s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:#ff6b35;box-shadow:0 0 0 3px rgba(255, 107, 53, 0.14)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;cursor:pointer;color:#1f2937;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}select:hover{border-color:#bbb}select:invalid,select option[value=""]{color:#9ca3af}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width: 480px){.row{grid-template-columns:1fr}}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}`;
 
+const DEFAULT_AREAS = [
+    'American', 'British', 'Chinese', 'Croatian', 'Dutch', 'Egyptian',
+    'Filipino', 'French', 'Greek', 'Indian', 'Irish', 'Italian', 'Jamaican',
+    'Japanese', 'Kenyan', 'Malaysian', 'Mexican', 'Moroccan', 'Polish',
+    'Portuguese', 'Russian', 'Spanish', 'Thai', 'Tunisian', 'Turkish',
+    'Vietnamese', 'Other',
+];
 const RecipeForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.save = index.createEvent(this, "save");
         this.cancel = index.createEvent(this, "cancel");
+        /** Full override of the cuisine dropdown options */
+        this.areas = DEFAULT_AREAS;
+        /** Additional cuisine options merged in before "Other" */
+        this.extraAreas = [];
         this.title = '';
         this.image = '';
         this.category = '';
+        this.area = '';
+        this.customArea = '';
         this.ingredients = [''];
         this.instructions = '';
         this.errors = {};
@@ -118,11 +131,13 @@ const RecipeForm = class {
             e.preventDefault();
             if (!this.validate())
                 return;
+            const resolvedArea = this.area === 'Other' ? this.customArea.trim() : this.area;
             const data = {
                 id: this.initialData?.id,
                 title: this.title.trim(),
                 image: this.image.trim(),
                 category: this.category.trim(),
+                area: resolvedArea,
                 ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
                 instructions: this.instructions.trim(),
             };
@@ -141,6 +156,16 @@ const RecipeForm = class {
     onInitialDataChange() {
         this.loadInitialData();
     }
+    get fullAreaList() {
+        const withoutOther = this.areas.filter((a) => a !== 'Other');
+        const merged = [...withoutOther];
+        for (const extra of this.extraAreas) {
+            if (extra && !merged.includes(extra))
+                merged.push(extra);
+        }
+        merged.push('Other');
+        return merged;
+    }
     loadInitialData() {
         let data;
         if (typeof this.initialData === 'string' && this.initialData) {
@@ -160,19 +185,29 @@ const RecipeForm = class {
             this.category = data.category ?? '';
             this.ingredients = data.ingredients?.length ? [...data.ingredients] : [''];
             this.instructions = data.instructions ?? '';
+            const knownAreas = this.fullAreaList.filter((a) => a !== 'Other');
+            if (data.area && !knownAreas.includes(data.area)) {
+                this.area = 'Other';
+                this.customArea = data.area;
+            }
+            else {
+                this.area = data.area ?? '';
+                this.customArea = '';
+            }
         }
     }
     validate() {
         const errors = {};
         if (!this.title.trim())
             errors.title = 'Title is required.';
-        if (!this.category.trim())
-            errors.category = 'Category is required.';
         const cleanIngredients = this.ingredients.map((i) => i.trim()).filter(Boolean);
         if (cleanIngredients.length === 0)
             errors.ingredients = 'Add at least one ingredient.';
         if (!this.instructions.trim())
             errors.instructions = 'Instructions are required.';
+        if (this.area === 'Other' && !this.customArea.trim()) {
+            errors.customArea = 'Enter a cuisine name.';
+        }
         this.errors = errors;
         return Object.keys(errors).length === 0;
     }
@@ -182,7 +217,7 @@ const RecipeForm = class {
         this.ingredients = next;
     }
     render() {
-        return (index.h("form", { key: 'd7bf28b14b5d445221c52595bd827f49eed9306b', onSubmit: this.onSubmit }, index.h("slot", { key: '0ffc3f7fd2e5a15771ae36629365c53b1c44d934', name: "header" }), index.h("label", { key: '617617d1d4e5b9cbfc506340f3ffcab0364bb402' }, "Title", index.h("input", { key: '9be17e32164005466bf208323380603e33e43f6e', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && index.h("span", { key: 'e1ecebe7af1b6b13a392f4ceb99651c6f87aea43', class: "error" }, this.errors.title)), index.h("label", { key: '6ce777cc37e11e9c063e43e301d9c93fa7ddf4b4' }, "Image URL", index.h("input", { key: '37839fabadb556def7f240e8116629315ca1ad73', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), index.h("label", { key: 'c870efae293faecf06e5d9481d302779c77aac39' }, "Category", index.h("input", { key: '1cc8a5a113ac6a215dc0c53b43c1f9167afd69f4', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) }), this.errors.category && index.h("span", { key: 'ed78cadd9df6f24e700aebc6f85ce993c3d4746b', class: "error" }, this.errors.category)), index.h("div", { key: '0cbed02ba6b4b021d7cce4ffd9fb3e041452db00', class: "field" }, index.h("span", { key: '6e8023d7fa1c3a345ac8a1ffca9de1b57af25e8c' }, "Ingredients"), this.ingredients.map((ing, i) => (index.h("div", { class: "ingredient-row" }, index.h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), index.h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), index.h("button", { key: 'c6fe3f2daad8c3f19daa3570c6e593c6b089aa57', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && index.h("span", { key: 'bfec646ff34633a03d6b3368c5fb095bc3066025', class: "error" }, this.errors.ingredients)), index.h("label", { key: 'd3487e03e2c26afe9b3807a9d1f1240dabb30373' }, "Instructions", index.h("textarea", { key: 'ade48aaca40198665a1fb1525834c27ec0ad0350', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && index.h("span", { key: 'c90068359e0448b350af5e8b15e50cce682a1615', class: "error" }, this.errors.instructions)), index.h("div", { key: '2621aec625328743a60c79e49275384017000ccb', class: "footer" }, index.h("slot", { key: '5d1466af5beba19e66612a7343727ab71e44455f', name: "footer" }), index.h("button", { key: '5a4883d864051e8081b6a7e1f5c1fb10e7bc5c1a', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), index.h("button", { key: '64d4c7e5cad53b1376dce3e73860fc3d4b4d9ff2', type: "submit", class: "save-btn" }, "Save Recipe"))));
+        return (index.h("form", { key: 'b9e50e96b20b8f3bb28ecb516b102c87088daddd', onSubmit: this.onSubmit }, index.h("slot", { key: '648424eb3444acdacb69e541799571ffa6572004', name: "header" }), index.h("label", { key: '77ec1e8acd2ba845262909f672fadf06907702f2' }, "Title", index.h("input", { key: '2f5dd98ab985831eb07ac43afed983908f2646d1', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && index.h("span", { key: '244560b4dc4cb47cbb514d0f8fe41be267299885', class: "error" }, this.errors.title)), index.h("label", { key: '8bb49420325a7629186a5801162b9a2e4321e4f7' }, "Image URL", index.h("input", { key: 'fe121c2389308b5bc0e6f7b977f15fec91f9baae', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), index.h("div", { key: '2ede3939f5230f805841945a29fc37fc4d2f3627', class: "row" }, index.h("label", { key: 'b736ee46a12a1070cb52c76fc41d31e0f8d1169b' }, "Category", index.h("input", { key: '6952f8378b13313c1c63d2cb1b1cd9c2593d1806', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) })), index.h("label", { key: 'a6e477f0bfdfbab6a75831a62334b665272a98db' }, "Cuisine / Area", index.h("select", { key: '1434d68a1782d19f92cd2d5ef638f440a8adc7dd', onInput: (e) => (this.area = e.target.value) }, index.h("option", { key: 'a40b1cacf4deb98590689325f23e572522069268', value: "", selected: this.area === '' }, "Select a cuisine\u2026"), this.fullAreaList.map((a) => (index.h("option", { value: a, selected: a === this.area }, a)))))), this.area === 'Other' && (index.h("label", { key: '77ab0849f544aacc7c2a207dc222c916dfb7a41b', class: "custom-area-field" }, "Enter cuisine name", index.h("input", { key: 'fd7c97a89c0e2b8f23cc28fbc502563eb759fdb4', type: "text", placeholder: "e.g. Ethiopian", value: this.customArea, onInput: (e) => (this.customArea = e.target.value) }), this.errors.customArea && index.h("span", { key: '2b2425b63b0d5ee311fe16040d012a43919c8ca6', class: "error" }, this.errors.customArea))), index.h("div", { key: 'fafa1824f121c9c2c96069772d2011a13ce0683f', class: "field" }, index.h("span", { key: 'bea9e5877093e412b1fffb12f0aad4c79604cc16' }, "Ingredients"), this.ingredients.map((ing, i) => (index.h("div", { class: "ingredient-row" }, index.h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), index.h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), index.h("button", { key: 'fc7a817c01706f4f99594ff09a72fa8b046f4820', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && index.h("span", { key: 'd4b4bee30e1369f951f0aabe7f54b0b1ae393a83', class: "error" }, this.errors.ingredients)), index.h("label", { key: '5028ae3ead65e280a2196f93d5f31580a5f8c95a' }, "Instructions", index.h("textarea", { key: '08461bc98ab47d1f2240dfa23e1ec1264de12002', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && index.h("span", { key: '932de400651f180d7e5b14e4ff118ccdcd24d2b3', class: "error" }, this.errors.instructions)), index.h("div", { key: '7da02b77a1390447a738882d0104292b28f675b0', class: "footer" }, index.h("slot", { key: '74ed118f385e1e6e1318dd405aa0008e195ef9c0', name: "footer" }), index.h("button", { key: 'e2548efd3826d3a984c11cd6d7bd486e226c8ca9', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), index.h("button", { key: '8011e51d4579a0e6ddd88cd8c83708524551d801', type: "submit", class: "save-btn" }, "Save Recipe"))));
     }
     static get watchers() { return {
         "initialData": [{

package/dist/cjs/app-toast.cjs.entry.js

@@ -18,7 +18,7 @@ const AppToast = class {
         }
     }
     render() {
-        return (index.h("div", { key: '41fc3560c508b3b36863417af6d8f0aa2ad26004', class: `toast ${this.type}` }, index.h("span", { key: 'b29ea7dbe53aa72524039f1ce0fea5c50406d1f0' }, this.message), index.h("button", { key: '3b42fc8485a5d438bb29b5eab2e3ba5ab831731b', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
+        return (index.h("div", { key: '40cf0d0171712b45dd8786bd69aa2f94a1fc7335', class: `toast ${this.type}` }, index.h("span", { key: '5256c39505158066715c94420ff65a479a7ab382' }, this.message), index.h("button", { key: '523f0f7617a902910d13179147ca75fa57499433', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
     }
 };
 AppToast.style = appToastCss();

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[257,"recipe-form",{"initialData":[1,"initial-data"],"title":[32],"image":[32],"category":[32],"ingredients":[32],"instructions":[32],"errors":[32]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
+  return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[257,"recipe-form",{"initialData":[1,"initial-data"],"areas":[16],"extraAreas":[16],"title":[32],"image":[32],"category":[32],"area":[32],"customArea":[32],"ingredients":[32],"instructions":[32],"errors":[32]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/recipe-ui.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[257,"recipe-form",{"initialData":[1,"initial-data"],"title":[32],"image":[32],"category":[32],"ingredients":[32],"instructions":[32],"errors":[32]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
+  return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[257,"recipe-form",{"initialData":[1,"initial-data"],"areas":[16],"extraAreas":[16],"title":[32],"image":[32],"category":[32],"area":[32],"customArea":[32],"ingredients":[32],"instructions":[32],"errors":[32]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/app-toast/app-toast.js

@@ -12,7 +12,7 @@ export class AppToast {
         }
     }
     render() {
-        return (h("div", { key: '41fc3560c508b3b36863417af6d8f0aa2ad26004', class: `toast ${this.type}` }, h("span", { key: 'b29ea7dbe53aa72524039f1ce0fea5c50406d1f0' }, this.message), h("button", { key: '3b42fc8485a5d438bb29b5eab2e3ba5ab831731b', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
+        return (h("div", { key: '40cf0d0171712b45dd8786bd69aa2f94a1fc7335', class: `toast ${this.type}` }, h("span", { key: '5256c39505158066715c94420ff65a479a7ab382' }, this.message), h("button", { key: '523f0f7617a902910d13179147ca75fa57499433', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
     }
     static get is() { return "app-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/meal-plan-day/meal-plan-day.js

@@ -53,7 +53,7 @@ export class MealPlanDay {
                     "references": {
                         "PlannedMeal": {
                             "location": "local",
-                            "path": "C:/Users/gurpi/Downloads/recipe-finder-project/recipe-finder/packages/recipe-ui/src/components/meal-plan-day/meal-plan-day.tsx",
+                            "path": "C:/Users/gurpi/source/repos/Recipe-Finder/packages/recipe-ui/src/components/meal-plan-day/meal-plan-day.tsx",
                             "id": "src/components/meal-plan-day/meal-plan-day.tsx::PlannedMeal"
                         }
                     }

package/dist/collection/components/recipe-card/recipe-card.js

@@ -17,7 +17,7 @@ export class RecipeCard {
         };
     }
     render() {
-        return (h("div", { key: 'c9dc0d8c98899cf188fc46c72b5e809831332f24', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: '12e0512dc7ee78f46843f81483c5f7bf1fbc3616', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '95ab4db232ee878d61e272ce7a4814a48790c01d', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: 'a2906c670d693a473b87042ff6b0ada03627205b', class: "body" }, h("h3", { key: '2b0f4afecfdfd9cc996dcec29bd86957687667e3' }, this.recipeTitle), this.category && h("span", { key: '1b9c31d2723d2c87d51021569271366bac550a2f', class: "category" }, this.category), h("div", { key: 'd79b1cc33dcced145c3551874f69b581b4734297', class: "actions" }, h("slot", { key: '9a43cf770ea8fa189564fbe14f4f135a4d8e9551', name: "actions" })))));
+        return (h("div", { key: '72e604b38c4156bfe101f0609fac315cd317c981', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: 'bb707d57e573970201644e029eb6257e100e2276', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: 'bb052a897f227e8b8ca938704a083d8502036037', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: 'e4c139b9bdbdac25e92def0705d8506d89a0ce65', class: "body" }, h("h3", { key: 'aea91bd0827cdbe2608d91b428489a11eb7de0fa' }, this.recipeTitle), this.category && h("span", { key: '96219817064ee274999487452db6c70dee93d82f', class: "category" }, this.category), h("div", { key: 'c2593b0d879744a24c4be179af1d9359e3e904fa', class: "actions" }, h("slot", { key: '19e921048e6d469a33531c2bb949067a7925c7ac', name: "actions" })))));
     }
     static get is() { return "recipe-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/recipe-filter-bar/recipe-filter-bar.js

@@ -15,7 +15,7 @@ export class RecipeFilterBar {
     }
     render() {
         const cats = Array.isArray(this.categories) ? this.categories : [];
-        return (h("div", { key: '90b26633c07d813221b1cc44705c5fe510de994f', class: "wrap" }, h("button", { key: 'a41696529d8611f283460da1efe9205bd0b36260', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
+        return (h("div", { key: '336e3431325ab3338cda5be917414c6be4be1cf9', class: "wrap" }, h("button", { key: 'f1a5c228cf9ef1dd2017b26be55afdd07e27c837', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
     }
     static get is() { return "recipe-filter-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/recipe-form/recipe-form.css

@@ -1,19 +1,141 @@
-:host { display: block; font-family: system-ui, sans-serif; }
-form { display: flex; flex-direction: column; gap: 14px; }
-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #333; font-weight: 600; }
-input, textarea {
-  font-weight: 400; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px;
-  font-size: 14px; font-family: inherit;
-}
-.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
-.ingredient-row { display: flex; gap: 6px; }
-.ingredient-row input { flex: 1; }
-.ingredient-row button { border: none; background: #f4f4f4; border-radius: 6px; cursor: pointer; width: 30px; }
+:host {
+  display: block;
+  font-family: system-ui, sans-serif;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 13px;
+  color: #333;
+  font-weight: 600;
+}
+
+input,
+textarea,
+select {
+  font-weight: 400;
+  padding: 8px 10px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+  background: #fff;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: #ff6b35;
+  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.14);
+}
+
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding-right: 34px;
+  cursor: pointer;
+  color: #1f2937;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 14px;
+}
+
+select:hover {
+  border-color: #bbb;
+}
+
+select:invalid,
+select option[value=""] {
+  color: #9ca3af;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+@media (max-width: 480px) {
+  .row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.ingredient-row {
+  display: flex;
+  gap: 6px;
+}
+
+.ingredient-row input {
+  flex: 1;
+}
+
+.ingredient-row button {
+  border: none;
+  background: #f4f4f4;
+  border-radius: 6px;
+  cursor: pointer;
+  width: 30px;
+}
+
 .add-btn {
-  align-self: flex-start; border: 1px dashed #bbb; background: none; border-radius: 6px;
-  padding: 6px 10px; cursor: pointer; font-size: 13px; color: #555;
+  align-self: flex-start;
+  border: 1px dashed #bbb;
+  background: none;
+  border-radius: 6px;
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #555;
+}
+
+.error {
+  color: #e74c3c;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 6px;
+}
+
+.cancel-btn {
+  border: 1px solid #ddd;
+  background: #fff;
+  border-radius: 8px;
+  padding: 8px 16px;
+  cursor: pointer;
 }
-.error { color: #e74c3c; font-size: 12px; font-weight: 400; }
-.footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
-.cancel-btn { border: 1px solid #ddd; background: #fff; border-radius: 8px; padding: 8px 16px; cursor: pointer; }
-.save-btn { border: none; background: #ff6b35; color: #fff; border-radius: 8px; padding: 8px 18px; cursor: pointer; font-weight: 600; }
+
+.save-btn {
+  border: none;
+  background: #ff6b35;
+  color: #fff;
+  border-radius: 8px;
+  padding: 8px 18px;
+  cursor: pointer;
+  font-weight: 600;
+}

package/dist/collection/components/recipe-form/recipe-form.js

@@ -1,14 +1,22 @@
 import { h } from "@stencil/core";
-/**
- * Add/edit form for user-created recipes. Performs client-side validation
- * (title required, at least one non-empty ingredient, instructions required)
- * and only emits `save` once the data is valid.
- */
+const DEFAULT_AREAS = [
+    'American', 'British', 'Chinese', 'Croatian', 'Dutch', 'Egyptian',
+    'Filipino', 'French', 'Greek', 'Indian', 'Irish', 'Italian', 'Jamaican',
+    'Japanese', 'Kenyan', 'Malaysian', 'Mexican', 'Moroccan', 'Polish',
+    'Portuguese', 'Russian', 'Spanish', 'Thai', 'Tunisian', 'Turkish',
+    'Vietnamese', 'Other',
+];
 export class RecipeForm {
     constructor() {
+        /** Full override of the cuisine dropdown options */
+        this.areas = DEFAULT_AREAS;
+        /** Additional cuisine options merged in before "Other" */
+        this.extraAreas = [];
         this.title = '';
         this.image = '';
         this.category = '';
+        this.area = '';
+        this.customArea = '';
         this.ingredients = [''];
         this.instructions = '';
         this.errors = {};
@@ -16,11 +24,13 @@ export class RecipeForm {
             e.preventDefault();
             if (!this.validate())
                 return;
+            const resolvedArea = this.area === 'Other' ? this.customArea.trim() : this.area;
             const data = {
                 id: this.initialData?.id,
                 title: this.title.trim(),
                 image: this.image.trim(),
                 category: this.category.trim(),
+                area: resolvedArea,
                 ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
                 instructions: this.instructions.trim(),
             };
@@ -39,6 +49,16 @@ export class RecipeForm {
     onInitialDataChange() {
         this.loadInitialData();
     }
+    get fullAreaList() {
+        const withoutOther = this.areas.filter((a) => a !== 'Other');
+        const merged = [...withoutOther];
+        for (const extra of this.extraAreas) {
+            if (extra && !merged.includes(extra))
+                merged.push(extra);
+        }
+        merged.push('Other');
+        return merged;
+    }
     loadInitialData() {
         let data;
         if (typeof this.initialData === 'string' && this.initialData) {
@@ -58,19 +78,29 @@ export class RecipeForm {
             this.category = data.category ?? '';
             this.ingredients = data.ingredients?.length ? [...data.ingredients] : [''];
             this.instructions = data.instructions ?? '';
+            const knownAreas = this.fullAreaList.filter((a) => a !== 'Other');
+            if (data.area && !knownAreas.includes(data.area)) {
+                this.area = 'Other';
+                this.customArea = data.area;
+            }
+            else {
+                this.area = data.area ?? '';
+                this.customArea = '';
+            }
         }
     }
     validate() {
         const errors = {};
         if (!this.title.trim())
             errors.title = 'Title is required.';
-        if (!this.category.trim())
-            errors.category = 'Category is required.';
         const cleanIngredients = this.ingredients.map((i) => i.trim()).filter(Boolean);
         if (cleanIngredients.length === 0)
             errors.ingredients = 'Add at least one ingredient.';
         if (!this.instructions.trim())
             errors.instructions = 'Instructions are required.';
+        if (this.area === 'Other' && !this.customArea.trim()) {
+            errors.customArea = 'Enter a cuisine name.';
+        }
         this.errors = errors;
         return Object.keys(errors).length === 0;
     }
@@ -80,7 +110,7 @@ export class RecipeForm {
         this.ingredients = next;
     }
     render() {
-        return (h("form", { key: 'd7bf28b14b5d445221c52595bd827f49eed9306b', onSubmit: this.onSubmit }, h("slot", { key: '0ffc3f7fd2e5a15771ae36629365c53b1c44d934', name: "header" }), h("label", { key: '617617d1d4e5b9cbfc506340f3ffcab0364bb402' }, "Title", h("input", { key: '9be17e32164005466bf208323380603e33e43f6e', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && h("span", { key: 'e1ecebe7af1b6b13a392f4ceb99651c6f87aea43', class: "error" }, this.errors.title)), h("label", { key: '6ce777cc37e11e9c063e43e301d9c93fa7ddf4b4' }, "Image URL", h("input", { key: '37839fabadb556def7f240e8116629315ca1ad73', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), h("label", { key: 'c870efae293faecf06e5d9481d302779c77aac39' }, "Category", h("input", { key: '1cc8a5a113ac6a215dc0c53b43c1f9167afd69f4', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) }), this.errors.category && h("span", { key: 'ed78cadd9df6f24e700aebc6f85ce993c3d4746b', class: "error" }, this.errors.category)), h("div", { key: '0cbed02ba6b4b021d7cce4ffd9fb3e041452db00', class: "field" }, h("span", { key: '6e8023d7fa1c3a345ac8a1ffca9de1b57af25e8c' }, "Ingredients"), this.ingredients.map((ing, i) => (h("div", { class: "ingredient-row" }, h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), h("button", { key: 'c6fe3f2daad8c3f19daa3570c6e593c6b089aa57', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && h("span", { key: 'bfec646ff34633a03d6b3368c5fb095bc3066025', class: "error" }, this.errors.ingredients)), h("label", { key: 'd3487e03e2c26afe9b3807a9d1f1240dabb30373' }, "Instructions", h("textarea", { key: 'ade48aaca40198665a1fb1525834c27ec0ad0350', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && h("span", { key: 'c90068359e0448b350af5e8b15e50cce682a1615', class: "error" }, this.errors.instructions)), h("div", { key: '2621aec625328743a60c79e49275384017000ccb', class: "footer" }, h("slot", { key: '5d1466af5beba19e66612a7343727ab71e44455f', name: "footer" }), h("button", { key: '5a4883d864051e8081b6a7e1f5c1fb10e7bc5c1a', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), h("button", { key: '64d4c7e5cad53b1376dce3e73860fc3d4b4d9ff2', type: "submit", class: "save-btn" }, "Save Recipe"))));
+        return (h("form", { key: 'b9e50e96b20b8f3bb28ecb516b102c87088daddd', onSubmit: this.onSubmit }, h("slot", { key: '648424eb3444acdacb69e541799571ffa6572004', name: "header" }), h("label", { key: '77ec1e8acd2ba845262909f672fadf06907702f2' }, "Title", h("input", { key: '2f5dd98ab985831eb07ac43afed983908f2646d1', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && h("span", { key: '244560b4dc4cb47cbb514d0f8fe41be267299885', class: "error" }, this.errors.title)), h("label", { key: '8bb49420325a7629186a5801162b9a2e4321e4f7' }, "Image URL", h("input", { key: 'fe121c2389308b5bc0e6f7b977f15fec91f9baae', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), h("div", { key: '2ede3939f5230f805841945a29fc37fc4d2f3627', class: "row" }, h("label", { key: 'b736ee46a12a1070cb52c76fc41d31e0f8d1169b' }, "Category", h("input", { key: '6952f8378b13313c1c63d2cb1b1cd9c2593d1806', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) })), h("label", { key: 'a6e477f0bfdfbab6a75831a62334b665272a98db' }, "Cuisine / Area", h("select", { key: '1434d68a1782d19f92cd2d5ef638f440a8adc7dd', onInput: (e) => (this.area = e.target.value) }, h("option", { key: 'a40b1cacf4deb98590689325f23e572522069268', value: "", selected: this.area === '' }, "Select a cuisine\u2026"), this.fullAreaList.map((a) => (h("option", { value: a, selected: a === this.area }, a)))))), this.area === 'Other' && (h("label", { key: '77ab0849f544aacc7c2a207dc222c916dfb7a41b', class: "custom-area-field" }, "Enter cuisine name", h("input", { key: 'fd7c97a89c0e2b8f23cc28fbc502563eb759fdb4', type: "text", placeholder: "e.g. Ethiopian", value: this.customArea, onInput: (e) => (this.customArea = e.target.value) }), this.errors.customArea && h("span", { key: '2b2425b63b0d5ee311fe16040d012a43919c8ca6', class: "error" }, this.errors.customArea))), h("div", { key: 'fafa1824f121c9c2c96069772d2011a13ce0683f', class: "field" }, h("span", { key: 'bea9e5877093e412b1fffb12f0aad4c79604cc16' }, "Ingredients"), this.ingredients.map((ing, i) => (h("div", { class: "ingredient-row" }, h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), h("button", { key: 'fc7a817c01706f4f99594ff09a72fa8b046f4820', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && h("span", { key: 'd4b4bee30e1369f951f0aabe7f54b0b1ae393a83', class: "error" }, this.errors.ingredients)), h("label", { key: '5028ae3ead65e280a2196f93d5f31580a5f8c95a' }, "Instructions", h("textarea", { key: '08461bc98ab47d1f2240dfa23e1ec1264de12002', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && h("span", { key: '932de400651f180d7e5b14e4ff118ccdcd24d2b3', class: "error" }, this.errors.instructions)), h("div", { key: '7da02b77a1390447a738882d0104292b28f675b0', class: "footer" }, h("slot", { key: '74ed118f385e1e6e1318dd405aa0008e195ef9c0', name: "footer" }), h("button", { key: 'e2548efd3826d3a984c11cd6d7bd486e226c8ca9', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), h("button", { key: '8011e51d4579a0e6ddd88cd8c83708524551d801', type: "submit", class: "save-btn" }, "Save Recipe"))));
     }
     static get is() { return "recipe-form"; }
     static get encapsulation() { return "shadow"; }
@@ -105,7 +135,7 @@ export class RecipeForm {
                     "references": {
                         "RecipeFormData": {
                             "location": "local",
-                            "path": "C:/Users/gurpi/Downloads/recipe-finder-project/recipe-finder/packages/recipe-ui/src/components/recipe-form/recipe-form.tsx",
+                            "path": "C:/Users/gurpi/source/repos/Recipe-Finder/packages/recipe-ui/src/components/recipe-form/recipe-form.tsx",
                             "id": "src/components/recipe-form/recipe-form.tsx::RecipeFormData"
                         }
                     }
@@ -114,12 +144,48 @@ export class RecipeForm {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Pass an existing recipe (as a JSON string or object) to edit it"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "initial-data"
+            },
+            "areas": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full override of the cuisine dropdown options"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n  'American', 'British', 'Chinese', 'Croatian', 'Dutch', 'Egyptian',\n  'Filipino', 'French', 'Greek', 'Indian', 'Irish', 'Italian', 'Jamaican',\n  'Japanese', 'Kenyan', 'Malaysian', 'Mexican', 'Moroccan', 'Polish',\n  'Portuguese', 'Russian', 'Spanish', 'Thai', 'Tunisian', 'Turkish',\n  'Vietnamese', 'Other',\n]"
+            },
+            "extraAreas": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional cuisine options merged in before \"Other\""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             }
         };
     }
@@ -128,6 +194,8 @@ export class RecipeForm {
             "title": {},
             "image": {},
             "category": {},
+            "area": {},
+            "customArea": {},
             "ingredients": {},
             "instructions": {},
             "errors": {}
@@ -150,7 +218,7 @@ export class RecipeForm {
                     "references": {
                         "RecipeFormData": {
                             "location": "local",
-                            "path": "C:/Users/gurpi/Downloads/recipe-finder-project/recipe-finder/packages/recipe-ui/src/components/recipe-form/recipe-form.tsx",
+                            "path": "C:/Users/gurpi/source/repos/Recipe-Finder/packages/recipe-ui/src/components/recipe-form/recipe-form.tsx",
                             "id": "src/components/recipe-form/recipe-form.tsx::RecipeFormData"
                         }
                     }

package/dist/collection/components/recipe-rating/recipe-rating.js

@@ -8,7 +8,7 @@ export class RecipeRating {
     }
     render() {
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (h("div", { key: '2d5251ae7d3a24d613b759e89ba78de1568426d8', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
+        return (h("div", { key: '9e67a7c471e6b20bbc2bc0164a5346c8cd5f10dc', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
     }
     static get is() { return "recipe-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/recipe-search-bar/recipe-search-bar.js

@@ -30,7 +30,7 @@ export class RecipeSearchBar {
         this.internalValue = newVal;
     }
     render() {
-        return (h("div", { key: 'b55c496d5c2968b4b79c40b9333c62ed4653e76d', class: "wrap" }, h("input", { key: '081ae0dfde47acca677c746bc88cda1864eac851', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), h("button", { key: '44cde335aec87330bb4486883c9cf836a6855ad0', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
+        return (h("div", { key: '7fa4a3ce06ef9b7e68b968a0bf29cce896cc7db0', class: "wrap" }, h("input", { key: 'ae2e528fafd1f342de8a88c14f0651857bc0486d', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), h("button", { key: 'c9a369dca794014f17cd64cfaa4b7b9f0e06d171', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
     }
     static get is() { return "recipe-search-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/app-toast.js

@@ -1 +1 @@
-import{A as o,d as s}from"./p-Q8V4JgYC.js";const p=o,r=s;export{p as AppToast,r as defineCustomElement}
+import{A as o,d as s}from"./p-BzvqJQ_R.js";const p=o,r=s;export{p as AppToast,r as defineCustomElement}

package/dist/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BJU3HdRm.js";export{R as RecipeCard}from"./p-snMSuFkY.js";export{R as RecipeSearchBar}from"./p-fNGqqs-I.js";export{R as RecipeFilterBar}from"./p-gWE9Vqi0.js";export{R as RecipeRating}from"./p-DrDPFXTB.js";export{R as RecipeForm}from"./p-CN2vLHNY.js";export{M as MealPlanDay}from"./p-S4266va_.js";export{A as AppModal}from"./p-Dp1sKtrN.js";export{A as AppToast}from"./p-Q8V4JgYC.js";
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BJU3HdRm.js";export{R as RecipeCard}from"./p-Cn_qfIvv.js";export{R as RecipeSearchBar}from"./p-K-btCLSj.js";export{R as RecipeFilterBar}from"./p-B92NkO3p.js";export{R as RecipeRating}from"./p-mY_lBX8M.js";export{R as RecipeForm}from"./p-u-o4onHp.js";export{M as MealPlanDay}from"./p-S4266va_.js";export{A as AppModal}from"./p-Dp1sKtrN.js";export{A as AppToast}from"./p-BzvqJQ_R.js";