recipe-planner-ui 1.0.0

package/dist/collection/components/rp-day-slot/rp-day-slot.js

@@ -0,0 +1,201 @@
+import { Host, h } from "@stencil/core";
+/**
+ * One day column of a weekly meal plan.
+ *
+ * Moving a meal is a select rather than drag-and-drop: it works with a keyboard and on
+ * touch without a fallback path, and the plan is small enough that dragging adds nothing.
+ *
+ * @slot - Empty-state content shown when the day has no meals.
+ */
+export class DaySlot {
+    /** Machine-readable day key, echoed in every event. */
+    day;
+    /** Human-readable day name shown as the column heading. */
+    dayLabel = '';
+    /** Meals planned for this day. Must be assigned as a DOM property. */
+    meals = [];
+    /** All day keys, used to populate each meal's move target list. */
+    days = [];
+    normalized = [];
+    /** Fired when the user asks to add a meal to this day. */
+    rpAddMeal;
+    /** Fired when a meal is removed from this day. */
+    rpRemoveMeal;
+    /** Fired when a meal is reassigned to a different day. */
+    rpMoveMeal;
+    componentWillLoad() {
+        this.normalized = Array.isArray(this.meals) ? this.meals : [];
+    }
+    componentWillUpdate() {
+        // Recomputed before each render rather than in a @Watch, because the property can be
+        // replaced before the element upgrades, which @Watch would miss.
+        this.normalized = Array.isArray(this.meals) ? this.meals : [];
+    }
+    onMove = (event, meal) => {
+        const select = event.target;
+        const to = select.value;
+        if (!to || to === this.day)
+            return;
+        this.rpMoveMeal.emit({ id: meal.id, from: this.day, to });
+        // The consumer re-renders from its own data; resetting avoids a stale selection
+        // if that render is delayed.
+        select.value = '';
+    };
+    render() {
+        const days = Array.isArray(this.days) ? this.days : [];
+        const meals = this.normalized;
+        return (h(Host, { key: '689cfc71ca7fc7106e29278d027ce1c36b3830c0' }, h("section", { key: 'd15ed9ae6f800be9962c4c1258397ff1043fef76', class: "slot" }, h("header", { key: '7f3ce1dcd4e94af5699b378ab1e461a34792acd8', class: "head" }, h("h3", { key: 'b62fe42a27f0072370e59a101452f77de8527ae0', class: "day" }, this.dayLabel || this.day), h("button", { key: '658191328f041bc2dd7534a3f5614746f26c0f28', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${this.dayLabel || this.day}` }, "+")), meals.length === 0 ? (h("div", { class: "empty" }, h("slot", null, h("p", { class: "empty-text" }, "No meals planned")))) : (h("ul", { class: "meals" }, meals.map((meal) => (h("li", { class: "meal", key: meal.id }, h("span", { class: "meal-title" }, meal.title), h("div", { class: "meal-actions" }, h("label", { class: "move" }, h("span", { class: "sr-only" }, `Move ${meal.title} to another day`), h("select", { class: "move-select", onChange: (event) => this.onMove(event, meal) }, h("option", { value: "" }, "Move\u2026"), days
+            .filter((day) => day !== this.day)
+            .map((day) => (h("option", { key: day, value: day }, day))))), h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
+    }
+    static get is() { return "rp-day-slot"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rp-day-slot.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rp-day-slot.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "day": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Machine-readable day key, echoed in every event."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "day"
+            },
+            "dayLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Human-readable day name shown as the column heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "day-label",
+                "defaultValue": "''"
+            },
+            "meals": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PlannedMeal[]",
+                    "resolved": "PlannedMeal[]",
+                    "references": {
+                        "PlannedMeal": {
+                            "location": "local",
+                            "path": "C:/Users/sonis/Meal Planner/recipe-ui/src/components/rp-day-slot/rp-day-slot.tsx",
+                            "id": "src/components/rp-day-slot/rp-day-slot.tsx::PlannedMeal"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Meals planned for this day. Must be assigned as a DOM property."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "days": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "All day keys, used to populate each meal's move target list."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "normalized": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rpAddMeal",
+                "name": "rpAddMeal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the user asks to add a meal to this day."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "rpRemoveMeal",
+                "name": "rpRemoveMeal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a meal is removed from this day."
+                },
+                "complexType": {
+                    "original": "{ id: string; day: string }",
+                    "resolved": "{ id: string; day: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "rpMoveMeal",
+                "name": "rpMoveMeal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a meal is reassigned to a different day."
+                },
+                "complexType": {
+                    "original": "{ id: string; from: string; to: string }",
+                    "resolved": "{ id: string; from: string; to: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/rp-filter-chips/rp-filter-chips.css

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+  font-family: var(--rp-font-sans);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rp-space-2);
+}
+
+.chip {
+  padding: var(--rp-space-1) var(--rp-space-3);
+  font: inherit;
+  font-size: var(--rp-font-size-sm);
+  color: var(--rp-color-text);
+  cursor: pointer;
+  background: var(--rp-color-surface);
+  border: 1px solid var(--rp-color-border);
+  border-radius: 999px;
+}
+
+.chip:hover {
+  background: var(--rp-color-surface-sunken);
+}
+
+.chip.is-selected {
+  color: var(--rp-color-accent-contrast);
+  background: var(--rp-color-accent);
+  border-color: var(--rp-color-accent);
+}
+
+.chip:focus-visible {
+  outline: var(--rp-focus-ring);
+  outline-offset: var(--rp-focus-offset);
+}

package/dist/collection/components/rp-filter-chips/rp-filter-chips.js

@@ -0,0 +1,123 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A single-select row of filter chips.
+ *
+ * Selecting the active chip clears the filter, so the event detail is nullable —
+ * consumers translate null into "remove this search param".
+ */
+export class FilterChips {
+    /**
+     * Available filter values.
+     *
+     * An array has no attribute representation, so this must be assigned as a DOM
+     * property. Frameworks that set properties on custom elements do this automatically.
+     */
+    options = [];
+    /** Currently active value, or null when no filter is applied. */
+    selected = null;
+    /** Accessible label for the group. */
+    label = 'Filter';
+    /** Fired with the new selection, or null when the filter is cleared. */
+    rpFilterChange;
+    select(option) {
+        this.rpFilterChange.emit(this.selected === option ? null : option);
+    }
+    render() {
+        // A string prop arriving from an HTML attribute would be unusable; tolerate it so
+        // the component behaves predictably in a plain .html page.
+        const options = Array.isArray(this.options) ? this.options : [];
+        return (h(Host, { key: '656b969af2e55a7c4313bc0c2c422e000811af53' }, h("div", { key: '1da1173fc1d6d10a312a43466a0ea799b625caef', class: "chips", role: "group", "aria-label": this.label }, options.map((option) => (h("button", { key: option, type: "button", class: { chip: true, 'is-selected': this.selected === option }, "aria-pressed": String(this.selected === option), onClick: () => this.select(option) }, option))))));
+    }
+    static get is() { return "rp-filter-chips"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rp-filter-chips.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rp-filter-chips.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Available filter values.\n\nAn array has no attribute representation, so this must be assigned as a DOM\nproperty. Frameworks that set properties on custom elements do this automatically."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selected": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently active value, or null when no filter is applied."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "null"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Filter'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rpFilterChange",
+                "name": "rpFilterChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired with the new selection, or null when the filter is cleared."
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/rp-ingredient-list/rp-ingredient-list.css

@@ -0,0 +1,53 @@
+:host {
+  display: block;
+  font-family: var(--rp-font-sans);
+  color: var(--rp-color-text);
+}
+
+.heading {
+  margin: 0 0 var(--rp-space-3);
+  font-size: var(--rp-font-size-lg);
+}
+
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius-md);
+  overflow: hidden;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--rp-space-4);
+  padding: var(--rp-space-2) var(--rp-space-3);
+  font-size: var(--rp-font-size-md);
+}
+
+.row:nth-child(odd) {
+  background: var(--rp-color-surface-sunken);
+}
+
+.measure {
+  flex-shrink: 0;
+  color: var(--rp-color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.empty {
+  margin: 0;
+  font-size: var(--rp-font-size-md);
+  color: var(--rp-color-text-muted);
+}
+
+.note {
+  margin-top: var(--rp-space-2);
+  font-size: var(--rp-font-size-sm);
+  color: var(--rp-color-text-muted);
+}
+
+.note:not(:has(*)) {
+  display: none;
+}

package/dist/collection/components/rp-ingredient-list/rp-ingredient-list.js

@@ -0,0 +1,57 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A measure-and-name ingredient table.
+ *
+ * @slot heading - Replaces the default heading.
+ * @slot - Footnote content rendered beneath the list, such as a serving count.
+ */
+export class IngredientList {
+    /** Ingredients to display. Must be assigned as a DOM property, not an attribute. */
+    items = [];
+    render() {
+        const items = Array.isArray(this.items) ? this.items : [];
+        return (h(Host, { key: '22708ae6e60de472b2f8e40fb54b33a2ec691ad1' }, h("section", { key: '6f922fc37e3c230511bbdf72e55826dfa73e167e', class: "wrap" }, h("slot", { key: 'e9f0b16183f5ded825a5c1663caa54dcb6c2d961', name: "heading" }, h("h2", { key: 'c68ebf97056bc6309d3c4e79d1796d89eede1325', class: "heading" }, "Ingredients")), items.length === 0 ? (h("p", { class: "empty" }, "No ingredients listed for this recipe.")) : (h("ul", { class: "list" }, items.map((item, index) => (
+        // Ingredient names repeat within a recipe (for example, oil listed twice
+        // with different measures), so the index is part of the identity.
+        h("li", { class: "row", key: `${item.name}-${index}` }, h("span", { class: "name" }, item.name), h("span", { class: "measure" }, item.measure)))))), h("div", { key: '28d26e1bbb9f14e5dedfb153ff87e44add5cfbfb', class: "note" }, h("slot", { key: '20410e710e3c7dbc2ee9f6ad9493984382693687' })))));
+    }
+    static get is() { return "rp-ingredient-list"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rp-ingredient-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rp-ingredient-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{ name: string; measure: string }>",
+                    "resolved": "{ name: string; measure: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ingredients to display. Must be assigned as a DOM property, not an attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+}

package/dist/collection/components/rp-modal/rp-modal.css

@@ -0,0 +1,94 @@
+:host {
+  display: contents;
+  font-family: var(--rp-font-sans);
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: grid;
+  place-items: center;
+  padding: var(--rp-space-4);
+  background: rgb(0 0 0 / 0.5);
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  width: min(560px, 100%);
+  max-height: min(80vh, 640px);
+  color: var(--rp-color-text);
+  background: var(--rp-color-surface);
+  border-radius: var(--rp-radius-lg);
+  box-shadow: var(--rp-shadow-lg);
+}
+
+.head {
+  display: flex;
+  gap: var(--rp-space-3);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rp-space-4);
+  border-bottom: 1px solid var(--rp-color-border);
+}
+
+.heading {
+  margin: 0;
+  font-size: var(--rp-font-size-lg);
+}
+
+.close {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: var(--rp-color-text-muted);
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: var(--rp-radius-sm);
+}
+
+.close:hover {
+  background: var(--rp-color-surface-sunken);
+}
+
+.close:focus-visible {
+  outline: var(--rp-focus-ring);
+  outline-offset: var(--rp-focus-offset);
+}
+
+.body {
+  flex: 1;
+  padding: var(--rp-space-4);
+  overflow-y: auto;
+}
+
+.foot {
+  display: flex;
+  gap: var(--rp-space-2);
+  justify-content: flex-end;
+  padding: var(--rp-space-4);
+  border-top: 1px solid var(--rp-color-border);
+}
+
+.foot:not(:has(*)) {
+  display: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .dialog {
+    animation: rp-modal-in 120ms ease-out;
+  }
+
+  @keyframes rp-modal-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+  }
+}