@terrafirmagreg-team/recipe 0.1.0 → 1.2.0

package/src/components/views/browser/item-view/tags.tsx

@@ -1,10 +1,11 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
 import { LinkPreview } from '@terrafirmagreg-team/ui/components/blocks/link/link-preview';
 import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
-import { tagPseudoId } from '@terrafirmagreg-team/game/lib/dump/paths';
+import { tagPseudoId } from '@terrafirmagreg-team/dump/lib/dump/paths';
 import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
 import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
 import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
@@ -19,7 +20,7 @@ export function ItemTagGroups({
   nav,
 }: {
   groups: [string, string[]][];
-  dataset: string;
+  dataset: DatasetRef;
   lang: Lang;
   names: Record<string, Record<string, string>>;
   query: string;
@@ -27,7 +28,7 @@ export function ItemTagGroups({
 }) {
   const t = useTranslations();
   if (!groups.length) {
-    return <EmptyState variant="empty">{t('recipe.empty_tags')}</EmptyState>;
+    return <EmptyState variant="empty">{t('No tags for this item.', { note: 'recipe.empty_tags' })}</EmptyState>;
   }
   return (
     <div className="flex flex-col gap-3 pt-1">
@@ -36,8 +37,8 @@ export function ItemTagGroups({
           {groups.length > 1 && (
             <p className="text-xs font-medium text-muted-foreground">
               {tagKind === 'block'
-                ? t('recipe.tags_block')
-                : t('recipe.tags_item')}
+                ? t('Blocks', { note: 'recipe.tags_block' })
+                : t('Items', { note: 'recipe.tags_item' })}
             </p>
           )}
           <div className="flex flex-wrap gap-1">
@@ -81,3 +82,4 @@ export function ItemTagGroups({
     </div>
   );
 }
+

package/src/components/views/browser/item-view-header.tsx

@@ -15,9 +15,9 @@ import {
   PopoverTitle,
   PopoverTrigger,
 } from '@terrafirmagreg-team/ui/components/ui/popover';
-import { formatNbt, formatNbtPretty } from '@terrafirmagreg-team/game/lib/snbt';
-import type { ParsedStackId } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
-import type { ReferenceKind } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import { formatNbt, formatNbtPretty } from '@terrafirmagreg-team/dump/lib/snbt';
+import type { ParsedStackId } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import type { ReferenceKind } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
 
 export function ItemViewHeader({
   item,
@@ -42,7 +42,7 @@ export function ItemViewHeader({
   const pretty =
     parsed.nbt !== undefined ? formatNbtPretty(parsed.nbt) : undefined;
   const copyId = held.shift && nbt ? `${parsed.id}${nbt}` : parsed.id;
-  const copyTitle = held.shift ? t('recipe.copy_stack') : t('recipe.copy');
+  const copyTitle = held.shift ? t('Copy stack id', { note: 'recipe.copy_stack' }) : t('Copy id', { note: 'recipe.copy' });
   return (
     <>
       <ItemRow
@@ -82,7 +82,7 @@ export function ItemViewHeader({
                     <IconButton
                       variant="ghost"
                       tooltip={false}
-                      label={t('recipe.nbt')}
+                      label={t('NBT', { note: 'recipe.nbt' })}
                       className="size-7 rounded-lg text-muted-foreground hover:text-foreground [&_svg]:size-3.5"
                     >
                       <Braces />
@@ -95,12 +95,12 @@ export function ItemViewHeader({
                 >
                   <div className="flex items-center justify-between">
                     <PopoverTitle className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
-                      {t('recipe.nbt')}
+                      {t('NBT', { note: 'recipe.nbt' })}
                     </PopoverTitle>
                     <ButtonCopy
                       value={nbt}
-                      title={t('recipe.copy_nbt')}
-                      aria-label={t('recipe.copy_nbt')}
+                      title={t('Copy NBT', { note: 'recipe.copy_nbt' })}
+                      aria-label={t('Copy NBT', { note: 'recipe.copy_nbt' })}
                       copy={<Copy className="size-3" />}
                       copied={<Check className="size-3" />}
                     />
@@ -114,7 +114,7 @@ export function ItemViewHeader({
             {onAddToCalc ? (
               <IconButton
                 variant="ghost"
-                label={t('recipe.calc.add.title')}
+                label={t('Add to calculator', { note: 'recipe.calc.add.title' })}
                 className="size-7 rounded-lg text-muted-foreground hover:text-foreground [&_svg]:size-3.5"
                 onClick={onAddToCalc}
               >
@@ -128,3 +128,4 @@ export function ItemViewHeader({
     </>
   );
 }
+

package/src/components/views/browser/pane-tabs.tsx

@@ -58,3 +58,4 @@ export function PaneTabs<T extends string>({
     </Tabs>
   );
 }
+

package/src/components/views/browser/place-header.tsx

@@ -25,7 +25,7 @@ export function PlaceHeader({
     ? index?.categories?.find((row) => row.id === placeId)
     : undefined;
   const title = isCalc
-    ? t('recipe.calculator')
+    ? t('Calculator', { note: 'recipe.calculator' })
     : placeId
       ? recipeItemName(names, lang, placeId)
       : '';
@@ -58,8 +58,8 @@ export function PlaceHeader({
             <span className="truncate">{placeId}</span>
             <ButtonCopy
               value={placeId}
-              title={t('recipe.copy')}
-              aria-label={t('recipe.copy')}
+              title={t('Copy id', { note: 'recipe.copy' })}
+              aria-label={t('Copy id', { note: 'recipe.copy' })}
               copy={<Copy className="size-3" />}
               copied={<Check className="size-3" />}
             />
@@ -69,3 +69,4 @@ export function PlaceHeader({
     />
   );
 }
+

package/src/components/views/browser/query-controls.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import type { ReactNode } from 'react';
 import { Search } from 'lucide-react';
@@ -15,7 +16,7 @@ import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
 import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
 
 type QueryNav = {
-  dataset: string;
+  dataset: DatasetRef;
   lang: Lang;
   params?: RecipeHrefOpts;
 };
@@ -101,3 +102,4 @@ export function QueryPager({
     />
   );
 }
+

package/src/components/views/browser/recipe-item-header.tsx

@@ -7,8 +7,8 @@ import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
 import { CopyIdMenu } from '@terrafirmagreg-team/game/components/entry/copy-id-menu';
 import { ButtonCopy } from '@terrafirmagreg-team/recipe/components/button-copy';
 import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
-import { parseStackId } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
-import { formatNbt } from '@terrafirmagreg-team/game/lib/snbt';
+import { parseStackId } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import { formatNbt } from '@terrafirmagreg-team/dump/lib/snbt';
 import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
 import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
 
@@ -47,8 +47,8 @@ export function RecipeItemHeader({
           <span className="truncate">{recipe.id}</span>
           <ButtonCopy
             value={recipe.id}
-            title={t('recipe.copy_recipe_id')}
-            aria-label={t('recipe.copy_recipe_id')}
+            title={t('Copy recipe id', { note: 'recipe.copy_recipe_id' })}
+            aria-label={t('Copy recipe id', { note: 'recipe.copy_recipe_id' })}
             copy={<Copy className="size-3" />}
             copied={<Check className="size-3" />}
           />
@@ -57,3 +57,4 @@ export function RecipeItemHeader({
     />
   );
 }
+

package/src/components/views/browser/settings.tsx

@@ -25,7 +25,7 @@ export function RecipeSettings() {
           <Button
             variant="outline"
             size="icon-sm"
-            aria-label={t('recipe.settings')}
+            aria-label={t('Settings', { note: 'recipe.settings' })}
             className="rounded-lg"
           />
         }
@@ -35,7 +35,7 @@ export function RecipeSettings() {
       <PopoverContent align="start" className="flex w-56 flex-col gap-2">
         <Label className="gap-1.5 text-sm font-normal">
           <Switch size="sm" checked={hideUnused} onCheckedChange={setHideUnused} />
-          {t('recipe.hide_unused')}
+          {t('Hide unused', { note: 'recipe.hide_unused' })}
         </Label>
         <Label className="gap-1.5 text-sm font-normal">
           <Switch
@@ -43,9 +43,10 @@ export function RecipeSettings() {
             checked={sidebarGroup === 'mod'}
             onCheckedChange={(value) => setSidebarGroup(value ? 'mod' : 'flat')}
           />
-          {t('recipe.sidebar_group_mod')}
+          {t('Group sidebar by mod', { note: 'recipe.sidebar_group_mod' })}
         </Label>
       </PopoverContent>
     </Popover>
   );
 }
+

package/src/components/views/browser/toolbar.tsx

@@ -26,12 +26,12 @@ export function RecipeToolbar({ session }: { session: RecipeSession }) {
         onClick={() => setItemsOpen(true)}
       >
         <LayoutGrid className="size-3.5" />
-        {t('recipe.items')}
+        {t('Items', { note: 'recipe.items' })}
       </Button>
       <Sheet open={itemsOpen} onOpenChange={setItemsOpen}>
         <SheetContent side="right" className="w-full gap-3 sm:max-w-md">
           <SheetHeader>
-            <SheetTitle>{t('recipe.items')}</SheetTitle>
+            <SheetTitle>{t('Items', { note: 'recipe.items' })}</SheetTitle>
           </SheetHeader>
           <ItemPanel
             dataset={session.dataset}
@@ -51,3 +51,4 @@ export function RecipeToolbar({ session }: { session: RecipeSession }) {
     </div>
   );
 }
+

package/src/components/views/browser/type-tabs.tsx

@@ -1,10 +1,11 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { useMemo } from 'react';
 import { Shapes } from 'lucide-react';
 import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
 import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
-import { IconTabs } from '@terrafirmagreg-team/game/components/entry/icon/tabs';
+import { IconPager } from '@terrafirmagreg-team/ui/components/blocks/page/pager';
 import type { RecipeCategory, RecipeSession } from '@terrafirmagreg-team/recipe/types';
 
 function CategoryGlyph({
@@ -12,7 +13,7 @@ function CategoryGlyph({
   dataset,
 }: {
   category?: RecipeCategory;
-  dataset: string;
+  dataset: DatasetRef;
 }) {
   return category?.icon ? (
     <Entry
@@ -59,7 +60,7 @@ export function RecipeTypeTabs({
   }, [index, ids, lang, names, dataset]);
 
   return (
-    <IconTabs
+    <IconPager
       value={value}
       options={options}
       onChange={onChange ?? (() => {})}
@@ -67,3 +68,4 @@ export function RecipeTypeTabs({
     />
   );
 }
+

package/src/components/views/browser/type-view.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import { useAsyncResult, useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
 import { RecipeFrame } from '@terrafirmagreg-team/recipe/components/views/browser/frame';
@@ -9,6 +9,7 @@ import {
   recipeCardDim,
 } from '@terrafirmagreg-team/recipe/components/views/browser/card-grid';
 import { PlaceHeader } from '@terrafirmagreg-team/recipe/components/views/browser/place-header';
+import { useCategoriesById } from '@terrafirmagreg-team/recipe/hooks/use-categories-by-id';
 import { useFitPages } from '@terrafirmagreg-team/ui/hooks/page/use-fit-pages';
 import {
   loadTypeRows,
@@ -20,7 +21,6 @@ import { RecipeTypeTabs } from '@terrafirmagreg-team/recipe/components/views/bro
 import { WorkstationRail } from '@terrafirmagreg-team/recipe/components/views/browser/workstation-rail';
 import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
 import type {
-  RecipeCategory,
   RecipeCompactRow,
   RecipeSession,
 } from '@terrafirmagreg-team/recipe/types';
@@ -43,13 +43,7 @@ export function TypeView({ session }: { session: RecipeSession }) {
 
   const placeId = place?.kind === 'type' ? place.id : RECIPE_ALL_TYPE;
 
-  const categoriesById = useMemo(
-    () =>
-      new Map<string, RecipeCategory>(
-        (index?.categories ?? []).map((row) => [row.id, row]),
-      ),
-    [index],
-  );
+  const categoriesById = useCategoriesById(index);
   const nonEmptyIds = nonEmptyCategoryIds(index);
 
   const shown =
@@ -133,7 +127,7 @@ export function TypeView({ session }: { session: RecipeSession }) {
       session={session}
       rows={EMPTY_ROWS}
       boxRef={boxRef}
-      empty={t('recipe.no_dump')}
+      empty={t('No recipe dump for this dataset. Run export to generate data.', { note: 'recipe.no_dump' })}
     />
   ) : (
     <RecipeCardGrid
@@ -143,7 +137,7 @@ export function TypeView({ session }: { session: RecipeSession }) {
       maxH={list.box.h}
       maxW={list.box.w}
       loading={index == null || (shown != null && rows === undefined)}
-      empty={t('recipe.empty_type')}
+      empty={t('No recipes of this type.', { note: 'recipe.empty_type' })}
       onSwipe={onSwipe}
     />
   );
@@ -172,7 +166,7 @@ export function TypeView({ session }: { session: RecipeSession }) {
         />
       }
       header={
-        <PlaceHeader session={session} overline={t('recipe.axis_type')} />
+        <PlaceHeader session={session} overline={t('Categories', { note: 'recipe.axis_type' })} />
       }
       rail={
         <WorkstationRail
@@ -187,3 +181,4 @@ export function TypeView({ session }: { session: RecipeSession }) {
     </RecipeFrame>
   );
 }
+

package/src/components/views/browser/workstation-rail.tsx

@@ -3,8 +3,8 @@
 import { Factory } from 'lucide-react';
 import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
 import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
-import { stackIdFromRef } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
-import type { TaggedReference } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import { stackIdFromRef } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
+import type { TaggedReference } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
 import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
 
 export function WorkstationRail({
@@ -17,7 +17,7 @@ export function WorkstationRail({
   if (!workstations?.length) return null;
   const { lang, names, nav } = session;
   return (
-    <div className="flex max-h-full self-start flex-col flex-wrap content-start items-center gap-1 rounded-lg border border-border bg-muted/60 p-1">
+    <div className="scrollbar-thin flex max-h-full flex-col items-center gap-1 self-start overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-muted/60 p-1">
       <Factory
         className="m-1 size-3.5 shrink-0 text-muted-foreground"
         aria-hidden
@@ -40,3 +40,4 @@ export function WorkstationRail({
     </div>
   );
 }
+

package/src/components/views/calc/calculator/actions.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Play, Share2, Trash2 } from 'lucide-react';
+import { Share2, Trash2 } from 'lucide-react';
 import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import { RecipeToolbar } from '@terrafirmagreg-team/recipe/components/views/browser/toolbar';
@@ -12,14 +12,12 @@ export function CalcActions({
   shared,
   onShare,
   hasTargets,
-  onAutoBuild,
   onClear,
 }: {
   session: RecipeSession;
   shared: boolean;
   onShare: () => void;
   hasTargets: boolean;
-  onAutoBuild: () => void;
   onClear: () => void;
 }) {
   const t = useTranslations();
@@ -28,7 +26,7 @@ export function CalcActions({
       <RecipeToolbar session={session} />
       <IconButton
         overlay
-        label={shared ? t('recipe.copied') : t('recipe.calc.share')}
+        label={shared ? t('Copied', { note: 'recipe.copied' }) : t('Share', { note: 'recipe.calc.share' })}
         onClick={onShare}
       >
         <Share2 className="size-3.5" />
@@ -37,16 +35,7 @@ export function CalcActions({
       {hasTargets ? (
         <IconButton
           overlay
-          label={t('recipe.calc.auto.build')}
-          onClick={onAutoBuild}
-        >
-          <Play className="size-3.5" />
-        </IconButton>
-      ) : null}
-      {hasTargets ? (
-        <IconButton
-          overlay
-          label={t('recipe.calc.clear.title')}
+          label={t('Clear', { note: 'recipe.calc.clear.title' })}
           onClick={onClear}
         >
           <Trash2 className="size-3.5" />
@@ -55,3 +44,4 @@ export function CalcActions({
     </>
   );
 }
+

package/src/components/views/calc/calculator/help.tsx

@@ -2,10 +2,13 @@
 
 import {
   ArrowUp,
+  ChevronUp,
   ChevronsUpDown,
   Eye,
   Info,
+  Mountain,
   Move,
+  Scissors,
   Settings2,
   SquareMousePointer,
 } from 'lucide-react';
@@ -22,39 +25,33 @@ export function CalcHelp() {
   return (
     <Popover>
       <PopoverTrigger
-        render={<IconButton overlay label={t('recipe.calc.help.title')} />}
+        render={<IconButton overlay label={t('Calculator help', { note: 'recipe.calc.help.title' })} />}
       >
         <Info className="size-3.5" />
       </PopoverTrigger>
       <PopoverContent side="bottom" align="end" className="w-80 space-y-3 p-3">
         <section className="space-y-1.5">
           <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
-            {t('recipe.calc.help.sec_nodes')}
+            {t('Nodes', { note: 'recipe.calc.help.sec_nodes' })}
           </h4>
           <ul className="space-y-1.5 text-xs text-muted-foreground">
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <span className="size-4 rounded border border-primary/60" />
               </span>
-              {t('recipe.calc.help.recipe')}
-            </li>
-            <li className="flex items-center gap-2">
-              <span className="flex w-5 shrink-0 items-center justify-center">
-                <span className="size-4 rounded border border-dashed border-muted-foreground/50" />
-              </span>
-              {t('recipe.calc.help.catalyst')}
+              {t('Resolved with a recipe', { note: 'recipe.calc.help.recipe' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <span className="size-4 rounded border border-red-500/70" />
               </span>
-              {t('recipe.calc.help.cycle')}
+              {t('Recipe cycle', { note: 'recipe.calc.help.cycle' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <span className="size-3.5 rounded ring-2 ring-primary/70" />
               </span>
-              {t('recipe.calc.help.focus')}
+              {t('Focused node', { note: 'recipe.calc.help.focus' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
@@ -62,83 +59,126 @@ export function CalcHelp() {
                   +N
                 </span>
               </span>
-              {t('recipe.calc.help.satisfied')}
+              {t('Covered by another card output', { note: 'recipe.calc.help.satisfied' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
-                <span className="rounded border border-border bg-background px-0.5 text-[10px] leading-3">
-                  S
-                </span>
+                <Mountain className="size-3.5 text-muted-foreground" />
               </span>
-              {t('recipe.calc.help.source')}
+              {t('No recipe; raw material', { note: 'recipe.calc.help.source' })}
             </li>
           </ul>
         </section>
         <section className="space-y-1.5">
           <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
-            {t('recipe.calc.help.sec_edges')}
+            {t('Ports', { note: 'recipe.calc.help.sec_ports' })}
+          </h4>
+          <ul className="space-y-1.5 text-xs text-muted-foreground">
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="size-3.5 rounded-sm border border-emerald-500" />
+              </span>
+              {t('Input port: click to pick a supplier or drag a wire', { note: 'recipe.calc.help.port_in' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="size-3.5 rounded-sm border border-red-400" />
+              </span>
+              {t('Output port: click to pick a recipe or drag a wire', { note: 'recipe.calc.help.port_out' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="size-3.5 rounded-sm border border-dotted border-emerald-500" />
+              </span>
+              {t('Catalyst: needed but not consumed; wire it or click to pick a supplier', { note: 'recipe.calc.help.port_cat' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <ChevronUp className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('Hidden ports - scroll the rail or click the arrow', { note: 'recipe.calc.help.port_more' })}
+            </li>
+          </ul>
+        </section>
+        <section className="space-y-1.5">
+          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
+            {t('Edges', { note: 'recipe.calc.help.sec_edges' })}
           </h4>
           <ul className="space-y-1.5 text-xs text-muted-foreground">
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <ArrowUp className="size-3.5 text-muted-foreground" />
               </span>
-              {t('recipe.calc.help.edges')}
+              {t('Arrows flow from ingredient to product', { note: 'recipe.calc.help.edges' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <span className="h-0.5 w-4 rounded bg-teal-500" />
               </span>
-              {t('recipe.calc.help.edge_out')}
+              {t('Outgoing edges', { note: 'recipe.calc.help.edge_out' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <span className="h-0.5 w-4 rounded bg-yellow-500" />
               </span>
-              {t('recipe.calc.help.edge_in')}
+              {t('Incoming edges', { note: 'recipe.calc.help.edge_in' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <span className="h-0 w-4 border-t border-dashed border-primary/70" />
+              </span>
+              {t('Drag port to port to link; drag a wire end to retarget', { note: 'recipe.calc.help.edge_link' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
-                <span className="h-0 w-4 border-t border-dashed border-muted-foreground/60" />
+                <span className="rounded border border-border bg-background px-0.5 text-[9px] leading-3 tabular-nums">
+                  16
+                </span>
               </span>
-              {t('recipe.calc.help.edge_catalyst')}
+              {t('Flow on a wire - shows on hover; click to cap the amount', { note: 'recipe.calc.help.edge_flow' })}
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="flex w-5 shrink-0 items-center justify-center">
+                <Scissors className="size-3.5 text-muted-foreground" />
+              </span>
+              {t('Shift + hover a wire shows x - click to delete it', { note: 'recipe.calc.help.edge_cut' })}
             </li>
           </ul>
         </section>
         <section className="space-y-1.5">
           <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
-            {t('recipe.calc.help.sec_actions')}
+            {t('Actions', { note: 'recipe.calc.help.sec_actions' })}
           </h4>
           <ul className="space-y-1.5 text-xs text-muted-foreground">
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <ChevronsUpDown className="size-3.5 text-muted-foreground" />
               </span>
-              {t('recipe.calc.help.chip')}
+              {t('Recipe/tag member: open picker', { note: 'recipe.calc.help.chip' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <Eye className="size-3.5 text-muted-foreground" />
               </span>
-              {t('recipe.calc.help.hover')}
+              {t('Recipe preview', { note: 'recipe.calc.help.hover' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <SquareMousePointer className="size-3.5 text-muted-foreground" />
               </span>
-              {t('recipe.calc.help.ctx')}
+              {t('Node context menu', { note: 'recipe.calc.help.ctx' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <Settings2 className="size-3.5 text-muted-foreground" />
               </span>
-              {t('recipe.calc.help.modes')}
+              {t('View modes', { note: 'recipe.calc.help.modes' })}
             </li>
             <li className="flex items-center gap-2">
               <span className="flex w-5 shrink-0 items-center justify-center">
                 <Move className="size-3.5 text-muted-foreground" />
               </span>
-              {t('recipe.calc.help.nav')}
+              {t('Pan and zoom', { note: 'recipe.calc.help.nav' })}
             </li>
           </ul>
         </section>
@@ -146,3 +186,4 @@ export function CalcHelp() {
     </Popover>
   );
 }
+