@ssingh465/recipe-ui 0.1.1 → 0.2.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Shubhanshu Singh
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Shubhanshu Singh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/day-picker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DayPicker extends Components.DayPicker, HTMLElement {}
+export const DayPicker: {
+    prototype: DayPicker;
+    new (): DayPicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/day-picker.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as r,Host as t,transformTag as a}from"@stencil/core/internal/client";import{C as n,a as o}from"./icons.js";const c=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.planassign=i(this,"planassign",7),this.pickerclose=i(this,"pickerclose",7)}recipeId;days;label;planassign;pickerclose;open=!1;activeIndex=0;triggerEl;panelEl;dayEls=[];reposition=()=>this.positionPanel();handleOutsideClick=e=>{const s=e.composedPath();this.triggerEl&&this.panelEl&&(s.includes(this.triggerEl)||s.includes(this.panelEl)||this.closePanel(!1))};disconnectedCallback(){window.removeEventListener("resize",this.reposition),window.removeEventListener("scroll",this.reposition,!0),document.removeEventListener("pointerdown",this.handleOutsideClick,!0)}positionPanel(){if(!this.triggerEl||!this.panelEl)return;const e=this.triggerEl.getBoundingClientRect(),s=window.innerHeight-e.bottom<320?e.top-(this.panelEl.offsetHeight||324)-4:e.bottom+4;this.panelEl.style.left=e.left+"px",this.panelEl.style.top=s+"px"}openPanel=()=>{this.open=!0,this.activeIndex=0,requestAnimationFrame((()=>{this.panelEl?.showPopover?.(),this.positionPanel(),this.dayEls[0]?.focus(),window.addEventListener("resize",this.reposition),window.addEventListener("scroll",this.reposition,!0),document.addEventListener("pointerdown",this.handleOutsideClick,!0)}))};closePanel=e=>{this.open&&(this.open=!1,this.panelEl?.hidePopover?.(),window.removeEventListener("resize",this.reposition),window.removeEventListener("scroll",this.reposition,!0),document.removeEventListener("pointerdown",this.handleOutsideClick,!0),this.pickerclose.emit({}),e&&this.triggerEl?.focus())};get safeDays(){return Array.isArray(this.days)?this.days:[]}selectDay(e){e.occupied||(this.planassign.emit({recipeId:this.recipeId,day:e.day}),this.closePanel(!0))}focusIndex(e){const s=this.safeDays.length;0!==s&&(this.activeIndex=(e+s)%s,this.dayEls[this.activeIndex]?.focus())}handlePanelKeydown=e=>{switch(e.key){case"ArrowDown":e.preventDefault(),this.focusIndex(this.activeIndex+1);break;case"ArrowUp":e.preventDefault(),this.focusIndex(this.activeIndex-1);break;case"Home":e.preventDefault(),this.focusIndex(0);break;case"End":e.preventDefault(),this.focusIndex(this.safeDays.length-1);break;case"Tab":e.preventDefault();break;case"Escape":e.preventDefault(),this.closePanel(!0)}};render(){const{open:e,activeIndex:s}=this,i=this.safeDays;return r(t,{key:"c741a8c6d020a2498359c10f4dc03d4e09e1c053"},r("button",{key:"3de198512e8625f819c758fcbeaa3d209e6b24d5",type:"button",part:"trigger",class:"trigger",ref:e=>this.triggerEl=e,"aria-haspopup":"true","aria-expanded":e?"true":"false",onClick:()=>this.open?this.closePanel(!0):this.openPanel()},n(),r("span",{key:"9d67885189a5b44b1a2d776f38e855af2c3116a7"},this.label)),r("div",{key:"3f0bd95d774ee74baaf3bd49d7f1380fbf1adbf9",part:"panel",class:"panel",popover:"manual",role:"group","aria-label":this.label,ref:e=>this.panelEl=e,onKeyDown:this.handlePanelKeydown},i.map(((e,i)=>r("button",{type:"button",part:"day",class:{day:!0,occupied:e.occupied},tabIndex:i===s?0:-1,"aria-disabled":e.occupied?"true":"false",ref:e=>{e&&(this.dayEls[i]=e)},onClick:()=>this.selectDay(e)},r("span",{class:"day-label"},e.label),e.occupied&&r("span",{class:"occupied-tag"},o(),"Already added"))))))}static get style(){return":host{display:inline-block;font-family:var(--rc-font-text, system-ui, sans-serif)}.trigger{display:inline-flex;align-items:center;gap:var(--rc-s-2, 0.5rem);height:36px;padding-inline:var(--rc-s-3, 0.75rem);min-width:44px;min-height:44px;background:transparent;color:var(--rc-text, #2a2420);border:1px solid var(--rc-border-strong, #d4c8b8);border-radius:var(--rc-radius-sm, 6px);font-size:var(--rc-fs-sm, 0.875rem);cursor:pointer}.trigger:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.panel{position:fixed;width:14rem;margin:0;padding:var(--rc-s-2, 0.5rem);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius-sm, 6px);background:var(--rc-surface, #fff);box-shadow:var(--rc-shadow-hover, 0 8px 24px rgba(0, 0, 0, 0.12));color:var(--rc-text, #2a2420);font-family:var(--rc-font-text, system-ui, sans-serif)}.panel:not(:popover-open){display:none}.day{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding-inline:var(--rc-s-2, 0.5rem);border:none;border-radius:var(--rc-radius-sm, 6px);background:transparent;color:var(--rc-text, #2a2420);font-size:var(--rc-fs-body, 1rem);text-align:start;cursor:pointer}.day:hover,.day:focus-visible{background:var(--rc-accent-subtle, #fbede4)}.day:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.day.occupied{color:var(--rc-text-subtle, #8f8377);cursor:default}.day.occupied:hover{background:transparent}.occupied-tag{display:inline-flex;align-items:center;gap:var(--rc-s-1, 0.25rem);font-size:var(--rc-fs-xs, 0.75rem)}"}},[513,"day-picker",{recipeId:[1,"recipe-id"],days:[16],label:[1],open:[32],activeIndex:[32]}]),d=c,l=function(){"undefined"!=typeof customElements&&["day-picker"].forEach((e=>{"day-picker"===e&&(customElements.get(a(e))||customElements.define(a(e),c))}))};export{d as DayPicker,l as defineCustomElement}

package/dist/components/empty-state.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EmptyState extends Components.EmptyState, HTMLElement {}
+export const EmptyState: {
+    prototype: EmptyState;
+    new (): EmptyState;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/empty-state.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as a,h as t,Host as c,transformTag as s}from"@stencil/core/internal/client";const n=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}heading;render(){return t(c,{key:"9a79935768889ba37e619d17398ca0b647e1f17c"},t("div",{key:"9c922324505cca8ca67ebb55134ecb42da01c896",part:"container",class:"container"},t("h2",{key:"f0f7595f4d27e381c6d9639a926f3e668a814bd8",part:"heading",class:"heading"},this.heading),t("div",{key:"762f9d21a8bb87d81b64532c1c6347ce18c67536",class:"body"},t("slot",{key:"91ae381cd1eea4b6c23d82e20a374e6ea785834d"})),t("div",{key:"3ac947e41ff7e3bfdaab9753d6e25b6e12cf9818",class:"action"},t("slot",{key:"5c20eb577e4a885a30bc33f260a2a32567c14ac4",name:"action"}))))}static get style(){return":host{display:block}.container{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:var(--rc-s-6, 2rem);gap:var(--rc-s-3, 0.75rem);font-family:var(--rc-font-text, system-ui, sans-serif);color:var(--rc-text, #2a2420)}.heading{margin:0;font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem)}.body{max-width:44ch;color:var(--rc-text-muted, #6b5f55)}"}},[769,"empty-state",{heading:[1]}]),r=n,i=function(){"undefined"!=typeof customElements&&["empty-state"].forEach((e=>{"empty-state"===e&&(customElements.get(s(e))||customElements.define(s(e),n))}))};export{r as EmptyState,i as defineCustomElement}

package/dist/components/filter-chip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FilterChip extends Components.FilterChip, HTMLElement {}
+export const FilterChip: {
+    prototype: FilterChip;
+    new (): FilterChip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/filter-chip.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as r,createEvent as i,h as t,Host as a,transformTag as s}from"@stencil/core/internal/client";import{X as n}from"./icons.js";const c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.chiptoggle=i(this,"chiptoggle",7)}label;value;dimension;chiptoggle;handleClick=()=>{this.chiptoggle.emit({dimension:this.dimension,value:this.value})};render(){return t(a,{key:"82857297c365aa1449ef082714d322534073e948"},t("span",{key:"7fa17205fa5a591f47ffa684bd76491be00fa216",part:"chip",class:"chip"},t("span",{key:"76437ede6f06e5ee8b0121d62f1ef6f0881a1fb9",class:"label"},this.label),t("button",{key:"b104ee639f9a5330ce9a0621885f3d17de9d80b0",type:"button",part:"remove",class:"remove","aria-label":`Clear ${this.label} filter`,onClick:this.handleClick},n())))}static get style(){return":host{display:inline-flex;font-family:var(--rc-font-text, system-ui, sans-serif)}.chip{display:inline-flex;align-items:center;gap:var(--rc-s-1, 0.25rem);padding-inline-start:var(--rc-s-3, 0.75rem);border-radius:var(--rc-radius-full, 999px);background:var(--rc-accent-subtle, #fbede4);border:1px solid var(--rc-accent-border, #efcdb6);color:var(--rc-accent, #bc4e1c);font-size:var(--rc-fs-sm, 0.875rem)}.label{white-space:nowrap}.remove{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-inline-start:calc(-1 * var(--rc-s-2, 0.5rem));padding:0;border:none;background:transparent;color:inherit;cursor:pointer}.remove:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-full, 999px)}"}},[513,"filter-chip",{label:[1],value:[1],dimension:[1]}]),l=c,o=function(){"undefined"!=typeof customElements&&["filter-chip"].forEach((e=>{"filter-chip"===e&&(customElements.get(s(e))||customElements.define(s(e),c))}))};export{l as FilterChip,o as defineCustomElement}

package/dist/components/icons.js

@@ -0,0 +1 @@
+import{h as t}from"@stencil/core/internal/client";const n={viewBox:"0 0 24 24",width:"20",height:"20",fill:"none",stroke:"currentColor","stroke-width":"1.75","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"};function r(r){return t("svg",{...n,fill:r?"currentColor":"none"},t("path",{d:"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"}))}function a(){return t("svg",{...n},t("path",{d:"M18 6 6 18"}),t("path",{d:"m6 6 12 12"}))}function h(){return t("svg",{...n},t("path",{d:"m6 9 6 6 6-6"}))}function e(){return t("svg",{...n},t("path",{d:"m16 3 4 4-4 4"}),t("path",{d:"M20 7H4"}),t("path",{d:"m8 21-4-4 4-4"}),t("path",{d:"M4 17h16"}))}function o(){return t("svg",{...n},t("path",{d:"M3 6h18"}),t("path",{d:"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"}),t("path",{d:"M10 11v6"}),t("path",{d:"M14 11v6"}))}function d(){return t("svg",{...n},t("path",{d:"M20 6 9 17l-5-5"}))}function i(){return t("svg",{...n},t("path",{d:"M8 2v4"}),t("path",{d:"M16 2v4"}),t("rect",{x:"3",y:"4",width:"18",height:"18",rx:"2"}),t("path",{d:"M3 10h18"}),t("path",{d:"M12 14v6"}),t("path",{d:"M9 17h6"}))}export{e as A,i as C,r as H,o as T,a as X,d as a,h as b}

package/dist/components/index.js

@@ -1 +1 @@
-import{transformTag as e}from"@stencil/core/internal/client";export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";import{SpikePanel as t}from"./spike-panel.js";const s=s=>{"undefined"!=typeof customElements&&[t].forEach((t=>{customElements.get(e(t.is))||customElements.define(e(t.is),t,s)}))};export{s as defineCustomElements}
+import{transformTag as e}from"@stencil/core/internal/client";export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";import{DayPicker as t}from"./day-picker.js";import{EmptyState as r}from"./empty-state.js";import{FilterChip as o}from"./filter-chip.js";import{PlannerDay as s}from"./planner-day.js";import{RecipeCard as m}from"./recipe-card.js";import{RecipeGrid as i}from"./recipe-grid.js";import{SkeletonCard as n}from"./skeleton-card.js";import{SpikePanel as p}from"./spike-panel.js";const c=c=>{"undefined"!=typeof customElements&&[t,r,o,s,m,i,n,p].forEach((t=>{customElements.get(e(t.is))||customElements.define(e(t.is),t,c)}))};export{c as defineCustomElements}

package/dist/components/planner-day.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PlannerDay extends Components.PlannerDay, HTMLElement {}
+export const PlannerDay: {
+    prototype: PlannerDay;
+    new (): PlannerDay;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/planner-day.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as r,createEvent as a,h as t,Host as s,transformTag as n}from"@stencil/core/internal/client";import{A as i,T as o,b as c}from"./icons.js";const d=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.entryremove=a(this,"entryremove",7),this.entrymoverequest=a(this,"entrymoverequest",7),this.daytoggle=a(this,"daytoggle",7)}day;dayLabel;entries=[];collapsed=!1;entryremove;entrymoverequest;daytoggle;handleToggle=()=>{this.daytoggle.emit({day:this.day,collapsed:!this.collapsed})};renderEntry(e){return t("li",{part:"entry",class:"entry",key:e.recipeId},e.thumbnail?t("img",{class:"thumb",src:e.thumbnail,alt:"",loading:"lazy",decoding:"async"}):t("span",{class:"thumb placeholder","aria-hidden":"true"}),t("span",{class:"name"},e.name),t("div",{class:"row-actions"},t("button",{type:"button",class:"icon-button","aria-label":"Move "+e.name,onClick:()=>this.entrymoverequest.emit({recipeId:e.recipeId,fromDay:this.day})},i()),t("button",{type:"button",class:"icon-button","aria-label":`Remove ${e.name} from ${this.dayLabel}`,onClick:()=>this.entryremove.emit({recipeId:e.recipeId,day:this.day})},o())))}render(){const{collapsed:e,dayLabel:r}=this,a=Array.isArray(this.entries)?this.entries:[];return t(s,{key:"744e2429e64fa86ac0261a38e3cfee2532fc9011"},t("section",{key:"8aac5476aa01ed06ddc36ae4a9cb40da866eaac1",part:"region",class:"region",role:"region","aria-label":r},t("div",{key:"a337b60503f6c4251e60cb9260aa2fa0ca1f5231",part:"header",class:"header"},t("h3",{key:"4f4528b9df6848c5c2f81487c3ea82786d488b42",class:"day-name"},r),t("span",{key:"8fc2ed5461d1c32defec34809798664aa94d9cc3",class:"count"},a.length),t("button",{key:"02d3cf820cab2796355bec976571ce1a335d96af",type:"button",class:{toggle:!0,"is-collapsed":e},"aria-expanded":e?"false":"true","aria-label":e?"Expand "+r:"Collapse "+r,onClick:this.handleToggle},c())),!e&&(a.length?t("ul",{class:"entries"},a.map((e=>this.renderEntry(e)))):t("div",{class:"empty"},t("slot",{name:"empty"})))))}static get style(){return":host{display:block;font-family:var(--rc-font-text, system-ui, sans-serif)}.region{display:flex;flex-direction:column;height:100%;min-height:20rem;background:var(--rc-surface-sunken, #f6f1e9);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);padding:var(--rc-s-4, 1rem);gap:var(--rc-s-3, 0.75rem);color:var(--rc-text, #2a2420)}.header{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}.day-name{margin:0;flex:1;font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem)}.count{color:var(--rc-text-muted, #6b5f55);font-size:var(--rc-fs-sm, 0.875rem)}.toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer;transition:transform var(--rc-duration, 180ms) var(--rc-ease, ease)}.toggle.is-collapsed{transform:rotate(-90deg)}.toggle:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rc-s-2, 0.5rem)}.entry{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem);padding:var(--rc-s-2, 0.5rem);background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius-sm, 6px)}.thumb{flex:none;width:40px;height:40px;border-radius:var(--rc-radius-sm, 6px);object-fit:cover}.thumb.placeholder{background:var(--rc-border, #e7dfd3)}.name{flex:1;min-width:0;font-size:var(--rc-fs-sm, 0.875rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-actions{display:flex;gap:var(--rc-s-1, 0.25rem)}.icon-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer}.icon-button:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--rc-text-subtle, #8f8377);font-size:var(--rc-fs-sm, 0.875rem)}"}},[769,"planner-day",{day:[1],dayLabel:[1,"day-label"],entries:[16],collapsed:[4]}]),l=d,f=function(){"undefined"!=typeof customElements&&["planner-day"].forEach((e=>{"planner-day"===e&&(customElements.get(n(e))||customElements.define(n(e),d))}))};export{l as PlannerDay,f as defineCustomElement}

package/dist/components/recipe-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RecipeCard extends Components.RecipeCard, HTMLElement {}
+export const RecipeCard: {
+    prototype: RecipeCard;
+    new (): RecipeCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/recipe-card.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as r,createEvent as t,h as a,Host as i,transformTag as o}from"@stencil/core/internal/client";import{H as s}from"./icons.js";const c=[18,34,96,168,262,344],n=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.favoritetoggle=t(this,"favoritetoggle",7),this.recipeselect=t(this,"recipeselect",7)}recipe;favorited=!1;href;favoritetoggle;recipeselect;handleTitleClick=e=>{0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||(e.preventDefault(),this.recipeselect.emit({recipeId:this.recipe.id}))};handleFavoriteClick=()=>{this.favoritetoggle.emit({recipeId:this.recipe.id})};renderMedia(){const{thumbnail:e,name:r}=this.recipe;if(e)return a("img",{part:"media",class:"media",src:e,alt:"",loading:"lazy",decoding:"async"});const t=function(e){let r=0;for(let t=0;t<e.length;t++)r+=e.charCodeAt(t);return c[r%c.length]}(r);return a("div",{part:"media",class:"media tile",style:{"--tile-h":t+""}},a("span",{class:"tile-name"},r))}render(){const{recipe:e,favorited:r,href:t}=this;return e&&"object"==typeof e?a(i,null,a("article",{part:"card",class:"card"},this.renderMedia(),a("div",{class:"body"},a("a",{part:"title",class:"title",href:t,onClick:this.handleTitleClick},e.name),a("p",{class:"meta"},[e.category,e.area].filter(Boolean).join(" · ")),a("div",{class:"actions-row"},a("button",{type:"button",class:"favorite","aria-pressed":r?"true":"false","aria-label":r?`Remove ${e.name} from favorites`:`Add ${e.name} to favorites`,onClick:this.handleFavoriteClick},s(r)),a("div",{part:"actions",class:"actions"},a("slot",{name:"actions"})))))):a(i,null)}static get style(){return":host{display:block;height:22rem;font-family:var(--rc-font-text, system-ui, sans-serif)}.card{display:flex;flex-direction:column;height:100%;background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);box-shadow:var(--rc-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));overflow:hidden;transition:box-shadow var(--rc-duration, 180ms) var(--rc-ease, ease),     border-color var(--rc-duration, 180ms) var(--rc-ease, ease),     transform var(--rc-duration, 180ms) var(--rc-ease, ease)}.card:hover{box-shadow:var(--rc-shadow-hover, 0 2px 8px rgba(0, 0, 0, 0.08));border-color:var(--rc-border-strong, #d4c8b8);transform:translateY(-2px)}.media{height:12rem;flex:none;margin:0}img.media{width:100%;object-fit:cover}.media.tile{display:flex;align-items:center;justify-content:center;padding:var(--rc-s-4, 1rem);text-align:center;background:hsl(var(--tile-h) 42% 88%);color:hsl(var(--tile-h) 45% 28%)}@media (prefers-color-scheme: dark){.media.tile{background:hsl(var(--tile-h) 30% 22%);color:hsl(var(--tile-h) 35% 82%)}}.tile-name{font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.body{flex:1;min-height:0;display:flex;flex-direction:column;padding:var(--rc-s-4, 1rem);gap:var(--rc-s-2, 0.5rem)}.title{font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem);color:var(--rc-text, #2a2420);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.title:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.meta{margin:0;font-size:var(--rc-fs-sm, 0.875rem);color:var(--rc-text-muted, #6b5f55)}.actions-row{margin-top:auto;display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}.favorite{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer;border-radius:var(--rc-radius-sm, 6px)}.favorite[aria-pressed='true']{color:var(--rc-accent, #bc4e1c)}.favorite:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.actions{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}"}},[769,"recipe-card",{recipe:[16],favorited:[4],href:[1]}]),l=n,d=function(){"undefined"!=typeof customElements&&["recipe-card"].forEach((e=>{"recipe-card"===e&&(customElements.get(o(e))||customElements.define(o(e),n))}))};export{l as RecipeCard,d as defineCustomElement}

package/dist/components/recipe-grid.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RecipeGrid extends Components.RecipeGrid, HTMLElement {}
+export const RecipeGrid: {
+    prototype: RecipeGrid;
+    new (): RecipeGrid;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/recipe-grid.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as t,h as r,Host as s,transformTag as c}from"@stencil/core/internal/client";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}columns=4;render(){return r(s,{key:"b307b429803a61d0163905e8e0752ffd276f0eca"},r("div",{key:"cf95edd18bc679d3aa8be431a12bf8ad87191202",part:"grid",class:"grid",style:{"--columns":this.columns+""}},r("slot",{key:"1e28d0a6e7fb180925e1cdf88dcf1bb5c2b8fef8"})))}static get style(){return":host{display:block}.grid{display:grid;grid-template-columns:repeat(var(--columns), 1fr);gap:var(--rc-s-4, 1rem)}"}},[769,"recipe-grid",{columns:[2]}]),i=d,n=function(){"undefined"!=typeof customElements&&["recipe-grid"].forEach((e=>{"recipe-grid"===e&&(customElements.get(c(e))||customElements.define(c(e),d))}))};export{i as RecipeGrid,n as defineCustomElement}

package/dist/components/skeleton-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SkeletonCard extends Components.SkeletonCard, HTMLElement {}
+export const SkeletonCard: {
+    prototype: SkeletonCard;
+    new (): SkeletonCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/skeleton-card.js

@@ -0,0 +1 @@
+import{proxyCustomElement as e,HTMLElement as r,h as t,Host as n,transformTag as a}from"@stencil/core/internal/client";const i=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}count=1;render(){const e=Array.from({length:Math.max(1,this.count)});return t(n,{key:"d072f5e79cacb78baafc69a2e52e070fa5934805"},e.map(((e,r)=>t("div",{part:"skeleton",class:"skeleton",key:r,"aria-hidden":"true"},t("div",{class:"media"}),t("div",{class:"body"},t("div",{class:"line title"}),t("div",{class:"line meta"}))))))}static get style(){return":host{display:contents}.skeleton{height:22rem;display:flex;flex-direction:column;background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);overflow:hidden}.media{height:12rem;flex:none;background:var(--rc-surface-sunken, #f6f1e9);position:relative;overflow:hidden}.body{flex:1;padding:var(--rc-s-4, 1rem);display:flex;flex-direction:column;gap:var(--rc-s-2, 0.5rem)}.line{border-radius:var(--rc-radius-sm, 6px);background:var(--rc-surface-sunken, #f6f1e9);position:relative;overflow:hidden}.line.title{height:1.25rem;width:70%}.line.meta{height:0.875rem;width:45%}.media::after,.line::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, transparent, var(--rc-border, #e7dfd3) 50%, transparent);opacity:0.3;animation:shimmer 1.4s infinite}@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media (prefers-reduced-motion: reduce){.media::after,.line::after{animation:none;transform:none;opacity:0.2}}"}},[513,"skeleton-card",{count:[2]}]),s=i,o=function(){"undefined"!=typeof customElements&&["skeleton-card"].forEach((e=>{"skeleton-card"===e&&(customElements.get(a(e))||customElements.define(a(e),i))}))};export{s as SkeletonCard,o as defineCustomElement}

package/dist/components/spike-panel.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as n,transformTag as o}from"@stencil/core/internal/client";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.spikeaction=s(this,"spikeaction",7)}note;spikeaction;handleClick=()=>{this.spikeaction.emit(this.note??{from:"spike-panel",message:"no note received"})};render(){return i(n,{key:"20fa323bdd4990a5d568faf938af5bd0dcc6f17e"},i("p",{key:"11ecacb2350267443654583ada8a2a1c690f2eba"},this.note?`From ${this.note.from}: ${this.note.message}`:"Waiting for an object property..."),i("button",{key:"73f45b59b24692f0078102448add5f41aab4e715",type:"button",onClick:this.handleClick},"Emit spikeaction"),i("div",{key:"0ee7ada21cd3ed839febff7974273d56787e990d",class:"slot-wrap"},i("slot",{key:"5f70bf5e007f214213efdc3e69db84db747d9f8a"})))}static get style(){return":host{display:block;border:1px solid #ccc;border-radius:8px;padding:1rem;font-family:system-ui, sans-serif}button{cursor:pointer}.slot-wrap{margin-top:0.75rem}"}},[769,"spike-panel",{note:[16]}]),r=a,c=function(){"undefined"!=typeof customElements&&["spike-panel"].forEach((e=>{"spike-panel"===e&&(customElements.get(o(e))||customElements.define(o(e),a))}))};export{r as SpikePanel,c as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as n,transformTag as o}from"@stencil/core/internal/client";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.spikeaction=s(this,"spikeaction",7)}note;spikeaction;handleClick=()=>{this.spikeaction.emit(this.note??{from:"spike-panel",message:"no note received"})};render(){return i(n,{key:"e2dd4e5cab4edda56f9b23b1da25af36f3f65c84"},i("p",{key:"0ba3c3d40ee49b765eef7af8af438d3b9f5d71fe"},this.note?`From ${this.note.from}: ${this.note.message}`:"Waiting for an object property..."),i("button",{key:"082230f40c2dd4180f3d6552ebd5133fe90531aa",type:"button",onClick:this.handleClick},"Emit spikeaction"),i("div",{key:"f72d1123a8aed1af44d866e5f3c46d77b960ad9a",class:"slot-wrap"},i("slot",{key:"0369ec7f60e0e368eb7630eb00d4d70cc8563204"})))}static get style(){return":host{display:block;border:1px solid #ccc;border-radius:8px;padding:1rem;font-family:system-ui, sans-serif}button{cursor:pointer}.slot-wrap{margin-top:0.75rem}"}},[769,"spike-panel",{note:[16]}]),r=a,c=function(){"undefined"!=typeof customElements&&["spike-panel"].forEach((e=>{"spike-panel"===e&&(customElements.get(o(e))||customElements.define(o(e),a))}))};export{r as SpikePanel,c as defineCustomElement}

package/dist/types/components/day-picker/day-picker.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/day-picker/day-picker.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { DayOfWeek, DayOption } from '../../utils/types';
+/**
+ * Assigns a recipe to a day of the plan. Stateless: occupancy is an input
+ * (`DayOption.occupied`), never inferred from a store.
+ *
+ * The panel uses the native Popover API (`popover="manual"`) so it renders
+ * in the browser's top layer — the one mechanism that reliably escapes a
+ * card's `overflow: hidden` and any transformed ancestor's containing
+ * block, which plain `position: fixed` inside a shadow tree does not.
+ */
+export declare class DayPicker {
+    recipeId: string;
+    days: DayOption[];
+    label: string;
+    planassign: EventEmitter<{
+        recipeId: string;
+        day: DayOfWeek;
+    }>;
+    pickerclose: EventEmitter<Record<string, never>>;
+    open: boolean;
+    activeIndex: number;
+    private triggerEl?;
+    private panelEl?;
+    private dayEls;
+    private reposition;
+    private handleOutsideClick;
+    disconnectedCallback(): void;
+    private positionPanel;
+    private openPanel;
+    private closePanel;
+    private get safeDays();
+    private selectDay;
+    private focusIndex;
+    private handlePanelKeydown;
+    render(): any;
+}

package/dist/types/components/empty-state/empty-state.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/empty-state/empty-state.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A generic shell for empty results — the app slots in the wording and,
+ * optionally, a call-to-action button.
+ */
+export declare class EmptyState {
+    heading: string;
+    render(): any;
+}

package/dist/types/components/filter-chip/filter-chip.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/filter-chip/filter-chip.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A chip only exists while its filter is active, so it has no `active` prop
+ * and no separate clear event — removing it and clearing its dimension are
+ * the same action.
+ */
+export declare class FilterChip {
+    label: string;
+    value: string;
+    dimension: 'category' | 'area';
+    chiptoggle: EventEmitter<{
+        dimension: 'category' | 'area';
+        value: string;
+    }>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/planner-day/planner-day.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/planner-day/planner-day.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { DayOfWeek, PlannerEntry } from '../../utils/types';
+/**
+ * One day's column/section in the planner. Owns its complete accessible
+ * name from its own props — `dayLabel` becomes the region's name because
+ * ARIA relationships cannot cross the shadow boundary.
+ *
+ * Deliberately has no `today` prop: the planner is a dateless recurring
+ * week, so there is nothing to derive "today" from.
+ */
+export declare class PlannerDay {
+    day: DayOfWeek;
+    dayLabel: string;
+    entries: PlannerEntry[];
+    collapsed: boolean;
+    entryremove: EventEmitter<{
+        recipeId: string;
+        day: DayOfWeek;
+    }>;
+    entrymoverequest: EventEmitter<{
+        recipeId: string;
+        fromDay: DayOfWeek;
+    }>;
+    daytoggle: EventEmitter<{
+        day: DayOfWeek;
+        collapsed: boolean;
+    }>;
+    private handleToggle;
+    private renderEntry;
+    render(): any;
+}

package/dist/types/components/recipe-card/recipe-card.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,22 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { RecipeSummary } from '../../utils/types';
+/**
+ * The app's primary discovery/favorites/planner unit. Fixed 22rem height
+ * regardless of content — recipe-card:not(:defined) must reserve the same
+ * value so an unregistered element doesn't cause a layout jump.
+ */
+export declare class RecipeCard {
+    recipe: RecipeSummary;
+    favorited: boolean;
+    href: string;
+    favoritetoggle: EventEmitter<{
+        recipeId: string;
+    }>;
+    recipeselect: EventEmitter<{
+        recipeId: string;
+    }>;
+    private handleTitleClick;
+    private handleFavoriteClick;
+    private renderMedia;
+    render(): any;
+}

package/dist/types/components/recipe-grid/recipe-grid.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+/**
+ * A responsive card grid with an explicit column count — never `auto-fill`,
+ * so the app decides the breakpoint behaviour instead of the browser
+ * guessing it.
+ */
+export declare class RecipeGrid {
+    columns: 1 | 2 | 3 | 4;
+    render(): any;
+}

package/dist/types/components/skeleton-card/skeleton-card.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/skeleton-card/skeleton-card.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Loading placeholder that matches `recipe-card`'s geometry exactly, so the
+ * reserved space for an undefined custom element holds and the grid does
+ * not shift when real cards arrive.
+ */
+export declare class SkeletonCard {
+    count: number;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -5,9 +5,95 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { DayOfWeek, DayOption, PlannerEntry, RecipeSummary } from "./utils/types";
 import { SpikeNote } from "./components/spike-panel/spike-panel";
+export { DayOfWeek, DayOption, PlannerEntry, RecipeSummary } from "./utils/types";
 export { SpikeNote } from "./components/spike-panel/spike-panel";
 export namespace Components {
+    /**
+     * Assigns a recipe to a day of the plan. Stateless: occupancy is an input
+     * (`DayOption.occupied`), never inferred from a store.
+     * The panel uses the native Popover API (`popover="manual"`) so it renders
+     * in the browser's top layer — the one mechanism that reliably escapes a
+     * card's `overflow: hidden` and any transformed ancestor's containing
+     * block, which plain `position: fixed` inside a shadow tree does not.
+     */
+    interface DayPicker {
+        "days": DayOption[];
+        "label": string;
+        "recipeId": string;
+    }
+    /**
+     * A generic shell for empty results — the app slots in the wording and,
+     * optionally, a call-to-action button.
+     */
+    interface EmptyState {
+        "heading": string;
+    }
+    /**
+     * A chip only exists while its filter is active, so it has no `active` prop
+     * and no separate clear event — removing it and clearing its dimension are
+     * the same action.
+     */
+    interface FilterChip {
+        "dimension": 'category' | 'area';
+        "label": string;
+        "value": string;
+    }
+    /**
+     * One day's column/section in the planner. Owns its complete accessible
+     * name from its own props — `dayLabel` becomes the region's name because
+     * ARIA relationships cannot cross the shadow boundary.
+     * Deliberately has no `today` prop: the planner is a dateless recurring
+     * week, so there is nothing to derive "today" from.
+     */
+    interface PlannerDay {
+        /**
+          * @default false
+         */
+        "collapsed": boolean;
+        "day": DayOfWeek;
+        "dayLabel": string;
+        /**
+          * @default []
+         */
+        "entries": PlannerEntry[];
+    }
+    /**
+     * The app's primary discovery/favorites/planner unit. Fixed 22rem height
+     * regardless of content — recipe-card:not(:defined) must reserve the same
+     * value so an unregistered element doesn't cause a layout jump.
+     */
+    interface RecipeCard {
+        /**
+          * @default false
+         */
+        "favorited": boolean;
+        "href": string;
+        "recipe": RecipeSummary;
+    }
+    /**
+     * A responsive card grid with an explicit column count — never `auto-fill`,
+     * so the app decides the breakpoint behaviour instead of the browser
+     * guessing it.
+     */
+    interface RecipeGrid {
+        /**
+          * @default 4
+         */
+        "columns": 1 | 2 | 3 | 4;
+    }
+    /**
+     * Loading placeholder that matches `recipe-card`'s geometry exactly, so the
+     * reserved space for an undefined custom element holds and the grid does
+     * not shift when real cards arrive.
+     */
+    interface SkeletonCard {
+        /**
+          * @default 1
+         */
+        "count": number;
+    }
     /**
      * Integration spike only. Proves the Stencil <-> SvelteKit seam (object
      * property, custom event, slot) end to end. Not part of the real component
@@ -20,11 +106,156 @@ export namespace Components {
         "note"?: SpikeNote;
     }
 }
+export interface DayPickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDayPickerElement;
+}
+export interface FilterChipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLFilterChipElement;
+}
+export interface PlannerDayCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPlannerDayElement;
+}
+export interface RecipeCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLRecipeCardElement;
+}
 export interface SpikePanelCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSpikePanelElement;
 }
 declare global {
+    interface HTMLDayPickerElementEventMap {
+        "planassign": { recipeId: string; day: DayOfWeek };
+        "pickerclose": Record<string, never>;
+    }
+    /**
+     * Assigns a recipe to a day of the plan. Stateless: occupancy is an input
+     * (`DayOption.occupied`), never inferred from a store.
+     * The panel uses the native Popover API (`popover="manual"`) so it renders
+     * in the browser's top layer — the one mechanism that reliably escapes a
+     * card's `overflow: hidden` and any transformed ancestor's containing
+     * block, which plain `position: fixed` inside a shadow tree does not.
+     */
+    interface HTMLDayPickerElement extends Components.DayPicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDayPickerElementEventMap>(type: K, listener: (this: HTMLDayPickerElement, ev: DayPickerCustomEvent<HTMLDayPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDayPickerElementEventMap>(type: K, listener: (this: HTMLDayPickerElement, ev: DayPickerCustomEvent<HTMLDayPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDayPickerElement: {
+        prototype: HTMLDayPickerElement;
+        new (): HTMLDayPickerElement;
+    };
+    /**
+     * A generic shell for empty results — the app slots in the wording and,
+     * optionally, a call-to-action button.
+     */
+    interface HTMLEmptyStateElement extends Components.EmptyState, HTMLStencilElement {
+    }
+    var HTMLEmptyStateElement: {
+        prototype: HTMLEmptyStateElement;
+        new (): HTMLEmptyStateElement;
+    };
+    interface HTMLFilterChipElementEventMap {
+        "chiptoggle": { dimension: 'category' | 'area'; value: string };
+    }
+    /**
+     * A chip only exists while its filter is active, so it has no `active` prop
+     * and no separate clear event — removing it and clearing its dimension are
+     * the same action.
+     */
+    interface HTMLFilterChipElement extends Components.FilterChip, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLFilterChipElementEventMap>(type: K, listener: (this: HTMLFilterChipElement, ev: FilterChipCustomEvent<HTMLFilterChipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLFilterChipElementEventMap>(type: K, listener: (this: HTMLFilterChipElement, ev: FilterChipCustomEvent<HTMLFilterChipElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLFilterChipElement: {
+        prototype: HTMLFilterChipElement;
+        new (): HTMLFilterChipElement;
+    };
+    interface HTMLPlannerDayElementEventMap {
+        "entryremove": { recipeId: string; day: DayOfWeek };
+        "entrymoverequest": { recipeId: string; fromDay: DayOfWeek };
+        "daytoggle": { day: DayOfWeek; collapsed: boolean };
+    }
+    /**
+     * One day's column/section in the planner. Owns its complete accessible
+     * name from its own props — `dayLabel` becomes the region's name because
+     * ARIA relationships cannot cross the shadow boundary.
+     * Deliberately has no `today` prop: the planner is a dateless recurring
+     * week, so there is nothing to derive "today" from.
+     */
+    interface HTMLPlannerDayElement extends Components.PlannerDay, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPlannerDayElementEventMap>(type: K, listener: (this: HTMLPlannerDayElement, ev: PlannerDayCustomEvent<HTMLPlannerDayElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPlannerDayElementEventMap>(type: K, listener: (this: HTMLPlannerDayElement, ev: PlannerDayCustomEvent<HTMLPlannerDayElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPlannerDayElement: {
+        prototype: HTMLPlannerDayElement;
+        new (): HTMLPlannerDayElement;
+    };
+    interface HTMLRecipeCardElementEventMap {
+        "favoritetoggle": { recipeId: string };
+        "recipeselect": { recipeId: string };
+    }
+    /**
+     * The app's primary discovery/favorites/planner unit. Fixed 22rem height
+     * regardless of content — recipe-card:not(:defined) must reserve the same
+     * value so an unregistered element doesn't cause a layout jump.
+     */
+    interface HTMLRecipeCardElement extends Components.RecipeCard, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLRecipeCardElementEventMap>(type: K, listener: (this: HTMLRecipeCardElement, ev: RecipeCardCustomEvent<HTMLRecipeCardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLRecipeCardElementEventMap>(type: K, listener: (this: HTMLRecipeCardElement, ev: RecipeCardCustomEvent<HTMLRecipeCardElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLRecipeCardElement: {
+        prototype: HTMLRecipeCardElement;
+        new (): HTMLRecipeCardElement;
+    };
+    /**
+     * A responsive card grid with an explicit column count — never `auto-fill`,
+     * so the app decides the breakpoint behaviour instead of the browser
+     * guessing it.
+     */
+    interface HTMLRecipeGridElement extends Components.RecipeGrid, HTMLStencilElement {
+    }
+    var HTMLRecipeGridElement: {
+        prototype: HTMLRecipeGridElement;
+        new (): HTMLRecipeGridElement;
+    };
+    /**
+     * Loading placeholder that matches `recipe-card`'s geometry exactly, so the
+     * reserved space for an undefined custom element holds and the grid does
+     * not shift when real cards arrive.
+     */
+    interface HTMLSkeletonCardElement extends Components.SkeletonCard, HTMLStencilElement {
+    }
+    var HTMLSkeletonCardElement: {
+        prototype: HTMLSkeletonCardElement;
+        new (): HTMLSkeletonCardElement;
+    };
     interface HTMLSpikePanelElementEventMap {
         "spikeaction": SpikeNote;
     }
@@ -48,10 +279,111 @@ declare global {
         new (): HTMLSpikePanelElement;
     };
     interface HTMLElementTagNameMap {
+        "day-picker": HTMLDayPickerElement;
+        "empty-state": HTMLEmptyStateElement;
+        "filter-chip": HTMLFilterChipElement;
+        "planner-day": HTMLPlannerDayElement;
+        "recipe-card": HTMLRecipeCardElement;
+        "recipe-grid": HTMLRecipeGridElement;
+        "skeleton-card": HTMLSkeletonCardElement;
         "spike-panel": HTMLSpikePanelElement;
     }
 }
 declare namespace LocalJSX {
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K]?: never };
+
+    /**
+     * Assigns a recipe to a day of the plan. Stateless: occupancy is an input
+     * (`DayOption.occupied`), never inferred from a store.
+     * The panel uses the native Popover API (`popover="manual"`) so it renders
+     * in the browser's top layer — the one mechanism that reliably escapes a
+     * card's `overflow: hidden` and any transformed ancestor's containing
+     * block, which plain `position: fixed` inside a shadow tree does not.
+     */
+    interface DayPicker {
+        "days": DayOption[];
+        "label": string;
+        "onPickerclose"?: (event: DayPickerCustomEvent<Record<string, never>>) => void;
+        "onPlanassign"?: (event: DayPickerCustomEvent<{ recipeId: string; day: DayOfWeek }>) => void;
+        "recipeId": string;
+    }
+    /**
+     * A generic shell for empty results — the app slots in the wording and,
+     * optionally, a call-to-action button.
+     */
+    interface EmptyState {
+        "heading": string;
+    }
+    /**
+     * A chip only exists while its filter is active, so it has no `active` prop
+     * and no separate clear event — removing it and clearing its dimension are
+     * the same action.
+     */
+    interface FilterChip {
+        "dimension": 'category' | 'area';
+        "label": string;
+        "onChiptoggle"?: (event: FilterChipCustomEvent<{ dimension: 'category' | 'area'; value: string }>) => void;
+        "value": string;
+    }
+    /**
+     * One day's column/section in the planner. Owns its complete accessible
+     * name from its own props — `dayLabel` becomes the region's name because
+     * ARIA relationships cannot cross the shadow boundary.
+     * Deliberately has no `today` prop: the planner is a dateless recurring
+     * week, so there is nothing to derive "today" from.
+     */
+    interface PlannerDay {
+        /**
+          * @default false
+         */
+        "collapsed"?: boolean;
+        "day": DayOfWeek;
+        "dayLabel": string;
+        /**
+          * @default []
+         */
+        "entries"?: PlannerEntry[];
+        "onDaytoggle"?: (event: PlannerDayCustomEvent<{ day: DayOfWeek; collapsed: boolean }>) => void;
+        "onEntrymoverequest"?: (event: PlannerDayCustomEvent<{ recipeId: string; fromDay: DayOfWeek }>) => void;
+        "onEntryremove"?: (event: PlannerDayCustomEvent<{ recipeId: string; day: DayOfWeek }>) => void;
+    }
+    /**
+     * The app's primary discovery/favorites/planner unit. Fixed 22rem height
+     * regardless of content — recipe-card:not(:defined) must reserve the same
+     * value so an unregistered element doesn't cause a layout jump.
+     */
+    interface RecipeCard {
+        /**
+          * @default false
+         */
+        "favorited"?: boolean;
+        "href": string;
+        "onFavoritetoggle"?: (event: RecipeCardCustomEvent<{ recipeId: string }>) => void;
+        "onRecipeselect"?: (event: RecipeCardCustomEvent<{ recipeId: string }>) => void;
+        "recipe": RecipeSummary;
+    }
+    /**
+     * A responsive card grid with an explicit column count — never `auto-fill`,
+     * so the app decides the breakpoint behaviour instead of the browser
+     * guessing it.
+     */
+    interface RecipeGrid {
+        /**
+          * @default 4
+         */
+        "columns"?: 1 | 2 | 3 | 4;
+    }
+    /**
+     * Loading placeholder that matches `recipe-card`'s geometry exactly, so the
+     * reserved space for an undefined custom element holds and the grid does
+     * not shift when real cards arrive.
+     */
+    interface SkeletonCard {
+        /**
+          * @default 1
+         */
+        "count"?: number;
+    }
     /**
      * Integration spike only. Proves the Stencil <-> SvelteKit seam (object
      * property, custom event, slot) end to end. Not part of the real component
@@ -67,7 +399,43 @@ declare namespace LocalJSX {
          */
         "onSpikeaction"?: (event: SpikePanelCustomEvent<SpikeNote>) => void;
     }
+
+    interface DayPickerAttributes {
+        "recipeId": string;
+        "label": string;
+    }
+    interface EmptyStateAttributes {
+        "heading": string;
+    }
+    interface FilterChipAttributes {
+        "label": string;
+        "value": string;
+        "dimension": 'category' | 'area';
+    }
+    interface PlannerDayAttributes {
+        "day": DayOfWeek;
+        "dayLabel": string;
+        "collapsed": boolean;
+    }
+    interface RecipeCardAttributes {
+        "favorited": boolean;
+        "href": string;
+    }
+    interface RecipeGridAttributes {
+        "columns": 1 | 2 | 3 | 4;
+    }
+    interface SkeletonCardAttributes {
+        "count": number;
+    }
+
     interface IntrinsicElements {
+        "day-picker": Omit<DayPicker, keyof DayPickerAttributes> & { [K in keyof DayPicker & keyof DayPickerAttributes]?: DayPicker[K] } & { [K in keyof DayPicker & keyof DayPickerAttributes as `attr:${K}`]?: DayPickerAttributes[K] } & { [K in keyof DayPicker & keyof DayPickerAttributes as `prop:${K}`]?: DayPicker[K] } & OneOf<"recipeId", DayPicker["recipeId"], DayPickerAttributes["recipeId"]> & OneOf<"label", DayPicker["label"], DayPickerAttributes["label"]>;
+        "empty-state": Omit<EmptyState, keyof EmptyStateAttributes> & { [K in keyof EmptyState & keyof EmptyStateAttributes]?: EmptyState[K] } & { [K in keyof EmptyState & keyof EmptyStateAttributes as `attr:${K}`]?: EmptyStateAttributes[K] } & { [K in keyof EmptyState & keyof EmptyStateAttributes as `prop:${K}`]?: EmptyState[K] } & OneOf<"heading", EmptyState["heading"], EmptyStateAttributes["heading"]>;
+        "filter-chip": Omit<FilterChip, keyof FilterChipAttributes> & { [K in keyof FilterChip & keyof FilterChipAttributes]?: FilterChip[K] } & { [K in keyof FilterChip & keyof FilterChipAttributes as `attr:${K}`]?: FilterChipAttributes[K] } & { [K in keyof FilterChip & keyof FilterChipAttributes as `prop:${K}`]?: FilterChip[K] } & OneOf<"label", FilterChip["label"], FilterChipAttributes["label"]> & OneOf<"value", FilterChip["value"], FilterChipAttributes["value"]> & OneOf<"dimension", FilterChip["dimension"], FilterChipAttributes["dimension"]>;
+        "planner-day": Omit<PlannerDay, keyof PlannerDayAttributes> & { [K in keyof PlannerDay & keyof PlannerDayAttributes]?: PlannerDay[K] } & { [K in keyof PlannerDay & keyof PlannerDayAttributes as `attr:${K}`]?: PlannerDayAttributes[K] } & { [K in keyof PlannerDay & keyof PlannerDayAttributes as `prop:${K}`]?: PlannerDay[K] } & OneOf<"day", PlannerDay["day"], PlannerDayAttributes["day"]> & OneOf<"dayLabel", PlannerDay["dayLabel"], PlannerDayAttributes["dayLabel"]>;
+        "recipe-card": Omit<RecipeCard, keyof RecipeCardAttributes> & { [K in keyof RecipeCard & keyof RecipeCardAttributes]?: RecipeCard[K] } & { [K in keyof RecipeCard & keyof RecipeCardAttributes as `attr:${K}`]?: RecipeCardAttributes[K] } & { [K in keyof RecipeCard & keyof RecipeCardAttributes as `prop:${K}`]?: RecipeCard[K] } & OneOf<"href", RecipeCard["href"], RecipeCardAttributes["href"]>;
+        "recipe-grid": Omit<RecipeGrid, keyof RecipeGridAttributes> & { [K in keyof RecipeGrid & keyof RecipeGridAttributes]?: RecipeGrid[K] } & { [K in keyof RecipeGrid & keyof RecipeGridAttributes as `attr:${K}`]?: RecipeGridAttributes[K] } & { [K in keyof RecipeGrid & keyof RecipeGridAttributes as `prop:${K}`]?: RecipeGrid[K] };
+        "skeleton-card": Omit<SkeletonCard, keyof SkeletonCardAttributes> & { [K in keyof SkeletonCard & keyof SkeletonCardAttributes]?: SkeletonCard[K] } & { [K in keyof SkeletonCard & keyof SkeletonCardAttributes as `attr:${K}`]?: SkeletonCardAttributes[K] } & { [K in keyof SkeletonCard & keyof SkeletonCardAttributes as `prop:${K}`]?: SkeletonCard[K] };
         "spike-panel": SpikePanel;
     }
 }
@@ -75,6 +443,52 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * Assigns a recipe to a day of the plan. Stateless: occupancy is an input
+             * (`DayOption.occupied`), never inferred from a store.
+             * The panel uses the native Popover API (`popover="manual"`) so it renders
+             * in the browser's top layer — the one mechanism that reliably escapes a
+             * card's `overflow: hidden` and any transformed ancestor's containing
+             * block, which plain `position: fixed` inside a shadow tree does not.
+             */
+            "day-picker": LocalJSX.IntrinsicElements["day-picker"] & JSXBase.HTMLAttributes<HTMLDayPickerElement>;
+            /**
+             * A generic shell for empty results — the app slots in the wording and,
+             * optionally, a call-to-action button.
+             */
+            "empty-state": LocalJSX.IntrinsicElements["empty-state"] & JSXBase.HTMLAttributes<HTMLEmptyStateElement>;
+            /**
+             * A chip only exists while its filter is active, so it has no `active` prop
+             * and no separate clear event — removing it and clearing its dimension are
+             * the same action.
+             */
+            "filter-chip": LocalJSX.IntrinsicElements["filter-chip"] & JSXBase.HTMLAttributes<HTMLFilterChipElement>;
+            /**
+             * One day's column/section in the planner. Owns its complete accessible
+             * name from its own props — `dayLabel` becomes the region's name because
+             * ARIA relationships cannot cross the shadow boundary.
+             * Deliberately has no `today` prop: the planner is a dateless recurring
+             * week, so there is nothing to derive "today" from.
+             */
+            "planner-day": LocalJSX.IntrinsicElements["planner-day"] & JSXBase.HTMLAttributes<HTMLPlannerDayElement>;
+            /**
+             * The app's primary discovery/favorites/planner unit. Fixed 22rem height
+             * regardless of content — recipe-card:not(:defined) must reserve the same
+             * value so an unregistered element doesn't cause a layout jump.
+             */
+            "recipe-card": LocalJSX.IntrinsicElements["recipe-card"] & JSXBase.HTMLAttributes<HTMLRecipeCardElement>;
+            /**
+             * A responsive card grid with an explicit column count — never `auto-fill`,
+             * so the app decides the breakpoint behaviour instead of the browser
+             * guessing it.
+             */
+            "recipe-grid": LocalJSX.IntrinsicElements["recipe-grid"] & JSXBase.HTMLAttributes<HTMLRecipeGridElement>;
+            /**
+             * Loading placeholder that matches `recipe-card`'s geometry exactly, so the
+             * reserved space for an undefined custom element holds and the grid does
+             * not shift when real cards arrive.
+             */
+            "skeleton-card": LocalJSX.IntrinsicElements["skeleton-card"] & JSXBase.HTMLAttributes<HTMLSkeletonCardElement>;
             /**
              * Integration spike only. Proves the Stencil <-> SvelteKit seam (object
              * property, custom event, slot) end to end. Not part of the real component

package/dist/types/index.d.ts

@@ -8,3 +8,4 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export type * from './components.d.ts';
+export type { DayOfWeek, RecipeSource, RecipeSummary, DayOption, PlannerEntry } from './utils/types';

package/dist/types/utils/icons.d.ts

@@ -0,0 +1,7 @@
+export declare function HeartIcon(filled: boolean): any;
+export declare function XIcon(): any;
+export declare function ChevronDownIcon(): any;
+export declare function ArrowRightLeftIcon(): any;
+export declare function Trash2Icon(): any;
+export declare function CheckIcon(): any;
+export declare function CalendarPlusIcon(): any;

package/dist/types/utils/tile-hue.d.ts

@@ -0,0 +1 @@
+export declare function tileHue(name: string): number;

package/dist/types/utils/types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Shared shapes crossing the library boundary.
+ *
+ * `DayOfWeek` and `RecipeSummary` mirror the app's own domain types
+ * (app/src/lib/domain) structurally. The library cannot import them from the
+ * app — it must build and publish independently, and the dependency only
+ * ever runs library -> app — so it declares its own copies here;
+ * TypeScript's structural typing makes the app's interfaces assignable to
+ * these without either package importing the other.
+ *
+ * `DayOption` and `PlannerEntry` have no equivalent elsewhere: they are
+ * genuinely owned by the library and re-exported for the app to import.
+ */
+export type DayOfWeek = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
+export type RecipeSource = 'api' | 'user';
+export interface RecipeSummary {
+    id: string;
+    source: RecipeSource;
+    name: string;
+    thumbnail: string | null;
+    category: string | null;
+    area: string | null;
+}
+export interface DayOption {
+    day: DayOfWeek;
+    label: string;
+    occupied: boolean;
+}
+export interface PlannerEntry {
+    recipeId: string;
+    name: string;
+    thumbnail: string | null;
+    resolved: boolean;
+}

package/package.json

@@ -1,56 +1,56 @@
-{
-  "name": "@ssingh465/recipe-ui",
-  "version": "0.1.1",
-  "description": "Stencil web component library for Recipe Finder & Meal Planner",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ssingh465/recipe-finder-meal-planner.git",
-    "directory": "library"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "engines": {
-    "node": ">=20"
-  },
-  "type": "module",
-  "types": "./dist/components/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.js"
-    },
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "dist/components/**"
-  ],
-  "scripts": {
-    "build": "stencil build",
-    "start": "stencil build --dev --watch --serve",
-    "lint": "eslint src",
-    "test": "stencil-test --prod",
-    "test:watch": "stencil-test --prod --watch",
-    "generate": "stencil generate"
-  },
-  "dependencies": {
-    "@stencil/core": "^4.27.1 || ^5.0.0-0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@stencil/vitest": "^1.8.3",
-    "@types/node": "^22.13.5",
-    "@vitest/browser-playwright": "^4.0.0",
-    "eslint": "^10.9.0",
-    "playwright": "^1.52.0",
-    "typescript-eslint": "^8.68.0",
-    "vitest": "^4.0.0"
-  }
-}
+{
+  "name": "@ssingh465/recipe-ui",
+  "version": "0.2.1",
+  "description": "Stencil web component library for Recipe Finder & Meal Planner",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ssingh465/recipe-finder-meal-planner.git",
+    "directory": "library"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "type": "module",
+  "types": "./dist/components/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "dist/components/**"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "lint": "eslint src",
+    "test": "stencil-test --prod",
+    "test:watch": "stencil-test --prod --watch",
+    "generate": "stencil generate"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.27.1 || ^5.0.0-0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@stencil/vitest": "^1.8.3",
+    "@types/node": "^22.13.5",
+    "@vitest/browser-playwright": "^4.0.0",
+    "eslint": "^10.9.0",
+    "playwright": "^1.52.0",
+    "typescript-eslint": "^8.68.0",
+    "vitest": "^4.0.0"
+  }
+}