@terrafirmagreg-team/recipe 0.1.0 → 1.2.1

package/src/components/views/calc/sidebar.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { useEffect, useMemo, useRef } from 'react';
 import type * as PageTree from 'fumadocs-core/page-tree';
@@ -20,19 +21,18 @@ export function CalcSidebar({
   lang,
   langMap,
   summary,
-  target = null,
   onFocus,
   trees,
 }: {
-  dataset: string;
+  dataset: DatasetRef;
   lang: string;
   langMap?: Record<string, string>;
   summary: {
     raw: CalcMaterial[];
     remainders: CalcMaterial[];
     catalysts: CalcMaterial[];
+    products: CalcMaterial[];
   };
-  target?: CalcMaterial | null;
   onFocus?: (id: string) => void;
   trees?: {
     tabs: CalcTreeEntry[];
@@ -53,21 +53,26 @@ export function CalcSidebar({
     const focusByUrl = new Map<string, string>();
     const children: PageTree.Node[] = [];
     const sections = [
-      ['inputs', summary.raw],
+      ['inputs', summary.raw, t('Inputs', { note: 'recipe.calc.inputs' })],
       [
         'outputs',
-        [...(target ? [target] : []), ...summary.remainders],
+        [...summary.products, ...summary.remainders],
+        t('Outputs', { note: 'recipe.calc.outputs' }),
+      ],
+      [
+        'catalysts',
+        summary.catalysts,
+        t('Catalysts', { note: 'recipe.calc.catalysts' }),
       ],
-      ['catalysts', summary.catalysts],
     ] as const;
-    for (const [key, rows] of sections) {
+    for (const [key, rows, label] of sections) {
       if (!rows.length) continue;
       children.push({
         type: 'folder',
         $id: `calc-${key}`,
         name: (
           <span className="-me-3 flex min-w-0 flex-1 items-center gap-1.5">
-            <span className="truncate">{t(`recipe.calc.${key}`)}</span>
+            <span className="truncate">{label}</span>
             <span className="shrink-0 tabular-nums text-xs text-muted-foreground/70">
               ×{rows.length}
             </span>
@@ -97,7 +102,10 @@ export function CalcSidebar({
                   tooltip={false}
                   className="min-w-0 flex-1 justify-start truncate"
                 />
-                <span className="ms-auto shrink-0 tabular-nums text-xs text-muted-foreground">
+                <span
+                  className="ms-auto shrink-0 tabular-nums text-xs text-muted-foreground"
+                  title={row.amount.toLocaleString()}
+                >
                   ×{formatCount(row.amount)}
                 </span>
               </>
@@ -115,7 +123,7 @@ export function CalcSidebar({
       tree: { name: 'calc', $id: `calc:${stamp}`, children } as PageTree.Root,
       focusByUrl,
     };
-  }, [dataset, lang, langMap, summary, target, t]);
+  }, [dataset, lang, langMap, summary, t]);
 
   const CalcItem = useMemo(() => {
     const focus = focusByUrl;
@@ -160,3 +168,4 @@ export function CalcSidebar({
     </div>
   );
 }
+

package/src/components/views/calc/trees/icon-picker.tsx

@@ -47,7 +47,7 @@ export function IconPicker({
       <PopoverTrigger
         render={
           <IconButton
-            label={label ?? t('recipe.calc.pick.icon')}
+            label={label ?? t('Pick icon', { note: 'recipe.calc.pick.icon' })}
             className={
               alwaysVisible
                 ? undefined
@@ -63,7 +63,7 @@ export function IconPicker({
           autoFocus
           value={query}
           onChange={(event) => setQuery(event.target.value)}
-          placeholder={t('recipe.search')}
+          placeholder={t('Search items', { note: 'recipe.search' })}
           className="h-7 px-2 text-xs"
         />
         <div className="scrollbar-thin mt-2 grid max-h-60 grid-cols-6 gap-1 overflow-y-auto">
@@ -94,3 +94,4 @@ export function IconPicker({
     </Popover>
   );
 }
+

package/src/components/views/calc/trees/index.tsx

@@ -26,7 +26,7 @@ export function CalcHistoryList({
   return (
     <div className="flex w-64 max-w-full flex-col gap-1">
       <p className="px-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
-        {t('recipe.calc.history')}
+        {t('History', { note: 'recipe.calc.history' })}
       </p>
       <ul className="flex flex-col">
         {history.slice(0, 5).map((entry) => (
@@ -75,7 +75,7 @@ export function CalcTrees({
         <LeftSidebarFolder collapsible defaultOpen>
           <LeftSidebarFolderTrigger className="gap-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
             <FolderTree className="size-3.5" />
-            {t('recipe.calc.trees')}
+            {t('Schemes', { note: 'recipe.calc.trees' })}
           </LeftSidebarFolderTrigger>
           <LeftSidebarFolderContent>
             <ul className="flex flex-col">
@@ -99,7 +99,7 @@ export function CalcTrees({
                 >
                   <Plus className="size-4 shrink-0" />
                   <span className="min-w-0 flex-1 text-start">
-                    {t('recipe.calc.new_tab')}
+                    {t('New scheme', { note: 'recipe.calc.new_tab' })}
                   </span>
                 </button>
               </li>
@@ -111,7 +111,7 @@ export function CalcTrees({
         <LeftSidebarFolder collapsible defaultOpen>
           <LeftSidebarFolderTrigger className="gap-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
             <History className="size-3.5" />
-            {t('recipe.calc.history')}
+            {t('History', { note: 'recipe.calc.history' })}
           </LeftSidebarFolderTrigger>
           <LeftSidebarFolderContent>
             <ul className="flex flex-col">
@@ -131,3 +131,4 @@ export function CalcTrees({
     </div>
   );
 }
+

package/src/components/views/calc/trees/label.tsx

@@ -12,7 +12,8 @@ export function TreeIcon({
   lang,
   langMap,
 }: { entry: CalcTreeEntry } & EntryMeta) {
-  const ref = entry.icon ?? entry.state.target;
+  const card = entry.state.cards?.[0];
+  const ref = entry.icon ?? (card && { id: card.materialId, kind: card.kind });
   if (!ref) return <Workflow className="size-4 shrink-0" />;
   return (
     <Entry
@@ -34,11 +35,11 @@ export function TreeLabel({
   langMap,
 }: { entry: CalcTreeEntry } & EntryMeta) {
   const t = useTranslations();
-  const target = entry.state.target;
+  const card = entry.state.cards?.[0];
   const text =
     entry.name ??
-    (target ? langMap?.[target.id] || target.id : undefined) ??
-    t('recipe.calc.tab.untitled');
+    (card ? langMap?.[card.materialId] || card.materialId : undefined) ??
+    t('Untitled scheme', { note: 'recipe.calc.tab.untitled' });
   return (
     <span className="min-w-0 flex-1 truncate text-start">
       {text}
@@ -63,3 +64,4 @@ export function TreeDate({
     </span>
   );
 }
+

package/src/components/views/calc/trees/rows.tsx

@@ -50,9 +50,9 @@ export function TabRow({
             }}
             onBlur={commit}
             className="h-6 px-1.5 text-xs"
-            placeholder={t('recipe.calc.rename')}
+            placeholder={t('Rename', { note: 'recipe.calc.rename' })}
           />
-          <IconButton label={t('recipe.calc.rename')} onClick={commit}>
+          <IconButton label={t('Rename', { note: 'recipe.calc.rename' })} onClick={commit}>
             <Check className="size-3.5" />
           </IconButton>
         </span>
@@ -80,7 +80,7 @@ export function TabRow({
             />
           ) : null}
           <IconButton
-            label={t('recipe.calc.rename')}
+            label={t('Rename', { note: 'recipe.calc.rename' })}
             className="opacity-0 transition-opacity group-hover:opacity-100"
             onClick={() => {
               setName(entry.name ?? '');
@@ -90,7 +90,7 @@ export function TabRow({
             <Pencil className="size-3.5" />
           </IconButton>
           <IconButton
-            label={t('recipe.calc.close_tab')}
+            label={t('Close scheme', { note: 'recipe.calc.close_tab' })}
             className="opacity-0 transition-opacity group-hover:opacity-100"
             onClick={() => onClose(entry.id)}
           >
@@ -127,7 +127,7 @@ export function HistoryRow({
       </button>
       {onRemove && (
         <IconButton
-          label={t('recipe.calc.remove.history')}
+          label={t('Remove from history', { note: 'recipe.calc.remove.history' })}
           className="opacity-0 transition-opacity group-hover:opacity-100"
           onClick={() => onRemove(entry.id)}
         >
@@ -137,3 +137,4 @@ export function HistoryRow({
     </li>
   );
 }
+

package/src/components/views/forge/gui.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { CSSProperties } from 'react';
-import { cn } from 'cn';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import type { ForgeRule, ForgeRuleAction } from '@terrafirmagreg-team/recipe/types/forge';
 
 const ATLAS_SIZE = 256;
@@ -128,3 +128,4 @@ export const MARK_TARGET: GuiRect = { x: 181, y: 0, w: 5, h: 5 };
 export function actionGlyphRect(action: string): GuiRect {
   return { x: STEP_GLYPH_X[action] ?? 0, y: 224, w: 32, h: 32 };
 }
+

package/src/components/views/forge/index.tsx

@@ -9,7 +9,7 @@ import { RecipeFrame } from '@terrafirmagreg-team/recipe/components/views/browse
 import { useToolRecipes } from '@terrafirmagreg-team/recipe/hooks/use-tool-recipes';
 import { toForgeRecipe } from '@terrafirmagreg-team/recipe/lib/forge/data';
 import { RecipeCard } from '@terrafirmagreg-team/recipe/components/cards/card';
-import { FitCard } from '@terrafirmagreg-team/recipe/components/cards/fit-card';
+import { FitBox } from '@terrafirmagreg-team/ui/components/blocks/fit-box';
 import {
   recipeCardImageUrl,
   recipeImageUrl,
@@ -67,16 +67,16 @@ export function ForgeCalculator({ session }: { session: RecipeSession }) {
           active ? (
             <RecipeItemHeader recipe={active.recipe} session={session} />
           ) : (
-            <ItemRow layout="header" title={t('recipe.forge.title')} />
+            <ItemRow layout="header" title={t('Forging', { note: 'recipe.forge.title' })} />
           )
         }
       >
-        <div className="flex-1 space-y-5 overflow-y-auto p-2 sm:p-4">
+        <div className="scrollbar-thin flex-1 space-y-5 overflow-y-auto p-2 sm:p-4">
           {loading ? (
             <EmptyState variant="loading" />
           ) : value === undefined ? (
             <EmptyState variant="missing">
-              {t('recipe.forge.load_error')}
+              {t('Could not load recipes. Reload the page to retry.', { note: 'recipe.forge.load_error' })}
             </EmptyState>
           ) : active ? (
             <>
@@ -85,17 +85,23 @@ export function ForgeCalculator({ session }: { session: RecipeSession }) {
                 recipe={active}
                 session={session}
               />
-              <FitCard w={active.recipe.w ?? 0}>
+              <FitBox w={active.recipe.w ?? 0}>
                 <ForgeRecipeCard
                   key={active.recipe.id}
                   recipe={active.recipe}
                   session={session}
                 />
-              </FitCard>
+              </FitBox>
             </>
           ) : (
             <EmptyState>
-              {t(activeId ? 'recipe.forge.missing' : 'recipe.forge.empty')}
+              {activeId
+                ? t('Recipe not found in this dump. Select another recipe.', {
+                    note: 'recipe.forge.missing',
+                  })
+                : t('No matching recipes in this dump.', {
+                    note: 'recipe.forge.empty',
+                  })}
             </EmptyState>
           )}
         </div>
@@ -103,3 +109,4 @@ export function ForgeCalculator({ session }: { session: RecipeSession }) {
     </>
   );
 }
+

package/src/components/views/forge/list.tsx

@@ -105,8 +105,9 @@ export function ForgeList({ session }: { session: RecipeSession }) {
       loaded={value !== undefined}
       query={query}
       onQuery={setQuery}
-      searchLabel={t('recipe.forge.search')}
-      emptyLabel={t('recipe.forge.empty')}
+      searchLabel={t('Search recipes', { note: 'recipe.forge.search' })}
+      emptyLabel={t('No matching recipes in this dump.', { note: 'recipe.forge.empty' })}
     />
   );
 }
+

package/src/components/views/forge/workbench/controls.tsx

@@ -34,7 +34,7 @@ export function WorkbenchControls({
   return (
     <div className="flex flex-wrap items-end gap-3">
       <label className="flex w-24 flex-col gap-1 border-l-2 border-green-600 pl-2 text-xs text-green-700 dark:border-green-500 dark:text-green-400">
-        {t('recipe.forge.current')}
+        {t('Current work', { note: 'recipe.forge.current' })}
         <Input
           inputMode="numeric"
           name="forge-start"
@@ -46,7 +46,7 @@ export function WorkbenchControls({
         />
       </label>
       <label className="flex w-24 flex-col gap-1 border-l-2 border-red-600 pl-2 text-xs text-red-700 dark:border-red-500 dark:text-red-400">
-        {t('recipe.forge.target')}
+        {t('Target', { note: 'recipe.forge.target' })}
         <Input
           inputMode="numeric"
           name="forge-target"
@@ -62,25 +62,31 @@ export function WorkbenchControls({
         disabled={target === null || !rulesSupported || solving}
       >
         <Wand2 className="size-4" />
-        {t(solving ? 'recipe.forge.solving' : 'recipe.forge.solve')}
+        {solving
+          ? t('Solving…', { note: 'recipe.forge.solving' })
+          : t('Solve', { note: 'recipe.forge.solve' })}
       </Button>
       <span className="flex items-center gap-1.5">
         <IconButton
-          label={t('recipe.forge.undo')}
+          label={t('Undo last action', { note: 'recipe.forge.undo' })}
           disabled={!applied.length || solving}
           onClick={() => state.setApplied((prev) => prev.slice(0, -1))}
         >
           <Undo2 />
         </IconButton>
         <IconButton
-          label={t('recipe.forge.reset')}
+          label={t('Reset the workpiece', { note: 'recipe.forge.reset' })}
           disabled={!applied.length || solving}
           onClick={() => state.setApplied([])}
         >
           <RotateCcw />
         </IconButton>
         <IconButton
-          label={t(copied ? 'recipe.forge.copied' : 'recipe.forge.copy')}
+          label={
+            copied
+              ? t('Copied', { note: 'recipe.forge.copied' })
+              : t('Copy steps', { note: 'recipe.forge.copy' })
+          }
           disabled={!steps.length}
           onClick={copy}
         >
@@ -94,3 +100,4 @@ export function WorkbenchControls({
     </div>
   );
 }
+

package/src/components/views/forge/workbench/index.tsx

@@ -11,7 +11,7 @@ import { AnvilPanel } from './panel';
 import { RulerOverlay } from './ruler';
 import { StatusPlate } from './status';
 import { StepTape } from './tape';
-import { cn } from 'cn';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import type { ForgeRecipe } from '@terrafirmagreg-team/recipe/types/forge';
 import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
 
@@ -43,7 +43,7 @@ export function ForgeWorkbench({
       <WorkbenchControls state={state} rulesSupported={recipe.rulesSupported} langMap={session.langMap} />
       {!recipe.rulesSupported ? (
         <p role="alert" className="text-sm text-destructive">
-          {t('recipe.forge.unsupported')}
+          {t('The dump contains missing or unrecognized forging rules. A safe solution cannot be calculated.', { note: 'recipe.forge.unsupported' })}
         </p>
       ) : null}
 
@@ -82,3 +82,4 @@ export function ForgeWorkbench({
     </section>
   );
 }
+

package/src/components/views/forge/workbench/panel.tsx

@@ -225,3 +225,4 @@ export function AnvilPanel({
     </>
   );
 }
+

package/src/components/views/forge/workbench/ruler.tsx

@@ -3,7 +3,7 @@
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import { MARK_PROGRESS, MARK_TARGET, GuiSprite } from '@terrafirmagreg-team/recipe/components/views/forge/gui';
 import { RULER, useRuler } from '@terrafirmagreg-team/recipe/hooks/forge/use-ruler';
-import { cn } from 'cn';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import type { ForgeState } from '@terrafirmagreg-team/recipe/hooks/forge/use-forge-state';
 
 export function RulerOverlay({
@@ -38,8 +38,8 @@ export function RulerOverlay({
   });
 
   const markerHandles = [
-    { kind: 'target', value: target ?? 0, label: t('recipe.forge.target') },
-    { kind: 'work', value: work, label: t('recipe.forge.current') },
+    { kind: 'target', value: target ?? 0, label: t('Target', { note: 'recipe.forge.target' }) },
+    { kind: 'work', value: work, label: t('Current work', { note: 'recipe.forge.current' }) },
   ] as const;
 
   return (
@@ -66,7 +66,7 @@ export function RulerOverlay({
       />
       <div
         role="slider"
-        aria-label={t('recipe.forge.ruler')}
+        aria-label={t('Work ruler', { note: 'recipe.forge.ruler' })}
         aria-valuemin={0}
         aria-valuemax={149}
         aria-valuenow={target ?? work}
@@ -130,3 +130,4 @@ export function RulerOverlay({
     </>
   );
 }
+

package/src/components/views/forge/workbench/status.tsx

@@ -22,20 +22,20 @@ export function StatusPlate({
       style={{ width: PX(GUI_PANEL.w) }}
     >
       <span>
-        {t('recipe.forge.work')}:{' '}
+        {t('Work', { note: 'recipe.forge.work' })}:{' '}
         <span className="font-medium text-green-700 dark:text-green-400">
           {work}
         </span>
       </span>
       <span>
-        {t('recipe.forge.target')}:{' '}
+        {t('Target', { note: 'recipe.forge.target' })}:{' '}
         <span className="font-medium text-red-700 dark:text-red-400">
           {target ?? 0}
         </span>
       </span>
       {finished ? (
         <span className="inline-flex items-center gap-1 text-green-600 animate-in fade-in-0">
-          <Check className="size-3" /> {t('recipe.forge.done')}
+          <Check className="size-3" /> {t('Done', { note: 'recipe.forge.done' })}
         </span>
       ) : null}
       {failed ? (
@@ -43,12 +43,13 @@ export function StatusPlate({
           role="status"
           className="inline-flex items-center gap-1 text-destructive"
         >
-          <X className="size-3" /> {t('recipe.forge.no_solution')}
+          <X className="size-3" /> {t('No sequence reaches this target under these rules. Reset the workpiece and try another target.', { note: 'recipe.forge.no_solution' })}
         </span>
       ) : null}
       {target !== null && work > target && !failed ? (
-        <span>{t('recipe.forge.over_target')}</span>
+        <span>{t('Work is above the target, use Draw or lighter hits to come back.', { note: 'recipe.forge.over_target' })}</span>
       ) : null}
     </div>
   );
 }
+

package/src/components/views/forge/workbench/tape.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import { GuiSprite, actionGlyphRect } from '@terrafirmagreg-team/recipe/components/views/forge/gui';
-import { cn } from 'cn';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import type { ForgeState } from '@terrafirmagreg-team/recipe/hooks/forge/use-forge-state';
 
 const TAPE_MAX = 12;
@@ -26,8 +26,8 @@ export function StepTape({
         <li>
           <button
             type="button"
-            title={t('recipe.forge.expand_steps')}
-            aria-label={t('recipe.forge.expand_steps')}
+            title={t('Show all steps', { note: 'recipe.forge.expand_steps' })}
+            aria-label={t('Show all steps', { note: 'recipe.forge.expand_steps' })}
             onClick={() => setExpanded(true)}
             className="flex items-center rounded border border-dashed px-1.5 py-0.5 text-xs tabular-nums text-muted-foreground hover:bg-accent"
           >
@@ -41,7 +41,7 @@ export function StepTape({
           <li key={i} className="animate-in fade-in-0 zoom-in-95 duration-150">
             <button
               type="button"
-              title={t('recipe.forge.trim_to')}
+              title={t('Trim to this step', { note: 'recipe.forge.trim_to' })}
               onClick={() => setApplied((prev) => prev.slice(0, i + 1))}
               className={cn(
                 'flex items-center gap-1.5 rounded border px-1.5 py-0.5 text-xs tabular-nums hover:bg-accent',
@@ -67,3 +67,4 @@ export function StepTape({
     </ol>
   );
 }
+

package/src/hooks/alloy/use-fluid-colors.ts

@@ -1,11 +1,13 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { useEffect, useMemo, useReducer } from 'react';
-import { loadClientModAtlases } from '@terrafirmagreg-team/game/lib/dump/client/atlases';
-import { lookupSpriteInBundle } from '@terrafirmagreg-team/game/lib/dump/assets/atlas/lookup';
-import { atlasPagePublicUrl } from '@terrafirmagreg-team/game/lib/dump/assets/urls';
-import { splitDumpId } from '@terrafirmagreg-team/game/lib/dump/paths';
-import { createAsyncCache } from '@terrafirmagreg-team/ui/lib/utils/async-cache';
+import { loadClientModAtlases } from '@terrafirmagreg-team/dump/lib/dump/client/atlases';
+import { lookupSpriteInBundle } from '@terrafirmagreg-team/dump/lib/dump/assets/atlas/lookup';
+import { atlasPagePublicUrl } from '@terrafirmagreg-team/dump/lib/dump/assets/urls';
+import { splitDumpId } from '@terrafirmagreg-team/dump/lib/dump/paths';
+import { createAsyncCache } from '@terrafirmagreg-team/data/lib/async-cache';
+import { createDatasetCache } from '@terrafirmagreg-team/dump/lib/dump/reader';
 import type { RecipeSlotFill } from '@terrafirmagreg-team/recipe/lib/data/dto';
 
 const loadAtlasPage = createAsyncCache(
@@ -43,8 +45,8 @@ function displayColor(r: number, g: number, b: number): string {
   return `hsl(${Math.round(h * 360)} ${Math.round(sat * 100)}% ${Math.round(light * 100)}%)`;
 }
 
-const loadFluidColor = createAsyncCache(
-  async (dataset: string, id: string): Promise<string | null> => {
+const loadFluidColor = createDatasetCache(
+  async (dataset: DatasetRef, id: string): Promise<string | null> => {
     const parts = splitDumpId(id);
     if (!parts) return null;
     const bundle = await loadClientModAtlases(dataset, parts.ns);
@@ -84,11 +86,11 @@ const loadFluidColor = createAsyncCache(
     }
     return n ? displayColor(r / n, g / n, b / n) : null;
   },
-  (dataset, id) => `${dataset}|${id}`,
+  (dataset, id) => `${dataset.id}/${dataset.version ?? ''}|${id}`,
 );
 
 export function useFluidColors(
-  dataset: string,
+  dataset: DatasetRef,
   slots: readonly (RecipeSlotFill | { id: string; kind?: string })[],
 ): (string | undefined)[] {
   const ids = useMemo(
@@ -120,3 +122,4 @@ export function useFluidColors(
     id ? (loadFluidColor.peek(dataset, id) ?? undefined) : undefined,
   );
 }
+

package/src/hooks/alloy/use-mix-state.ts

@@ -143,7 +143,7 @@ export function useMixState(recipe: AlloyRecipe, session: RecipeSession) {
   );
   const output = recipe.recipe.outputs[0];
   const unitLabel =
-    unit === 'ingot' ? t('recipe.alloy.unit.ingot') : t('recipe.alloy.unit.mb');
+    unit === 'ingot' ? t('ing.', { note: 'recipe.alloy.unit.ingot' }) : t('mB', { note: 'recipe.alloy.unit.mb' });
   const format = (value: number) =>
     value.toLocaleString(undefined, { maximumFractionDigits: 2 });
   const formatPercent = (value: number) =>
@@ -158,7 +158,7 @@ export function useMixState(recipe: AlloyRecipe, session: RecipeSession) {
     .join(', ');
   const copyText = `${recipe.components
     .map(({ slot }, i) => `${name(slot.id)} ${format(amounts[i] || 0)}`)
-    .join(' + ')} → ${output ? name(output.id) : t('recipe.alloy.result')} ${format(
+    .join(' + ')} → ${output ? name(output.id) : t('Alloy', { note: 'recipe.alloy.result' })} ${format(
     mix.output,
   )} ${unitLabel}`;
   const fill = (target: number) => {
@@ -237,3 +237,4 @@ export function useMixState(recipe: AlloyRecipe, session: RecipeSession) {
 }
 
 export type MixState = ReturnType<typeof useMixState>;
+