@terrafirmagreg-team/recipe 0.1.0 → 1.2.1

package/src/hooks/calc/flow/engage.ts

@@ -1,89 +0,0 @@
-'use client';
-
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  type Dispatch,
-  type RefObject,
-  type SetStateAction,
-} from 'react';
-import type { Edge } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
-import type {
-  AnyCalcFlowNode,
-  goalsToFlow,
-} from '@terrafirmagreg-team/recipe/lib/calc/flow';
-import type { ChevronEdgeHighlight } from '@terrafirmagreg-team/ui/types/canvas';
-import type { MountedNodes } from './mount';
-
-function adjacencyList(
-  map: Map<string, string[]>,
-  key: string | null,
-): string[] {
-  return key === null ? [] : (map.get(key) ?? []);
-}
-
-export function useEdgeEngage({
-  computed,
-  setState,
-  rawFlow,
-  focusIdRef,
-}: {
-  computed: { nodes: AnyCalcFlowNode[]; edges: Edge[] };
-  setState: Dispatch<SetStateAction<MountedNodes>>;
-  rawFlow: ReturnType<typeof goalsToFlow>;
-  focusIdRef: RefObject<string | null>;
-}) {
-  const engagedRef = useRef<string | null>(null);
-  const edgeAdjacency = useMemo(() => {
-    const map = new Map<string, string[]>();
-    for (const edge of computed.edges) {
-      const list = map.get(edge.source) ?? [];
-      list.push(edge.id);
-      map.set(edge.source, list);
-      const back = map.get(edge.target) ?? [];
-      back.push(edge.id);
-      map.set(edge.target, back);
-    }
-    return map;
-  }, [computed]);
-  const applyEngaged = useCallback(
-    (id: string | null) => {
-      const prev = engagedRef.current;
-      if (prev === id) return;
-      engagedRef.current = id;
-      const touched = new Set<string>();
-      for (const edgeId of adjacencyList(edgeAdjacency, prev)) {
-        touched.add(edgeId);
-      }
-      for (const edgeId of adjacencyList(edgeAdjacency, id)) {
-        touched.add(edgeId);
-      }
-      if (!touched.size) return;
-      setState((current) => {
-        let next = null as typeof current.edges | null;
-        current.edges.forEach((edge, index) => {
-          if (!touched.has(edge.id)) return;
-          const highlight = (edge.source === id
-            ? 'outgoing'
-            : edge.target === id
-              ? 'incoming'
-              : undefined) as ChevronEdgeHighlight;
-          if ((edge.data?.highlight ?? undefined) === highlight) return;
-          (next ??= current.edges.slice())[index] = {
-            ...edge,
-            data: { ...edge.data, highlight },
-          };
-        });
-        return next ? { ...current, edges: next } : current;
-      });
-    },
-    [edgeAdjacency, setState],
-  );
-  useEffect(() => {
-    engagedRef.current = null;
-    focusIdRef.current = null;
-  }, [rawFlow, focusIdRef]);
-  return applyEngaged;
-}

package/src/hooks/calc/flow/handlers.ts

@@ -1,115 +0,0 @@
-'use client';
-
-import {
-  useCallback,
-  type Dispatch,
-  type DragEvent,
-  type MouseEvent,
-  type SetStateAction,
-} from 'react';
-import { useReactFlow } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
-import type {
-  AnyCalcFlowNode,
-  CalcFlowData,
-} from '@terrafirmagreg-team/recipe/lib/calc/flow';
-import type { CalcKind, CalcNode } from '@terrafirmagreg-team/recipe/types/calc';
-
-export function useFlowHandlers({
-  data,
-  applyFocus,
-  applyEngaged,
-  centerOnNode,
-  setPickerNode,
-  setMovedNodes,
-}: {
-  data: Omit<
-    CalcFlowData,
-    'node' | 'mode' | 'direction' | 'onRequestPicker' | 'onRequestMemberPicker'
-  >;
-  applyFocus: (id: string | null) => void;
-  applyEngaged: (id: string | null) => void;
-  centerOnNode: (node: AnyCalcFlowNode) => void;
-  setPickerNode: (node: CalcNode | null) => void;
-  setMovedNodes: Dispatch<
-    SetStateAction<Map<string, { x: number; y: number }> | null>
-  >;
-}) {
-  const { screenToFlowPosition } = useReactFlow();
-
-  const handleNodeEnter = useCallback(
-    (_event: MouseEvent, node: AnyCalcFlowNode) => applyEngaged(node.id),
-    [applyEngaged],
-  );
-  const handleNodeLeave = useCallback(
-    () => applyEngaged(null),
-    [applyEngaged],
-  );
-  const handleNodeClick = useCallback(
-    (_event: MouseEvent, node: AnyCalcFlowNode) => {
-      applyFocus(node.id);
-      centerOnNode(node);
-    },
-    [applyFocus, centerOnNode],
-  );
-
-  const handleNodeDoubleClick = useCallback(
-    (_event: MouseEvent, node: AnyCalcFlowNode) => {
-      const target = (node.data as CalcFlowData).node;
-      if (!target) return;
-
-      if (target.recipe != null || target.availableRecipes.length > 0)
-        setPickerNode(target);
-    },
-    [setPickerNode],
-  );
-  const handlePaneClick = useCallback(
-    () => applyFocus(null),
-    [applyFocus],
-  );
-  const handleDragOver = useCallback((event: DragEvent) => {
-    if (event.dataTransfer.types.includes('application/x-tfg-calc')) {
-      event.preventDefault();
-      event.dataTransfer.dropEffect = 'copy';
-    }
-  }, []);
-  const handleDrop = useCallback(
-    (event: DragEvent) => {
-      const raw = event.dataTransfer.getData('application/x-tfg-calc');
-      if (!raw) return;
-      event.preventDefault();
-      try {
-        const parsed = JSON.parse(raw) as { id?: string; kind?: CalcKind };
-        if (parsed.id && (parsed.kind === 'item' || parsed.kind === 'fluid')) {
-
-          const pos = screenToFlowPosition({
-            x: event.clientX,
-            y: event.clientY,
-          });
-          setMovedNodes((prev) => {
-            const next = new Map(prev ?? []);
-            next.set('g0', pos);
-            return next;
-          });
-          data.onSetTarget(parsed.id, parsed.kind);
-        }
-      } catch {}
-    },
-    [screenToFlowPosition, data, setMovedNodes],
-  );
-
-  const fitRecipeNodes = useCallback(
-    (node: AnyCalcFlowNode) => node.data.node?.recipe != null,
-    [],
-  );
-
-  return {
-    handleNodeEnter,
-    handleNodeLeave,
-    handleNodeClick,
-    handleNodeDoubleClick,
-    handlePaneClick,
-    handleDragOver,
-    handleDrop,
-    fitRecipeNodes,
-  };
-}

package/src/hooks/calc/flow/layout.ts

@@ -1,149 +0,0 @@
-'use client';
-
-import {
-  startTransition,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  densityGaps,
-  goalsToFlow,
-  type CalcDensity,
-  type CalcDirection,
-  type CalcEdgeStyle,
-  type CalcFlowData,
-  type CalcViewMode,
-} from '@terrafirmagreg-team/recipe/lib/calc/flow';
-import { packGoals } from '@terrafirmagreg-team/recipe/lib/calc/pack';
-import type { CalcGoal } from '@terrafirmagreg-team/recipe/lib/calc/tree';
-import type { CalcNode } from '@terrafirmagreg-team/recipe/types/calc';
-
-export function useFlowLayout({
-  goals,
-  data,
-  mode,
-  direction,
-  density,
-  edgeStyle,
-  treeReady,
-  onRequestPicker,
-  onRequestMemberPicker,
-}: {
-  goals: CalcGoal[];
-  data: Omit<
-    CalcFlowData,
-    'node' | 'mode' | 'direction' | 'onRequestPicker' | 'onRequestMemberPicker'
-  >;
-  mode: CalcViewMode;
-  direction: CalcDirection;
-  density: CalcDensity;
-  edgeStyle: CalcEdgeStyle;
-  treeReady: boolean;
-  onRequestPicker: (node: CalcNode) => void;
-  onRequestMemberPicker: (node: CalcNode) => void;
-}) {
-  const layoutData = useMemo(
-    () =>
-      ({
-        mode,
-        direction,
-        recipeBody: data.recipeBody,
-        onRequestPicker,
-        onRequestMemberPicker,
-      }) as Omit<CalcFlowData, 'node'>,
-    [
-      mode,
-      direction,
-      data.recipeBody,
-      onRequestPicker,
-      onRequestMemberPicker,
-    ],
-  );
-  const flowData = useMemo(
-    () => ({ ...data, ...layoutData }) as Omit<CalcFlowData, 'node'>,
-    [data, layoutData],
-  );
-  const rawFlow = useMemo(
-    () => goalsToFlow(goals, flowData, edgeStyle),
-    [goals, flowData, edgeStyle],
-  );
-
-  const layoutKey = useMemo(() => {
-    const ns = rawFlow.nodes
-      .map((n) => `${n.id}:${n.width}x${n.height}`)
-      .join(',');
-    const es = rawFlow.edges.map((e) => e.id).join(',');
-    return `${direction}|${density}|${ns}|${es}`;
-  }, [rawFlow, direction, density]);
-
-  const [layout, setLayout] = useState<{ key: string } | null>(null);
-
-  const [posCache, setPosCache] = useState<
-    Map<string, { x: number; y: number }>
-  >(() => new Map());
-  useEffect(() => {
-    if (layout?.key === layoutKey) return;
-
-    const key = layoutKey;
-    const positions = packGoals(goals, {
-      mode,
-      direction,
-      gaps: densityGaps(density),
-      recipeBody: data.recipeBody,
-    });
-    startTransition(() => {
-      setPosCache(positions);
-      setLayout({ key });
-    });
-  }, [
-    layoutKey,
-    layout,
-    direction,
-    density,
-    goals,
-    mode,
-    data.recipeBody,
-  ]);
-
-  const positioned = useMemo(() => {
-
-    const nodes = rawFlow.nodes.flatMap((node) => {
-      const position = posCache.get(node.id);
-      return position ? [{ ...node, position }] : [];
-    });
-    const present = new Set(nodes.map((node) => node.id));
-    const edges = rawFlow.edges.filter(
-      (edge) => present.has(edge.source) && present.has(edge.target),
-    );
-    return { nodes, edges };
-  }, [rawFlow, posCache]);
-
-  const [pin, setPin] = useState<{ x: number; y: number } | null>(null);
-  const anchor = rawFlow.nodes.find((node) => node.id === 'g0');
-  if (treeReady && pin) setPin(null);
-  if (!treeReady && anchor && !pin) {
-    setPin({ ...anchor.position });
-  }
-  const shift = useMemo(
-    () =>
-      pin && anchor
-        ? { x: pin.x - anchor.position.x, y: pin.y - anchor.position.y }
-        : null,
-    [pin, anchor],
-  );
-
-  return {
-    rawFlow,
-    layout,
-    layoutKey,
-    positioned,
-    shift,
-    resetLayout: useCallback(() => {
-      setPosCache(new Map());
-      setPin(null);
-      setLayout(null);
-    }, []),
-  };
-}

package/src/hooks/calc/flow/pickers.ts

@@ -1,50 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useState } from 'react';
-import type { CalcGoal } from '@terrafirmagreg-team/recipe/lib/calc/tree';
-import type { CalcNode } from '@terrafirmagreg-team/recipe/types/calc';
-
-export function useFlowPickers(goals: CalcGoal[]) {
-  const [pickerNode, setPickerNode] = useState<CalcNode | null>(null);
-  const [memberNode, setMemberNode] = useState<CalcNode | null>(null);
-  const onRequestPicker = useCallback(
-    (node: CalcNode) => setPickerNode(node),
-    [],
-  );
-  const onRequestMemberPicker = useCallback(
-    (node: CalcNode) => setMemberNode(node),
-    [],
-  );
-
-  useEffect(() => {
-    if (!pickerNode?.path && !memberNode?.path) return;
-    const find = (n: CalcNode, want?: CalcNode): CalcNode | undefined => {
-      if (n === want || (want?.path != null && n.path === want.path))
-        return n;
-      for (const child of n.children) {
-        const hit = find(child, want);
-        if (hit) return hit;
-      }
-      return undefined;
-    };
-    for (const goal of goals) {
-      for (const [node, set] of [
-        [pickerNode, setPickerNode],
-        [memberNode, setMemberNode],
-      ] as const) {
-        if (!node) continue;
-        const live = find(goal.node, node);
-        if (live && live !== node) set(live);
-      }
-    }
-  }, [goals, pickerNode, memberNode]);
-
-  return {
-    pickerNode,
-    setPickerNode,
-    memberNode,
-    setMemberNode,
-    onRequestPicker,
-    onRequestMemberPicker,
-  };
-}

package/src/hooks/calc/use-calc-fill.ts

@@ -1,91 +0,0 @@
-'use client';
-
-import {
-  useCallback,
-  type Dispatch,
-  type SetStateAction,
-} from 'react';
-import {
-  calcStorageKey,
-  readCalcActive,
-  updateCalcTab,
-} from '@terrafirmagreg-team/recipe/lib/calc/storage';
-
-export function useCalcFill({
-  dataset,
-  hasTarget,
-  fillTree,
-  setResetGen,
-}: {
-  dataset: string;
-  hasTarget: boolean;
-  fillTree: (roots: readonly string[]) => Promise<Record<string, string>>;
-  setResetGen: Dispatch<SetStateAction<number>>;
-}) {
-
-  const mergeFill = useCallback(
-    (
-      tabId: string | null,
-      roots: readonly string[],
-      picked: Record<string, string>,
-    ) => {
-      if (!tabId) return;
-      const key = calcStorageKey('recipe', dataset);
-      updateCalcTab(key, tabId, (tab) => {
-        const current = tab.state;
-        const underRoot = (key: string) =>
-          roots.some((root) => key === root || key.startsWith(`${root}/`));
-        return {
-          ...tab,
-          savedAt: Date.now(),
-          state: {
-            target: current.target,
-            inventory: current.inventory,
-
-            selections: {
-              ...Object.fromEntries(
-                Object.entries(current.selections).filter(
-                  ([key]) => !underRoot(key),
-                ),
-              ),
-              ...picked,
-            },
-            tagSelections: current.tagSelections,
-            collapsed: (current.collapsed ?? []).filter(
-              (p) => !underRoot(p),
-            ),
-            auto: [
-              ...new Set([
-                ...(current.auto ?? []),
-                ...roots.filter((path) => /^g0(\/|$)/.test(path)),
-              ]),
-            ],
-          },
-        };
-      });
-    },
-    [dataset],
-  );
-
-  const onFillNode = useCallback(
-    (path: string) => {
-      const tabId = readCalcActive(calcStorageKey('recipe', dataset));
-      void fillTree([path]).then((picked) => {
-        setResetGen((gen) => gen + 1);
-        mergeFill(tabId, [path], picked);
-      });
-    },
-    [fillTree, mergeFill, dataset, setResetGen],
-  );
-
-  const onAutoBuild = useCallback(() => {
-    const tabId = readCalcActive(calcStorageKey('recipe', dataset));
-    const roots = hasTarget ? ['g0'] : [];
-    void fillTree(roots).then((picked) => {
-      setResetGen((gen) => gen + 1);
-      mergeFill(tabId, roots, picked);
-    });
-  }, [hasTarget, fillTree, mergeFill, dataset, setResetGen]);
-
-  return { onFillNode, onAutoBuild };
-}

package/src/hooks/calc/use-density.ts

@@ -1,28 +0,0 @@
-'use client';
-
-import { startTransition, useCallback } from 'react';
-import {
-  createStoredValue,
-  type StoredCodec,
-} from '@terrafirmagreg-team/ui/lib/utils/stored-value';
-import type { CalcDensity } from '@terrafirmagreg-team/recipe/lib/calc/flow';
-
-const codec: StoredCodec<CalcDensity> = {
-  read: (raw) => {
-    const stored = Number(raw);
-    return Number.isFinite(stored) && raw != null && stored >= 0 && stored <= 100
-      ? stored / 100
-      : 0;
-  },
-  write: (value) => String(Math.round(Math.min(1, Math.max(0, value)) * 100)),
-};
-const useStoredDensity = createStoredValue('calc:density', codec);
-
-export function useCalcDensity() {
-  const [density, setStored] = useStoredDensity();
-  const setDensity = useCallback(
-    (next: CalcDensity) => startTransition(() => setStored(next)),
-    [setStored],
-  );
-  return [density, setDensity] as const;
-}