@terrafirmagreg-team/recipe 0.1.0 → 1.2.0

package/package.json

@@ -1,25 +1,22 @@
 {
   "name": "@terrafirmagreg-team/recipe",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "type": "module",
+  "description": "Recipe viewer and calculator",
+  "license": "LGPL-3.0-only",
   "exports": {
     "./components/*": [
       "./src/components/*.tsx",
-      "./src/components/*.ts",
       "./src/components/*/index.tsx",
       "./src/components/*/index.ts"
     ],
     "./hooks/*": [
       "./src/hooks/*.ts",
-      "./src/hooks/*.tsx",
-      "./src/hooks/*/index.ts",
-      "./src/hooks/*/index.tsx"
+      "./src/hooks/*/index.ts"
     ],
     "./lib/*": [
       "./src/lib/*.ts",
-      "./src/lib/*.tsx",
-      "./src/lib/*/index.ts",
-      "./src/lib/*/index.tsx"
+      "./src/lib/*/index.ts"
     ],
     "./types/*": "./src/types/*.ts",
     "./types": "./src/types/index.ts",
@@ -27,17 +24,20 @@
     "./locales": "./src/locales.ts"
   },
   "dependencies": {
-    "cn": "^0.5.0",
+    "@terrafirmagreg-team/data": "1.2.0",
+    "@terrafirmagreg-team/dump": "1.2.0",
+    "@terrafirmagreg-team/game": "1.2.0",
+    "@terrafirmagreg-team/kit": "1.2.0",
+    "@terrafirmagreg-team/mdx": "1.2.0",
+    "@terrafirmagreg-team/preview": "1.2.0",
+    "@terrafirmagreg-team/sites": "1.2.0",
+    "@terrafirmagreg-team/translate": "1.2.0",
+    "@terrafirmagreg-team/ui": "1.2.0",
     "comlink": "^4.4.2",
     "fflate": "0.8.3",
     "fumadocs-core": "16.17.8",
-    "lucide-react": "^1.63.0",
-    "pathfinding": "0.4.18",
-    "potpack": "^2.1.0",
-    "@terrafirmagreg-team/game": "0.1.0",
-    "@terrafirmagreg-team/translate": "0.1.0",
-    "@terrafirmagreg-team/ui": "0.1.0",
-    "@terrafirmagreg-team/kit": "0.1.0"
+    "lucide-react": "^0.577.0",
+    "pathfinding": "0.4.18"
   },
   "peerDependencies": {
     "next": ">=15",

package/src/components/button-copy.tsx

@@ -40,3 +40,4 @@ export function ButtonCopy({
   );
   return title ? <Hint label={title}>{button}</Hint> : button;
 }
+

package/src/components/cards/card/index.tsx

@@ -7,7 +7,7 @@ import {
   cardStripGeo,
   countCoveredText,
   textInStrip,
-} from '@terrafirmagreg-team/recipe/components/cards/card/model';
+} from '@terrafirmagreg-team/recipe/lib/card-model';
 import { CardText } from '@terrafirmagreg-team/recipe/components/cards/card/text';
 import { CardSceneOverlay } from '@terrafirmagreg-team/recipe/components/cards/card/scene';
 import { CardWidgetTips } from '@terrafirmagreg-team/recipe/components/cards/card/tips';
@@ -17,8 +17,9 @@ import {
   recipeMultiblock,
   recipeSceneEntities,
 } from '@terrafirmagreg-team/recipe/lib/data/scene';
-import { dumpRelPublicUrl } from '@terrafirmagreg-team/game/lib/dump/paths';
+import { dumpRelPublicUrl } from '@terrafirmagreg-team/dump/lib/dump/paths';
 import { useDumpLocation } from '@terrafirmagreg-team/game/hooks/use-dump-location';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 import { useInView } from '@terrafirmagreg-team/ui/hooks/use-in-view';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import { GlbEmbedViewer } from '@terrafirmagreg-team/ui/components/blocks/media/glb/viewer';
@@ -48,7 +49,7 @@ export function RecipeCard({
   frameOnly,
 }: {
   recipe: Recipe;
-  dataset: string;
+  dataset: DatasetRef;
   lang: string;
   langMap?: Record<string, string>;
   nav?: Pick<RecipeHrefOpts, 'tab' | 'search'>;
@@ -210,3 +211,4 @@ export function RecipeCard({
     </div>
   );
 }
+

package/src/components/cards/card/scene.tsx

@@ -1,8 +1,9 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { EntryTooltip } from '@terrafirmagreg-team/game/components/entry/tooltip';
 import { fetchEntityTexture } from '@terrafirmagreg-team/game/lib/entry/icon-load';
-import { stackDisplayName } from '@terrafirmagreg-team/game/lib/dump/assets/lang/names';
+import { stackDisplayName } from '@terrafirmagreg-team/dump/lib/dump/assets/lang/names';
 import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
 import type {
   RecipeSceneEntity,
@@ -35,7 +36,7 @@ export function CardSceneOverlay({
   interactive = true,
 }: {
   entity: RecipeSceneEntity;
-  dataset: string;
+  dataset: DatasetRef;
   lang: string;
   langMap?: Record<string, string>;
   scale: number;
@@ -103,3 +104,4 @@ export function CardSceneOverlay({
     </EntryTooltip>
   );
 }
+

package/src/components/cards/card/strip.tsx

@@ -1,10 +1,11 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { Fragment, useRef, useState } from 'react';
 import { SlotHitbox } from '@terrafirmagreg-team/recipe/components/cards/slot-hitbox';
 import { CardText } from '@terrafirmagreg-team/recipe/components/cards/card/text';
 import { formatCount } from '@terrafirmagreg-team/ui/lib/utils/format';
-import type { CardStripGeo } from '@terrafirmagreg-team/recipe/components/cards/card/model';
+import type { CardStripGeo } from '@terrafirmagreg-team/recipe/lib/card-model';
 import type { EntryTooltipLevel } from '@terrafirmagreg-team/game/components/entry/tooltip';
 import type { RecipeTextWidget } from '@terrafirmagreg-team/recipe/lib/data/dto';
 import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
@@ -27,7 +28,7 @@ export function CardStrip({
   margin: number;
   scale: number;
   contentGuiW: number;
-  dataset: string;
+  dataset: DatasetRef;
   lang: string;
   langMap?: Record<string, string>;
   nav?: Pick<RecipeHrefOpts, 'tab' | 'search'>;
@@ -194,3 +195,4 @@ export function CardStrip({
     </>
   );
 }
+

package/src/components/cards/card/text.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { McText } from '@terrafirmagreg-team/game/components/entry/mc-text';
-import { dumpTextString } from '@terrafirmagreg-team/game/lib/dump/assets/lang/names';
+import { dumpTextString } from '@terrafirmagreg-team/dump/lib/dump/assets/lang/names';
 import type { RecipeTextWidget } from '@terrafirmagreg-team/recipe/lib/data/dto';
 
 export function CardText({
@@ -43,3 +43,4 @@ export function CardText({
     </span>
   );
 }
+

package/src/components/cards/card/tips.tsx

@@ -60,3 +60,4 @@ export function CardWidgetTips({
       );
     });
 }
+

package/src/components/cards/default-item.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { Pin, PinOff } from 'lucide-react';
 import { useEffect, useState } from 'react';
@@ -14,7 +15,7 @@ export function RecipeDefaultMenuItem({
   materialId,
   recipeId,
 }: {
-  dataset: string;
+  dataset: DatasetRef;
   materialId?: string;
   recipeId: string;
 }) {
@@ -37,7 +38,10 @@ export function RecipeDefaultMenuItem({
       onClick={() => writeRecipeDefault(dataset, materialId, pinned ? null : recipeId)}
     >
       {pinned ? <PinOff /> : <Pin />}
-      {t(pinned ? 'recipe.calc.clear.default' : 'recipe.calc.set_default')}
+      {pinned
+        ? t('Unpin default recipe', { note: 'recipe.calc.clear.default' })
+        : t('Pin as default recipe', { note: 'recipe.calc.set_default' })}
     </ContextMenuItem>
   );
 }
+

package/src/components/cards/glare-filter.tsx

@@ -26,3 +26,4 @@ export function RecipeGlareFilter() {
     </svg>
   );
 }
+

package/src/components/cards/paged-card.tsx

@@ -219,3 +219,4 @@ export function PagedCard({
     </div>
   );
 }
+

package/src/components/cards/slot-hitbox.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import Link from 'next/link';
 import { ENTRY_CYCLE_MS, EntryIcon } from '@terrafirmagreg-team/game/components/entry/icon';
@@ -12,7 +13,7 @@ import { entryHref } from '@terrafirmagreg-team/game/lib/entry/href';
 import { loadStackDisplay } from '@terrafirmagreg-team/game/lib/entry/tooltip';
 import { favoriteHover } from '@terrafirmagreg-team/recipe/lib/favorite-hover';
 import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
-import type { ReferenceKind } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import type { ReferenceKind } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
 import type { RecipeSlotWidget } from '@terrafirmagreg-team/recipe/lib/data/dto';
 import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
 
@@ -64,7 +65,7 @@ export function SlotHitbox({
   tooltipLevel,
 }: {
   widget: RecipeSlotWidget;
-  dataset: string;
+  dataset: DatasetRef;
   lang: string;
   langMap?: Record<string, string>;
   nav?: Pick<RecipeHrefOpts, 'tab' | 'search'>;
@@ -209,3 +210,4 @@ export function SlotHitbox({
     </EntryTooltip>
   );
 }
+

package/src/components/cards/strip-card/buttons.tsx

@@ -26,7 +26,11 @@ export function StripCardTagPager({
   return (
     <button
       type="button"
-      aria-label={t(dir < 0 ? 'ui.prev_page' : 'ui.next_page')}
+      aria-label={
+        dir < 0
+          ? t('Previous Page', { note: 'ui.prev_page' })
+          : t('Next Page', { note: 'ui.next_page' })
+      }
       disabled={disabled}
       onClick={onClick}
       onMouseEnter={() => setHover(true)}
@@ -78,7 +82,7 @@ export function StripCardTagCopy({
   return (
     <button
       type="button"
-      aria-label={t('recipe.copy_recipe_id')}
+      aria-label={t('Copy recipe id', { note: 'recipe.copy_recipe_id' })}
       onClick={onClick}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
@@ -99,3 +103,4 @@ export function StripCardTagCopy({
     </button>
   );
 }
+

package/src/components/cards/strip-card/index.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { Fragment, useRef, useState } from 'react';
 import { SlotHitbox } from '@terrafirmagreg-team/recipe/components/cards/slot-hitbox';
@@ -36,7 +37,7 @@ export function StripCard({
   frameOnly,
 }: {
   recipe: Recipe;
-  dataset: string;
+  dataset: DatasetRef;
   lang: string;
   langMap?: Record<string, string>;
   nav?: Pick<RecipeHrefOpts, 'tab' | 'search'>;
@@ -210,3 +211,4 @@ export function StripCard({
     </div>
   );
 }
+

package/src/components/cards/strip-card/member-cell.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import Link from 'next/link';
 import { EntryIcon } from '@terrafirmagreg-team/game/components/entry/icon';
@@ -11,7 +12,7 @@ import { entryHref } from '@terrafirmagreg-team/game/lib/entry/href';
 import { loadStackDisplay } from '@terrafirmagreg-team/game/lib/entry/tooltip';
 import { favoriteHover } from '@terrafirmagreg-team/recipe/lib/favorite-hover';
 import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
-import type { ReferenceKind } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import type { ReferenceKind } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
 import type { RecipeGridMember } from '@terrafirmagreg-team/recipe/lib/data/dto';
 import type { RecipeHrefOpts } from '@terrafirmagreg-team/recipe/types';
 
@@ -34,7 +35,7 @@ export function StripCardMember({
   tooltipLevel,
 }: {
   member: RecipeGridMember;
-  dataset: string;
+  dataset: DatasetRef;
   lang: string;
   langMap?: Record<string, string>;
   nav?: Pick<RecipeHrefOpts, 'tab' | 'search'>;
@@ -163,3 +164,4 @@ export function StripCardMember({
     </EntryTooltip>
   );
 }
+

package/src/components/cards/strip-card/sprite.tsx

@@ -33,3 +33,4 @@ export function StripCardSprite({
     />
   );
 }
+

package/src/components/embed-card.tsx

@@ -0,0 +1,44 @@
+'use client';
+import { useState } from 'react';
+import Link from 'next/link';
+import { PagedCard } from '@terrafirmagreg-team/recipe/components/cards/paged-card';
+import { FitBox } from '@terrafirmagreg-team/ui/components/blocks/fit-box';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import { recipeCardImageUrl } from '@terrafirmagreg-team/recipe/lib/links';
+import { recipeImageUrl } from '@terrafirmagreg-team/dump/lib/dump/assets/urls';
+import { recipeTitle } from '@terrafirmagreg-team/recipe/lib/data/parse';
+import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
+import type { EmbedRecipeCardProps } from '@terrafirmagreg-team/kit/types/embeds';
+
+export function RecipeEmbedCard({
+  id,
+  recipe,
+  dataset,
+  lang,
+  langMap,
+}: EmbedRecipeCardProps) {
+  const [failed, setFailed] = useState(false);
+  if (failed) return null;
+  const full = recipe as unknown as Recipe;
+  const src = recipeImageUrl(dataset, full) ?? recipeCardImageUrl(dataset, id);
+  if (!src) return null;
+  const title = recipeTitle(full, langMap);
+  return (
+    <Link
+      href={recipeHref(dataset, lang, { id })}
+      className="not-prose block w-fit max-w-full"
+    >
+      <FitBox w={full.w ?? 0}>
+        <PagedCard
+          recipe={full}
+          dataset={dataset}
+          lang={lang}
+          langMap={langMap}
+          title={title}
+          src={src}
+          onFail={() => setFailed(true)}
+        />
+      </FitBox>
+    </Link>
+  );
+}

package/src/components/mdx/recipe.tsx

@@ -1,9 +1,11 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { PagedCard } from '@terrafirmagreg-team/recipe/components/cards/paged-card';
-import { FitCard } from '@terrafirmagreg-team/recipe/components/cards/fit-card';
+import { FitBox } from '@terrafirmagreg-team/ui/components/blocks/fit-box';
 import { EmptyState } from '@terrafirmagreg-team/ui/components/blocks/page/empty-state';
 import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
 import { useAsyncResult } from '@terrafirmagreg-team/ui/hooks/use-async-value';
@@ -17,25 +19,31 @@ import {
   resolveRecipeRows,
 } from '@terrafirmagreg-team/recipe/lib/client-index';
 import { loadClientRecipe } from '@terrafirmagreg-team/recipe/lib/client/recipe';
-import { clientDumpLang } from '@terrafirmagreg-team/game/lib/dump/client/dump';
+import { clientDumpLang } from '@terrafirmagreg-team/dump/lib/dump/client/dump';
 import { recipeTitle } from '@terrafirmagreg-team/recipe/lib/data/parse';
-import { recipeImageUrl } from '@terrafirmagreg-team/game/lib/dump/assets/urls';
+import { recipeImageUrl } from '@terrafirmagreg-team/dump/lib/dump/assets/urls';
 import { recipeCardImageUrl, recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
 
+export type RecipeProps = {
+  id?: string;
+  dataset?: DatasetRef;
+  maxH?: number;
+};
+
 export function Recipe({
   id,
   dataset: datasetProp,
   maxH = 360,
-}: {
-  id?: string;
-  dataset?: string;
-  maxH?: number;
-}) {
+}: RecipeProps) {
   const catalog = useSectionCatalog();
   const current = useCurrentDataset(catalog.recipe);
-  const dataset = datasetProp ?? current ?? catalog.recipe[0]?.id;
+  const dataset =
+    datasetProp ??
+    current ??
+    (catalog.recipe[0] ? { id: catalog.recipe[0].id } : undefined);
   const lang = useResolvedLang();
-  const { index, indexLoading } = useRecipeIndex(dataset ?? '', lang);
+  const router = useRouter();
+  const { index, indexLoading } = useRecipeIndex(dataset, lang);
   const [failed, setFailed] = useState(false);
 
   const { value, pending } = useAsyncResult(
@@ -82,13 +90,22 @@ export function Recipe({
   }
   const { row, recipe, langMap, title, src } = value;
   return (
-    <Link
-      href={href}
-      className="not-prose mb-4 block w-fit max-w-full rounded-md"
+    <div
+      role="link"
+      tabIndex={0}
       title={title}
+      className="not-prose mb-4 block w-fit max-w-full cursor-pointer rounded-md"
+      onClick={(event) => {
+        if ((event.target as HTMLElement).closest('a,button')) return;
+        router.push(href);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' && event.target === event.currentTarget)
+          router.push(href);
+      }}
     >
       {src && !failed ? (
-        <FitCard w={recipe.w ?? row.d?.w ?? 0}>
+        <FitBox w={recipe.w ?? row.d?.w ?? 0}>
           <PagedCard
             recipe={recipe}
             dataset={dataset}
@@ -102,10 +119,11 @@ export function Recipe({
             maxH={Number(maxH) || 360}
             interactive
           />
-        </FitCard>
+        </FitBox>
       ) : (
         <EmptyState variant="missing">{title}</EmptyState>
       )}
-    </Link>
+    </div>
   );
 }
+

package/src/components/tool-list.tsx

@@ -46,3 +46,4 @@ export function ToolList({
     </LeftSidebarPortal>
   );
 }
+

package/src/{lib/tree.ts → components/tree.tsx}

@@ -1,9 +1,12 @@
 import 'server-only';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 import { createElement } from 'react';
 import type * as PageTree from 'fumadocs-core/page-tree';
 import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
-import { loadMergedLangMap, creativeTabName } from '@terrafirmagreg-team/game/lib/dump/assets/lang/load';
-import { loadClientManifest } from '@terrafirmagreg-team/game/lib/dump/client/dump';
+import { loadMergedLangMap, creativeTabName } from '@terrafirmagreg-team/dump/lib/dump/assets/lang/load';
+import { loadClientManifest } from '@terrafirmagreg-team/dump/lib/dump/client/dump';
+import { DUMP_POINTER_TTL } from '@terrafirmagreg-team/dump/lib/dump/json-reader';
+import { createAsyncCache } from '@terrafirmagreg-team/data/lib/async-cache';
 import { loadDatasetRecipeCategories } from '@terrafirmagreg-team/recipe/lib/data/category/load';
 import { keyTreeNode } from '@terrafirmagreg-team/translate/server';
 import { loadLocaleRegistry } from '@terrafirmagreg-team/translate/server';
@@ -14,7 +17,7 @@ import type { DumpRecipeCategory } from '@terrafirmagreg-team/recipe/lib/data/ca
 import type { SectionTrees } from '@terrafirmagreg-team/kit/types';
 
 function categoryIcon(
-  dataset: string,
+  dataset: DatasetRef,
   category: DumpRecipeCategory,
 ): React.ReactNode {
   if (!category.icon) return undefined;
@@ -34,7 +37,7 @@ function categoryIcon(
 }
 
 function categoryLeaf(
-  dataset: string,
+  dataset: DatasetRef,
   category: DumpRecipeCategory,
   map: Record<string, string>,
 ): PageTree.Item {
@@ -43,15 +46,18 @@ function categoryLeaf(
     name: creativeTabName(map, category.display?.name),
     url: `${recipeBasePath(dataset)}?type=${encodeQueryValue(category.id)}`,
     icon: categoryIcon(dataset, category),
-    $id: `${dataset}/type/${category.id}`,
+    $id: `${dataset.id}/${dataset.version ?? ''}/type/${category.id}`,
   }) as PageTree.Item;
 }
 
-let cached: Promise<SectionTrees> | undefined;
+const recipeTreesCache = createAsyncCache(
+  async (): Promise<SectionTrees> => buildRecipeTrees(),
+  () => 'recipe-trees',
+  DUMP_POINTER_TTL,
+);
 
 export function recipeTrees(): Promise<SectionTrees> {
-  cached ??= buildRecipeTrees();
-  return cached;
+  return recipeTreesCache();
 }
 
 async function buildRecipeTrees(): Promise<SectionTrees> {
@@ -60,9 +66,10 @@ async function buildRecipeTrees(): Promise<SectionTrees> {
   const trees: SectionTrees = {};
   for (const { id, title: datasetTitle, languages } of datasets) {
     for (const lang of languages ?? [defaultLanguage]) {
-      const map = await loadMergedLangMap(id, lang);
-      const categories = await loadDatasetRecipeCategories(id);
-      const types = (await loadClientManifest(id))?.indexes.recipes.types;
+      const ref = { id };
+      const map = await loadMergedLangMap(ref, lang);
+      const categories = await loadDatasetRecipeCategories(ref);
+      const types = (await loadClientManifest(ref))?.indexes.recipes.types;
       const nonEmpty = types
         ? new Set(
             types
@@ -78,7 +85,7 @@ async function buildRecipeTrees(): Promise<SectionTrees> {
               creativeTabName(map, b.display?.name),
             ) || a.id.localeCompare(b.id),
         )
-        .map((category) => categoryLeaf(id, category, map));
+        .map((category) => categoryLeaf(ref, category, map));
       (trees[lang] ??= {})[id] = {
         name: datasetTitle ?? id,
         children: leaves,
@@ -88,3 +95,4 @@ async function buildRecipeTrees(): Promise<SectionTrees> {
   }
   return trees;
 }
+

package/src/components/views/alloy/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 { toAlloyRecipe } from '@terrafirmagreg-team/recipe/lib/alloy/parse';
 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 AlloyCalculator({ session }: { session: RecipeSession }) {
           active ? (
             <RecipeItemHeader recipe={active.recipe} session={session} />
           ) : (
-            <ItemRow layout="header" title={t('recipe.alloy.title')} />
+            <ItemRow layout="header" title={t('Alloys', { note: 'recipe.alloy.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.alloy.load_error')}
+              {t('Could not load recipes. Reload the page to retry.', { note: 'recipe.alloy.load_error' })}
             </EmptyState>
           ) : active ? (
             <>
@@ -85,17 +85,23 @@ export function AlloyCalculator({ session }: { session: RecipeSession }) {
                 recipe={active}
                 session={session}
               />
-              <FitCard w={active.recipe.w ?? 0}>
+              <FitBox w={active.recipe.w ?? 0}>
                 <AlloyRecipeCard
                   key={active.recipe.id}
                   recipe={active.recipe}
                   session={session}
                 />
-              </FitCard>
+              </FitBox>
             </>
           ) : (
             <EmptyState>
-              {t(activeId ? 'recipe.alloy.missing' : 'recipe.alloy.empty')}
+              {activeId
+                ? t('Recipe not found in this dump. Select another alloy.', {
+                    note: 'recipe.alloy.missing',
+                  })
+                : t('No matching recipes in this dump.', {
+                    note: 'recipe.alloy.empty',
+                  })}
             </EmptyState>
           )}
         </div>
@@ -103,3 +109,4 @@ export function AlloyCalculator({ session }: { session: RecipeSession }) {
     </>
   );
 }
+

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

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

package/src/components/views/alloy/mix/index.tsx

@@ -32,3 +32,4 @@ export function AlloyMix({
     </div>
   );
 }
+