@recipe-book/react 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,14 +1,8 @@
 "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";
@@ -25,6 +19,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 +80,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 +90,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 +143,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 +201,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 +211,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 +230,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 +312,7 @@ function useConfig({
       }),
       [outer.labels, labels]
     ),
-    defaultSystem: isSystem(defaultSystem) ? defaultSystem : outer.defaultSystem
+    defaultSystem: [defaultSystem, outer.defaultSystem].find(isSystem)
   };
 }
 var RecipeDataContext = /* @__PURE__ */ createContext(null);
@@ -352,10 +352,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,
@@ -369,20 +366,11 @@ var Image = /* @__PURE__ */ forwardRef(function Image2({
 
 // 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 +388,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) {
@@ -480,7 +468,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 +477,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 +490,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 +503,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 +527,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 +551,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 +587,15 @@ 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) });
+    ] }) : cloneElement(child, void 0, child.props.children, text) });
   }
   if (process.env.NODE_ENV !== "production") {
     Object.defineProperty(IngredientText, "name", { value: name });
   }
-  return forwardRef3(IngredientText);
+  return forwardRef(IngredientText);
 }
 var IngredientQuantity = /* @__PURE__ */ ingredientText(
   "IngredientQuantity",
@@ -637,7 +623,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} ` }),
@@ -664,13 +650,12 @@ var IngredientOptional = /* @__PURE__ */ ingredientText(
 // 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 +667,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 +681,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
       }
@@ -726,7 +711,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 +726,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 +734,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 });
 }
@@ -799,7 +784,6 @@ import {
   formatYield
 } from "@recipe-book/core";
 import {
-  forwardRef as forwardRef5,
   useState as useState3
 } from "react";
 
@@ -815,7 +799,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 +827,7 @@ var ServingsSelect = /* @__PURE__ */ forwardRef5(
     );
   }
 );
-var ServingsInput = /* @__PURE__ */ forwardRef5(
+var ServingsInput = /* @__PURE__ */ forwardRef(
   function ServingsInput2({
     min = 1,
     max,
@@ -928,18 +912,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 +931,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 +947,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,7 +963,7 @@ 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,
@@ -996,7 +975,7 @@ var StepName = /* @__PURE__ */ forwardRef6(
 
 // 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 +995,29 @@ 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(" / ") });
 }
 
 // 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 +1041,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 +1061,7 @@ var SystemToggle = /* @__PURE__ */ forwardRef8(
     ) });
   }
 );
-var SystemOption = /* @__PURE__ */ forwardRef8(
+var SystemOption = /* @__PURE__ */ forwardRef(
   function SystemOption2({
     value,
     asChild = false,
@@ -1130,6 +1102,7 @@ var SystemOption = /* @__PURE__ */ forwardRef8(
     return /* @__PURE__ */ jsx10(
       Comp,
       {
+        autoComplete: "off",
         ...props,
         type: type ?? "button",
         role: "radio",