@gurpinderjitsingh/recipe-ui 0.3.0 → 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: '1602604f99f17895a29343bf269cf5aa64db2ee1', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: 'b57ab7677ba357e3897f7dff5a2d8bb50a6af417', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: '6720508f3723573e4fe4eef2504cffc442d3ffe1', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: 'e30557f6fa8ca3117d7f239c1f14e07e009500a2', class: "body" }, index.h("h3", { key: '11c63ca021b1204c78783b53d9defb1eddbe15fa' }, this.recipeTitle), this.category && index.h("span", { key: 'b3d2b2ebd8997d662ade303736b4ddd494a0e273', class: "category" }, this.category), index.h("div", { key: '80cc820f78f3fd4cb64f802e69ba03cfb441ce6c', class: "actions" }, index.h("slot", { key: '318cfb3954ad5392d56af94ba8a0e3cb3c220fa7', 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: '65403c53fbbe3a809f1de94bb02b04a57e5b8cd1', class: "wrap" }, index.h("input", { key: '43fb8c2a103e9e700b62ad86de1a559fc3b71d5b', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), index.h("button", { key: '2399fce8ff18e60c83bf575454eeff0e74596c6b', 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: '5d0c846f0a8df8aa178915d4ee6b6fa0009cba07', class: "wrap" }, index.h("button", { key: '49f9fa32d23122cdcee7f51869f3c158d0ce86c0', 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,12 +96,12 @@ const RecipeRating = class {
     }
     render() {
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (index.h("div", { key: '37923bd59ca23e07af39ebaca47a3e613809c12b', 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',
@@ -115,12 +115,15 @@ const RecipeForm = class {
         index.registerInstance(this, hostRef);
         this.save = index.createEvent(this, "save");
         this.cancel = index.createEvent(this, "cancel");
-        /** Cuisine/cuisine options for the dropdown — override to supply your own list */
-        this.cuisines = DEFAULT_AREAS;
+        /** 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.cuisine = '';
+        this.area = '';
+        this.customArea = '';
         this.ingredients = [''];
         this.instructions = '';
         this.errors = {};
@@ -128,12 +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(),
-                cuisine: this.cuisine.trim(),
+                area: resolvedArea,
                 ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
                 instructions: this.instructions.trim(),
             };
@@ -152,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) {
@@ -169,9 +183,17 @@ const RecipeForm = class {
             this.title = data.title ?? '';
             this.image = data.image ?? '';
             this.category = data.category ?? '';
-            this.cuisine = data.cuisine ?? '';
             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() {
@@ -183,6 +205,9 @@ const RecipeForm = class {
             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;
     }
@@ -192,7 +217,7 @@ const RecipeForm = class {
         this.ingredients = next;
     }
     render() {
-        return (index.h("form", { key: '7268362cd88d1d924f4bf5e4061b136454935f7b', onSubmit: this.onSubmit }, index.h("slot", { key: '913490a0ba22ca884bcc1cac49c07573f2e8c214', name: "header" }), index.h("label", { key: 'cdc71ed3a3d297e7f111f7ec67c111818fe0fdf8' }, "Title", index.h("input", { key: 'c17da6820f298ee9fc786fa206ef3bc97e361735', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && index.h("span", { key: '2c61cc6f37f87536e72fe281b50a3c6a2bdfd9f2', class: "error" }, this.errors.title)), index.h("label", { key: '28aca3cb1ffeae0f471477d3e564598fe0459cc7' }, "Image URL", index.h("input", { key: 'd523a018b35b7160061db9dc8059ee5ce3f58433', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), index.h("div", { key: 'c01339651af391405999f3081ee98ad2be33d6da', class: "row" }, index.h("label", { key: '656b72f2ccb9488d22900f1b26f0907ece8190af' }, "Category", index.h("input", { key: '1b973a0c12b3c66e3c585e92930b4bdbb7240b0e', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) })), index.h("label", { key: '9e25bad33d00c3285fd948f3e7535e5c9d8d45f9' }, "Cuisine / Area", index.h("select", { key: '52365ebccaa5fa2e2361ab8102b1151eb60cb5d6', onInput: (e) => (this.cuisine = e.target.value) }, index.h("option", { key: 'ad40fd1dde5cae8e241fced55455dbadfede6734', value: "", selected: this.cuisine === '' }, "Select a cuisine\u2026"), this.cuisines.map((a) => (index.h("option", { value: a, selected: a === this.cuisine }, a)))))), index.h("div", { key: '53173a3fbea53dad5625e28a67aebbbe9880c490', class: "field" }, index.h("span", { key: 'e5699c07f862027afa73ce59c1f450df48504f37' }, "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: 'c37385b611c3b05eeb32a4f1a6de110b8a3b6be4', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && index.h("span", { key: '1e7c662423b1915bbfc7d2aeea9cea3cfef9d002', class: "error" }, this.errors.ingredients)), index.h("label", { key: '267e09ca2bb1a91ef552dc3522105d079570499d' }, "Instructions", index.h("textarea", { key: '99f4aa91fba6c3d499c4efa904794a6de75e62cd', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && index.h("span", { key: 'cde019552bf691ee8e5a737c8a8d3c493961b0f9', class: "error" }, this.errors.instructions)), index.h("div", { key: 'b4f40cb9ab323bcc27088e7d6c7609f26b6fd9cb', class: "footer" }, index.h("slot", { key: '150b900bcadc7f51cfdfd7fe9667c22c55a745fb', name: "footer" }), index.h("button", { key: '94e6ca7f8c291051f59b8fa4794c59833884d433', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), index.h("button", { key: '462f42ddfdd000af25066a1d4dbfc07be95abdd6', 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: '77c3d328a79659573feaaabe30b8c53c2023fb06', class: `toast ${this.type}` }, index.h("span", { key: '0056d61321beb80bdebd957be4322516282fd07e' }, this.message), index.h("button", { key: 'f9b6161dcd74223f3241311e54ab5e2736dcbd3b', 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"],"cuisines":[16],"title":[32],"image":[32],"category":[32],"cuisine":[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"],"cuisines":[16],"title":[32],"image":[32],"category":[32],"cuisine":[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: '77c3d328a79659573feaaabe30b8c53c2023fb06', class: `toast ${this.type}` }, h("span", { key: '0056d61321beb80bdebd957be4322516282fd07e' }, this.message), h("button", { key: 'f9b6161dcd74223f3241311e54ab5e2736dcbd3b', 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/recipe-card/recipe-card.js

@@ -17,7 +17,7 @@ export class RecipeCard {
         };
     }
     render() {
-        return (h("div", { key: '1602604f99f17895a29343bf269cf5aa64db2ee1', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: 'b57ab7677ba357e3897f7dff5a2d8bb50a6af417', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '6720508f3723573e4fe4eef2504cffc442d3ffe1', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: 'e30557f6fa8ca3117d7f239c1f14e07e009500a2', class: "body" }, h("h3", { key: '11c63ca021b1204c78783b53d9defb1eddbe15fa' }, this.recipeTitle), this.category && h("span", { key: 'b3d2b2ebd8997d662ade303736b4ddd494a0e273', class: "category" }, this.category), h("div", { key: '80cc820f78f3fd4cb64f802e69ba03cfb441ce6c', class: "actions" }, h("slot", { key: '318cfb3954ad5392d56af94ba8a0e3cb3c220fa7', 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: '5d0c846f0a8df8aa178915d4ee6b6fa0009cba07', class: "wrap" }, h("button", { key: '49f9fa32d23122cdcee7f51869f3c158d0ce86c0', 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

@@ -8,12 +8,15 @@ const DEFAULT_AREAS = [
 ];
 export class RecipeForm {
     constructor() {
-        /** Cuisine/cuisine options for the dropdown — override to supply your own list */
-        this.cuisines = DEFAULT_AREAS;
+        /** 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.cuisine = '';
+        this.area = '';
+        this.customArea = '';
         this.ingredients = [''];
         this.instructions = '';
         this.errors = {};
@@ -21,12 +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(),
-                cuisine: this.cuisine.trim(),
+                area: resolvedArea,
                 ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
                 instructions: this.instructions.trim(),
             };
@@ -45,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) {
@@ -62,9 +76,17 @@ export class RecipeForm {
             this.title = data.title ?? '';
             this.image = data.image ?? '';
             this.category = data.category ?? '';
-            this.cuisine = data.cuisine ?? '';
             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() {
@@ -76,6 +98,9 @@ export class RecipeForm {
             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;
     }
@@ -85,7 +110,7 @@ export class RecipeForm {
         this.ingredients = next;
     }
     render() {
-        return (h("form", { key: '7268362cd88d1d924f4bf5e4061b136454935f7b', onSubmit: this.onSubmit }, h("slot", { key: '913490a0ba22ca884bcc1cac49c07573f2e8c214', name: "header" }), h("label", { key: 'cdc71ed3a3d297e7f111f7ec67c111818fe0fdf8' }, "Title", h("input", { key: 'c17da6820f298ee9fc786fa206ef3bc97e361735', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && h("span", { key: '2c61cc6f37f87536e72fe281b50a3c6a2bdfd9f2', class: "error" }, this.errors.title)), h("label", { key: '28aca3cb1ffeae0f471477d3e564598fe0459cc7' }, "Image URL", h("input", { key: 'd523a018b35b7160061db9dc8059ee5ce3f58433', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), h("div", { key: 'c01339651af391405999f3081ee98ad2be33d6da', class: "row" }, h("label", { key: '656b72f2ccb9488d22900f1b26f0907ece8190af' }, "Category", h("input", { key: '1b973a0c12b3c66e3c585e92930b4bdbb7240b0e', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) })), h("label", { key: '9e25bad33d00c3285fd948f3e7535e5c9d8d45f9' }, "Cuisine / Area", h("select", { key: '52365ebccaa5fa2e2361ab8102b1151eb60cb5d6', onInput: (e) => (this.cuisine = e.target.value) }, h("option", { key: 'ad40fd1dde5cae8e241fced55455dbadfede6734', value: "", selected: this.cuisine === '' }, "Select a cuisine\u2026"), this.cuisines.map((a) => (h("option", { value: a, selected: a === this.cuisine }, a)))))), h("div", { key: '53173a3fbea53dad5625e28a67aebbbe9880c490', class: "field" }, h("span", { key: 'e5699c07f862027afa73ce59c1f450df48504f37' }, "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: 'c37385b611c3b05eeb32a4f1a6de110b8a3b6be4', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && h("span", { key: '1e7c662423b1915bbfc7d2aeea9cea3cfef9d002', class: "error" }, this.errors.ingredients)), h("label", { key: '267e09ca2bb1a91ef552dc3522105d079570499d' }, "Instructions", h("textarea", { key: '99f4aa91fba6c3d499c4efa904794a6de75e62cd', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && h("span", { key: 'cde019552bf691ee8e5a737c8a8d3c493961b0f9', class: "error" }, this.errors.instructions)), h("div", { key: 'b4f40cb9ab323bcc27088e7d6c7609f26b6fd9cb', class: "footer" }, h("slot", { key: '150b900bcadc7f51cfdfd7fe9667c22c55a745fb', name: "footer" }), h("button", { key: '94e6ca7f8c291051f59b8fa4794c59833884d433', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), h("button", { key: '462f42ddfdd000af25066a1d4dbfc07be95abdd6', 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"; }
@@ -126,7 +151,7 @@ export class RecipeForm {
                 "reflect": false,
                 "attribute": "initial-data"
             },
-            "cuisines": {
+            "areas": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -138,11 +163,29 @@ export class RecipeForm {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Cuisine/cuisine options for the dropdown \u2014 override to supply your own list"
+                    "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": "[]"
             }
         };
     }
@@ -151,7 +194,8 @@ export class RecipeForm {
             "title": {},
             "image": {},
             "category": {},
-            "cuisine": {},
+            "area": {},
+            "customArea": {},
             "ingredients": {},
             "instructions": {},
             "errors": {}

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: '37923bd59ca23e07af39ebaca47a3e613809c12b', 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: '65403c53fbbe3a809f1de94bb02b04a57e5b8cd1', class: "wrap" }, h("input", { key: '43fb8c2a103e9e700b62ad86de1a559fc3b71d5b', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), h("button", { key: '2399fce8ff18e60c83bf575454eeff0e74596c6b', 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-CWQoij-1.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-CoCM6o6z.js";export{R as RecipeSearchBar}from"./p-vGdzhVB7.js";export{R as RecipeFilterBar}from"./p-BIz6x-m7.js";export{R as RecipeRating}from"./p-Ckp6dPOc.js";export{R as RecipeForm}from"./p-xcFZ4dcw.js";export{M as MealPlanDay}from"./p-S4266va_.js";export{A as AppModal}from"./p-Dp1sKtrN.js";export{A as AppToast}from"./p-CWQoij-1.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";

package/dist/components/{p-BIz6x-m7.js → p-B92NkO3p.js}

@@ -1 +1 @@
-import{t as e,p as s,H as t,c as i,h as r}from"./p-BJU3HdRm.js";const c=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.filterChange=i(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return r("div",{key:"5d0c846f0a8df8aa178915d4ee6b6fa0009cba07",class:"wrap"},r("button",{key:"49f9fa32d23122cdcee7f51869f3c158d0ce86c0",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>r("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}static get style(){return":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}"}},[1,"recipe-filter-bar",{categories:[16],active:[1]}]);function a(){"undefined"!=typeof customElements&&["recipe-filter-bar"].forEach((s=>{"recipe-filter-bar"===s&&(customElements.get(e(s))||customElements.define(e(s),c))}))}a();export{c as R,a as d}
+import{t as e,p as s,H as t,c as i,h as r}from"./p-BJU3HdRm.js";const c=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.filterChange=i(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return r("div",{key:"336e3431325ab3338cda5be917414c6be4be1cf9",class:"wrap"},r("button",{key:"f1a5c228cf9ef1dd2017b26be55afdd07e27c837",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>r("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}static get style(){return":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}"}},[1,"recipe-filter-bar",{categories:[16],active:[1]}]);function a(){"undefined"!=typeof customElements&&["recipe-filter-bar"].forEach((s=>{"recipe-filter-bar"===s&&(customElements.get(e(s))||customElements.define(e(s),c))}))}a();export{c as R,a as d}

package/dist/components/{p-CWQoij-1.js → p-BzvqJQ_R.js}

@@ -1 +1 @@
-import{t as s,p as t,H as e,c as o,h as a}from"./p-BJU3HdRm.js";const i=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.dismiss=o(this,"dismiss"),this.message="",this.type="info",this.duration=3e3}componentDidLoad(){this.duration>0&&setTimeout((()=>this.dismiss.emit()),this.duration)}render(){return a("div",{key:"77c3d328a79659573feaaabe30b8c53c2023fb06",class:`toast ${this.type}`},a("span",{key:"0056d61321beb80bdebd957be4322516282fd07e"},this.message),a("button",{key:"f9b6161dcd74223f3241311e54ab5e2736dcbd3b",onClick:()=>this.dismiss.emit(),"aria-label":"Dismiss"},"✕"))}static get style(){return":host{font-family:system-ui, sans-serif;display:block}.toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;color:#fff;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.toast.success{background:#2ecc71}.toast.error{background:#e74c3c}.toast.info{background:#3498db}button{border:none;background:none;color:inherit;cursor:pointer;margin-left:auto}"}},[1,"app-toast",{message:[1],type:[1],duration:[2]}]);function n(){"undefined"!=typeof customElements&&["app-toast"].forEach((t=>{"app-toast"===t&&(customElements.get(s(t))||customElements.define(s(t),i))}))}n();export{i as A,n as d}
+import{t as s,p as t,H as a,c as o,h as e}from"./p-BJU3HdRm.js";const i=t(class extends a{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.dismiss=o(this,"dismiss"),this.message="",this.type="info",this.duration=3e3}componentDidLoad(){this.duration>0&&setTimeout((()=>this.dismiss.emit()),this.duration)}render(){return e("div",{key:"40cf0d0171712b45dd8786bd69aa2f94a1fc7335",class:`toast ${this.type}`},e("span",{key:"5256c39505158066715c94420ff65a479a7ab382"},this.message),e("button",{key:"523f0f7617a902910d13179147ca75fa57499433",onClick:()=>this.dismiss.emit(),"aria-label":"Dismiss"},"✕"))}static get style(){return":host{font-family:system-ui, sans-serif;display:block}.toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;color:#fff;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.toast.success{background:#2ecc71}.toast.error{background:#e74c3c}.toast.info{background:#3498db}button{border:none;background:none;color:inherit;cursor:pointer;margin-left:auto}"}},[1,"app-toast",{message:[1],type:[1],duration:[2]}]);function n(){"undefined"!=typeof customElements&&["app-toast"].forEach((t=>{"app-toast"===t&&(customElements.get(s(t))||customElements.define(s(t),i))}))}n();export{i as A,n as d}

package/dist/components/{p-CoCM6o6z.js → p-Cn_qfIvv.js}

@@ -1 +1 @@
-import{t as e,p as a,H as t,c as i,h as s}from"./p-BJU3HdRm.js";const r=a(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.favoriteToggle=i(this,"favoriteToggle"),this.cardClick=i(this,"cardClick"),this.category="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return s("div",{key:"1602604f99f17895a29343bf269cf5aa64db2ee1",class:"card",onClick:()=>this.cardClick.emit()},s("div",{key:"b57ab7677ba357e3897f7dff5a2d8bb50a6af417",class:"image-wrap"},this.image?s("img",{src:this.image,alt:this.recipeTitle}):s("div",{class:"placeholder"}),s("button",{key:"6720508f3723573e4fe4eef2504cffc442d3ffe1",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),s("div",{key:"e30557f6fa8ca3117d7f239c1f14e07e009500a2",class:"body"},s("h3",{key:"11c63ca021b1204c78783b53d9defb1eddbe15fa"},this.recipeTitle),this.category&&s("span",{key:"b3d2b2ebd8997d662ade303736b4ddd494a0e273",class:"category"},this.category),s("div",{key:"80cc820f78f3fd4cb64f802e69ba03cfb441ce6c",class:"actions"},s("slot",{key:"318cfb3954ad5392d56af94ba8a0e3cb3c220fa7",name:"actions"}))))}static get style(){return":host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}"}},[257,"recipe-card",{recipeTitle:[1,"recipe-title"],image:[1],category:[1],favorite:[4]}]);function o(){"undefined"!=typeof customElements&&["recipe-card"].forEach((a=>{"recipe-card"===a&&(customElements.get(e(a))||customElements.define(e(a),r))}))}o();export{r as R,o as d}
+import{t as e,p as t,H as a,c as i,h as s}from"./p-BJU3HdRm.js";const r=t(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.favoriteToggle=i(this,"favoriteToggle"),this.cardClick=i(this,"cardClick"),this.category="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return s("div",{key:"72e604b38c4156bfe101f0609fac315cd317c981",class:"card",onClick:()=>this.cardClick.emit()},s("div",{key:"bb707d57e573970201644e029eb6257e100e2276",class:"image-wrap"},this.image?s("img",{src:this.image,alt:this.recipeTitle}):s("div",{class:"placeholder"}),s("button",{key:"bb052a897f227e8b8ca938704a083d8502036037",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),s("div",{key:"e4c139b9bdbdac25e92def0705d8506d89a0ce65",class:"body"},s("h3",{key:"aea91bd0827cdbe2608d91b428489a11eb7de0fa"},this.recipeTitle),this.category&&s("span",{key:"96219817064ee274999487452db6c70dee93d82f",class:"category"},this.category),s("div",{key:"c2593b0d879744a24c4be179af1d9359e3e904fa",class:"actions"},s("slot",{key:"19e921048e6d469a33531c2bb949067a7925c7ac",name:"actions"}))))}static get style(){return":host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}"}},[257,"recipe-card",{recipeTitle:[1,"recipe-title"],image:[1],category:[1],favorite:[4]}]);function o(){"undefined"!=typeof customElements&&["recipe-card"].forEach((t=>{"recipe-card"===t&&(customElements.get(e(t))||customElements.define(e(t),r))}))}o();export{r as R,o as d}

package/dist/components/{p-vGdzhVB7.js → p-K-btCLSj.js}

@@ -1 +1 @@
-import{t as e,p as t,H as s,c as i,h as a}from"./p-BJU3HdRm.js";const r=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.search=i(this,"search"),this.placeholder="Search recipes...",this.value="",this.debounceMs=350,this.internalValue="",this.onInput=e=>{this.internalValue=e.target.value,clearTimeout(this.timer),this.timer=setTimeout((()=>{this.search.emit({value:this.internalValue})}),this.debounceMs)},this.onKeyDown=e=>{"Enter"===e.key&&(clearTimeout(this.timer),this.search.emit({value:this.internalValue}))}}componentWillLoad(){this.internalValue=this.value}onValuePropChange(e){this.internalValue=e}render(){return a("div",{key:"65403c53fbbe3a809f1de94bb02b04a57e5b8cd1",class:"wrap"},a("input",{key:"43fb8c2a103e9e700b62ad86de1a559fc3b71d5b",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),a("button",{key:"2399fce8ff18e60c83bf575454eeff0e74596c6b",onClick:()=>this.search.emit({value:this.internalValue}),"aria-label":"Search"},"🔍"))}static get watchers(){return{value:[{onValuePropChange:0}]}}static get style(){return":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:6px}input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #ddd;font-size:14px;outline:none}input:focus{border-color:#ff6b35}button{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:0 16px;cursor:pointer;font-size:15px}"}},[1,"recipe-search-bar",{placeholder:[1],value:[1],debounceMs:[2,"debounce-ms"],internalValue:[32]},void 0,{value:[{onValuePropChange:0}]}]);function o(){"undefined"!=typeof customElements&&["recipe-search-bar"].forEach((t=>{"recipe-search-bar"===t&&(customElements.get(e(t))||customElements.define(e(t),r))}))}o();export{r as R,o as d}
+import{t as e,p as t,H as s,c as a,h as i}from"./p-BJU3HdRm.js";const r=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.search=a(this,"search"),this.placeholder="Search recipes...",this.value="",this.debounceMs=350,this.internalValue="",this.onInput=e=>{this.internalValue=e.target.value,clearTimeout(this.timer),this.timer=setTimeout((()=>{this.search.emit({value:this.internalValue})}),this.debounceMs)},this.onKeyDown=e=>{"Enter"===e.key&&(clearTimeout(this.timer),this.search.emit({value:this.internalValue}))}}componentWillLoad(){this.internalValue=this.value}onValuePropChange(e){this.internalValue=e}render(){return i("div",{key:"7fa4a3ce06ef9b7e68b968a0bf29cce896cc7db0",class:"wrap"},i("input",{key:"ae2e528fafd1f342de8a88c14f0651857bc0486d",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),i("button",{key:"c9a369dca794014f17cd64cfaa4b7b9f0e06d171",onClick:()=>this.search.emit({value:this.internalValue}),"aria-label":"Search"},"🔍"))}static get watchers(){return{value:[{onValuePropChange:0}]}}static get style(){return":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:6px}input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #ddd;font-size:14px;outline:none}input:focus{border-color:#ff6b35}button{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:0 16px;cursor:pointer;font-size:15px}"}},[1,"recipe-search-bar",{placeholder:[1],value:[1],debounceMs:[2,"debounce-ms"],internalValue:[32]},void 0,{value:[{onValuePropChange:0}]}]);function o(){"undefined"!=typeof customElements&&["recipe-search-bar"].forEach((t=>{"recipe-search-bar"===t&&(customElements.get(e(t))||customElements.define(e(t),r))}))}o();export{r as R,o as d}

package/dist/components/{p-Ckp6dPOc.js → p-mY_lBX8M.js}

@@ -1 +1 @@
-import{t as s,p as t,H as e,c as i,h as a}from"./p-BJU3HdRm.js";const r=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.ratingChange=i(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const s=Array.from({length:this.max},((s,t)=>t+1));return a("div",{key:"37923bd59ca23e07af39ebaca47a3e613809c12b",class:"wrap",role:this.readonly?void 0:"radiogroup"},s.map((s=>a("span",{class:{star:!0,filled:s<=this.value,clickable:!this.readonly},onClick:()=>!this.readonly&&this.ratingChange.emit({value:s})},"★"))))}static get style(){return":host{display:inline-block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:2px}.star{font-size:18px;color:#ddd}.star.filled{color:#f5a623}.star.clickable{cursor:pointer}"}},[1,"recipe-rating",{value:[2],readonly:[4],max:[2]}]);function l(){"undefined"!=typeof customElements&&["recipe-rating"].forEach((t=>{"recipe-rating"===t&&(customElements.get(s(t))||customElements.define(s(t),r))}))}l();export{r as R,l as d}
+import{t as s,p as t,H as e,c as i,h as a}from"./p-BJU3HdRm.js";const r=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.ratingChange=i(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const s=Array.from({length:this.max},((s,t)=>t+1));return a("div",{key:"9e67a7c471e6b20bbc2bc0164a5346c8cd5f10dc",class:"wrap",role:this.readonly?void 0:"radiogroup"},s.map((s=>a("span",{class:{star:!0,filled:s<=this.value,clickable:!this.readonly},onClick:()=>!this.readonly&&this.ratingChange.emit({value:s})},"★"))))}static get style(){return":host{display:inline-block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:2px}.star{font-size:18px;color:#ddd}.star.filled{color:#f5a623}.star.clickable{cursor:pointer}"}},[1,"recipe-rating",{value:[2],readonly:[4],max:[2]}]);function c(){"undefined"!=typeof customElements&&["recipe-rating"].forEach((t=>{"recipe-rating"===t&&(customElements.get(s(t))||customElements.define(s(t),r))}))}c();export{r as R,c as d}

package/dist/components/p-u-o4onHp.js

@@ -0,0 +1 @@
+import{t as e,p as t,H as i,c as a,h as s}from"./p-BJU3HdRm.js";const n=["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"],o=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.save=a(this,"save"),this.cancel=a(this,"cancel"),this.areas=n,this.extraAreas=[],this.title="",this.image="",this.category="",this.area="",this.customArea="",this.ingredients=[""],this.instructions="",this.errors={},this.onSubmit=e=>{if(e.preventDefault(),!this.validate())return;const t="Other"===this.area?this.customArea.trim():this.area,i={id:this.initialData?.id,title:this.title.trim(),image:this.image.trim(),category:this.category.trim(),area:t,ingredients:this.ingredients.map((e=>e.trim())).filter(Boolean),instructions:this.instructions.trim()};this.save.emit(i)},this.addIngredient=()=>{this.ingredients=[...this.ingredients,""]},this.removeIngredient=e=>{this.ingredients=this.ingredients.filter(((t,i)=>i!==e))}}componentWillLoad(){this.loadInitialData()}onInitialDataChange(){this.loadInitialData()}get fullAreaList(){const e=[...this.areas.filter((e=>"Other"!==e))];for(const t of this.extraAreas)t&&!e.includes(t)&&e.push(t);return e.push("Other"),e}loadInitialData(){let e;if("string"==typeof this.initialData&&this.initialData)try{e=JSON.parse(this.initialData)}catch{e=void 0}else this.initialData&&"object"==typeof this.initialData&&(e=this.initialData);if(e){this.title=e.title??"",this.image=e.image??"",this.category=e.category??"",this.ingredients=e.ingredients?.length?[...e.ingredients]:[""],this.instructions=e.instructions??"";const t=this.fullAreaList.filter((e=>"Other"!==e));e.area&&!t.includes(e.area)?(this.area="Other",this.customArea=e.area):(this.area=e.area??"",this.customArea="")}}validate(){const e={};return this.title.trim()||(e.title="Title is required."),0===this.ingredients.map((e=>e.trim())).filter(Boolean).length&&(e.ingredients="Add at least one ingredient."),this.instructions.trim()||(e.instructions="Instructions are required."),"Other"!==this.area||this.customArea.trim()||(e.customArea="Enter a cuisine name."),this.errors=e,0===Object.keys(e).length}updateIngredient(e,t){const i=[...this.ingredients];i[e]=t,this.ingredients=i}render(){return s("form",{key:"b9e50e96b20b8f3bb28ecb516b102c87088daddd",onSubmit:this.onSubmit},s("slot",{key:"648424eb3444acdacb69e541799571ffa6572004",name:"header"}),s("label",{key:"77ec1e8acd2ba845262909f672fadf06907702f2"},"Title",s("input",{key:"2f5dd98ab985831eb07ac43afed983908f2646d1",type:"text",value:this.title,onInput:e=>this.title=e.target.value}),this.errors.title&&s("span",{key:"244560b4dc4cb47cbb514d0f8fe41be267299885",class:"error"},this.errors.title)),s("label",{key:"8bb49420325a7629186a5801162b9a2e4321e4f7"},"Image URL",s("input",{key:"fe121c2389308b5bc0e6f7b977f15fec91f9baae",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),s("div",{key:"2ede3939f5230f805841945a29fc37fc4d2f3627",class:"row"},s("label",{key:"b736ee46a12a1070cb52c76fc41d31e0f8d1169b"},"Category",s("input",{key:"6952f8378b13313c1c63d2cb1b1cd9c2593d1806",type:"text",value:this.category,onInput:e=>this.category=e.target.value})),s("label",{key:"a6e477f0bfdfbab6a75831a62334b665272a98db"},"Cuisine / Area",s("select",{key:"1434d68a1782d19f92cd2d5ef638f440a8adc7dd",onInput:e=>this.area=e.target.value},s("option",{key:"a40b1cacf4deb98590689325f23e572522069268",value:"",selected:""===this.area},"Select a cuisine…"),this.fullAreaList.map((e=>s("option",{value:e,selected:e===this.area},e)))))),"Other"===this.area&&s("label",{key:"77ab0849f544aacc7c2a207dc222c916dfb7a41b",class:"custom-area-field"},"Enter cuisine name",s("input",{key:"fd7c97a89c0e2b8f23cc28fbc502563eb759fdb4",type:"text",placeholder:"e.g. Ethiopian",value:this.customArea,onInput:e=>this.customArea=e.target.value}),this.errors.customArea&&s("span",{key:"2b2425b63b0d5ee311fe16040d012a43919c8ca6",class:"error"},this.errors.customArea)),s("div",{key:"fafa1824f121c9c2c96069772d2011a13ce0683f",class:"field"},s("span",{key:"bea9e5877093e412b1fffb12f0aad4c79604cc16"},"Ingredients"),this.ingredients.map(((e,t)=>s("div",{class:"ingredient-row"},s("input",{type:"text",value:e,onInput:e=>this.updateIngredient(t,e.target.value)}),s("button",{type:"button",onClick:()=>this.removeIngredient(t),"aria-label":"Remove"},"✕")))),s("button",{key:"fc7a817c01706f4f99594ff09a72fa8b046f4820",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&s("span",{key:"d4b4bee30e1369f951f0aabe7f54b0b1ae393a83",class:"error"},this.errors.ingredients)),s("label",{key:"5028ae3ead65e280a2196f93d5f31580a5f8c95a"},"Instructions",s("textarea",{key:"08461bc98ab47d1f2240dfa23e1ec1264de12002",rows:5,onInput:e=>this.instructions=e.target.value},this.instructions),this.errors.instructions&&s("span",{key:"932de400651f180d7e5b14e4ff118ccdcd24d2b3",class:"error"},this.errors.instructions)),s("div",{key:"7da02b77a1390447a738882d0104292b28f675b0",class:"footer"},s("slot",{key:"74ed118f385e1e6e1318dd405aa0008e195ef9c0",name:"footer"}),s("button",{key:"e2548efd3826d3a984c11cd6d7bd486e226c8ca9",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),s("button",{key:"8011e51d4579a0e6ddd88cd8c83708524551d801",type:"submit",class:"save-btn"},"Save Recipe")))}static get watchers(){return{initialData:[{onInitialDataChange:0}]}}static get style(){return":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}"}},[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]},void 0,{initialData:[{onInitialDataChange:0}]}]);function r(){"undefined"!=typeof customElements&&["recipe-form"].forEach((t=>{"recipe-form"===t&&(customElements.get(e(t))||customElements.define(e(t),o))}))}r();export{o as R,r as d}

package/dist/components/recipe-card.js

@@ -1 +1 @@
-import{R as o,d as s}from"./p-CoCM6o6z.js";const p=o,r=s;export{p as RecipeCard,r as defineCustomElement}
+import{R as o,d as s}from"./p-Cn_qfIvv.js";const p=o,r=s;export{p as RecipeCard,r as defineCustomElement}

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

@@ -1 +1 @@
-import{R as o,d as s}from"./p-BIz6x-m7.js";const m=o,p=s;export{m as RecipeFilterBar,p as defineCustomElement}
+import{R as o,d as p}from"./p-B92NkO3p.js";const s=o,r=p;export{s as RecipeFilterBar,r as defineCustomElement}

package/dist/components/recipe-form.js

@@ -1 +1 @@
-import{R as o,d as s}from"./p-xcFZ4dcw.js";const c=o,p=s;export{c as RecipeForm,p as defineCustomElement}
+import{R as o,d as p}from"./p-u-o4onHp.js";const s=o,r=p;export{s as RecipeForm,r as defineCustomElement}

package/dist/components/recipe-rating.js

@@ -1 +1 @@
-import{R as o,d as p}from"./p-Ckp6dPOc.js";const s=o,r=p;export{s as RecipeRating,r as defineCustomElement}
+import{R as o,d as s}from"./p-mY_lBX8M.js";const m=o,p=s;export{m as RecipeRating,p as defineCustomElement}

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

@@ -1 +1 @@
-import{R as o,d as s}from"./p-vGdzhVB7.js";const p=o,r=s;export{p as RecipeSearchBar,r as defineCustomElement}
+import{R as o,d as s}from"./p-K-btCLSj.js";const t=o,p=s;export{t as RecipeSearchBar,p as defineCustomElement}

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

@@ -17,7 +17,7 @@ const RecipeCard = class {
         };
     }
     render() {
-        return (h("div", { key: '1602604f99f17895a29343bf269cf5aa64db2ee1', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: 'b57ab7677ba357e3897f7dff5a2d8bb50a6af417', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '6720508f3723573e4fe4eef2504cffc442d3ffe1', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: 'e30557f6fa8ca3117d7f239c1f14e07e009500a2', class: "body" }, h("h3", { key: '11c63ca021b1204c78783b53d9defb1eddbe15fa' }, this.recipeTitle), this.category && h("span", { key: 'b3d2b2ebd8997d662ade303736b4ddd494a0e273', class: "category" }, this.category), h("div", { key: '80cc820f78f3fd4cb64f802e69ba03cfb441ce6c', class: "actions" }, h("slot", { key: '318cfb3954ad5392d56af94ba8a0e3cb3c220fa7', 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" })))));
     }
 };
 RecipeCard.style = recipeCardCss();
@@ -53,7 +53,7 @@ const RecipeSearchBar = class {
         this.internalValue = newVal;
     }
     render() {
-        return (h("div", { key: '65403c53fbbe3a809f1de94bb02b04a57e5b8cd1', class: "wrap" }, h("input", { key: '43fb8c2a103e9e700b62ad86de1a559fc3b71d5b', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), h("button", { key: '2399fce8ff18e60c83bf575454eeff0e74596c6b', 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 watchers() { return {
         "value": [{
@@ -77,7 +77,7 @@ const RecipeFilterBar = class {
     }
     render() {
         const cats = Array.isArray(this.categories) ? this.categories : [];
-        return (h("div", { key: '5d0c846f0a8df8aa178915d4ee6b6fa0009cba07', class: "wrap" }, h("button", { key: '49f9fa32d23122cdcee7f51869f3c158d0ce86c0', 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)))));
     }
 };
 RecipeFilterBar.style = recipeFilterBarCss();
@@ -94,12 +94,12 @@ const RecipeRating = class {
     }
     render() {
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (h("div", { key: '37923bd59ca23e07af39ebaca47a3e613809c12b', 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")))));
     }
 };
 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',
@@ -113,12 +113,15 @@ const RecipeForm = class {
         registerInstance(this, hostRef);
         this.save = createEvent(this, "save");
         this.cancel = createEvent(this, "cancel");
-        /** Cuisine/cuisine options for the dropdown — override to supply your own list */
-        this.cuisines = DEFAULT_AREAS;
+        /** 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.cuisine = '';
+        this.area = '';
+        this.customArea = '';
         this.ingredients = [''];
         this.instructions = '';
         this.errors = {};
@@ -126,12 +129,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(),
-                cuisine: this.cuisine.trim(),
+                area: resolvedArea,
                 ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
                 instructions: this.instructions.trim(),
             };
@@ -150,6 +154,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) {
@@ -167,9 +181,17 @@ const RecipeForm = class {
             this.title = data.title ?? '';
             this.image = data.image ?? '';
             this.category = data.category ?? '';
-            this.cuisine = data.cuisine ?? '';
             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() {
@@ -181,6 +203,9 @@ const RecipeForm = class {
             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;
     }
@@ -190,7 +215,7 @@ const RecipeForm = class {
         this.ingredients = next;
     }
     render() {
-        return (h("form", { key: '7268362cd88d1d924f4bf5e4061b136454935f7b', onSubmit: this.onSubmit }, h("slot", { key: '913490a0ba22ca884bcc1cac49c07573f2e8c214', name: "header" }), h("label", { key: 'cdc71ed3a3d297e7f111f7ec67c111818fe0fdf8' }, "Title", h("input", { key: 'c17da6820f298ee9fc786fa206ef3bc97e361735', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && h("span", { key: '2c61cc6f37f87536e72fe281b50a3c6a2bdfd9f2', class: "error" }, this.errors.title)), h("label", { key: '28aca3cb1ffeae0f471477d3e564598fe0459cc7' }, "Image URL", h("input", { key: 'd523a018b35b7160061db9dc8059ee5ce3f58433', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), h("div", { key: 'c01339651af391405999f3081ee98ad2be33d6da', class: "row" }, h("label", { key: '656b72f2ccb9488d22900f1b26f0907ece8190af' }, "Category", h("input", { key: '1b973a0c12b3c66e3c585e92930b4bdbb7240b0e', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) })), h("label", { key: '9e25bad33d00c3285fd948f3e7535e5c9d8d45f9' }, "Cuisine / Area", h("select", { key: '52365ebccaa5fa2e2361ab8102b1151eb60cb5d6', onInput: (e) => (this.cuisine = e.target.value) }, h("option", { key: 'ad40fd1dde5cae8e241fced55455dbadfede6734', value: "", selected: this.cuisine === '' }, "Select a cuisine\u2026"), this.cuisines.map((a) => (h("option", { value: a, selected: a === this.cuisine }, a)))))), h("div", { key: '53173a3fbea53dad5625e28a67aebbbe9880c490', class: "field" }, h("span", { key: 'e5699c07f862027afa73ce59c1f450df48504f37' }, "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: 'c37385b611c3b05eeb32a4f1a6de110b8a3b6be4', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && h("span", { key: '1e7c662423b1915bbfc7d2aeea9cea3cfef9d002', class: "error" }, this.errors.ingredients)), h("label", { key: '267e09ca2bb1a91ef552dc3522105d079570499d' }, "Instructions", h("textarea", { key: '99f4aa91fba6c3d499c4efa904794a6de75e62cd', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && h("span", { key: 'cde019552bf691ee8e5a737c8a8d3c493961b0f9', class: "error" }, this.errors.instructions)), h("div", { key: 'b4f40cb9ab323bcc27088e7d6c7609f26b6fd9cb', class: "footer" }, h("slot", { key: '150b900bcadc7f51cfdfd7fe9667c22c55a745fb', name: "footer" }), h("button", { key: '94e6ca7f8c291051f59b8fa4794c59833884d433', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), h("button", { key: '462f42ddfdd000af25066a1d4dbfc07be95abdd6', 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 watchers() { return {
         "initialData": [{

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

@@ -16,7 +16,7 @@ const AppToast = class {
         }
     }
     render() {
-        return (h("div", { key: '77c3d328a79659573feaaabe30b8c53c2023fb06', class: `toast ${this.type}` }, h("span", { key: '0056d61321beb80bdebd957be4322516282fd07e' }, this.message), h("button", { key: 'f9b6161dcd74223f3241311e54ab5e2736dcbd3b', 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")));
     }
 };
 AppToast.style = appToastCss();

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["app-modal_7",[[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"],"cuisines":[16],"title":[32],"image":[32],"category":[32],"cuisine":[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",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
+  return bootstrapLazy([["app-modal_7",[[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",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/recipe-ui.js

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["app-modal_7",[[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"],"cuisines":[16],"title":[32],"image":[32],"category":[32],"cuisine":[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",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
+  return bootstrapLazy([["app-modal_7",[[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",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
 });

package/dist/recipe-ui/p-1f2f28cf.entry.js

@@ -0,0 +1 @@
+import{r as e,c as t,h as i}from"./p-CrZUP9M-.js";const a=class{constructor(i){e(this,i),this.favoriteToggle=t(this,"favoriteToggle"),this.cardClick=t(this,"cardClick"),this.category="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return i("div",{key:"72e604b38c4156bfe101f0609fac315cd317c981",class:"card",onClick:()=>this.cardClick.emit()},i("div",{key:"bb707d57e573970201644e029eb6257e100e2276",class:"image-wrap"},this.image?i("img",{src:this.image,alt:this.recipeTitle}):i("div",{class:"placeholder"}),i("button",{key:"bb052a897f227e8b8ca938704a083d8502036037",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),i("div",{key:"e4c139b9bdbdac25e92def0705d8506d89a0ce65",class:"body"},i("h3",{key:"aea91bd0827cdbe2608d91b428489a11eb7de0fa"},this.recipeTitle),this.category&&i("span",{key:"96219817064ee274999487452db6c70dee93d82f",class:"category"},this.category),i("div",{key:"c2593b0d879744a24c4be179af1d9359e3e904fa",class:"actions"},i("slot",{key:"19e921048e6d469a33531c2bb949067a7925c7ac",name:"actions"}))))}};a.style=":host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}";const s=class{constructor(i){e(this,i),this.search=t(this,"search"),this.placeholder="Search recipes...",this.value="",this.debounceMs=350,this.internalValue="",this.onInput=e=>{this.internalValue=e.target.value,clearTimeout(this.timer),this.timer=setTimeout((()=>{this.search.emit({value:this.internalValue})}),this.debounceMs)},this.onKeyDown=e=>{"Enter"===e.key&&(clearTimeout(this.timer),this.search.emit({value:this.internalValue}))}}componentWillLoad(){this.internalValue=this.value}onValuePropChange(e){this.internalValue=e}render(){return i("div",{key:"7fa4a3ce06ef9b7e68b968a0bf29cce896cc7db0",class:"wrap"},i("input",{key:"ae2e528fafd1f342de8a88c14f0651857bc0486d",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),i("button",{key:"c9a369dca794014f17cd64cfaa4b7b9f0e06d171",onClick:()=>this.search.emit({value:this.internalValue}),"aria-label":"Search"},"🔍"))}static get watchers(){return{value:[{onValuePropChange:0}]}}};s.style=":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:6px}input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #ddd;font-size:14px;outline:none}input:focus{border-color:#ff6b35}button{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:0 16px;cursor:pointer;font-size:15px}";const o=class{constructor(i){e(this,i),this.filterChange=t(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return i("div",{key:"336e3431325ab3338cda5be917414c6be4be1cf9",class:"wrap"},i("button",{key:"f1a5c228cf9ef1dd2017b26be55afdd07e27c837",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>i("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}};o.style=":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}";const r=class{constructor(i){e(this,i),this.ratingChange=t(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const e=Array.from({length:this.max},((e,t)=>t+1));return i("div",{key:"9e67a7c471e6b20bbc2bc0164a5346c8cd5f10dc",class:"wrap",role:this.readonly?void 0:"radiogroup"},e.map((e=>i("span",{class:{star:!0,filled:e<=this.value,clickable:!this.readonly},onClick:()=>!this.readonly&&this.ratingChange.emit({value:e})},"★"))))}};r.style=":host{display:inline-block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:2px}.star{font-size:18px;color:#ddd}.star.filled{color:#f5a623}.star.clickable{cursor:pointer}";const n=["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"],c=class{constructor(i){e(this,i),this.save=t(this,"save"),this.cancel=t(this,"cancel"),this.areas=n,this.extraAreas=[],this.title="",this.image="",this.category="",this.area="",this.customArea="",this.ingredients=[""],this.instructions="",this.errors={},this.onSubmit=e=>{if(e.preventDefault(),!this.validate())return;const t="Other"===this.area?this.customArea.trim():this.area,i={id:this.initialData?.id,title:this.title.trim(),image:this.image.trim(),category:this.category.trim(),area:t,ingredients:this.ingredients.map((e=>e.trim())).filter(Boolean),instructions:this.instructions.trim()};this.save.emit(i)},this.addIngredient=()=>{this.ingredients=[...this.ingredients,""]},this.removeIngredient=e=>{this.ingredients=this.ingredients.filter(((t,i)=>i!==e))}}componentWillLoad(){this.loadInitialData()}onInitialDataChange(){this.loadInitialData()}get fullAreaList(){const e=[...this.areas.filter((e=>"Other"!==e))];for(const t of this.extraAreas)t&&!e.includes(t)&&e.push(t);return e.push("Other"),e}loadInitialData(){let e;if("string"==typeof this.initialData&&this.initialData)try{e=JSON.parse(this.initialData)}catch{e=void 0}else this.initialData&&"object"==typeof this.initialData&&(e=this.initialData);if(e){this.title=e.title??"",this.image=e.image??"",this.category=e.category??"",this.ingredients=e.ingredients?.length?[...e.ingredients]:[""],this.instructions=e.instructions??"";const t=this.fullAreaList.filter((e=>"Other"!==e));e.area&&!t.includes(e.area)?(this.area="Other",this.customArea=e.area):(this.area=e.area??"",this.customArea="")}}validate(){const e={};return this.title.trim()||(e.title="Title is required."),0===this.ingredients.map((e=>e.trim())).filter(Boolean).length&&(e.ingredients="Add at least one ingredient."),this.instructions.trim()||(e.instructions="Instructions are required."),"Other"!==this.area||this.customArea.trim()||(e.customArea="Enter a cuisine name."),this.errors=e,0===Object.keys(e).length}updateIngredient(e,t){const i=[...this.ingredients];i[e]=t,this.ingredients=i}render(){return i("form",{key:"b9e50e96b20b8f3bb28ecb516b102c87088daddd",onSubmit:this.onSubmit},i("slot",{key:"648424eb3444acdacb69e541799571ffa6572004",name:"header"}),i("label",{key:"77ec1e8acd2ba845262909f672fadf06907702f2"},"Title",i("input",{key:"2f5dd98ab985831eb07ac43afed983908f2646d1",type:"text",value:this.title,onInput:e=>this.title=e.target.value}),this.errors.title&&i("span",{key:"244560b4dc4cb47cbb514d0f8fe41be267299885",class:"error"},this.errors.title)),i("label",{key:"8bb49420325a7629186a5801162b9a2e4321e4f7"},"Image URL",i("input",{key:"fe121c2389308b5bc0e6f7b977f15fec91f9baae",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),i("div",{key:"2ede3939f5230f805841945a29fc37fc4d2f3627",class:"row"},i("label",{key:"b736ee46a12a1070cb52c76fc41d31e0f8d1169b"},"Category",i("input",{key:"6952f8378b13313c1c63d2cb1b1cd9c2593d1806",type:"text",value:this.category,onInput:e=>this.category=e.target.value})),i("label",{key:"a6e477f0bfdfbab6a75831a62334b665272a98db"},"Cuisine / Area",i("select",{key:"1434d68a1782d19f92cd2d5ef638f440a8adc7dd",onInput:e=>this.area=e.target.value},i("option",{key:"a40b1cacf4deb98590689325f23e572522069268",value:"",selected:""===this.area},"Select a cuisine…"),this.fullAreaList.map((e=>i("option",{value:e,selected:e===this.area},e)))))),"Other"===this.area&&i("label",{key:"77ab0849f544aacc7c2a207dc222c916dfb7a41b",class:"custom-area-field"},"Enter cuisine name",i("input",{key:"fd7c97a89c0e2b8f23cc28fbc502563eb759fdb4",type:"text",placeholder:"e.g. Ethiopian",value:this.customArea,onInput:e=>this.customArea=e.target.value}),this.errors.customArea&&i("span",{key:"2b2425b63b0d5ee311fe16040d012a43919c8ca6",class:"error"},this.errors.customArea)),i("div",{key:"fafa1824f121c9c2c96069772d2011a13ce0683f",class:"field"},i("span",{key:"bea9e5877093e412b1fffb12f0aad4c79604cc16"},"Ingredients"),this.ingredients.map(((e,t)=>i("div",{class:"ingredient-row"},i("input",{type:"text",value:e,onInput:e=>this.updateIngredient(t,e.target.value)}),i("button",{type:"button",onClick:()=>this.removeIngredient(t),"aria-label":"Remove"},"✕")))),i("button",{key:"fc7a817c01706f4f99594ff09a72fa8b046f4820",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&i("span",{key:"d4b4bee30e1369f951f0aabe7f54b0b1ae393a83",class:"error"},this.errors.ingredients)),i("label",{key:"5028ae3ead65e280a2196f93d5f31580a5f8c95a"},"Instructions",i("textarea",{key:"08461bc98ab47d1f2240dfa23e1ec1264de12002",rows:5,onInput:e=>this.instructions=e.target.value},this.instructions),this.errors.instructions&&i("span",{key:"932de400651f180d7e5b14e4ff118ccdcd24d2b3",class:"error"},this.errors.instructions)),i("div",{key:"7da02b77a1390447a738882d0104292b28f675b0",class:"footer"},i("slot",{key:"74ed118f385e1e6e1318dd405aa0008e195ef9c0",name:"footer"}),i("button",{key:"e2548efd3826d3a984c11cd6d7bd486e226c8ca9",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),i("button",{key:"8011e51d4579a0e6ddd88cd8c83708524551d801",type:"submit",class:"save-btn"},"Save Recipe")))}static get watchers(){return{initialData:[{onInitialDataChange:0}]}}};c.style=":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 d=class{constructor(i){e(this,i),this.assignMeal=t(this,"assignMeal"),this.removeMeal=t(this,"removeMeal"),this.day="",this.meals=[],this.icon=""}render(){const e=Array.isArray(this.meals)?this.meals:[];return i("div",{key:"cd4f194f1eeb5f53a029f380c40aa0b4ec2f32f4",class:"day-col"},i("div",{key:"d88966142d5101fc522d5de89b6d4cab72cbbbf3",class:"col-header"},this.icon&&i("span",{key:"5a9a27a3a1909bcf7295ec7eeccf309e5e2d1ae0",class:"icon"},this.icon),i("h3",{key:"fd1fa2f1274cc1f6bd8917959015722cb69002ba"},this.day),e.length>0&&i("span",{key:"feff3bc91b52203dba19f7a87c56d3813fc95cdd",class:"count-badge"},e.length)),i("div",{key:"4afee9ce77bf1447bf9e32efc7e2f9b9571873e7",class:"meals"},e.map((e=>i("div",{class:"meal-chip"},i("div",{class:"thumb"},e.image&&i("img",{src:e.image,alt:e.title})),i("span",{class:"title"},e.title),i("button",{class:"remove-btn",onClick:()=>this.removeMeal.emit({day:this.day,mealId:e.id}),"aria-label":`Remove ${e.title}`},"✕")))),0===e.length&&i("p",{key:"9a4002b1b4516fc5ff6ef8f9a2e0a7f5e8465cbd",class:"empty"},"No meal planned")),i("button",{key:"2cef3c5f7d0e89303cb8989f78eefb95c426683f",class:"add-btn",onClick:()=>this.assignMeal.emit({day:this.day})},i("span",{key:"ae54b56f8f0b01f45029e36919764ae31f3a38b9",class:"plus"},"+")," Add meal"))}};d.style=":host{display:block;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif}.day-col{background:#ffffff;border:1px solid #e8eaed;border-radius:12px;padding:14px;min-width:160px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(16, 24, 40, 0.04);transition:box-shadow 0.15s ease, border-color 0.15s ease}.day-col:hover{box-shadow:0 4px 12px rgba(16, 24, 40, 0.08);border-color:#d8dce1}.col-header{display:flex;align-items:center;gap:6px;padding-bottom:8px;border-bottom:1px solid #f0f1f3}.col-header .icon{font-size:15px;line-height:1}.col-header h3{margin:0;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#4b5563;flex:1}.count-badge{background:#eef2ff;color:#4338ca;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.5}.meals{display:flex;flex-direction:column;gap:6px;min-height:44px}.meal-chip{display:flex;align-items:center;gap:8px;background:#f9fafb;border:1px solid #eef0f2;border-radius:9px;padding:6px 8px;font-size:12.5px;transition:background 0.12s ease}.meal-chip:hover{background:#f3f4f6}.thumb{width:28px;height:28px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#e5e7eb}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.meal-chip .title{flex:1;color:#1f2937;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-btn{border:none;background:none;cursor:pointer;color:#9ca3af;font-size:11px;line-height:1;padding:3px;border-radius:5px;transition:color 0.12s ease, background 0.12s ease}.remove-btn:hover{color:#dc2626;background:#fef2f2}.empty{font-size:12px;color:#9ca3af;margin:6px 0;text-align:center;font-style:italic}.add-btn{display:flex;align-items:center;justify-content:center;gap:4px;border:1.5px dashed #d1d5db;background:none;border-radius:9px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;color:#6b7280;transition:border-color 0.12s ease, color 0.12s ease, background 0.12s ease}.add-btn:hover{border-color:#6366f1;color:#4f46e5;background:#f5f5ff}.plus{font-size:14px;line-height:1}";const l=class{constructor(i){e(this,i),this.close=t(this,"close"),this.open=!1,this.modalTitle=""}render(){return this.open?i("div",{class:"overlay",onClick:()=>this.close.emit()},i("div",{class:"dialog",onClick:e=>e.stopPropagation()},i("div",{class:"header"},i("h2",null,this.modalTitle),i("button",{class:"close-btn",onClick:()=>this.close.emit(),"aria-label":"Close"},"✕")),i("div",{class:"body"},i("slot",null)))):null}};l.style=":host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}";export{l as app_modal,d as meal_plan_day,a as recipe_card,o as recipe_filter_bar,c as recipe_form,r as recipe_rating,s as recipe_search_bar}

package/dist/recipe-ui/{p-74151c7f.entry.js → p-e66a8ded.entry.js}

@@ -1 +1 @@
-import{r as s,c as t,h as o}from"./p-CrZUP9M-.js";const a=class{constructor(o){s(this,o),this.dismiss=t(this,"dismiss"),this.message="",this.type="info",this.duration=3e3}componentDidLoad(){this.duration>0&&setTimeout((()=>this.dismiss.emit()),this.duration)}render(){return o("div",{key:"77c3d328a79659573feaaabe30b8c53c2023fb06",class:`toast ${this.type}`},o("span",{key:"0056d61321beb80bdebd957be4322516282fd07e"},this.message),o("button",{key:"f9b6161dcd74223f3241311e54ab5e2736dcbd3b",onClick:()=>this.dismiss.emit(),"aria-label":"Dismiss"},"✕"))}};a.style=":host{font-family:system-ui, sans-serif;display:block}.toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;color:#fff;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.toast.success{background:#2ecc71}.toast.error{background:#e74c3c}.toast.info{background:#3498db}button{border:none;background:none;color:inherit;cursor:pointer;margin-left:auto}";export{a as app_toast}
+import{r as s,c as t,h as o}from"./p-CrZUP9M-.js";const a=class{constructor(o){s(this,o),this.dismiss=t(this,"dismiss"),this.message="",this.type="info",this.duration=3e3}componentDidLoad(){this.duration>0&&setTimeout((()=>this.dismiss.emit()),this.duration)}render(){return o("div",{key:"40cf0d0171712b45dd8786bd69aa2f94a1fc7335",class:`toast ${this.type}`},o("span",{key:"5256c39505158066715c94420ff65a479a7ab382"},this.message),o("button",{key:"523f0f7617a902910d13179147ca75fa57499433",onClick:()=>this.dismiss.emit(),"aria-label":"Dismiss"},"✕"))}};a.style=":host{font-family:system-ui, sans-serif;display:block}.toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;color:#fff;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.toast.success{background:#2ecc71}.toast.error{background:#e74c3c}.toast.info{background:#3498db}button{border:none;background:none;color:inherit;cursor:pointer;margin-left:auto}";export{a as app_toast}

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

@@ -1 +1 @@
-import{p as e,b as a}from"./p-CrZUP9M-.js";export{s as setNonce}from"./p-CrZUP9M-.js";import{g as i}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((async e=>(await i(),a([["p-e912fdc5",[[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"],cuisines:[16],title:[32],image:[32],category:[32],cuisine:[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}]}]]],["p-74151c7f",[[1,"app-toast",{message:[1],type:[1],duration:[2]}]]]],e))));
+import{p as e,b as a}from"./p-CrZUP9M-.js";export{s as setNonce}from"./p-CrZUP9M-.js";import{g as r}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,r={};return""!==a&&(r.resourcesUrl=new URL(".",a).href),e(r)})().then((async e=>(await r(),a([["p-1f2f28cf",[[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}]}]]],["p-e66a8ded",[[1,"app-toast",{message:[1],type:[1],duration:[2]}]]]],e))));

package/dist/types/components/recipe-form/recipe-form.d.ts

@@ -4,18 +4,21 @@ export interface RecipeFormData {
     title: string;
     image: string;
     category: string;
-    cuisine?: string;
+    area?: string;
     ingredients: string[];
     instructions: string;
 }
 export declare class RecipeForm {
     initialData: RecipeFormData | string;
-    /** Cuisine/cuisine options for the dropdown — override to supply your own list */
-    cuisines: string[];
+    /** Full override of the cuisine dropdown options */
+    areas: string[];
+    /** Additional cuisine options merged in before "Other" */
+    extraAreas: string[];
     title: string;
     image: string;
     category: string;
-    cuisine: string;
+    area: string;
+    customArea: string;
     ingredients: string[];
     instructions: string;
     errors: Record<string, string>;
@@ -23,6 +26,7 @@ export declare class RecipeForm {
     cancel: EventEmitter<void>;
     componentWillLoad(): void;
     onInitialDataChange(): void;
+    private get fullAreaList();
     private loadInitialData;
     private validate;
     private onSubmit;

package/dist/types/components.d.ts

@@ -99,10 +99,15 @@ export namespace Components {
     }
     interface RecipeForm {
         /**
-          * Cuisine/cuisine options for the dropdown — override to supply your own list
+          * Full override of the cuisine dropdown options
           * @default [   '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', ]
          */
-        "cuisines": string[];
+        "areas": string[];
+        /**
+          * Additional cuisine options merged in before "Other"
+          * @default []
+         */
+        "extraAreas": string[];
         "initialData": RecipeFormData | string;
     }
     /**
@@ -452,10 +457,15 @@ declare namespace LocalJSX {
     }
     interface RecipeForm {
         /**
-          * Cuisine/cuisine options for the dropdown — override to supply your own list
+          * Full override of the cuisine dropdown options
           * @default [   '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', ]
          */
-        "cuisines"?: string[];
+        "areas"?: string[];
+        /**
+          * Additional cuisine options merged in before "Other"
+          * @default []
+         */
+        "extraAreas"?: string[];
         "initialData"?: RecipeFormData | string;
         "onCancel"?: (event: RecipeFormCustomEvent<void>) => void;
         "onSave"?: (event: RecipeFormCustomEvent<RecipeFormData>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gurpinderjitsingh/recipe-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Reusable web component library for the Recipe Finder & Meal Planner app, built with StencilJS.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/components/p-xcFZ4dcw.js

@@ -1 +0,0 @@
-import{t as e,p as t,H as i,c as a,h as s}from"./p-BJU3HdRm.js";const n=["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"],c=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.save=a(this,"save"),this.cancel=a(this,"cancel"),this.cuisines=n,this.title="",this.image="",this.category="",this.cuisine="",this.ingredients=[""],this.instructions="",this.errors={},this.onSubmit=e=>{if(e.preventDefault(),!this.validate())return;const t={id:this.initialData?.id,title:this.title.trim(),image:this.image.trim(),category:this.category.trim(),cuisine:this.cuisine.trim(),ingredients:this.ingredients.map((e=>e.trim())).filter(Boolean),instructions:this.instructions.trim()};this.save.emit(t)},this.addIngredient=()=>{this.ingredients=[...this.ingredients,""]},this.removeIngredient=e=>{this.ingredients=this.ingredients.filter(((t,i)=>i!==e))}}componentWillLoad(){this.loadInitialData()}onInitialDataChange(){this.loadInitialData()}loadInitialData(){let e;if("string"==typeof this.initialData&&this.initialData)try{e=JSON.parse(this.initialData)}catch{e=void 0}else this.initialData&&"object"==typeof this.initialData&&(e=this.initialData);e&&(this.title=e.title??"",this.image=e.image??"",this.category=e.category??"",this.cuisine=e.cuisine??"",this.ingredients=e.ingredients?.length?[...e.ingredients]:[""],this.instructions=e.instructions??"")}validate(){const e={};return this.title.trim()||(e.title="Title is required."),0===this.ingredients.map((e=>e.trim())).filter(Boolean).length&&(e.ingredients="Add at least one ingredient."),this.instructions.trim()||(e.instructions="Instructions are required."),this.errors=e,0===Object.keys(e).length}updateIngredient(e,t){const i=[...this.ingredients];i[e]=t,this.ingredients=i}render(){return s("form",{key:"7268362cd88d1d924f4bf5e4061b136454935f7b",onSubmit:this.onSubmit},s("slot",{key:"913490a0ba22ca884bcc1cac49c07573f2e8c214",name:"header"}),s("label",{key:"cdc71ed3a3d297e7f111f7ec67c111818fe0fdf8"},"Title",s("input",{key:"c17da6820f298ee9fc786fa206ef3bc97e361735",type:"text",value:this.title,onInput:e=>this.title=e.target.value}),this.errors.title&&s("span",{key:"2c61cc6f37f87536e72fe281b50a3c6a2bdfd9f2",class:"error"},this.errors.title)),s("label",{key:"28aca3cb1ffeae0f471477d3e564598fe0459cc7"},"Image URL",s("input",{key:"d523a018b35b7160061db9dc8059ee5ce3f58433",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),s("div",{key:"c01339651af391405999f3081ee98ad2be33d6da",class:"row"},s("label",{key:"656b72f2ccb9488d22900f1b26f0907ece8190af"},"Category",s("input",{key:"1b973a0c12b3c66e3c585e92930b4bdbb7240b0e",type:"text",value:this.category,onInput:e=>this.category=e.target.value})),s("label",{key:"9e25bad33d00c3285fd948f3e7535e5c9d8d45f9"},"Cuisine / Area",s("select",{key:"52365ebccaa5fa2e2361ab8102b1151eb60cb5d6",onInput:e=>this.cuisine=e.target.value},s("option",{key:"ad40fd1dde5cae8e241fced55455dbadfede6734",value:"",selected:""===this.cuisine},"Select a cuisine…"),this.cuisines.map((e=>s("option",{value:e,selected:e===this.cuisine},e)))))),s("div",{key:"53173a3fbea53dad5625e28a67aebbbe9880c490",class:"field"},s("span",{key:"e5699c07f862027afa73ce59c1f450df48504f37"},"Ingredients"),this.ingredients.map(((e,t)=>s("div",{class:"ingredient-row"},s("input",{type:"text",value:e,onInput:e=>this.updateIngredient(t,e.target.value)}),s("button",{type:"button",onClick:()=>this.removeIngredient(t),"aria-label":"Remove"},"✕")))),s("button",{key:"c37385b611c3b05eeb32a4f1a6de110b8a3b6be4",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&s("span",{key:"1e7c662423b1915bbfc7d2aeea9cea3cfef9d002",class:"error"},this.errors.ingredients)),s("label",{key:"267e09ca2bb1a91ef552dc3522105d079570499d"},"Instructions",s("textarea",{key:"99f4aa91fba6c3d499c4efa904794a6de75e62cd",rows:5,onInput:e=>this.instructions=e.target.value},this.instructions),this.errors.instructions&&s("span",{key:"cde019552bf691ee8e5a737c8a8d3c493961b0f9",class:"error"},this.errors.instructions)),s("div",{key:"b4f40cb9ab323bcc27088e7d6c7609f26b6fd9cb",class:"footer"},s("slot",{key:"150b900bcadc7f51cfdfd7fe9667c22c55a745fb",name:"footer"}),s("button",{key:"94e6ca7f8c291051f59b8fa4794c59833884d433",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),s("button",{key:"462f42ddfdd000af25066a1d4dbfc07be95abdd6",type:"submit",class:"save-btn"},"Save Recipe")))}static get watchers(){return{initialData:[{onInitialDataChange:0}]}}static get style(){return":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}"}},[257,"recipe-form",{initialData:[1,"initial-data"],cuisines:[16],title:[32],image:[32],category:[32],cuisine:[32],ingredients:[32],instructions:[32],errors:[32]},void 0,{initialData:[{onInitialDataChange:0}]}]);function d(){"undefined"!=typeof customElements&&["recipe-form"].forEach((t=>{"recipe-form"===t&&(customElements.get(e(t))||customElements.define(e(t),c))}))}d();export{c as R,d}

package/dist/recipe-ui/p-e912fdc5.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as i}from"./p-CrZUP9M-.js";const a=class{constructor(i){e(this,i),this.favoriteToggle=t(this,"favoriteToggle"),this.cardClick=t(this,"cardClick"),this.category="",this.favorite=!1,this.onFavoriteClick=e=>{e.stopPropagation(),this.favoriteToggle.emit({favorite:!this.favorite})}}render(){return i("div",{key:"1602604f99f17895a29343bf269cf5aa64db2ee1",class:"card",onClick:()=>this.cardClick.emit()},i("div",{key:"b57ab7677ba357e3897f7dff5a2d8bb50a6af417",class:"image-wrap"},this.image?i("img",{src:this.image,alt:this.recipeTitle}):i("div",{class:"placeholder"}),i("button",{key:"6720508f3723573e4fe4eef2504cffc442d3ffe1",class:{"fav-btn":!0,active:this.favorite},onClick:this.onFavoriteClick,"aria-label":"Toggle favorite"},this.favorite?"★":"☆")),i("div",{key:"e30557f6fa8ca3117d7f239c1f14e07e009500a2",class:"body"},i("h3",{key:"11c63ca021b1204c78783b53d9defb1eddbe15fa"},this.recipeTitle),this.category&&i("span",{key:"b3d2b2ebd8997d662ade303736b4ddd494a0e273",class:"category"},this.category),i("div",{key:"80cc820f78f3fd4cb64f802e69ba03cfb441ce6c",class:"actions"},i("slot",{key:"318cfb3954ad5392d56af94ba8a0e3cb3c220fa7",name:"actions"}))))}};a.style=":host{display:block;font-family:system-ui, sans-serif}.card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:box-shadow 0.15s ease, transform 0.15s ease}.card:hover{box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);transform:translateY(-2px)}.image-wrap{position:relative;aspect-ratio:4 / 3;background:#f2f2f2}.image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{width:100%;height:100%;background:linear-gradient(135deg, #eee, #ddd)}.fav-btn{position:absolute;top:8px;right:8px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;width:32px;height:32px;font-size:16px;cursor:pointer;color:#f5a623}.fav-btn.active{color:#ff6b35}.body{padding:12px 14px}h3{margin:0 0 4px;font-size:15px;line-height:1.3}.category{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:0.03em}.actions{margin-top:8px}";const s=class{constructor(i){e(this,i),this.search=t(this,"search"),this.placeholder="Search recipes...",this.value="",this.debounceMs=350,this.internalValue="",this.onInput=e=>{this.internalValue=e.target.value,clearTimeout(this.timer),this.timer=setTimeout((()=>{this.search.emit({value:this.internalValue})}),this.debounceMs)},this.onKeyDown=e=>{"Enter"===e.key&&(clearTimeout(this.timer),this.search.emit({value:this.internalValue}))}}componentWillLoad(){this.internalValue=this.value}onValuePropChange(e){this.internalValue=e}render(){return i("div",{key:"65403c53fbbe3a809f1de94bb02b04a57e5b8cd1",class:"wrap"},i("input",{key:"43fb8c2a103e9e700b62ad86de1a559fc3b71d5b",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),i("button",{key:"2399fce8ff18e60c83bf575454eeff0e74596c6b",onClick:()=>this.search.emit({value:this.internalValue}),"aria-label":"Search"},"🔍"))}static get watchers(){return{value:[{onValuePropChange:0}]}}};s.style=":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:6px}input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #ddd;font-size:14px;outline:none}input:focus{border-color:#ff6b35}button{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:0 16px;cursor:pointer;font-size:15px}";const o=class{constructor(i){e(this,i),this.filterChange=t(this,"filterChange"),this.categories=[],this.active=""}select(e){this.filterChange.emit({value:e})}render(){const e=Array.isArray(this.categories)?this.categories:[];return i("div",{key:"5d0c846f0a8df8aa178915d4ee6b6fa0009cba07",class:"wrap"},i("button",{key:"49f9fa32d23122cdcee7f51869f3c158d0ce86c0",class:{chip:!0,active:""===this.active},onClick:()=>this.select("")},"All"),e.map((e=>i("button",{class:{chip:!0,active:this.active===e},onClick:()=>this.select(e)},e))))}};o.style=":host{display:block;font-family:system-ui, sans-serif}.wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;color:#444}.chip.active{background:#ff6b35;border-color:#ff6b35;color:#fff}";const r=class{constructor(i){e(this,i),this.ratingChange=t(this,"ratingChange"),this.value=0,this.readonly=!1,this.max=5}render(){const e=Array.from({length:this.max},((e,t)=>t+1));return i("div",{key:"37923bd59ca23e07af39ebaca47a3e613809c12b",class:"wrap",role:this.readonly?void 0:"radiogroup"},e.map((e=>i("span",{class:{star:!0,filled:e<=this.value,clickable:!this.readonly},onClick:()=>!this.readonly&&this.ratingChange.emit({value:e})},"★"))))}};r.style=":host{display:inline-block;font-family:system-ui, sans-serif}.wrap{display:flex;gap:2px}.star{font-size:18px;color:#ddd}.star.filled{color:#f5a623}.star.clickable{cursor:pointer}";const c=["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"],n=class{constructor(i){e(this,i),this.save=t(this,"save"),this.cancel=t(this,"cancel"),this.cuisines=c,this.title="",this.image="",this.category="",this.cuisine="",this.ingredients=[""],this.instructions="",this.errors={},this.onSubmit=e=>{if(e.preventDefault(),!this.validate())return;const t={id:this.initialData?.id,title:this.title.trim(),image:this.image.trim(),category:this.category.trim(),cuisine:this.cuisine.trim(),ingredients:this.ingredients.map((e=>e.trim())).filter(Boolean),instructions:this.instructions.trim()};this.save.emit(t)},this.addIngredient=()=>{this.ingredients=[...this.ingredients,""]},this.removeIngredient=e=>{this.ingredients=this.ingredients.filter(((t,i)=>i!==e))}}componentWillLoad(){this.loadInitialData()}onInitialDataChange(){this.loadInitialData()}loadInitialData(){let e;if("string"==typeof this.initialData&&this.initialData)try{e=JSON.parse(this.initialData)}catch{e=void 0}else this.initialData&&"object"==typeof this.initialData&&(e=this.initialData);e&&(this.title=e.title??"",this.image=e.image??"",this.category=e.category??"",this.cuisine=e.cuisine??"",this.ingredients=e.ingredients?.length?[...e.ingredients]:[""],this.instructions=e.instructions??"")}validate(){const e={};return this.title.trim()||(e.title="Title is required."),0===this.ingredients.map((e=>e.trim())).filter(Boolean).length&&(e.ingredients="Add at least one ingredient."),this.instructions.trim()||(e.instructions="Instructions are required."),this.errors=e,0===Object.keys(e).length}updateIngredient(e,t){const i=[...this.ingredients];i[e]=t,this.ingredients=i}render(){return i("form",{key:"7268362cd88d1d924f4bf5e4061b136454935f7b",onSubmit:this.onSubmit},i("slot",{key:"913490a0ba22ca884bcc1cac49c07573f2e8c214",name:"header"}),i("label",{key:"cdc71ed3a3d297e7f111f7ec67c111818fe0fdf8"},"Title",i("input",{key:"c17da6820f298ee9fc786fa206ef3bc97e361735",type:"text",value:this.title,onInput:e=>this.title=e.target.value}),this.errors.title&&i("span",{key:"2c61cc6f37f87536e72fe281b50a3c6a2bdfd9f2",class:"error"},this.errors.title)),i("label",{key:"28aca3cb1ffeae0f471477d3e564598fe0459cc7"},"Image URL",i("input",{key:"d523a018b35b7160061db9dc8059ee5ce3f58433",type:"text",value:this.image,onInput:e=>this.image=e.target.value})),i("div",{key:"c01339651af391405999f3081ee98ad2be33d6da",class:"row"},i("label",{key:"656b72f2ccb9488d22900f1b26f0907ece8190af"},"Category",i("input",{key:"1b973a0c12b3c66e3c585e92930b4bdbb7240b0e",type:"text",value:this.category,onInput:e=>this.category=e.target.value})),i("label",{key:"9e25bad33d00c3285fd948f3e7535e5c9d8d45f9"},"Cuisine / Area",i("select",{key:"52365ebccaa5fa2e2361ab8102b1151eb60cb5d6",onInput:e=>this.cuisine=e.target.value},i("option",{key:"ad40fd1dde5cae8e241fced55455dbadfede6734",value:"",selected:""===this.cuisine},"Select a cuisine…"),this.cuisines.map((e=>i("option",{value:e,selected:e===this.cuisine},e)))))),i("div",{key:"53173a3fbea53dad5625e28a67aebbbe9880c490",class:"field"},i("span",{key:"e5699c07f862027afa73ce59c1f450df48504f37"},"Ingredients"),this.ingredients.map(((e,t)=>i("div",{class:"ingredient-row"},i("input",{type:"text",value:e,onInput:e=>this.updateIngredient(t,e.target.value)}),i("button",{type:"button",onClick:()=>this.removeIngredient(t),"aria-label":"Remove"},"✕")))),i("button",{key:"c37385b611c3b05eeb32a4f1a6de110b8a3b6be4",type:"button",class:"add-btn",onClick:this.addIngredient},"+ Add ingredient"),this.errors.ingredients&&i("span",{key:"1e7c662423b1915bbfc7d2aeea9cea3cfef9d002",class:"error"},this.errors.ingredients)),i("label",{key:"267e09ca2bb1a91ef552dc3522105d079570499d"},"Instructions",i("textarea",{key:"99f4aa91fba6c3d499c4efa904794a6de75e62cd",rows:5,onInput:e=>this.instructions=e.target.value},this.instructions),this.errors.instructions&&i("span",{key:"cde019552bf691ee8e5a737c8a8d3c493961b0f9",class:"error"},this.errors.instructions)),i("div",{key:"b4f40cb9ab323bcc27088e7d6c7609f26b6fd9cb",class:"footer"},i("slot",{key:"150b900bcadc7f51cfdfd7fe9667c22c55a745fb",name:"footer"}),i("button",{key:"94e6ca7f8c291051f59b8fa4794c59833884d433",type:"button",class:"cancel-btn",onClick:()=>this.cancel.emit()},"Cancel"),i("button",{key:"462f42ddfdd000af25066a1d4dbfc07be95abdd6",type:"submit",class:"save-btn"},"Save Recipe")))}static get watchers(){return{initialData:[{onInitialDataChange:0}]}}};n.style=":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 d=class{constructor(i){e(this,i),this.assignMeal=t(this,"assignMeal"),this.removeMeal=t(this,"removeMeal"),this.day="",this.meals=[],this.icon=""}render(){const e=Array.isArray(this.meals)?this.meals:[];return i("div",{key:"cd4f194f1eeb5f53a029f380c40aa0b4ec2f32f4",class:"day-col"},i("div",{key:"d88966142d5101fc522d5de89b6d4cab72cbbbf3",class:"col-header"},this.icon&&i("span",{key:"5a9a27a3a1909bcf7295ec7eeccf309e5e2d1ae0",class:"icon"},this.icon),i("h3",{key:"fd1fa2f1274cc1f6bd8917959015722cb69002ba"},this.day),e.length>0&&i("span",{key:"feff3bc91b52203dba19f7a87c56d3813fc95cdd",class:"count-badge"},e.length)),i("div",{key:"4afee9ce77bf1447bf9e32efc7e2f9b9571873e7",class:"meals"},e.map((e=>i("div",{class:"meal-chip"},i("div",{class:"thumb"},e.image&&i("img",{src:e.image,alt:e.title})),i("span",{class:"title"},e.title),i("button",{class:"remove-btn",onClick:()=>this.removeMeal.emit({day:this.day,mealId:e.id}),"aria-label":`Remove ${e.title}`},"✕")))),0===e.length&&i("p",{key:"9a4002b1b4516fc5ff6ef8f9a2e0a7f5e8465cbd",class:"empty"},"No meal planned")),i("button",{key:"2cef3c5f7d0e89303cb8989f78eefb95c426683f",class:"add-btn",onClick:()=>this.assignMeal.emit({day:this.day})},i("span",{key:"ae54b56f8f0b01f45029e36919764ae31f3a38b9",class:"plus"},"+")," Add meal"))}};d.style=":host{display:block;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif}.day-col{background:#ffffff;border:1px solid #e8eaed;border-radius:12px;padding:14px;min-width:160px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(16, 24, 40, 0.04);transition:box-shadow 0.15s ease, border-color 0.15s ease}.day-col:hover{box-shadow:0 4px 12px rgba(16, 24, 40, 0.08);border-color:#d8dce1}.col-header{display:flex;align-items:center;gap:6px;padding-bottom:8px;border-bottom:1px solid #f0f1f3}.col-header .icon{font-size:15px;line-height:1}.col-header h3{margin:0;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#4b5563;flex:1}.count-badge{background:#eef2ff;color:#4338ca;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.5}.meals{display:flex;flex-direction:column;gap:6px;min-height:44px}.meal-chip{display:flex;align-items:center;gap:8px;background:#f9fafb;border:1px solid #eef0f2;border-radius:9px;padding:6px 8px;font-size:12.5px;transition:background 0.12s ease}.meal-chip:hover{background:#f3f4f6}.thumb{width:28px;height:28px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#e5e7eb}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.meal-chip .title{flex:1;color:#1f2937;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-btn{border:none;background:none;cursor:pointer;color:#9ca3af;font-size:11px;line-height:1;padding:3px;border-radius:5px;transition:color 0.12s ease, background 0.12s ease}.remove-btn:hover{color:#dc2626;background:#fef2f2}.empty{font-size:12px;color:#9ca3af;margin:6px 0;text-align:center;font-style:italic}.add-btn{display:flex;align-items:center;justify-content:center;gap:4px;border:1.5px dashed #d1d5db;background:none;border-radius:9px;padding:7px;font-size:12px;font-weight:600;cursor:pointer;color:#6b7280;transition:border-color 0.12s ease, color 0.12s ease, background 0.12s ease}.add-btn:hover{border-color:#6366f1;color:#4f46e5;background:#f5f5ff}.plus{font-size:14px;line-height:1}";const f=class{constructor(i){e(this,i),this.close=t(this,"close"),this.open=!1,this.modalTitle=""}render(){return this.open?i("div",{class:"overlay",onClick:()=>this.close.emit()},i("div",{class:"dialog",onClick:e=>e.stopPropagation()},i("div",{class:"header"},i("h2",null,this.modalTitle),i("button",{class:"close-btn",onClick:()=>this.close.emit(),"aria-label":"Close"},"✕")),i("div",{class:"body"},i("slot",null)))):null}};f.style=":host{font-family:system-ui, sans-serif}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.45);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{background:#fff;border-radius:12px;min-width:320px;max-width:90vw;max-height:85vh;overflow-y:auto;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.header h2{margin:0;font-size:18px}.close-btn{border:none;background:none;font-size:16px;cursor:pointer;color:#666}";export{f as app_modal,d as meal_plan_day,a as recipe_card,o as recipe_filter_bar,n as recipe_form,r as recipe_rating,s as recipe_search_bar}