@gurpinderjitsingh/recipe-ui 0.4.0 → 0.6.0

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

@@ -19,7 +19,7 @@ const RecipeCard = class {
         };
     }
     render() {
-        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" })))));
+        return (index.h("div", { key: 'd84f83b5082a49a5a05b93678538bfcfecd92e47', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: 'a0e4f5fae6b7c14c750263f8de9bef9fbd8180a0', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: '9266af379f6ebeb2624131e5c3f287d64cf4b3a5', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: 'd0b5fa56b17c14763ecc6301864ef797565c6313', class: "body" }, index.h("h3", { key: '0c67db81d80a820cce2e6bfedd2df2611358d1e8' }, this.recipeTitle), this.category && index.h("span", { key: '30f89cf328a098be1c109d3e71b8f9f15827c6f1', class: "category" }, this.category), index.h("div", { key: '353b2663855e7ac53817d17acaf7b83908c17d85', class: "actions" }, index.h("slot", { key: '0a04fc5024751df45d744814f579100913dcd1fc', name: "actions" })))));
     }
 };
 RecipeCard.style = recipeCardCss();
@@ -55,7 +55,7 @@ const RecipeSearchBar = class {
         this.internalValue = newVal;
     }
     render() {
-        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")));
+        return (index.h("div", { key: '00fa553cd92086a5cac70ca6b13792dfa41fc1dd', class: "wrap" }, index.h("input", { key: 'a116c51839c228d4daff54347e6b2d56c9dc2579', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), index.h("button", { key: 'e16a909061abd80889ad7b7646219a7428e4db4d', 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: '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)))));
+        return (index.h("div", { key: '3088a84e81d49c06a12f93e491d4ae3e7022635f', class: "wrap" }, index.h("button", { key: '0e8b7455b1364eb76721d4f6c227a0803750c466', 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,13 +96,18 @@ const RecipeRating = class {
     }
     render() {
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        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")))));
+        return (index.h("div", { key: '09bd2482d310e73993faea601d5ab86f20fc6fb7', 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,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_CATEGORIES = [
+    'Beef', 'Breakfast', 'Chicken', 'Dessert', 'Goat', 'Lamb',
+    'Miscellaneous', 'Pasta', 'Pork', 'Seafood', 'Side', 'Starter',
+    'Vegan', 'Vegetarian', 'Other',
+];
 const DEFAULT_AREAS = [
     'American', 'British', 'Chinese', 'Croatian', 'Dutch', 'Egyptian',
     'Filipino', 'French', 'Greek', 'Indian', 'Irish', 'Italian', 'Jamaican',
@@ -115,13 +120,14 @@ const RecipeForm = class {
         index.registerInstance(this, hostRef);
         this.save = index.createEvent(this, "save");
         this.cancel = index.createEvent(this, "cancel");
-        /** Full override of the cuisine dropdown options */
+        this.categories = DEFAULT_CATEGORIES;
+        this.extraCategories = [];
         this.areas = DEFAULT_AREAS;
-        /** Additional cuisine options merged in before "Other" */
         this.extraAreas = [];
         this.title = '';
         this.image = '';
         this.category = '';
+        this.customCategory = '';
         this.area = '';
         this.customArea = '';
         this.ingredients = [''];
@@ -131,13 +137,14 @@ const RecipeForm = class {
             e.preventDefault();
             if (!this.validate())
                 return;
+            const resolvedCategory = this.category === 'Other' ? this.customCategory.trim() : this.category;
             const resolvedArea = this.area === 'Other' ? this.customArea.trim() : this.area;
             const data = {
                 id: this.initialData?.id,
                 title: this.title.trim(),
                 image: this.image.trim(),
-                category: this.category.trim(),
-                area: resolvedArea,
+                category: resolvedCategory,
+                cuisine: resolvedArea,
                 ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
                 instructions: this.instructions.trim(),
             };
@@ -148,6 +155,9 @@ const RecipeForm = class {
         };
         this.removeIngredient = (index) => {
             this.ingredients = this.ingredients.filter((_, i) => i !== index);
+            const next = this.ingredients.filter((_, i) => i !== index);
+            this.ingredients = next;
+            this.clearErrorIf('ingredients', next.some((i) => i.trim()));
         };
     }
     componentWillLoad() {
@@ -156,16 +166,31 @@ const RecipeForm = class {
     onInitialDataChange() {
         this.loadInitialData();
     }
-    get fullAreaList() {
-        const withoutOther = this.areas.filter((a) => a !== 'Other');
+    mergeList(base, extra) {
+        const withoutOther = base.filter((a) => a !== 'Other');
         const merged = [...withoutOther];
-        for (const extra of this.extraAreas) {
-            if (extra && !merged.includes(extra))
-                merged.push(extra);
+        for (const e of extra) {
+            if (e && !merged.includes(e))
+                merged.push(e);
         }
         merged.push('Other');
         return merged;
     }
+    get fullCategoryList() {
+        return this.mergeList(this.categories, this.extraCategories);
+    }
+    get fullAreaList() {
+        return this.mergeList(this.areas, this.extraAreas);
+    }
+    /** Removes a field's error as soon as it becomes valid, without waiting
+     *  for the next full submit — called from each field's input handler. */
+    clearErrorIf(key, isNowValid) {
+        if (isNowValid && this.errors[key]) {
+            const next = { ...this.errors };
+            delete next[key];
+            this.errors = next;
+        }
+    }
     loadInitialData() {
         let data;
         if (typeof this.initialData === 'string' && this.initialData) {
@@ -182,16 +207,24 @@ const RecipeForm = class {
         if (data) {
             this.title = data.title ?? '';
             this.image = data.image ?? '';
-            this.category = data.category ?? '';
             this.ingredients = data.ingredients?.length ? [...data.ingredients] : [''];
             this.instructions = data.instructions ?? '';
+            const knownCategories = this.fullCategoryList.filter((a) => a !== 'Other');
+            if (data.category && !knownCategories.includes(data.category)) {
+                this.category = 'Other';
+                this.customCategory = data.category;
+            }
+            else {
+                this.category = data.category ?? '';
+                this.customCategory = '';
+            }
             const knownAreas = this.fullAreaList.filter((a) => a !== 'Other');
-            if (data.area && !knownAreas.includes(data.area)) {
+            if (data.cuisine && !knownAreas.includes(data.cuisine)) {
                 this.area = 'Other';
-                this.customArea = data.area;
+                this.customArea = data.cuisine;
             }
             else {
-                this.area = data.area ?? '';
+                this.area = data.cuisine ?? '';
                 this.customArea = '';
             }
         }
@@ -205,7 +238,16 @@ 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()) {
+        if (!this.category.trim()) {
+            errors.category = 'Category is required.';
+        }
+        else if (this.category === 'Other' && !this.customCategory.trim()) {
+            errors.customCategory = 'Enter a category name.';
+        }
+        if (!this.area.trim()) {
+            errors.area = 'Cuisine / Area is required.';
+        }
+        else if (this.area === 'Other' && !this.customArea.trim()) {
             errors.customArea = 'Enter a cuisine name.';
         }
         this.errors = errors;
@@ -215,9 +257,33 @@ const RecipeForm = class {
         const next = [...this.ingredients];
         next[index] = value;
         this.ingredients = next;
+        this.clearErrorIf('ingredients', next.some((i) => i.trim()));
     }
     render() {
-        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"))));
+        return (index.h("form", { key: 'c29ab62af9db4a95e11b75f25a2dd4c23e699dad', onSubmit: this.onSubmit }, index.h("slot", { key: 'ece02ab46a1075eaef912e8953e70faa11bc8d8d', name: "header" }), index.h("label", { key: '9e17e9ba311350d9235f5ec01c32743dfbf55b0e' }, "Title", index.h("input", { key: '2b8d632bc22eb5cde52198287ea2b19d87567dba', type: "text", value: this.title, onInput: (e) => {
+                (this.title = e.target.value);
+                this.clearErrorIf('title', !!this.title.trim());
+            } }), this.errors.title && index.h("span", { key: '3a34d1f5e1f43ef190983dd0883f16eb6775f07c', class: "error" }, this.errors.title)), index.h("label", { key: '6acda6ccaff2e0315cc1964ae30c18647fe97bd1' }, "Image URL", index.h("input", { key: '6bdc06a2bebd6b5ae984865aefe292426fbe38cb', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), index.h("div", { key: 'f6ef49aaace211659296e93b4b5b47b29db73ac6', class: "row" }, index.h("label", { key: '9610c81a85ebddc2da4bdadcdee68ddea78e28d4' }, "Category", index.h("select", { key: '46542ff9e2c0f15d60be6744e063f3c860475772', onInput: (e) => {
+                (this.category = e.target.value);
+                this.clearErrorIf('category', !!this.category);
+                if (this.category !== 'Other')
+                    this.clearErrorIf('customCategory', true);
+            } }, index.h("option", { key: '2741b90edd32cb12903e877cbfa2db3b5ff04071', value: "", selected: this.category === '' }, "Select a category\u2026"), this.fullCategoryList.map((c) => (index.h("option", { value: c, selected: c === this.category }, c)))), this.errors.category && index.h("span", { key: 'dc8e7ab5a6decdece1b4559af856997251335abf', class: "error" }, this.errors.category)), index.h("label", { key: '792cb1c4fd6052f9d88c52649c6eb4dc064f0071' }, "Cuisine / Area", index.h("select", { key: '06a917ac951a4c6d3e8390534690545a1967581a', onInput: (e) => {
+                (this.area = e.target.value);
+                this.clearErrorIf('area', !!this.area);
+                if (this.area !== 'Other')
+                    this.clearErrorIf('customArea', true);
+            } }, index.h("option", { key: '264c39814065b3f07626975b96eca6b7e1c9bb83', value: "", selected: this.area === '' }, "Select a cuisine\u2026"), this.fullAreaList.map((a) => (index.h("option", { value: a, selected: a === this.area }, a)))), this.errors.area && index.h("span", { key: 'f1a562402420fb7a813dd4184b439c03c71d93d9', class: "error" }, this.errors.area))), (this.category === 'Other' || this.area === 'Other') && (index.h("div", { key: '3c20e6b5b678027d711c7976c60e3be92d02fae3', class: "row" }, this.category === 'Other' && (index.h("label", { key: '4cd14baeff186c7db8fabe57b21b241567528437', class: "custom-area-field" }, "Enter category name", index.h("input", { key: 'b1880e7aaadb3ade3c980c7f44d6b0a8d4fc3923', type: "text", placeholder: "e.g. Brunch", value: this.customCategory, onInput: (e) => {
+                (this.customCategory = e.target.value);
+                this.customCategory = e.target.value;
+                this.clearErrorIf('customCategory', !!this.customCategory.trim());
+            } }), this.errors.customCategory && index.h("span", { key: 'abd5094a23a182458ff2b76a58b55d65a9540c83', class: "error" }, this.errors.customCategory))), this.area === 'Other' && (index.h("label", { key: '696c0cc6af2cf16df8559da441e38635d8e0012c', class: "custom-area-field" }, "Enter cuisine name", index.h("input", { key: '663fee3941527c736d953cc993b886746dabab23', type: "text", placeholder: "e.g. Ethiopian", value: this.customArea, onInput: (e) => {
+                this.customArea = e.target.value;
+                this.clearErrorIf('customArea', !!this.customArea.trim());
+            } }), this.errors.customArea && index.h("span", { key: '6e1b7ebfac7166fb1120b0d8f914bb076f5e40ee', class: "error" }, this.errors.customArea))))), index.h("div", { key: 'fe85b73291a5ee955d069f20ddf33835d09b95bd', class: "field" }, index.h("span", { key: 'fd010d7b12306bd4306caf03ebd972feb1e0ebb9' }, "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: '8168f7e7f4bef8be1e74d1adf377b5471701c0ff', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && index.h("span", { key: '3e35a8fe02833b27a333fa157548b88b3f5e3842', class: "error" }, this.errors.ingredients)), index.h("label", { key: 'c5c583cba5363ce35e6d41f95917bc49e3cca02d' }, "Instructions", index.h("textarea", { key: '514c219989a01cf1ad77739bd6c0df066362c689', rows: 5, onInput: (e) => {
+                this.instructions = e.target.value;
+                this.clearErrorIf('instructions', !!this.instructions.trim());
+            } }, this.instructions), this.errors.instructions && index.h("span", { key: '89881e3b0d4f864f7ccc835d86b094f367b54b2e', class: "error" }, this.errors.instructions)), index.h("div", { key: 'b9a812287af44062e1c68034881ba62321b0e660', class: "footer" }, index.h("slot", { key: 'a8307179d95cfd713d8f5fbe6e996fefb1d54907', name: "footer" }), index.h("button", { key: 'aa75decaf67c74a183af182864a37a6cd37b56ff', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), index.h("button", { key: '13ea35b114f1a7721347f986c6c4e64968583025', 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: '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")));
+        return (index.h("div", { key: '8b34f0098a8d17af8b9384ddf8838c8ad6eaf7f2', class: `toast ${this.type}` }, index.h("span", { key: '652ce04dad64022f77dbd0236ebfc1a0075ba121' }, this.message), index.h("button", { key: '760c2e84e1bf01c3b7a8c43addf983711453be3b', 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"],"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);
+  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"],"categories":[16],"extraCategories":[16],"areas":[16],"extraAreas":[16],"title":[32],"image":[32],"category":[32],"customCategory":[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"],"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);
+  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"],"categories":[16],"extraCategories":[16],"areas":[16],"extraAreas":[16],"title":[32],"image":[32],"category":[32],"customCategory":[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: '40cf0d0171712b45dd8786bd69aa2f94a1fc7335', class: `toast ${this.type}` }, h("span", { key: '5256c39505158066715c94420ff65a479a7ab382' }, this.message), h("button", { key: '523f0f7617a902910d13179147ca75fa57499433', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
+        return (h("div", { key: '8b34f0098a8d17af8b9384ddf8838c8ad6eaf7f2', class: `toast ${this.type}` }, h("span", { key: '652ce04dad64022f77dbd0236ebfc1a0075ba121' }, this.message), h("button", { key: '760c2e84e1bf01c3b7a8c43addf983711453be3b', 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: '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" })))));
+        return (h("div", { key: 'd84f83b5082a49a5a05b93678538bfcfecd92e47', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: 'a0e4f5fae6b7c14c750263f8de9bef9fbd8180a0', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '9266af379f6ebeb2624131e5c3f287d64cf4b3a5', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: 'd0b5fa56b17c14763ecc6301864ef797565c6313', class: "body" }, h("h3", { key: '0c67db81d80a820cce2e6bfedd2df2611358d1e8' }, this.recipeTitle), this.category && h("span", { key: '30f89cf328a098be1c109d3e71b8f9f15827c6f1', class: "category" }, this.category), h("div", { key: '353b2663855e7ac53817d17acaf7b83908c17d85', class: "actions" }, h("slot", { key: '0a04fc5024751df45d744814f579100913dcd1fc', 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: '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)))));
+        return (h("div", { key: '3088a84e81d49c06a12f93e491d4ae3e7022635f', class: "wrap" }, h("button", { key: '0e8b7455b1364eb76721d4f6c227a0803750c466', 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.js

@@ -1,4 +1,9 @@
 import { h } from "@stencil/core";
+const DEFAULT_CATEGORIES = [
+    'Beef', 'Breakfast', 'Chicken', 'Dessert', 'Goat', 'Lamb',
+    'Miscellaneous', 'Pasta', 'Pork', 'Seafood', 'Side', 'Starter',
+    'Vegan', 'Vegetarian', 'Other',
+];
 const DEFAULT_AREAS = [
     'American', 'British', 'Chinese', 'Croatian', 'Dutch', 'Egyptian',
     'Filipino', 'French', 'Greek', 'Indian', 'Irish', 'Italian', 'Jamaican',
@@ -8,13 +13,14 @@ const DEFAULT_AREAS = [
 ];
 export class RecipeForm {
     constructor() {
-        /** Full override of the cuisine dropdown options */
+        this.categories = DEFAULT_CATEGORIES;
+        this.extraCategories = [];
         this.areas = DEFAULT_AREAS;
-        /** Additional cuisine options merged in before "Other" */
         this.extraAreas = [];
         this.title = '';
         this.image = '';
         this.category = '';
+        this.customCategory = '';
         this.area = '';
         this.customArea = '';
         this.ingredients = [''];
@@ -24,13 +30,14 @@ export class RecipeForm {
             e.preventDefault();
             if (!this.validate())
                 return;
+            const resolvedCategory = this.category === 'Other' ? this.customCategory.trim() : this.category;
             const resolvedArea = this.area === 'Other' ? this.customArea.trim() : this.area;
             const data = {
                 id: this.initialData?.id,
                 title: this.title.trim(),
                 image: this.image.trim(),
-                category: this.category.trim(),
-                area: resolvedArea,
+                category: resolvedCategory,
+                cuisine: resolvedArea,
                 ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
                 instructions: this.instructions.trim(),
             };
@@ -41,6 +48,9 @@ export class RecipeForm {
         };
         this.removeIngredient = (index) => {
             this.ingredients = this.ingredients.filter((_, i) => i !== index);
+            const next = this.ingredients.filter((_, i) => i !== index);
+            this.ingredients = next;
+            this.clearErrorIf('ingredients', next.some((i) => i.trim()));
         };
     }
     componentWillLoad() {
@@ -49,16 +59,31 @@ export class RecipeForm {
     onInitialDataChange() {
         this.loadInitialData();
     }
-    get fullAreaList() {
-        const withoutOther = this.areas.filter((a) => a !== 'Other');
+    mergeList(base, extra) {
+        const withoutOther = base.filter((a) => a !== 'Other');
         const merged = [...withoutOther];
-        for (const extra of this.extraAreas) {
-            if (extra && !merged.includes(extra))
-                merged.push(extra);
+        for (const e of extra) {
+            if (e && !merged.includes(e))
+                merged.push(e);
         }
         merged.push('Other');
         return merged;
     }
+    get fullCategoryList() {
+        return this.mergeList(this.categories, this.extraCategories);
+    }
+    get fullAreaList() {
+        return this.mergeList(this.areas, this.extraAreas);
+    }
+    /** Removes a field's error as soon as it becomes valid, without waiting
+     *  for the next full submit — called from each field's input handler. */
+    clearErrorIf(key, isNowValid) {
+        if (isNowValid && this.errors[key]) {
+            const next = { ...this.errors };
+            delete next[key];
+            this.errors = next;
+        }
+    }
     loadInitialData() {
         let data;
         if (typeof this.initialData === 'string' && this.initialData) {
@@ -75,16 +100,24 @@ export class RecipeForm {
         if (data) {
             this.title = data.title ?? '';
             this.image = data.image ?? '';
-            this.category = data.category ?? '';
             this.ingredients = data.ingredients?.length ? [...data.ingredients] : [''];
             this.instructions = data.instructions ?? '';
+            const knownCategories = this.fullCategoryList.filter((a) => a !== 'Other');
+            if (data.category && !knownCategories.includes(data.category)) {
+                this.category = 'Other';
+                this.customCategory = data.category;
+            }
+            else {
+                this.category = data.category ?? '';
+                this.customCategory = '';
+            }
             const knownAreas = this.fullAreaList.filter((a) => a !== 'Other');
-            if (data.area && !knownAreas.includes(data.area)) {
+            if (data.cuisine && !knownAreas.includes(data.cuisine)) {
                 this.area = 'Other';
-                this.customArea = data.area;
+                this.customArea = data.cuisine;
             }
             else {
-                this.area = data.area ?? '';
+                this.area = data.cuisine ?? '';
                 this.customArea = '';
             }
         }
@@ -98,7 +131,16 @@ 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()) {
+        if (!this.category.trim()) {
+            errors.category = 'Category is required.';
+        }
+        else if (this.category === 'Other' && !this.customCategory.trim()) {
+            errors.customCategory = 'Enter a category name.';
+        }
+        if (!this.area.trim()) {
+            errors.area = 'Cuisine / Area is required.';
+        }
+        else if (this.area === 'Other' && !this.customArea.trim()) {
             errors.customArea = 'Enter a cuisine name.';
         }
         this.errors = errors;
@@ -108,9 +150,33 @@ export class RecipeForm {
         const next = [...this.ingredients];
         next[index] = value;
         this.ingredients = next;
+        this.clearErrorIf('ingredients', next.some((i) => i.trim()));
     }
     render() {
-        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"))));
+        return (h("form", { key: 'c29ab62af9db4a95e11b75f25a2dd4c23e699dad', onSubmit: this.onSubmit }, h("slot", { key: 'ece02ab46a1075eaef912e8953e70faa11bc8d8d', name: "header" }), h("label", { key: '9e17e9ba311350d9235f5ec01c32743dfbf55b0e' }, "Title", h("input", { key: '2b8d632bc22eb5cde52198287ea2b19d87567dba', type: "text", value: this.title, onInput: (e) => {
+                (this.title = e.target.value);
+                this.clearErrorIf('title', !!this.title.trim());
+            } }), this.errors.title && h("span", { key: '3a34d1f5e1f43ef190983dd0883f16eb6775f07c', class: "error" }, this.errors.title)), h("label", { key: '6acda6ccaff2e0315cc1964ae30c18647fe97bd1' }, "Image URL", h("input", { key: '6bdc06a2bebd6b5ae984865aefe292426fbe38cb', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), h("div", { key: 'f6ef49aaace211659296e93b4b5b47b29db73ac6', class: "row" }, h("label", { key: '9610c81a85ebddc2da4bdadcdee68ddea78e28d4' }, "Category", h("select", { key: '46542ff9e2c0f15d60be6744e063f3c860475772', onInput: (e) => {
+                (this.category = e.target.value);
+                this.clearErrorIf('category', !!this.category);
+                if (this.category !== 'Other')
+                    this.clearErrorIf('customCategory', true);
+            } }, h("option", { key: '2741b90edd32cb12903e877cbfa2db3b5ff04071', value: "", selected: this.category === '' }, "Select a category\u2026"), this.fullCategoryList.map((c) => (h("option", { value: c, selected: c === this.category }, c)))), this.errors.category && h("span", { key: 'dc8e7ab5a6decdece1b4559af856997251335abf', class: "error" }, this.errors.category)), h("label", { key: '792cb1c4fd6052f9d88c52649c6eb4dc064f0071' }, "Cuisine / Area", h("select", { key: '06a917ac951a4c6d3e8390534690545a1967581a', onInput: (e) => {
+                (this.area = e.target.value);
+                this.clearErrorIf('area', !!this.area);
+                if (this.area !== 'Other')
+                    this.clearErrorIf('customArea', true);
+            } }, h("option", { key: '264c39814065b3f07626975b96eca6b7e1c9bb83', value: "", selected: this.area === '' }, "Select a cuisine\u2026"), this.fullAreaList.map((a) => (h("option", { value: a, selected: a === this.area }, a)))), this.errors.area && h("span", { key: 'f1a562402420fb7a813dd4184b439c03c71d93d9', class: "error" }, this.errors.area))), (this.category === 'Other' || this.area === 'Other') && (h("div", { key: '3c20e6b5b678027d711c7976c60e3be92d02fae3', class: "row" }, this.category === 'Other' && (h("label", { key: '4cd14baeff186c7db8fabe57b21b241567528437', class: "custom-area-field" }, "Enter category name", h("input", { key: 'b1880e7aaadb3ade3c980c7f44d6b0a8d4fc3923', type: "text", placeholder: "e.g. Brunch", value: this.customCategory, onInput: (e) => {
+                (this.customCategory = e.target.value);
+                this.customCategory = e.target.value;
+                this.clearErrorIf('customCategory', !!this.customCategory.trim());
+            } }), this.errors.customCategory && h("span", { key: 'abd5094a23a182458ff2b76a58b55d65a9540c83', class: "error" }, this.errors.customCategory))), this.area === 'Other' && (h("label", { key: '696c0cc6af2cf16df8559da441e38635d8e0012c', class: "custom-area-field" }, "Enter cuisine name", h("input", { key: '663fee3941527c736d953cc993b886746dabab23', type: "text", placeholder: "e.g. Ethiopian", value: this.customArea, onInput: (e) => {
+                this.customArea = e.target.value;
+                this.clearErrorIf('customArea', !!this.customArea.trim());
+            } }), this.errors.customArea && h("span", { key: '6e1b7ebfac7166fb1120b0d8f914bb076f5e40ee', class: "error" }, this.errors.customArea))))), h("div", { key: 'fe85b73291a5ee955d069f20ddf33835d09b95bd', class: "field" }, h("span", { key: 'fd010d7b12306bd4306caf03ebd972feb1e0ebb9' }, "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: '8168f7e7f4bef8be1e74d1adf377b5471701c0ff', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && h("span", { key: '3e35a8fe02833b27a333fa157548b88b3f5e3842', class: "error" }, this.errors.ingredients)), h("label", { key: 'c5c583cba5363ce35e6d41f95917bc49e3cca02d' }, "Instructions", h("textarea", { key: '514c219989a01cf1ad77739bd6c0df066362c689', rows: 5, onInput: (e) => {
+                this.instructions = e.target.value;
+                this.clearErrorIf('instructions', !!this.instructions.trim());
+            } }, this.instructions), this.errors.instructions && h("span", { key: '89881e3b0d4f864f7ccc835d86b094f367b54b2e', class: "error" }, this.errors.instructions)), h("div", { key: 'b9a812287af44062e1c68034881ba62321b0e660', class: "footer" }, h("slot", { key: 'a8307179d95cfd713d8f5fbe6e996fefb1d54907', name: "footer" }), h("button", { key: 'aa75decaf67c74a183af182864a37a6cd37b56ff', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), h("button", { key: '13ea35b114f1a7721347f986c6c4e64968583025', type: "submit", class: "save-btn" }, "Save Recipe"))));
     }
     static get is() { return "recipe-form"; }
     static get encapsulation() { return "shadow"; }
@@ -151,6 +217,42 @@ export class RecipeForm {
                 "reflect": false,
                 "attribute": "initial-data"
             },
+            "categories": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n  'Beef', 'Breakfast', 'Chicken', 'Dessert', 'Goat', 'Lamb',\n  'Miscellaneous', 'Pasta', 'Pork', 'Seafood', 'Side', 'Starter',\n  'Vegan', 'Vegetarian', 'Other',\n]"
+            },
+            "extraCategories": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
             "areas": {
                 "type": "unknown",
                 "mutable": false,
@@ -163,7 +265,7 @@ export class RecipeForm {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Full override of the cuisine dropdown options"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -181,7 +283,7 @@ export class RecipeForm {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Additional cuisine options merged in before \"Other\""
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -194,6 +296,7 @@ export class RecipeForm {
             "title": {},
             "image": {},
             "category": {},
+            "customCategory": {},
             "area": {},
             "customArea": {},
             "ingredients": {},

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: '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")))));
+        return (h("div", { key: '09bd2482d310e73993faea601d5ab86f20fc6fb7', 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: '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")));
+        return (h("div", { key: '00fa553cd92086a5cac70ca6b13792dfa41fc1dd', class: "wrap" }, h("input", { key: 'a116c51839c228d4daff54347e6b2d56c9dc2579', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), h("button", { key: 'e16a909061abd80889ad7b7646219a7428e4db4d', 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-BzvqJQ_R.js";const p=o,r=s;export{p as AppToast,r as defineCustomElement}
+import{A as o,d as s}from"./p-BUODh8vy.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-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";
+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-DnzGtyGi.js";export{R as RecipeSearchBar}from"./p-8_BMsNX-.js";export{R as RecipeFilterBar}from"./p-Ux-pnuEm.js";export{R as RecipeRating}from"./p-CeTpiLnn.js";export{R as RecipeForm}from"./p-DzfkrPp9.js";export{M as MealPlanDay}from"./p-S4266va_.js";export{A as AppModal}from"./p-Dp1sKtrN.js";export{A as AppToast}from"./p-BUODh8vy.js";

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

@@ -1 +1 @@
-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}
+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:"00fa553cd92086a5cac70ca6b13792dfa41fc1dd",class:"wrap"},i("input",{key:"a116c51839c228d4daff54347e6b2d56c9dc2579",type:"search",placeholder:this.placeholder,value:this.internalValue,onInput:this.onInput,onKeyDown:this.onKeyDown}),i("button",{key:"e16a909061abd80889ad7b7646219a7428e4db4d",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-BzvqJQ_R.js → p-BUODh8vy.js}

@@ -1 +1 @@
-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}
+import{t as s,p as t,H as e,c as a,h as o}from"./p-BJU3HdRm.js";const i=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.dismiss=a(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:"8b34f0098a8d17af8b9384ddf8838c8ad6eaf7f2",class:`toast ${this.type}`},o("span",{key:"652ce04dad64022f77dbd0236ebfc1a0075ba121"},this.message),o("button",{key:"760c2e84e1bf01c3b7a8c43addf983711453be3b",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}