@recipe-book/react 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -66,12 +66,16 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/parts/image.tsx
-var import_react4 = require("react");
-
 // src/context.tsx
 var import_core3 = require("@recipe-book/core");
-var import_react3 = require("react");
+var import_react4 = require("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 = {
@@ -85,9 +89,12 @@ var defaultLabels = {
   to: "to"
 };
 
+// src/react.ts
+var import_react = require("react");
+
 // src/state/use-recipe-state.ts
 var import_core2 = require("@recipe-book/core");
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/is-parsed-recipe.ts
 var import_core = require("@recipe-book/core");
@@ -128,46 +135,45 @@ function quote(text) {
 }
 
 // src/state/use-controllable-state.ts
-var import_react = require("react");
-function useControllableState({
-  prop,
-  value,
-  defaultValue,
-  onChange,
-  resetKey
-}) {
-  const controlled = value !== void 0;
-  const [internal, setInternal] = (0, import_react.useState)(defaultValue);
-  const [internalResetKey, setInternalResetKey] = (0, import_react.useState)(resetKey);
+var import_react2 = require("react");
+function useControllableState(options) {
+  const { value, defaultValue, onChange, resetKey } = options;
+  const [internal, setInternal] = (0, import_react2.useState)(defaultValue);
+  const [internalResetKey, setInternalResetKey] = (0, import_react2.useState)(resetKey);
   let uncontrolled = internal;
   if (!Object.is(resetKey, internalResetKey)) {
     setInternalResetKey(resetKey);
     setInternal(defaultValue);
     uncontrolled = defaultValue;
   }
-  const current = controlled ? value : uncontrolled;
-  const latest = (0, import_react.useRef)({ controlled, value: current, onChange });
-  (0, import_react.useInsertionEffect)(() => {
-    latest.current = { controlled, value: current, onChange };
+  const current = value === void 0 ? uncontrolled : value;
+  const latest = (0, import_react2.useRef)({ value, current, onChange });
+  (0, import_react2.useInsertionEffect)(() => {
+    latest.current = { value, current, onChange };
   });
-  const setValue = (0, import_react.useCallback)((next) => {
-    const { controlled: controlled2, value: value2, onChange: onChange2 } = latest.current;
-    if (Object.is(next, value2)) return;
-    if (!controlled2) {
-      latest.current.value = next;
+  const setValue = (0, import_react2.useCallback)((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];
 }
 function useModeWarnings(prop, controlled, readOnly) {
-  const initiallyControlled = (0, import_react.useRef)(controlled);
-  const warned2 = (0, import_react.useRef)({ readOnly: false, modeSwitch: false });
-  (0, import_react.useEffect)(() => {
+  const initiallyControlled = (0, import_react2.useRef)(controlled);
+  const warned2 = (0, import_react2.useRef)({ readOnly: false, modeSwitch: false });
+  (0, import_react2.useEffect)(() => {
     const name = prop.charAt(0).toUpperCase() + prop.slice(1);
     if (readOnly && !warned2.current.readOnly) {
       warned2.current.readOnly = true;
@@ -189,11 +195,11 @@ function useModeWarnings(prop, controlled, readOnly) {
 function useRecipeState(options) {
   const { recipe } = options;
   if (process.env.NODE_ENV !== "production") {
-    (0, import_react2.useMemo)(() => {
+    (0, import_react3.useMemo)(() => {
       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]);
   }
@@ -227,7 +233,7 @@ function useRecipeState(options) {
       system !== rawSystem && `Recipe Book: \`system\` must be "metric" or "us", received ${describe(rawSystem)}. Showing "${system}" instead.`
     );
   }
-  const setServings = (0, import_react2.useCallback)(
+  const setServings = (0, import_react3.useCallback)(
     (next) => {
       if (isServingsFor(next, base)) {
         updateServings(next);
@@ -239,7 +245,7 @@ function useRecipeState(options) {
     },
     [updateServings, base]
   );
-  const setSystem = (0, import_react2.useCallback)(
+  const setSystem = (0, import_react3.useCallback)(
     (next) => {
       if (isSystem(next)) {
         updateSystem(next);
@@ -251,66 +257,64 @@ function useRecipeState(options) {
     },
     [updateSystem]
   );
-  const steps = (0, import_react2.useMemo)(() => numberSteps(recipe), [recipe]);
-  const { scale, canConvert, ingredients } = (0, import_react2.useMemo)(
+  const steps = (0, import_react3.useMemo)(() => (0, import_core2.resolveRecipe)(recipe).steps, [recipe]);
+  const resolved = (0, import_react3.useMemo)(
     () => (0, import_core2.resolveRecipe)(recipe, { servings, system }),
     [recipe, servings, system]
   );
-  return (0, import_react2.useMemo)(
+  return (0, import_react3.useMemo)(
     () => ({
       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) {
-  const warned2 = (0, import_react2.useRef)(false);
-  (0, import_react2.useEffect)(() => {
+  const warned2 = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
     if (message !== warned2.current) {
       warned2.current = message;
       if (message) console.warn(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";
@@ -330,7 +334,7 @@ function describe(value) {
 
 // src/context.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var ConfigContext = /* @__PURE__ */ (0, import_react3.createContext)({
+var ConfigContext = /* @__PURE__ */ (0, import_react.createContext)({
   locale: "en-US",
   labels: defaultLabels
 });
@@ -339,7 +343,7 @@ function RecipeBookProvider({
   ...config
 }) {
   const { locale, labels, defaultSystem } = useConfig(config);
-  const value = (0, import_react3.useMemo)(
+  const value = (0, import_react4.useMemo)(
     () => ({ locale, labels, defaultSystem }),
     [locale, labels, defaultSystem]
   );
@@ -350,10 +354,10 @@ function useConfig({
   labels,
   defaultSystem
 }) {
-  const outer = (0, import_react3.useContext)(ConfigContext);
+  const outer = (0, import_react4.useContext)(ConfigContext);
   return {
     locale: locale ?? outer.locale,
-    labels: (0, import_react3.useMemo)(
+    labels: (0, import_react4.useMemo)(
       () => ({
         ...outer.labels,
         ...Object.fromEntries(
@@ -364,13 +368,13 @@ function useConfig({
       }),
       [outer.labels, labels]
     ),
-    defaultSystem: isSystem(defaultSystem) ? defaultSystem : outer.defaultSystem
+    defaultSystem: [defaultSystem, outer.defaultSystem].find(isSystem)
   };
 }
-var RecipeDataContext = /* @__PURE__ */ (0, import_react3.createContext)(null);
-var RecipeStateContext = /* @__PURE__ */ (0, import_react3.createContext)(null);
+var RecipeDataContext = /* @__PURE__ */ (0, import_react.createContext)(null);
+var RecipeStateContext = /* @__PURE__ */ (0, import_react.createContext)(null);
 function useRequired(context, message) {
-  const value = (0, import_react3.useContext)(context);
+  const value = (0, import_react4.useContext)(context);
   if (!value) {
     throw new import_core3.RecipeBookError("missing_parent", message);
   }
@@ -394,20 +398,20 @@ 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
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Image = /* @__PURE__ */ (0, import_react4.forwardRef)(function Image2({
+var Image = /* @__PURE__ */ (0, import_react.forwardRef)(function Image2({
   as: Comp = "img",
   src,
   alt,
   ...props
 }, ref) {
   const { recipe } = useRecipeData("Recipe.Image");
-  if (recipe.image === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return recipe.image !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Comp,
     {
       ...props,
@@ -418,18 +422,21 @@ var Image = /* @__PURE__ */ (0, import_react4.forwardRef)(function Image2({
     }
   );
 });
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Image, "Recipe.Image");
+}
 
 // src/parts/ingredients.tsx
-var import_react8 = require("react");
+var import_react12 = require("react");
 
 // src/slot.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 function resolveAsChild(part, tag, asChild, children, defaults) {
   if (asChild) {
-    if ((0, import_react5.isValidElement)(children) && children.type !== import_react5.Fragment) {
+    if ((0, import_react.isValidElement)(children) && children.type !== import_react.Fragment) {
       return [
         Slot,
-        isEmpty(children.props.children) ? (0, import_react5.cloneElement)(children, void 0, defaults) : children
+        isEmpty(children.props.children) ? (0, import_react.cloneElement)(children, void 0, defaults) : children
       ];
     }
     if (process.env.NODE_ENV !== "production" && !warned.has(part)) {
@@ -441,7 +448,7 @@ function resolveAsChild(part, tag, asChild, children, defaults) {
   }
   return [tag, isEmpty(children) ? defaults : children];
 }
-var Slot = /* @__PURE__ */ (0, import_react5.forwardRef)(function Slot2({ children, ...props }, ref) {
+var Slot = /* @__PURE__ */ (0, import_react.forwardRef)(function Slot2({ children, ...props }, ref) {
   const child = children;
   const merged = { ...props, ...child.props };
   for (const name in child.props) {
@@ -462,7 +469,7 @@ var Slot = /* @__PURE__ */ (0, import_react5.forwardRef)(function Slot2({ childr
     }
   }
   const childRef = Object.getOwnPropertyDescriptor(child.props, "ref")?.value ?? child.ref;
-  merged.ref = (0, import_react5.useCallback)(
+  const mergedRef = (0, import_react7.useCallback)(
     (node) => {
       const refs = [ref, childRef];
       const cleanups = refs.map((each) => setRef(each, node));
@@ -480,7 +487,10 @@ var Slot = /* @__PURE__ */ (0, import_react5.forwardRef)(function Slot2({ childr
     },
     [ref, childRef]
   );
-  return (0, import_react5.cloneElement)(child, merged);
+  if (ref != null) {
+    merged.ref = mergedRef;
+  }
+  return (0, import_react.cloneElement)(child, merged);
 });
 function setRef(ref, node) {
   if (typeof ref === "function") {
@@ -493,7 +503,7 @@ function setRef(ref, node) {
 }
 var warned = /* @__PURE__ */ new Set();
 function describeChildren(children) {
-  if ((0, import_react5.isValidElement)(children)) {
+  if ((0, import_react.isValidElement)(children)) {
     return "a Fragment";
   }
   if (Array.isArray(children)) {
@@ -508,28 +518,32 @@ 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
 var import_core4 = require("@recipe-book/core");
-var import_react6 = require("react");
+var import_react9 = require("react");
 function useFormatIngredient() {
   const {
     locale,
     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 (0, import_react6.useCallback)(
+  return (0, import_react9.useCallback)(
     (item) => formatLine(item, locale, optional),
     [locale, optional]
   );
 }
 function formatLine(item, locale, optional) {
   const options = { locale };
+  const formatted = (0, import_core4.formatIngredient)(item, options);
   const quantity = lineQuantity(item);
   return {
-    ...(0, import_core4.formatIngredient)(item, options),
+    ...formatted,
     quantityParts: quantity ? (0, import_core4.formatQuantityToParts)(quantity, options) : [],
     ...item.ingredient.optional && { optional }
   };
@@ -539,10 +553,10 @@ function lineQuantity(item) {
 }
 
 // src/parts/sections.tsx
-var import_react7 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function renderKeyed(items, render) {
-  return items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react7.Fragment, { children: render(item) }, item.id));
+  return items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.Fragment, { children: render(item) }, item.id));
 }
 function SectionBlock({
   kind,
@@ -550,21 +564,18 @@ function SectionBlock({
   headingLevel,
   children
 }) {
-  const headingId = (0, import_react7.useId)();
+  const headingId = (0, import_react10.useId)();
   const marker = `data-recipe-${kind}-section`;
-  if (!title) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...{ [marker]: "" }, children });
-  }
   const Heading = `h${headingLevel}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { ...{ [marker]: "" }, "aria-labelledby": headingId, children: [
+  return title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { ...{ [marker]: "" }, "aria-labelledby": headingId, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading, { id: headingId, children: title }),
     children
-  ] });
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...{ [marker]: "" }, children });
 }
 
 // src/parts/ingredients.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Ingredients = /* @__PURE__ */ (0, import_react8.forwardRef)(
+var Ingredients = /* @__PURE__ */ (0, import_react.forwardRef)(
   function Ingredients2({ headingLevel = 3, children, ...props }, ref) {
     const { ingredients } = usePartState("Recipe.Ingredients");
     const renderSection = children ?? ((section) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -579,21 +590,21 @@ var Ingredients = /* @__PURE__ */ (0, import_react8.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...props, "data-recipe-ingredients": "", ref, children: renderKeyed(ingredients, renderSection) });
   }
 );
-var IngredientList = /* @__PURE__ */ (0, import_react8.forwardRef)(
+var IngredientList = /* @__PURE__ */ (0, import_react.forwardRef)(
   function IngredientList2({ section, children = (item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Ingredient, { item }), ...props }, ref) {
     const { ingredients } = usePartState("Recipe.IngredientList");
     const items = section?.items ?? ingredients.flatMap((s) => s.items);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { ...props, "data-recipe-ingredient-list": "", ref, children: renderKeyed(items, children) });
   }
 );
-var LineContext = /* @__PURE__ */ (0, import_react8.createContext)(null);
-var Ingredient = /* @__PURE__ */ (0, import_react8.forwardRef)(
+var LineContext = /* @__PURE__ */ (0, import_react.createContext)(null);
+var Ingredient = /* @__PURE__ */ (0, import_react.forwardRef)(
   function Ingredient2({ item, asChild = false, children, ...props }, ref) {
     const {
       labels: { optional, to },
       locale
     } = useRecipeData("Recipe.Ingredient");
-    const line = (0, import_react8.useMemo)(
+    const line = (0, import_react12.useMemo)(
       () => ({ ...formatLine(item, locale, optional), to }),
       [item, locale, optional, to]
     );
@@ -642,12 +653,9 @@ function ingredientText(name, attribute, read) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Comp, { ...props, ...{ [attribute]: "" }, ref, children: Comp === "span" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
       children,
       text
-    ] }) : (0, import_react8.cloneElement)(child, void 0, child.props.children, text) });
-  }
-  if (process.env.NODE_ENV !== "production") {
-    Object.defineProperty(IngredientText, "name", { value: name });
+    ] }) : (0, import_react.cloneElement)(child, void 0, child.props.children, text) });
   }
-  return (0, import_react8.forwardRef)(IngredientText);
+  return (0, import_react.forwardRef)(IngredientText);
 }
 var IngredientQuantity = /* @__PURE__ */ ingredientText(
   "IngredientQuantity",
@@ -698,12 +706,21 @@ 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
 var import_schema_org = require("@recipe-book/core/schema-org");
-var import_react9 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var JsonLd = /* @__PURE__ */ (0, import_react9.forwardRef)(
+var JsonLd = /* @__PURE__ */ (0, import_react.forwardRef)(
   function JsonLd2({
     servings,
     system,
@@ -715,12 +732,12 @@ var JsonLd = /* @__PURE__ */ (0, import_react9.forwardRef)(
     ...props
   }, ref) {
     const { recipe } = useRecipeData("Recipe.JsonLd");
-    const { data, warnings } = (0, import_react9.useMemo)(
+    const result = (0, import_react14.useMemo)(
       () => (0, import_schema_org.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__ */ (0, import_jsx_runtime5.jsx)(
       "script",
@@ -729,7 +746,7 @@ var JsonLd = /* @__PURE__ */ (0, import_react9.forwardRef)(
         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
       }
@@ -737,8 +754,8 @@ var JsonLd = /* @__PURE__ */ (0, import_react9.forwardRef)(
   }
 );
 function useWarningsReport(name, warnings) {
-  const reported = (0, import_react9.useRef)(void 0);
-  (0, import_react9.useEffect)(() => {
+  const reported = (0, import_react14.useRef)(void 0);
+  (0, import_react14.useEffect)(() => {
     const key = JSON.stringify(warnings);
     const count = warnings.length;
     if (count > 0 && key !== reported.current) {
@@ -750,9 +767,12 @@ function useWarningsReport(name, warnings) {
     reported.current = key;
   }, [name, warnings]);
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(JsonLd, "Recipe.JsonLd");
+}
 
 // src/parts/root.tsx
-var import_react10 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Root({
   recipe,
@@ -761,14 +781,14 @@ function Root({
   children,
   ...options
 }) {
-  const result = (0, import_react10.useMemo)(() => {
+  const result = (0, import_react16.useMemo)(() => {
     if (parse !== void 0) {
       return parse(recipe);
     }
     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]);
@@ -783,23 +803,23 @@ function Root({
 function RecipeProvider({ children, ...options }) {
   const { locale, labels, defaultSystem } = useConfig(options);
   const state = useRecipeState({ ...options, defaultSystem });
-  const [temperatures, setTemperatures] = (0, import_react10.useState)(0);
-  const reportTemperature = (0, import_react10.useCallback)(() => {
+  const [temperatures, setTemperatures] = (0, import_react16.useState)(0);
+  const reportTemperature = (0, import_react16.useCallback)(() => {
     setTemperatures((count) => count + 1);
     return () => setTemperatures((count) => count - 1);
   }, []);
   const canConvert = state.canConvert || temperatures > 0;
-  const value = (0, import_react10.useMemo)(() => ({ ...state, canConvert }), [state, canConvert]);
+  const value = (0, import_react16.useMemo)(() => ({ ...state, canConvert }), [state, canConvert]);
   const { recipe, steps } = state;
-  const data = (0, import_react10.useMemo)(
+  const data = (0, import_react16.useMemo)(
     () => ({ recipe, steps, labels, locale, reportTemperature }),
     [recipe, steps, labels, locale, reportTemperature]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecipeDataContext.Provider, { value: data, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RecipeStateContext.Provider, { value, children }) });
 }
 function useParseReport(result) {
-  const reported = (0, import_react10.useRef)(void 0);
-  (0, import_react10.useEffect)(() => {
+  const reported = (0, import_react16.useRef)(void 0);
+  (0, import_react16.useEffect)(() => {
     const key = result.success ? result.warnings.length > 0 ? `warnings ${JSON.stringify(result.warnings)}` : void 0 : `error ${JSON.stringify([result.error.message, result.error.issues])}`;
     if (key === reported.current) {
       return;
@@ -811,7 +831,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 {
@@ -819,10 +839,13 @@ function useParseReport(result) {
     }
   }, [result]);
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(Root, "Recipe.Root");
+}
 
 // src/parts/servings.tsx
 var import_core5 = require("@recipe-book/core");
-var import_react11 = require("react");
+var import_react17 = require("react");
 
 // src/compose-event-handlers.ts
 function composeEventHandlers(theirs, ours) {
@@ -836,7 +859,7 @@ function composeEventHandlers(theirs, ours) {
 
 // src/parts/servings.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var ServingsSelect = /* @__PURE__ */ (0, import_react11.forwardRef)(
+var ServingsSelect = /* @__PURE__ */ (0, import_react.forwardRef)(
   function ServingsSelect2({ options, "aria-label": ariaLabel, onChange, ...props }, ref) {
     const { recipe, labels, locale } = useRecipeData("Recipe.ServingsSelect");
     const { servings, setServings } = usePartState("Recipe.ServingsSelect");
@@ -864,7 +887,7 @@ var ServingsSelect = /* @__PURE__ */ (0, import_react11.forwardRef)(
     );
   }
 );
-var ServingsInput = /* @__PURE__ */ (0, import_react11.forwardRef)(
+var ServingsInput = /* @__PURE__ */ (0, import_react.forwardRef)(
   function ServingsInput2({
     min = 1,
     max,
@@ -878,7 +901,7 @@ var ServingsInput = /* @__PURE__ */ (0, import_react11.forwardRef)(
     const { recipe, labels } = useRecipeData("Recipe.ServingsInput");
     const { servings, setServings } = usePartState("Recipe.ServingsInput");
     const base = servingsBase(recipe);
-    const [draft, setDraft] = (0, import_react11.useState)({ text: String(servings), servings });
+    const [draft, setDraft] = (0, import_react17.useState)({ text: String(servings), servings });
     if (draft.servings !== servings) {
       setDraft({
         text: Number(draft.text) === servings ? draft.text : String(servings),
@@ -941,15 +964,18 @@ function optionText(choice, { servings, yield: makes }, base, labels, locale) {
   }
   return `${(0, import_core5.formatServings)({ amount: choice }, format)}\xD7`;
 }
+if (process.env.NODE_ENV !== "production") {
+  setDisplayName(ServingsSelect, "Recipe.ServingsSelect");
+  setDisplayName(ServingsInput, "Recipe.ServingsInput");
+}
 
 // src/parts/step-text.tsx
 var import_core6 = require("@recipe-book/core");
-var import_react13 = require("react");
+var import_react20 = require("react");
 
 // src/parts/steps.tsx
-var import_react12 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Steps = /* @__PURE__ */ (0, import_react12.forwardRef)(function Steps2({ headingLevel = 3, children, ...props }, ref) {
+var Steps = /* @__PURE__ */ (0, import_react.forwardRef)(function Steps2({ headingLevel = 3, children, ...props }, ref) {
   const { steps } = useRecipeData("Recipe.Steps");
   const renderSection = children ?? ((section) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     SectionBlock,
@@ -962,7 +988,7 @@ var Steps = /* @__PURE__ */ (0, import_react12.forwardRef)(function Steps2({ hea
   ));
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...props, "data-recipe-steps": "", ref, children: renderKeyed(steps, renderSection) });
 });
-var StepList = /* @__PURE__ */ (0, import_react12.forwardRef)(
+var StepList = /* @__PURE__ */ (0, import_react.forwardRef)(
   function StepList2({ section, children = (step) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Step, { item: step }), start, ...props }, ref) {
     const { steps } = useRecipeData("Recipe.StepList");
     const items = section?.items ?? steps.flatMap((s) => s.items);
@@ -978,8 +1004,8 @@ var StepList = /* @__PURE__ */ (0, import_react12.forwardRef)(
     );
   }
 );
-var StepContext = /* @__PURE__ */ (0, import_react12.createContext)(null);
-var Step = /* @__PURE__ */ (0, import_react12.forwardRef)(function Step2({ item, asChild = false, children, ...props }, ref) {
+var StepContext = /* @__PURE__ */ (0, import_react.createContext)(null);
+var Step = /* @__PURE__ */ (0, import_react.forwardRef)(function Step2({ item, asChild = false, children, ...props }, ref) {
   useRecipeData("Recipe.Step");
   const [Comp, content] = resolveAsChild(
     "Recipe.Step",
@@ -994,25 +1020,31 @@ var Step = /* @__PURE__ */ (0, import_react12.forwardRef)(function Step2({ item,
   );
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StepContext.Provider, { value: item, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Comp, { ...props, "data-recipe-step": "", ref, children: content }) });
 });
-var StepName = /* @__PURE__ */ (0, import_react12.forwardRef)(
+var StepName = /* @__PURE__ */ (0, import_react.forwardRef)(
   function StepName2(props, ref) {
     const step = useRequired(
       StepContext,
       "<Recipe.StepName> must be rendered inside <Recipe.Step>."
     );
-    return step.name === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("b", { ...props, "data-recipe-name": "", ref, children: step.name });
+    return step.name !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var StepText = /* @__PURE__ */ (0, import_react13.forwardRef)(
+var StepText = /* @__PURE__ */ (0, import_react.forwardRef)(
   function StepText2(props, ref) {
     const step = useRequired(
       StepContext,
       "<Recipe.StepText> must be rendered inside <Recipe.Step>."
     );
-    const segments = (0, import_react13.useMemo)(() => (0, import_core6.segmentStepText)(step.text), [step.text]);
+    const segments = (0, import_react20.useMemo)(() => (0, import_core6.segmentStepText)(step.text), [step.text]);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ...props, "data-recipe-step-text": "", ref, children: segments.map(
       (segment, index) => segment.type === "temperature" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Temperature, { segment }, index) : (
         // Core may add segment types in a minor release; show those as authored.
@@ -1025,44 +1057,42 @@ function Temperature({ segment }) {
   const { labels, locale, reportTemperature } = useRecipeData("Recipe.StepText");
   const unit = usePartState("Recipe.StepText").system === "us" ? "F" : "C";
   const readings = [segment, ...segment.alternatives];
-  (0, import_react13.useEffect)(reportTemperature, [reportTemperature]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-recipe-temperature": "", children: [false, true].flatMap((fan) => {
+  (0, import_react20.useEffect)(reportTemperature, [reportTemperature]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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 ? [
-      (0, import_core6.formatTemperature)(
-        (0, import_core6.convertTemperature)(reading.temperature, unit),
-        {
-          locale,
-          rounding: reading.temperature.unit === unit ? "none" : void 0
-        }
-      ) + (fan && labels.fan ? ` ${labels.fan}` : "")
-    ] : [];
-  }).join(" / ") });
+    return reading && (0, import_core6.formatTemperature)((0, import_core6.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
-var import_react14 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var ToggleContext = /* @__PURE__ */ (0, import_react14.createContext)(
+var ToggleContext = /* @__PURE__ */ (0, import_react.createContext)(
   null
 );
-var SystemToggle = /* @__PURE__ */ (0, import_react14.forwardRef)(
+var SystemToggle = /* @__PURE__ */ (0, import_react.forwardRef)(
   function SystemToggle2({ asChild = false, "aria-label": ariaLabel, children, ...props }, ref) {
     const { labels } = useRecipeData("Recipe.SystemToggle");
     const { system, setSystem, canConvert } = usePartState(
       "Recipe.SystemToggle"
     );
     const disabled = !canConvert;
-    const [offers, setOffers] = (0, import_react14.useState)([]);
-    const [chosen, choose] = (0, import_react14.useState)();
-    const offer = (0, import_react14.useCallback)((id, value) => {
+    const [offers, setOffers] = (0, import_react22.useState)([]);
+    const [chosen, choose] = (0, import_react22.useState)();
+    const offer = (0, import_react22.useCallback)((id, value) => {
       const entry = { id, value };
       setOffers((current) => [...current, entry]);
       return () => setOffers((current) => current.filter((other) => other !== entry));
     }, []);
     const tabStop = (offers.find((entry) => entry.value === system && entry.id === chosen) ?? offers.find((entry) => entry.value === system) ?? offers[0])?.id;
-    const context = (0, import_react14.useMemo)(
+    const context = (0, import_react22.useMemo)(
       () => ({ system, setSystem, disabled, tabStop, offer, choose }),
       [system, setSystem, disabled, tabStop, offer]
     );
@@ -1091,7 +1121,7 @@ var SystemToggle = /* @__PURE__ */ (0, import_react14.forwardRef)(
     ) });
   }
 );
-var SystemOption = /* @__PURE__ */ (0, import_react14.forwardRef)(
+var SystemOption = /* @__PURE__ */ (0, import_react.forwardRef)(
   function SystemOption2({
     value,
     asChild = false,
@@ -1114,10 +1144,10 @@ var SystemOption = /* @__PURE__ */ (0, import_react14.forwardRef)(
       "<Recipe.SystemOption> must be rendered inside <Recipe.SystemToggle>."
     );
     const { labels } = useRecipeData("Recipe.SystemOption");
-    const id = (0, import_react14.useId)();
+    const id = (0, import_react22.useId)();
     const disabled = groupDisabled || ownDisabled;
     const checked = value === system;
-    (0, import_react14.useEffect)(
+    (0, import_react22.useEffect)(
       () => disabled ? void 0 : offer(id, value),
       [disabled, offer, id, value]
     );
@@ -1132,6 +1162,7 @@ var SystemOption = /* @__PURE__ */ (0, import_react14.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Comp,
       {
+        autoComplete: "off",
         ...props,
         type: type ?? "button",
         role: "radio",
@@ -1158,6 +1189,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") {
@@ -1165,17 +1200,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) {
@@ -1187,7 +1221,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");
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {