@recipe-book/react 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,18 +1,19 @@
 "use client";
 
-// src/parts/image.tsx
-import {
-  forwardRef
-} from "react";
-
 // src/context.tsx
 import { RecipeBookError as RecipeBookError2 } from "@recipe-book/core";
 import {
-  createContext,
   useContext,
   useMemo as useMemo2
 } from "react";
 
+// src/display-name.ts
+function setDisplayName(component, name) {
+  const target = component;
+  target.displayName = name;
+  Object.defineProperty(target.render ?? component, "name", { value: name });
+}
+
 // src/labels.ts
 var defaultLabels = {
   servings: "Servings",
@@ -25,6 +26,15 @@ var defaultLabels = {
   to: "to"
 };
 
+// src/react.ts
+import {
+  cloneElement,
+  createContext,
+  forwardRef,
+  Fragment,
+  isValidElement
+} from "react";
+
 // src/state/use-recipe-state.ts
 import {
   resolveRecipe
@@ -77,14 +87,8 @@ import {
   useRef,
   useState
 } from "react";
-function useControllableState({
-  prop,
-  value,
-  defaultValue,
-  onChange,
-  resetKey
-}) {
-  const controlled = value !== void 0;
+function useControllableState(options) {
+  const { value, defaultValue, onChange, resetKey } = options;
   const [internal, setInternal] = useState(defaultValue);
   const [internalResetKey, setInternalResetKey] = useState(resetKey);
   let uncontrolled = internal;
@@ -93,22 +97,27 @@ function useControllableState({
     setInternal(defaultValue);
     uncontrolled = defaultValue;
   }
-  const current = controlled ? value : uncontrolled;
-  const latest = useRef({ controlled, value: current, onChange });
+  const current = value === void 0 ? uncontrolled : value;
+  const latest = useRef({ value, current, onChange });
   useInsertionEffect(() => {
-    latest.current = { controlled, value: current, onChange };
+    latest.current = { value, current, onChange };
   });
   const setValue = useCallback((next) => {
-    const { controlled: controlled2, value: value2, onChange: onChange2 } = latest.current;
-    if (Object.is(next, value2)) return;
-    if (!controlled2) {
-      latest.current.value = next;
+    const { value: value2, current: current2, onChange: onChange2 } = latest.current;
+    if (Object.is(next, current2)) return;
+    if (value2 === void 0) {
+      latest.current.current = next;
       setInternal(next);
     }
     onChange2?.(next);
   }, []);
   if (process.env.NODE_ENV !== "production") {
-    useModeWarnings(prop, controlled, controlled && onChange === void 0);
+    const controlled = value !== void 0;
+    useModeWarnings(
+      options.prop,
+      controlled,
+      controlled && onChange === void 0
+    );
   }
   return [current, setValue];
 }
@@ -141,7 +150,7 @@ function useRecipeState(options) {
       assertParsedRecipe(
         recipe,
         "useRecipeState()",
-        "Call parseRecipe() from @recipe-book/core and pass result.data."
+        "Call parseRecipe() from @recipe-book/react/core and pass result.data."
       );
     }, [recipe]);
   }
@@ -199,8 +208,8 @@ function useRecipeState(options) {
     },
     [updateSystem]
   );
-  const steps = useMemo(() => numberSteps(recipe), [recipe]);
-  const { scale, canConvert, ingredients } = useMemo(
+  const steps = useMemo(() => resolveRecipe(recipe).steps, [recipe]);
+  const resolved = useMemo(
     () => resolveRecipe(recipe, { servings, system }),
     [recipe, servings, system]
   );
@@ -209,24 +218,14 @@ function useRecipeState(options) {
       recipe,
       servings,
       setServings,
-      scale,
+      scale: resolved.scale,
       system,
       setSystem,
-      canConvert,
-      ingredients,
+      canConvert: resolved.canConvert,
+      ingredients: resolved.ingredients,
       steps
     }),
-    [
-      recipe,
-      servings,
-      setServings,
-      scale,
-      system,
-      setSystem,
-      canConvert,
-      ingredients,
-      steps
-    ]
+    [recipe, servings, setServings, resolved, system, setSystem, steps]
   );
 }
 function useWarning(message) {
@@ -238,27 +237,35 @@ function useWarning(message) {
     }
   }, [message]);
 }
-function numberSteps(recipe) {
-  let number = 0;
-  return recipe.steps.map((section) => ({
-    ...section,
-    items: section.items.map((step) => ({ ...step, number: ++number }))
-  }));
-}
 function isServings(value) {
   return typeof value === "number" && Number.isFinite(value) && value > 0;
 }
 function servingsBase(recipe) {
   return [recipe.servings?.amount, recipe.yield?.amount].find(isServings) ?? 1;
 }
-var MIN_SCALE = 1e-6;
-var MAX_SCALE = 1e6;
+function servingsWindow(base) {
+  const [mantissa, exponent] = base.toExponential().split("e");
+  return [
+    Number(`${mantissa}e${Number(exponent) - 6}`),
+    Number(`${mantissa}e${Number(exponent) + 6}`)
+  ];
+}
 function isServingsFor(value, base) {
-  return isServings(value) && value / base >= MIN_SCALE && value / base <= MAX_SCALE;
+  const [min, max] = servingsWindow(base);
+  return isServings(value) && value >= min && value <= max;
 }
 function describeRange(base) {
-  const bound = (value) => String(Number(value.toPrecision(6)));
-  return `a number from ${bound(base * MIN_SCALE)} to ${bound(base * MAX_SCALE)} for this recipe`;
+  const [min, max] = servingsWindow(base);
+  return `a number from ${roundInward(min, true)} to ${roundInward(max, false)} for this recipe`;
+}
+function roundInward(bound, up) {
+  const nearest = Number(bound.toPrecision(6));
+  if (up ? nearest >= bound : nearest <= bound) {
+    return nearest;
+  }
+  const [mantissa, exponent] = bound.toExponential().split("e");
+  const digits = Number(mantissa.replace(".", "").slice(0, 6));
+  return Number(`${up ? digits + 1 : digits}e${Number(exponent) - 5}`);
 }
 function isSystem(value) {
   return value === "metric" || value === "us";
@@ -312,7 +319,7 @@ function useConfig({
       }),
       [outer.labels, labels]
     ),
-    defaultSystem: isSystem(defaultSystem) ? defaultSystem : outer.defaultSystem
+    defaultSystem: [defaultSystem, outer.defaultSystem].find(isSystem)
   };
 }
 var RecipeDataContext = /* @__PURE__ */ createContext(null);
@@ -342,6 +349,9 @@ function useRecipe() {
     "useRecipe() must be called inside <Recipe.Root>. To use recipe state without a Root, call useRecipeState()."
   );
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(RecipeBookProvider, "Recipe.RecipeBookProvider");
+}
 
 // src/parts/image.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -352,10 +362,7 @@ var Image = /* @__PURE__ */ forwardRef(function Image2({
   ...props
 }, ref) {
   const { recipe } = useRecipeData("Recipe.Image");
-  if (recipe.image === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx2(
+  return recipe.image !== void 0 && /* @__PURE__ */ jsx2(
     Comp,
     {
       ...props,
@@ -366,23 +373,17 @@ var Image = /* @__PURE__ */ forwardRef(function Image2({
     }
   );
 });
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Image, "Recipe.Image");
+}
 
 // src/parts/ingredients.tsx
 import {
-  cloneElement as cloneElement2,
-  createContext as createContext2,
-  forwardRef as forwardRef3,
   useMemo as useMemo3
 } from "react";
 
 // src/slot.tsx
-import {
-  cloneElement,
-  forwardRef as forwardRef2,
-  Fragment,
-  isValidElement,
-  useCallback as useCallback3
-} from "react";
+import { useCallback as useCallback3 } from "react";
 function resolveAsChild(part, tag, asChild, children, defaults) {
   if (asChild) {
     if (isValidElement(children) && children.type !== Fragment) {
@@ -400,7 +401,7 @@ function resolveAsChild(part, tag, asChild, children, defaults) {
   }
   return [tag, isEmpty(children) ? defaults : children];
 }
-var Slot = /* @__PURE__ */ forwardRef2(function Slot2({ children, ...props }, ref) {
+var Slot = /* @__PURE__ */ forwardRef(function Slot2({ children, ...props }, ref) {
   const child = children;
   const merged = { ...props, ...child.props };
   for (const name in child.props) {
@@ -421,7 +422,7 @@ var Slot = /* @__PURE__ */ forwardRef2(function Slot2({ children, ...props }, re
     }
   }
   const childRef = Object.getOwnPropertyDescriptor(child.props, "ref")?.value ?? child.ref;
-  merged.ref = useCallback3(
+  const mergedRef = useCallback3(
     (node) => {
       const refs = [ref, childRef];
       const cleanups = refs.map((each) => setRef(each, node));
@@ -439,6 +440,9 @@ var Slot = /* @__PURE__ */ forwardRef2(function Slot2({ children, ...props }, re
     },
     [ref, childRef]
   );
+  if (ref != null) {
+    merged.ref = mergedRef;
+  }
   return cloneElement(child, merged);
 });
 function setRef(ref, node) {
@@ -467,6 +471,9 @@ function describeChildren(children) {
 function isEmpty(children) {
   return children == null || typeof children === "boolean";
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Slot, "Slot");
+}
 
 // src/use-format-ingredient.ts
 import {
@@ -480,7 +487,7 @@ function useFormatIngredient() {
     labels: { optional }
   } = useRequired(
     RecipeDataContext,
-    "useFormatIngredient() must be called inside <Recipe.Root>. To format ingredients without a Root, call formatIngredient() from @recipe-book/core."
+    "useFormatIngredient() must be called inside <Recipe.Root>. To format ingredients without a Root, call formatIngredient() from @recipe-book/react/core."
   );
   return useCallback4(
     (item) => formatLine(item, locale, optional),
@@ -489,9 +496,10 @@ function useFormatIngredient() {
 }
 function formatLine(item, locale, optional) {
   const options = { locale };
+  const formatted = formatIngredient(item, options);
   const quantity = lineQuantity(item);
   return {
-    ...formatIngredient(item, options),
+    ...formatted,
     quantityParts: quantity ? formatQuantityToParts(quantity, options) : [],
     ...item.ingredient.optional && { optional }
   };
@@ -501,10 +509,10 @@ function lineQuantity(item) {
 }
 
 // src/parts/sections.tsx
-import { Fragment as Fragment2, useId } from "react";
+import { useId } from "react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function renderKeyed(items, render) {
-  return items.map((item) => /* @__PURE__ */ jsx3(Fragment2, { children: render(item) }, item.id));
+  return items.map((item) => /* @__PURE__ */ jsx3(Fragment, { children: render(item) }, item.id));
 }
 function SectionBlock({
   kind,
@@ -514,19 +522,16 @@ function SectionBlock({
 }) {
   const headingId = useId();
   const marker = `data-recipe-${kind}-section`;
-  if (!title) {
-    return /* @__PURE__ */ jsx3("div", { ...{ [marker]: "" }, children });
-  }
   const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxs("section", { ...{ [marker]: "" }, "aria-labelledby": headingId, children: [
+  return title ? /* @__PURE__ */ jsxs("section", { ...{ [marker]: "" }, "aria-labelledby": headingId, children: [
     /* @__PURE__ */ jsx3(Heading, { id: headingId, children: title }),
     children
-  ] });
+  ] }) : /* @__PURE__ */ jsx3("div", { ...{ [marker]: "" }, children });
 }
 
 // src/parts/ingredients.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var Ingredients = /* @__PURE__ */ forwardRef3(
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Ingredients = /* @__PURE__ */ forwardRef(
   function Ingredients2({ headingLevel = 3, children, ...props }, ref) {
     const { ingredients } = usePartState("Recipe.Ingredients");
     const renderSection = children ?? ((section) => /* @__PURE__ */ jsx4(
@@ -541,15 +546,15 @@ var Ingredients = /* @__PURE__ */ forwardRef3(
     return /* @__PURE__ */ jsx4("div", { ...props, "data-recipe-ingredients": "", ref, children: renderKeyed(ingredients, renderSection) });
   }
 );
-var IngredientList = /* @__PURE__ */ forwardRef3(
+var IngredientList = /* @__PURE__ */ forwardRef(
   function IngredientList2({ section, children = (item) => /* @__PURE__ */ jsx4(Ingredient, { item }), ...props }, ref) {
     const { ingredients } = usePartState("Recipe.IngredientList");
     const items = section?.items ?? ingredients.flatMap((s) => s.items);
     return /* @__PURE__ */ jsx4("ul", { ...props, "data-recipe-ingredient-list": "", ref, children: renderKeyed(items, children) });
   }
 );
-var LineContext = /* @__PURE__ */ createContext2(null);
-var Ingredient = /* @__PURE__ */ forwardRef3(
+var LineContext = /* @__PURE__ */ createContext(null);
+var Ingredient = /* @__PURE__ */ forwardRef(
   function Ingredient2({ item, asChild = false, children, ...props }, ref) {
     const {
       labels: { optional, to },
@@ -565,7 +570,7 @@ var Ingredient = /* @__PURE__ */ forwardRef3(
       "li",
       asChild,
       children,
-      /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      /* @__PURE__ */ jsxs2(Fragment2, { children: [
         /* @__PURE__ */ jsx4(IngredientQuantity, {}),
         quantity && (quantity.unit === void 0 ? "\xA0" : " "),
         /* @__PURE__ */ jsx4(IngredientName, {}),
@@ -601,15 +606,12 @@ function ingredientText(name, attribute, read) {
       return null;
     }
     const [Comp, child] = resolveAsChild(part, "span", asChild, children, null);
-    return /* @__PURE__ */ jsx4(Comp, { ...props, ...{ [attribute]: "" }, ref, children: Comp === "span" ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    return /* @__PURE__ */ jsx4(Comp, { ...props, ...{ [attribute]: "" }, ref, children: Comp === "span" ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
       children,
       text
-    ] }) : cloneElement2(child, void 0, child.props.children, text) });
-  }
-  if (process.env.NODE_ENV !== "production") {
-    Object.defineProperty(IngredientText, "name", { value: name });
+    ] }) : cloneElement(child, void 0, child.props.children, text) });
   }
-  return forwardRef3(IngredientText);
+  return forwardRef(IngredientText);
 }
 var IngredientQuantity = /* @__PURE__ */ ingredientText(
   "IngredientQuantity",
@@ -637,7 +639,7 @@ function renderQuantity(parts, to) {
   if (!separator) {
     return join(parts);
   }
-  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     join(parts.slice(0, dash)),
     /* @__PURE__ */ jsx4("span", { "data-recipe-range-separator": "", "aria-hidden": "true", children: separator.value }),
     /* @__PURE__ */ jsx4("span", { style: hiddenStyle, children: ` ${to} ` }),
@@ -660,17 +662,25 @@ var IngredientOptional = /* @__PURE__ */ ingredientText(
   // An empty label shows only the part's own children, such as an icon.
   ({ optional }, children) => optional === "" && isEmpty(children) ? void 0 : optional
 );
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Ingredients, "Recipe.Ingredients");
+  setDisplayName(IngredientList, "Recipe.IngredientList");
+  setDisplayName(Ingredient, "Recipe.Ingredient");
+  setDisplayName(IngredientQuantity, "Recipe.IngredientQuantity");
+  setDisplayName(IngredientName, "Recipe.IngredientName");
+  setDisplayName(IngredientNote, "Recipe.IngredientNote");
+  setDisplayName(IngredientOptional, "Recipe.IngredientOptional");
+}
 
 // src/parts/json-ld.tsx
 import { toJsonLd } from "@recipe-book/core/schema-org";
 import {
-  forwardRef as forwardRef4,
   useEffect as useEffect3,
   useMemo as useMemo4,
   useRef as useRef3
 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var JsonLd = /* @__PURE__ */ forwardRef4(
+var JsonLd = /* @__PURE__ */ forwardRef(
   function JsonLd2({
     servings,
     system,
@@ -682,12 +692,12 @@ var JsonLd = /* @__PURE__ */ forwardRef4(
     ...props
   }, ref) {
     const { recipe } = useRecipeData("Recipe.JsonLd");
-    const { data, warnings } = useMemo4(
+    const result = useMemo4(
       () => toJsonLd(recipe, { servings, system, url, extra }),
       [recipe, servings, system, url, extra]
     );
     if (process.env.NODE_ENV !== "production") {
-      useWarningsReport(recipe.name, warnings);
+      useWarningsReport(recipe.name, result.warnings);
     }
     return /* @__PURE__ */ jsx5(
       "script",
@@ -696,7 +706,7 @@ var JsonLd = /* @__PURE__ */ forwardRef4(
         type: "application/ld+json",
         "data-recipe-json-ld": "",
         dangerouslySetInnerHTML: {
-          __html: JSON.stringify(data).replace(/</g, "\\u003c")
+          __html: JSON.stringify(result.data).replace(/</g, "\\u003c")
         },
         ref
       }
@@ -717,6 +727,9 @@ function useWarningsReport(name, warnings) {
     reported.current = key;
   }, [name, warnings]);
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(JsonLd, "Recipe.JsonLd");
+}
 
 // src/parts/root.tsx
 import {
@@ -726,7 +739,7 @@ import {
   useRef as useRef4,
   useState as useState2
 } from "react";
-import { Fragment as Fragment4, jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
 function Root({
   recipe,
   parse,
@@ -741,7 +754,7 @@ function Root({
     assertParsedRecipe(
       recipe,
       "<Recipe.Root>",
-      "Call parseRecipe() from @recipe-book/core on the server, in a loader, or at build time and pass result.data, or pass parse={parseRecipe} to parse it in the browser."
+      "Call parseRecipe() from @recipe-book/react/core on the server, in a loader, or at build time and pass result.data, or pass parse={parseRecipe} to parse it in the browser."
     );
     return { success: true, data: recipe, warnings: [] };
   }, [parse, recipe]);
@@ -749,7 +762,7 @@ function Root({
     useParseReport(result);
   }
   if (!result.success) {
-    return /* @__PURE__ */ jsx6(Fragment4, { children: fallback });
+    return /* @__PURE__ */ jsx6(Fragment3, { children: fallback });
   }
   return /* @__PURE__ */ jsx6(RecipeProvider, { ...options, recipe: result.data, children });
 }
@@ -784,7 +797,7 @@ function useParseReport(result) {
     if (result.success) {
       const count = result.warnings.length;
       console.warn(
-        `Recipe Book: ${quote(result.data.name)} has ${count} ${count === 1 ? "warning" : "warnings"}. It still renders, but a warning can mean a misspelled field.`,
+        `Recipe Book: ${quote(result.data.name)} has ${count} ${count === 1 ? "warning" : "warnings"}. It still renders. https://recipe-book.siraj.page/errors/#issue-codes gives the fix for each warning's code.`,
         result.warnings
       );
     } else {
@@ -792,6 +805,9 @@ function useParseReport(result) {
     }
   }, [result]);
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Root, "Recipe.Root");
+}
 
 // src/parts/servings.tsx
 import {
@@ -799,7 +815,6 @@ import {
   formatYield
 } from "@recipe-book/core";
 import {
-  forwardRef as forwardRef5,
   useState as useState3
 } from "react";
 
@@ -815,7 +830,7 @@ function composeEventHandlers(theirs, ours) {
 
 // src/parts/servings.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-var ServingsSelect = /* @__PURE__ */ forwardRef5(
+var ServingsSelect = /* @__PURE__ */ forwardRef(
   function ServingsSelect2({ options, "aria-label": ariaLabel, onChange, ...props }, ref) {
     const { recipe, labels, locale } = useRecipeData("Recipe.ServingsSelect");
     const { servings, setServings } = usePartState("Recipe.ServingsSelect");
@@ -843,7 +858,7 @@ var ServingsSelect = /* @__PURE__ */ forwardRef5(
     );
   }
 );
-var ServingsInput = /* @__PURE__ */ forwardRef5(
+var ServingsInput = /* @__PURE__ */ forwardRef(
   function ServingsInput2({
     min = 1,
     max,
@@ -920,6 +935,10 @@ function optionText(choice, { servings, yield: makes }, base, labels, locale) {
   }
   return `${formatServings({ amount: choice }, format)}\xD7`;
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(ServingsSelect, "Recipe.ServingsSelect");
+  setDisplayName(ServingsInput, "Recipe.ServingsInput");
+}
 
 // src/parts/step-text.tsx
 import {
@@ -928,18 +947,13 @@ import {
   segmentStepText
 } from "@recipe-book/core";
 import {
-  forwardRef as forwardRef7,
   useEffect as useEffect5,
   useMemo as useMemo6
 } from "react";
 
 // src/parts/steps.tsx
-import {
-  createContext as createContext3,
-  forwardRef as forwardRef6
-} from "react";
-import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
-var Steps = /* @__PURE__ */ forwardRef6(function Steps2({ headingLevel = 3, children, ...props }, ref) {
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var Steps = /* @__PURE__ */ forwardRef(function Steps2({ headingLevel = 3, children, ...props }, ref) {
   const { steps } = useRecipeData("Recipe.Steps");
   const renderSection = children ?? ((section) => /* @__PURE__ */ jsx8(
     SectionBlock,
@@ -952,7 +966,7 @@ var Steps = /* @__PURE__ */ forwardRef6(function Steps2({ headingLevel = 3, chil
   ));
   return /* @__PURE__ */ jsx8("div", { ...props, "data-recipe-steps": "", ref, children: renderKeyed(steps, renderSection) });
 });
-var StepList = /* @__PURE__ */ forwardRef6(
+var StepList = /* @__PURE__ */ forwardRef(
   function StepList2({ section, children = (step) => /* @__PURE__ */ jsx8(Step, { item: step }), start, ...props }, ref) {
     const { steps } = useRecipeData("Recipe.StepList");
     const items = section?.items ?? steps.flatMap((s) => s.items);
@@ -968,15 +982,15 @@ var StepList = /* @__PURE__ */ forwardRef6(
     );
   }
 );
-var StepContext = /* @__PURE__ */ createContext3(null);
-var Step = /* @__PURE__ */ forwardRef6(function Step2({ item, asChild = false, children, ...props }, ref) {
+var StepContext = /* @__PURE__ */ createContext(null);
+var Step = /* @__PURE__ */ forwardRef(function Step2({ item, asChild = false, children, ...props }, ref) {
   useRecipeData("Recipe.Step");
   const [Comp, content] = resolveAsChild(
     "Recipe.Step",
     "li",
     asChild,
     children,
-    /* @__PURE__ */ jsxs3(Fragment5, { children: [
+    /* @__PURE__ */ jsxs3(Fragment4, { children: [
       /* @__PURE__ */ jsx8(StepName, {}),
       item.name !== void 0 && " ",
       item.text
@@ -984,19 +998,25 @@ var Step = /* @__PURE__ */ forwardRef6(function Step2({ item, asChild = false, c
   );
   return /* @__PURE__ */ jsx8(StepContext.Provider, { value: item, children: /* @__PURE__ */ jsx8(Comp, { ...props, "data-recipe-step": "", ref, children: content }) });
 });
-var StepName = /* @__PURE__ */ forwardRef6(
+var StepName = /* @__PURE__ */ forwardRef(
   function StepName2(props, ref) {
     const step = useRequired(
       StepContext,
       "<Recipe.StepName> must be rendered inside <Recipe.Step>."
     );
-    return step.name === void 0 ? null : /* @__PURE__ */ jsx8("b", { ...props, "data-recipe-name": "", ref, children: step.name });
+    return step.name !== void 0 && /* @__PURE__ */ jsx8("b", { ...props, "data-recipe-name": "", ref, children: step.name });
   }
 );
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Steps, "Recipe.Steps");
+  setDisplayName(StepList, "Recipe.StepList");
+  setDisplayName(Step, "Recipe.Step");
+  setDisplayName(StepName, "Recipe.StepName");
+}
 
 // src/parts/step-text.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
-var StepText = /* @__PURE__ */ forwardRef7(
+var StepText = /* @__PURE__ */ forwardRef(
   function StepText2(props, ref) {
     const step = useRequired(
       StepContext,
@@ -1016,36 +1036,32 @@ function Temperature({ segment }) {
   const unit = usePartState("Recipe.StepText").system === "us" ? "F" : "C";
   const readings = [segment, ...segment.alternatives];
   useEffect5(reportTemperature, [reportTemperature]);
-  return /* @__PURE__ */ jsx9("span", { "data-recipe-temperature": "", children: [false, true].flatMap((fan) => {
+  return /* @__PURE__ */ jsx9("span", { "data-recipe-temperature": "", children: [false, true].map((fan) => {
     const kind = readings.filter((reading2) => reading2.fan === fan);
     const reading = kind.find((each) => each.temperature.unit === unit) ?? kind[0];
-    return reading ? [
-      formatTemperature(
-        convertTemperature(reading.temperature, unit),
-        {
-          locale,
-          rounding: reading.temperature.unit === unit ? "none" : void 0
-        }
-      ) + (fan && labels.fan ? ` ${labels.fan}` : "")
-    ] : [];
-  }).join(" / ") });
+    return reading && formatTemperature(convertTemperature(reading.temperature, unit), {
+      locale,
+      rounding: reading.temperature.unit === unit ? "none" : void 0
+    }) + (fan && labels.fan ? ` ${labels.fan}` : "");
+  }).filter(Boolean).join(" / ") });
+}
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(StepText, "Recipe.StepText");
 }
 
 // src/parts/system-toggle.tsx
 import {
-  createContext as createContext4,
-  forwardRef as forwardRef8,
   useCallback as useCallback6,
   useEffect as useEffect6,
   useId as useId2,
   useMemo as useMemo7,
   useState as useState4
 } from "react";
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-var ToggleContext = /* @__PURE__ */ createContext4(
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var ToggleContext = /* @__PURE__ */ createContext(
   null
 );
-var SystemToggle = /* @__PURE__ */ forwardRef8(
+var SystemToggle = /* @__PURE__ */ forwardRef(
   function SystemToggle2({ asChild = false, "aria-label": ariaLabel, children, ...props }, ref) {
     const { labels } = useRecipeData("Recipe.SystemToggle");
     const { system, setSystem, canConvert } = usePartState(
@@ -1069,7 +1085,7 @@ var SystemToggle = /* @__PURE__ */ forwardRef8(
       "div",
       asChild,
       children,
-      /* @__PURE__ */ jsxs4(Fragment6, { children: [
+      /* @__PURE__ */ jsxs4(Fragment5, { children: [
         /* @__PURE__ */ jsx10(SystemOption, { value: "metric" }),
         /* @__PURE__ */ jsx10(SystemOption, { value: "us" })
       ] })
@@ -1089,7 +1105,7 @@ var SystemToggle = /* @__PURE__ */ forwardRef8(
     ) });
   }
 );
-var SystemOption = /* @__PURE__ */ forwardRef8(
+var SystemOption = /* @__PURE__ */ forwardRef(
   function SystemOption2({
     value,
     asChild = false,
@@ -1130,6 +1146,7 @@ var SystemOption = /* @__PURE__ */ forwardRef8(
     return /* @__PURE__ */ jsx10(
       Comp,
       {
+        autoComplete: "off",
         ...props,
         type: type ?? "button",
         role: "radio",
@@ -1156,6 +1173,10 @@ function moveOnArrowKey(event) {
   if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
     return;
   }
+  const group = event.currentTarget.closest("[data-recipe-system-toggle]");
+  if (group === null) {
+    return;
+  }
   const { key } = event;
   let step;
   if (key === "ArrowDown") {
@@ -1163,17 +1184,16 @@ function moveOnArrowKey(event) {
   } else if (key === "ArrowUp") {
     step = -1;
   } else if (key === "ArrowRight") {
-    step = isRtl(event.currentTarget) ? -1 : 1;
+    step = isRtl(group) ? -1 : 1;
   } else if (key === "ArrowLeft") {
-    step = isRtl(event.currentTarget) ? 1 : -1;
+    step = isRtl(group) ? 1 : -1;
   } else {
     return;
   }
-  const group = event.currentTarget.closest("[data-recipe-system-toggle]");
   const options = Array.from(
-    group?.querySelectorAll(
+    group.querySelectorAll(
       "[data-recipe-system-option]:not([data-disabled])"
-    ) ?? []
+    )
   );
   const index = options.indexOf(event.currentTarget);
   if (index === -1) {
@@ -1185,7 +1205,11 @@ function moveOnArrowKey(event) {
   next?.click();
 }
 function isRtl(element) {
-  return element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+  return getComputedStyle(element).direction === "rtl";
+}
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(SystemToggle, "Recipe.SystemToggle");
+  setDisplayName(SystemOption, "Recipe.SystemOption");
 }
 export {
   Image,