@terrafirmagreg-team/recipe 0.1.0 → 1.2.0

package/src/components/views/calc/flow/view-menu.tsx

@@ -1,36 +1,23 @@
 'use client';
 
-import { useState } from 'react';
 import {
-  ArrowDownUp,
-  ArrowRightLeft,
-  CircuitBoard,
-  CornerRightUp,
   GalleryHorizontal,
   LayoutGrid,
-  MoveUpRight,
   RectangleHorizontal,
   Settings2,
-  Spline,
-  Waypoints,
 } from 'lucide-react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuLabel,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@terrafirmagreg-team/ui/components/ui/dropdown-menu';
-import { Slider } from '@terrafirmagreg-team/ui/components/ui/slider';
 import type {
-  CalcDensity,
-  CalcDirection,
-  CalcEdgeStyle,
   CalcFarMode,
   CalcViewMode,
 } from '@terrafirmagreg-team/recipe/lib/calc/flow';
@@ -41,59 +28,35 @@ const MODE_ICONS = {
   detailed: GalleryHorizontal,
 } as const;
 
-const EDGE_ICONS = {
-  default: Spline,
-  straight: MoveUpRight,
-  step: Waypoints,
-  smoothstep: CornerRightUp,
-  circuit: CircuitBoard,
-} as const;
-
-const DIR_ICONS = {
-  vertical: ArrowDownUp,
-  horizontal: ArrowRightLeft,
-} as const;
-
 const FAR_MODES: CalcFarMode[] = ['full', 'preview', 'hidden'];
 
 export function CalcViewMenu({
   mode,
   onModeChange,
-  direction,
-  onDirectionChange,
-  edgeStyle,
-  onEdgeStyleChange,
   farCards,
   onFarCardsChange,
-  density,
-  onDensityChange,
 }: {
   mode: CalcViewMode;
   onModeChange: (mode: CalcViewMode) => void;
-  direction: CalcDirection;
-  onDirectionChange: (direction: CalcDirection) => void;
-  edgeStyle: CalcEdgeStyle;
-  onEdgeStyleChange: (style: CalcEdgeStyle) => void;
   farCards: CalcFarMode;
   onFarCardsChange: (mode: CalcFarMode) => void;
-  density: CalcDensity;
-  onDensityChange: (density: CalcDensity) => void;
 }) {
   const t = useTranslations();
-
-  const [densityDraft, setDensityDraft] = useState(() =>
-    Math.round(density * 100),
-  );
-  const [prevDensity, setPrevDensity] = useState(density);
-  if (prevDensity !== density) {
-    setPrevDensity(density);
-    setDensityDraft(Math.round(density * 100));
-  }
+  const modeLabels: Record<CalcViewMode, string> = {
+    mini: t('Compact view', { note: 'recipe.calc.mode.mini' }),
+    normal: t('Card view', { note: 'recipe.calc.mode.normal' }),
+    detailed: t('Recipe view', { note: 'recipe.calc.mode.detailed' }),
+  };
+  const farLabels: Record<CalcFarMode, string> = {
+    full: t('Full card', { note: 'recipe.calc.far.full' }),
+    preview: t('Preview', { note: 'recipe.calc.far.preview' }),
+    hidden: t('Hide', { note: 'recipe.calc.far.hidden' }),
+  };
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
-        render={<IconButton overlay label={t('recipe.calc.view.title')} />}
+        render={<IconButton overlay label={t('View settings', { note: 'recipe.calc.view.title' })} />}
       >
         <Settings2 className="size-3.5" />
       </DropdownMenuTrigger>
@@ -107,7 +70,7 @@ export function CalcViewMenu({
           onValueChange={(value) => onModeChange(value as CalcViewMode)}
         >
           <DropdownMenuLabel className="whitespace-nowrap">
-            {t('recipe.calc.view.modes')}
+            {t('Cards', { note: 'recipe.calc.view.modes' })}
           </DropdownMenuLabel>
           {(Object.keys(MODE_ICONS) as CalcViewMode[]).map((value) => {
             const ModeIcon = MODE_ICONS[value];
@@ -118,79 +81,11 @@ export function CalcViewMenu({
                 className="whitespace-nowrap"
               >
                 <ModeIcon className="size-4" />
-                {t(`recipe.calc.mode.${value}`)}
+                {modeLabels[value]}
               </DropdownMenuRadioItem>
             );
           })}
         </DropdownMenuRadioGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuRadioGroup
-          value={direction}
-          onValueChange={(value) => onDirectionChange(value as CalcDirection)}
-        >
-          <DropdownMenuLabel className="whitespace-nowrap">
-            {t('recipe.calc.view.dir')}
-          </DropdownMenuLabel>
-          {(Object.keys(DIR_ICONS) as CalcDirection[]).map((value) => {
-            const DirIcon = DIR_ICONS[value];
-            return (
-              <DropdownMenuRadioItem
-                key={value}
-                value={value}
-                className="whitespace-nowrap"
-              >
-                <DirIcon className="size-4" />
-                {t(`recipe.calc.dir.${value === 'vertical' ? 'v' : 'h'}`)}
-              </DropdownMenuRadioItem>
-            );
-          })}
-        </DropdownMenuRadioGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuRadioGroup
-          value={edgeStyle}
-          onValueChange={(value) =>
-            onEdgeStyleChange(value as CalcEdgeStyle)
-          }
-        >
-          <DropdownMenuLabel className="whitespace-nowrap">
-            {t('recipe.calc.view.edge')}
-          </DropdownMenuLabel>
-          {(Object.keys(EDGE_ICONS) as CalcEdgeStyle[]).map((value) => {
-            const EdgeIcon = EDGE_ICONS[value];
-            return (
-              <DropdownMenuRadioItem
-                key={value}
-                value={value}
-                className="whitespace-nowrap"
-              >
-                <EdgeIcon className="size-4" />
-                {t(`recipe.calc.edge.${value}`)}
-              </DropdownMenuRadioItem>
-            );
-          })}
-        </DropdownMenuRadioGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuLabel className="whitespace-nowrap">
-            {t('recipe.calc.density.title')}
-          </DropdownMenuLabel>
-          <div className="w-44 px-2.5 pb-2 pt-0.5">
-            <Slider
-              value={[densityDraft]}
-              min={0}
-              max={100}
-              step={25}
-              onValueChange={(value) => {
-                const next = Array.isArray(value) ? value[0] : value;
-                if (next !== undefined) setDensityDraft(next);
-              }}
-              onValueCommitted={(value) => {
-                const next = Array.isArray(value) ? value[0] : value;
-                if (next !== undefined) onDensityChange(next / 100);
-              }}
-            />
-          </div>
-        </DropdownMenuGroup>
         {mode === 'detailed' ? (
           <>
             <DropdownMenuSeparator />
@@ -201,7 +96,7 @@ export function CalcViewMenu({
               }
             >
               <DropdownMenuLabel className="whitespace-nowrap">
-                {t('recipe.calc.far.title')}
+                {t('Cards when zoomed out', { note: 'recipe.calc.far.title' })}
               </DropdownMenuLabel>
               {FAR_MODES.map((value) => (
                 <DropdownMenuRadioItem
@@ -209,7 +104,7 @@ export function CalcViewMenu({
                   value={value}
                   className="whitespace-nowrap"
                 >
-                  {t(`recipe.calc.far.${value}`)}
+                  {farLabels[value]}
                 </DropdownMenuRadioItem>
               ))}
             </DropdownMenuRadioGroup>
@@ -219,3 +114,4 @@ export function CalcViewMenu({
     </DropdownMenu>
   );
 }
+

package/src/components/views/calc/member-picker.tsx

@@ -1,4 +1,5 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import {
@@ -12,7 +13,7 @@ import {
 } from '@terrafirmagreg-team/ui/components/ui/command';
 import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
 import { stackDisplayName } from '@terrafirmagreg-team/game/lib/entry/display';
-import type { ReferenceKind } from '@terrafirmagreg-team/game/lib/dump/contract/ref';
+import type { ReferenceKind } from '@terrafirmagreg-team/dump/lib/dump/contract/ref';
 
 export function CalcMemberList({
   tagId,
@@ -28,7 +29,7 @@ export function CalcMemberList({
   members: string[];
   selected?: string;
   memberKind?: ReferenceKind;
-  dataset: string;
+  dataset: DatasetRef;
   lang: string;
   langMap?: Record<string, string>;
   onSelect: (tagId: string, memberId: string) => void;
@@ -36,9 +37,9 @@ export function CalcMemberList({
   const t = useTranslations();
   return (
     <Command label={tagId}>
-      <CommandInput placeholder={t('recipe.calc.member.search')} />
+      <CommandInput placeholder={t('Search member…', { note: 'recipe.calc.member.search' })} />
       <CommandList>
-        <CommandEmpty>{t('recipe.search_empty')}</CommandEmpty>
+        <CommandEmpty>{t('No results found', { note: 'recipe.search_empty' })}</CommandEmpty>
         <CommandGroup>
           {members.map((id) => (
             <CommandItem
@@ -85,7 +86,7 @@ export function CalcMemberPicker({
   members: string[];
   selected?: string;
   memberKind?: ReferenceKind;
-  dataset: string;
+  dataset: DatasetRef;
   lang: string;
   langMap?: Record<string, string>;
   onSelect: (tagId: string, memberId: string) => void;
@@ -95,7 +96,7 @@ export function CalcMemberPicker({
     <CommandDialog
       open={open}
       onOpenChange={onOpenChange}
-      title={t('recipe.calc.member.title')}
+      title={t('Choose tag member', { note: 'recipe.calc.member.title' })}
       description={tagId}
       className="sm:max-w-md"
       commandProps={{ label: tagId }}
@@ -116,3 +117,4 @@ export function CalcMemberPicker({
     </CommandDialog>
   );
 }
+

package/src/components/views/calc/node-card/actions.tsx

@@ -5,18 +5,10 @@ import {
   Check,
   Copy,
   ExternalLink,
-  Play,
-  Plus,
+  Layers,
   X,
 } from 'lucide-react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@terrafirmagreg-team/ui/components/ui/dropdown-menu';
-import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
 import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import type { CalcFlowNode } from '@terrafirmagreg-team/recipe/lib/calc/flow';
@@ -27,87 +19,33 @@ export const CORNER_BUTTON =
 export function NodeActions({
   data,
   nodeId,
-  onPickMissing,
 }: {
   data: CalcFlowNode['data'];
   nodeId: string;
-  onPickMissing: (node: CalcFlowNode['data']['node']) => void;
 }) {
-  const {
-    node,
-    missing,
-    onFillNode,
-    onCollapseNode,
-    onRemoveTarget,
-    onOpenItem,
-  } = data;
+  const { node, onRemoveCard, onOpenItem, onRequestPicker } = data;
   const t = useTranslations();
   const [copied, setCopied] = useState(false);
-  const canFill =
-    node.expandable && !node.collapsed && !node.recipe && node.need > 0;
-  const canClose = node.path != null && !node.collapsed;
+  const canPick = node.recipe != null || node.availableRecipes.length > 0;
 
-  const isTarget = node.path != null && !node.path.includes('/');
-  const missingButton = missing?.length ? (
-    <Hint label={t('recipe.calc.add.node')} side="top">
-      <button
-        type="button"
-        aria-label={t('recipe.calc.add.node')}
-        onClick={
-          missing.length === 1
-            ? () => onPickMissing(missing[0]!)
-            : undefined
-        }
-        className={CORNER_BUTTON}
-      >
-        <Plus className="size-2.5" />
-      </button>
-    </Hint>
-  ) : null;
   return (
-    <span className="pointer-events-auto absolute -top-2 right-1 z-30 flex gap-0.5">
-      {missing?.length === 1 ? (
-        missingButton
-      ) : missing?.length ? (
-        <DropdownMenu>
-          <DropdownMenuTrigger render={missingButton!} />
-          <DropdownMenuContent side="bottom" align="end" className="w-fit">
-            {missing.map((child) => (
-              <DropdownMenuItem
-                key={child.path ?? child.materialId}
-                className="whitespace-nowrap"
-                onClick={() => onPickMissing(child)}
-              >
-                <Entry
-                  id={child.materialId}
-                  kind={child.kind}
-                  dataset={data.dataset}
-                  size="sm"
-                  labeled
-                  href={false}
-                  tooltip={false}
-                />
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ) : null}
-      {canFill ? (
-        <Hint label={t('recipe.calc.auto.build')} side="top">
+    <span className="pointer-events-auto absolute -top-2 right-3 z-30 flex gap-0.5">
+      {canPick ? (
+        <Hint label={t('Pick a recipe', { note: 'recipe.calc.pick.title' })} side="top">
           <button
             type="button"
-            aria-label={t('recipe.calc.auto.build')}
-            onClick={() => node.path && onFillNode(node.path!)}
+            aria-label={t('Pick a recipe', { note: 'recipe.calc.pick.title' })}
+            onClick={() => onRequestPicker(node)}
             className={CORNER_BUTTON}
           >
-            <Play className="size-2.5" />
+            <Layers className="size-2.5" />
           </button>
         </Hint>
       ) : null}
-      <Hint label={t('recipe.calc.copy_id')} side="top">
+      <Hint label={t('Copy id', { note: 'recipe.calc.copy_id' })} side="top">
         <button
           type="button"
-          aria-label={t('recipe.calc.copy_id')}
+          aria-label={t('Copy id', { note: 'recipe.calc.copy_id' })}
           onClick={() => {
             void navigator.clipboard.writeText(node.materialId);
             setCopied(true);
@@ -122,47 +60,31 @@ export function NodeActions({
           )}
         </button>
       </Hint>
-      <Hint label={t('recipe.calc.open.item')} side="top">
+      <Hint label={t('Open item page', { note: 'recipe.calc.open.item' })} side="top">
         <button
           type="button"
-          aria-label={t('recipe.calc.open.item')}
+          aria-label={t('Open item page', { note: 'recipe.calc.open.item' })}
           onClick={() => onOpenItem(node.materialId, node.kind)}
           className={CORNER_BUTTON}
         >
           <ExternalLink className="size-2.5" />
         </button>
       </Hint>
-      {isTarget ? (
-        <Hint label={t('recipe.calc.remove.title')} side="top">
-          <button
-            type="button"
-            aria-label={t('recipe.calc.remove.title')}
-            onPointerDown={(event) => event.stopPropagation()}
-            onClick={(event) => {
-              event.stopPropagation();
-              onRemoveTarget(nodeId);
-            }}
-            className={cn(CORNER_BUTTON, 'hover:text-destructive')}
-          >
-            <X className="size-3" />
-          </button>
-        </Hint>
-      ) : canClose ? (
-        <Hint label={t('recipe.calc.collapse')} side="top">
-          <button
-            type="button"
-            aria-label={t('recipe.calc.collapse')}
-            onPointerDown={(event) => event.stopPropagation()}
-            onClick={(event) => {
-              event.stopPropagation();
-              onCollapseNode(node.path!);
-            }}
-            className={cn(CORNER_BUTTON, 'hover:text-destructive')}
-          >
-            <X className="size-3" />
-          </button>
-        </Hint>
-      ) : null}
+      <Hint label={t('Remove card', { note: 'recipe.calc.remove.title' })} side="top">
+        <button
+          type="button"
+          aria-label={t('Remove card', { note: 'recipe.calc.remove.title' })}
+          onPointerDown={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.stopPropagation();
+            onRemoveCard(nodeId);
+          }}
+          className={cn(CORNER_BUTTON, 'hover:text-destructive')}
+        >
+          <X className="size-3" />
+        </button>
+      </Hint>
     </span>
   );
 }
+

package/src/components/views/calc/node-card/badges.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { FlaskConical, Mountain, Percent, Repeat } from 'lucide-react';
+import { Mountain, Repeat } from 'lucide-react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
@@ -20,7 +20,7 @@ export function NodeBadges({
   const chips: ReactNode[] = [];
   if (node.cycle) {
     chips.push(
-      <Hint key="cycle" label={t('recipe.calc.hint.cycle')} side="top">
+      <Hint key="cycle" label={t('Recipe cycle: the recipe needs itself upstream', { note: 'recipe.calc.hint.cycle' })} side="top">
         <span
           className={cn(CORNER_CHIP, 'border-red-500/40 text-red-500')}
         >
@@ -29,49 +29,31 @@ export function NodeBadges({
       </Hint>,
     );
   }
-  if (node.catalyst) {
+  if (!node.recipe && !node.availableRecipes.length && !node.loading) {
     chips.push(
-      <Hint key="catalyst" label={t('recipe.calc.hint.catalyst')} side="top">
-        <span className={CORNER_CHIP}>
-          <FlaskConical className="size-2.5" />
-        </span>
-      </Hint>,
-    );
-  }
-  if (!node.recipe && !node.expandable && !node.loading) {
-    chips.push(
-      <Hint key="source" label={t('recipe.calc.hint.source')} side="top">
+      <Hint key="source" label={t('No recipe: taken from remainders or gathered externally', { note: 'recipe.calc.hint.source' })} side="top">
         <span className={CORNER_CHIP}>
           <Mountain className="size-2.5" />
         </span>
       </Hint>,
     );
   }
-  if (node.satisfied > 0) {
+  if (node.remaining < 0) {
     chips.push(
-      <Hint key="satisfied" label={t('recipe.calc.satisfied')} side="top">
+      <Hint key="over" label={t('Overdrawn: more is wired out than produced', { note: 'recipe.calc.overdrawn' })} side="top">
         <span
-          className={cn(CORNER_CHIP, 'border-emerald-500/40 text-emerald-500')}
+          className={cn(CORNER_CHIP, 'border-red-500/40 text-red-500')}
         >
-          +{formatCount(node.satisfied)}
-        </span>
-      </Hint>,
-    );
-  }
-  if (node.consumeChance != null && node.consumeChance < 1) {
-    chips.push(
-      <Hint key="chance" label={t('recipe.calc.chance')} side="top">
-        <span className={CORNER_CHIP}>
-          <Percent className="size-2.5" />
-          {Math.round(node.consumeChance * 100)}
+          {formatCount(node.remaining)}
         </span>
       </Hint>,
     );
   }
   if (!chips.length) return null;
   return (
-    <span className="pointer-events-auto absolute -right-1.5 -bottom-1.5 z-30 flex flex-col-reverse items-end gap-0.5">
+    <span className="pointer-events-auto absolute right-3 -bottom-1.5 z-30 flex flex-col-reverse items-end gap-0.5">
       {chips}
     </span>
   );
 }
+

package/src/components/views/calc/node-card/chips.tsx

@@ -1,10 +1,10 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
 import type { ReactNode } from 'react';
 import {
   ChevronDown,
   ListFilter,
-  Plus,
   Shapes,
 } from 'lucide-react';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
@@ -89,36 +89,14 @@ export function NodeChips({
   name: string;
   category: RecipeCategory | undefined;
   hasAlternatives: boolean;
-  dataset: string;
+  dataset: DatasetRef;
   lang: string;
   langMap?: Record<string, string>;
   onRequestPicker: CalcFlowData['onRequestPicker'];
   onRequestMemberPicker: CalcFlowData['onRequestMemberPicker'];
 }) {
   const t = useTranslations();
-  const recipes = node.availableRecipes;
   const members = node.members;
-  const pickChip =
-    node.expandable && !node.recipe ? (
-      <CycleChip
-        className="min-w-0 flex-1 border-dashed"
-        title={`${
-          node.collapsed
-            ? t('recipe.calc.hint.collapsed')
-            : t('recipe.calc.pick.title')
-        } ×${formatCount(recipes.length)}`}
-        openLabel={t('recipe.calc.pick.title')}
-        onOpen={() => onRequestPicker(node)}
-        centerClassName="py-0.5"
-      >
-        <Plus className="size-3 shrink-0" />
-        {mini ? null : (
-          <span className="shrink-0 tabular-nums">
-            ×{formatCount(recipes.length)}
-          </span>
-        )}
-      </CycleChip>
-    ) : null;
   const loadingChip =
     node.loading && !node.recipe ? (
       <Skeleton className="h-5 min-w-0 flex-1 rounded-md" />
@@ -130,27 +108,21 @@ export function NodeChips({
         mini && 'h-5 w-full',
       )}
     >
-      {pickChip}
       {loadingChip}
-      {!node.recipe && !pickChip && !loadingChip ? (
+      {!node.recipe && !loadingChip ? (
         <CycleChip
           className="min-w-0 flex-1 border-dashed opacity-60"
-          title={t('recipe.calc.hint.source')}
+          title={t('No recipe: taken from remainders or gathered externally', { note: 'recipe.calc.hint.source' })}
           centerClassName="py-0.5"
         >
           <ListFilter className="size-3 shrink-0" />
         </CycleChip>
       ) : null}
       {node.recipe ? (
-
         <CycleChip
           className="min-w-0 flex-1"
-          title={
-            mini && node.batches > 1
-              ? `${node.recipe.recipeId} ×${formatCount(node.batches)}`
-              : node.recipe.recipeId
-          }
-          openLabel={t('recipe.calc.select')}
+          title={node.recipe.recipeId}
+          openLabel={t('Choose recipe', { note: 'recipe.calc.select' })}
           onOpen={() => onRequestPicker(node)}
         >
           {category?.icon ? (
@@ -170,11 +142,6 @@ export function NodeChips({
               className={mini ? 'size-3.5 shrink-0' : 'size-4'}
             />
           )}
-          {!mini && node.batches > 1 ? (
-            <span className="shrink-0 tabular-nums">
-              ×{formatCount(node.batches)}
-            </span>
-          ) : null}
           {hasAlternatives ? (
             <ChevronDown
               className={mini ? 'size-2.5 shrink-0' : 'size-3 shrink-0'}
@@ -191,7 +158,7 @@ export function NodeChips({
               ? `${node.tagId} ×${formatCount(members.length)}`
               : node.tagId
           }
-          openLabel={t('recipe.calc.member.title')}
+          openLabel={t('Choose tag member', { note: 'recipe.calc.member.title' })}
           onOpen={() => onRequestMemberPicker(node)}
           centerClassName="px-0.5"
         >
@@ -217,3 +184,4 @@ export function NodeChips({
     </div>
   );
 }
+