@terrafirmagreg-team/recipe 0.1.0 → 1.2.0

package/src/types/index.ts

@@ -1,6 +1,7 @@
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
 import type { DatasetLanding } from '@terrafirmagreg-team/kit/types';
-import type { DumpCreativeTab } from '@terrafirmagreg-team/game/lib/dump/data/tab/dto';
+import type { DumpCreativeTab } from '@terrafirmagreg-team/dump/lib/dump/data/tab/dto';
 import type { DumpRecipeCategory } from '@terrafirmagreg-team/recipe/lib/data/category/dto';
 import type { Recipe } from '@terrafirmagreg-team/recipe/lib/data/dto';
 
@@ -108,7 +109,7 @@ export type CategoryGroup = { category: string; rows: RecipeCompactRow[] };
 
 export type RecipeSession = {
   page: RecipePageData;
-  dataset: string;
+  dataset: DatasetRef;
   lang: Lang;
   place?: RecipePlace;
   placeOpts: Pick<RecipeHrefOpts, 'type' | 'tool'>;
@@ -132,3 +133,4 @@ export type RecipeSession = {
   langMap: Record<string, string>;
   used: UsedItems;
 };
+

package/styles/calc.css

@@ -1,47 +1,308 @@
-.calc-edge--catalyst {
-  opacity: 0.4;
-}
-
-.calc-edge--circuit .chevron-edge__base {
-  stroke: color-mix(
-    in oklab,
-    var(--color-primary) 45%,
-    var(--color-muted-foreground)
-  );
-}
-
-.calc-flow .react-flow__node:not(.dragging) {
-  transition: transform 240ms ease;
-}
-
-.calc-flow .react-flow__node-calcMaterial[style*='--calc-delay'] {
-  animation: calc-node-in 200ms ease-out both;
-  animation-delay: var(--calc-delay, 0ms);
-}
-
-.calc-flow
-  .react-flow__node-calcMaterial[style*='--calc-delay']
-  [data-calc-card] {
-  animation: calc-card-in 200ms ease-out both;
-  animation-delay: var(--calc-delay, 0ms);
-}
-
-@keyframes calc-node-in {
-  from {
-    opacity: 0;
-  }
-}
-
-@keyframes calc-card-in {
-  from {
-    transform: translateY(6px) scale(0.92);
-  }
-}
-
-.react-flow__node.calc-node--focus [data-calc-card] {
-  box-shadow: 0 0 0 2px var(--color-primary);
-}
-
-.calc-flow--dots .react-flow__edges {
-  display: none;
-}
+.calc-edge--link .chevron-edge__base {
+  stroke-dasharray: 5 4;
+  stroke: color-mix(
+    in oklab,
+    var(--color-primary) 65%,
+    var(--color-muted-foreground)
+  );
+}
+
+.calc-flow .react-flow__node {
+  cursor: default;
+}
+
+.calc-flow .react-flow__node.dragging {
+  cursor: grabbing;
+}
+
+.calc-rail {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  z-index: 25;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  gap: 2px;
+  overflow: hidden;
+  width: 20px;
+  pointer-events: none;
+}
+
+.calc-rail .calc-port {
+  pointer-events: auto;
+}
+
+.calc-rail--in {
+  right: calc(100% - 10px);
+  align-items: flex-start;
+}
+
+.calc-rail--out {
+  left: calc(100% - 10px);
+  align-items: flex-end;
+}
+
+.calc-port {
+  position: absolute;
+  display: grid;
+  width: 20px;
+  height: 20px;
+  place-items: center;
+  border-radius: 3px;
+  border: 1px solid;
+  background: var(--color-card);
+  padding: 0;
+  z-index: 25;
+  cursor: default;
+}
+
+.calc-rail .calc-port {
+  position: relative;
+  flex: none;
+  inset: auto;
+  transform: none;
+}
+
+.calc-port--ghost {
+  opacity: 0;
+  pointer-events: none;
+  border-color: transparent;
+  background: transparent;
+}
+
+.calc-port-inner {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+
+.calc-port.connectionindicator {
+  cursor: default;
+}
+
+.calc-port--in.connectionindicator {
+  cursor: pointer;
+}
+
+.calc-port--out.connectionindicator {
+  cursor: pointer;
+}
+
+.calc-port--out {
+  border-color: var(--color-red-400, #f87171);
+  background: color-mix(in oklab, var(--color-red-400, #f87171) 14%, var(--color-card));
+  cursor: pointer;
+}
+
+.calc-port--out:hover,
+.calc-port--out.connectablestart {
+  background: color-mix(in oklab, var(--color-red-400, #f87171) 30%, var(--color-card));
+}
+
+.calc-port--over {
+  border-color: var(--color-red-500, #ef4444);
+  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--color-red-500, #ef4444) 55%, transparent);
+}
+
+.calc-port--in {
+  border-color: var(--color-emerald-500, #10b981);
+  background: color-mix(in oklab, var(--color-emerald-500, #10b981) 10%, var(--color-card));
+  cursor: pointer;
+}
+
+.calc-port--in:hover,
+.calc-port--in.connectableend:hover {
+  background: color-mix(in oklab, var(--color-emerald-500, #10b981) 28%, var(--color-card));
+}
+
+.calc-port--open {
+  border-style: dashed;
+}
+
+.calc-port--open .calc-port-inner {
+  opacity: 0.55;
+}
+
+.calc-port--partial {
+  border-color: var(--color-amber-400, #fbbf24);
+  background: color-mix(in oklab, var(--color-amber-400, #fbbf24) 12%, var(--color-card));
+}
+
+.calc-port--full {
+  border-color: var(--color-emerald-500, #10b981);
+  background: color-mix(in oklab, var(--color-emerald-500, #10b981) 16%, var(--color-card));
+}
+
+.calc-port--cat {
+  border-style: dotted;
+}
+
+.calc-port--more {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  height: 20px;
+  border: 1px dashed color-mix(in oklab, var(--color-muted-foreground) 45%, transparent);
+  background: var(--color-card);
+  color: var(--color-muted-foreground);
+  font-size: 7px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.calc-port--more:hover {
+  color: var(--color-foreground);
+  border-color: var(--color-muted-foreground);
+}
+
+.calc-port-count {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  z-index: 1;
+  pointer-events: none;
+  white-space: nowrap;
+  font-size: 8px;
+  font-weight: 600;
+  line-height: 1;
+  padding-bottom: 0.5px;
+  color: var(--color-foreground);
+  text-shadow:
+    0 0 2px var(--color-card),
+    0 1px 1px var(--color-card),
+    1px 0 1px var(--color-card),
+    -1px 0 1px var(--color-card),
+    0 -1px 1px var(--color-card);
+}
+
+.calc-port-count[data-len='l'] {
+  font-size: 7px;
+}
+
+.calc-port-count[data-len='xl'] {
+  font-size: 6px;
+}
+
+.calc-edge--wire.selected .chevron-edge__base,
+.react-flow__edge.selected .chevron-edge__base {
+  stroke: var(--color-primary);
+}
+
+.calc-flow .react-flow__node:not(.dragging) {
+  transition: transform 240ms ease;
+}
+
+.calc-flow .react-flow__node-calcMaterial[style*='--calc-delay'] {
+  animation: calc-node-in 200ms ease-out both;
+  animation-delay: var(--calc-delay, 0ms);
+}
+
+.calc-flow
+  .react-flow__node-calcMaterial[style*='--calc-delay']
+  [data-calc-card] {
+  animation: calc-card-in 200ms ease-out both;
+  animation-delay: var(--calc-delay, 0ms);
+}
+
+@keyframes calc-node-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes calc-card-in {
+  from {
+    transform: translateY(6px) scale(0.92);
+  }
+}
+
+.react-flow__node.calc-node--focus [data-calc-card] {
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+.calc-flow--dots .react-flow__edges {
+  display: none;
+}
+
+.calc-edge-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  background: var(--color-card);
+  padding: 1px 4px;
+  font-size: 9px;
+  line-height: 1.3;
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.calc-edge-label > span:first-child {
+  line-height: 0;
+}
+
+.calc-edge-label:hover {
+  color: var(--color-foreground);
+  border-color: var(--color-muted-foreground);
+}
+
+.calc-edge-label__name {
+  max-width: 90px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-foreground);
+}
+
+.calc-edge-label__cut {
+  display: none;
+  color: var(--color-red-500, #ef4444);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.calc-edge-label__input {
+  width: 56px;
+  border-radius: 4px;
+  border: 1px solid var(--color-primary);
+  background: var(--color-card);
+  padding: 1px 4px;
+  font-size: 10px;
+  outline: none;
+}
+
+.calc-flow--shift .react-flow__edge {
+  cursor: pointer;
+}
+
+.calc-flow--shift
+  .react-flow__edge:hover
+  .calc-edge-label
+  .calc-edge-label__amount {
+  display: none;
+}
+
+.calc-flow--shift .react-flow__edge:hover .calc-edge-label .calc-edge-label__cut {
+  display: inline;
+}
+
+.calc-flow--shift .react-flow__edge:hover .chevron-edge__base {
+  stroke: var(--color-red-500, #ef4444);
+}
+
+.react-flow__node.calc-node--dim {
+  opacity: 0.35;
+  transition: opacity 160ms ease;
+}
+
+.react-flow__node.calc-node--chain [data-calc-card] {
+  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--color-primary) 65%, transparent);
+}

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

@@ -1,26 +0,0 @@
-'use client';
-
-import { useRef, type ReactNode } from 'react';
-import { useElementSize } from '@terrafirmagreg-team/ui/hooks/use-element-size';
-
-export function FitCard({
-  w,
-  children,
-}: {
-  w: number;
-  children: ReactNode;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const { w: avail } = useElementSize(ref);
-  const fit = w > 0 && avail > 0 ? Math.min(1, avail / w) : 1;
-  return (
-    <div ref={ref} className="w-full">
-      <div
-        className="mx-auto w-fit"
-        style={fit < 1 ? { zoom: fit } : undefined}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

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

@@ -1,271 +0,0 @@
-'use client';
-
-import { useState, type ReactNode } from 'react';
-import {
-  ChevronDown,
-  Crosshair,
-  Minus,
-  Package,
-  Plus,
-  Trash2,
-  X,
-  Zap,
-} from 'lucide-react';
-import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
-import { useSidebar } from '@terrafirmagreg-team/ui/hooks/sidebar';
-import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
-import { Input } from '@terrafirmagreg-team/ui/components/ui/input';
-import { Badge } from '@terrafirmagreg-team/ui/components/ui/badge';
-import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
-import { formatCount } from '@terrafirmagreg-team/ui/lib/utils/format';
-import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
-import type {
-  CalcMaterial,
-  CalculatorTarget,
-} from '@terrafirmagreg-team/recipe/types/calc';
-import type { IconItem } from '@terrafirmagreg-team/recipe/lib/calc/meta';
-import { IconPicker } from '@terrafirmagreg-team/recipe/components/views/calc/trees/icon-picker';
-
-const clamp = (value: number) => Math.max(1, Math.round(value) || 1);
-
-function AmountRow({
-  row,
-  dataset,
-  lang,
-  langMap,
-  onAmount,
-  onRemove,
-  onFocus,
-  trailing,
-}: {
-  row: CalcMaterial;
-  dataset: string;
-  lang: string;
-  langMap?: Record<string, string>;
-  onAmount: (amount: number) => void;
-  onRemove?: () => void;
-  onFocus?: (id: string) => void;
-  trailing?: ReactNode;
-}) {
-  const t = useTranslations();
-  return (
-    <div className="group flex items-center gap-1 rounded-md px-1 py-0.5 hover:bg-accent/50">
-      <button
-        type="button"
-        className="flex min-w-0 flex-1 items-center text-start"
-        onClick={() => onFocus?.(row.id)}
-      >
-        <Entry
-          id={row.id}
-          kind={row.kind}
-          dataset={dataset}
-          lang={lang}
-          langMap={langMap}
-          size="sm"
-          labeled
-          href={false}
-          tooltip="adaptive"
-          className="min-w-0 flex-1 justify-start truncate"
-        />
-      </button>
-      <span className="flex shrink-0 items-center">
-        {trailing}
-        <IconButton
-          variant="ghost"
-          size="icon-xs"
-          tooltip={false}
-          label="-"
-          className="size-5"
-          onClick={() => onAmount(clamp(row.amount - 1))}
-        >
-          <Minus className="size-3" />
-        </IconButton>
-        <Input
-          type="number"
-          min={1}
-          value={row.amount}
-          onChange={(event) =>
-            onAmount(clamp(Number(event.target.value)))
-          }
-          onWheel={(event) => {
-            if (document.activeElement !== event.currentTarget) return;
-            event.preventDefault();
-            onAmount(clamp(row.amount + (event.deltaY < 0 ? 1 : -1)));
-          }}
-          className="h-6 w-11 border-0 bg-transparent px-0.5 py-0 text-center text-xs shadow-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-        />
-        <IconButton
-          variant="ghost"
-          size="icon-xs"
-          tooltip={false}
-          label="+"
-          className="size-5"
-          onClick={() => onAmount(clamp(row.amount + 1))}
-        >
-          <Plus className="size-3" />
-        </IconButton>
-        {onRemove ? (
-          <IconButton
-            variant="ghost"
-            size="icon-xs"
-            tooltip={false}
-            label={t('recipe.calc.remove.title')}
-            className="size-5 opacity-0 transition-opacity group-hover:opacity-100"
-            onClick={onRemove}
-          >
-            <X className="size-3" />
-          </IconButton>
-        ) : null}
-      </span>
-    </div>
-  );
-}
-
-export function CalcTarget({
-  dataset,
-  lang,
-  langMap,
-  target,
-  inventory,
-  iconItems,
-  ideal,
-  onAmount,
-  onStockAmount,
-  onRemoveTarget,
-  onRemoveStock,
-  onAddStock,
-  onApplyIdeal,
-  onClear,
-  onFocus,
-}: {
-  dataset: string;
-  lang: string;
-  langMap?: Record<string, string>;
-  target: CalculatorTarget | null;
-  inventory: CalcMaterial[];
-  iconItems?: IconItem[];
-  ideal: number;
-  onAmount: (amount: number) => void;
-  onStockAmount: (index: number, amount: number) => void;
-  onRemoveTarget: () => void;
-  onRemoveStock: (index: number) => void;
-  onAddStock: (materialId: string, kind: CalcMaterial['kind']) => void;
-  onApplyIdeal: () => void;
-  onClear?: () => void;
-  onFocus?: (id: string) => void;
-}) {
-  const t = useTranslations();
-  const { collapsed } = useSidebar();
-  const [open, setOpen] = useState(true);
-  if (!target && !inventory.length) return null;
-  const showIdeal = Number.isFinite(ideal) && ideal > 1;
-  return (
-    <div
-      className="nodrag absolute left-2 top-2 z-10 flex w-60 flex-col items-start gap-1 max-md:top-12"
-      style={
-        collapsed
-          ? { top: 'calc(var(--header-height) + 2.5rem)' }
-          : undefined
-      }
-    >
-      <Badge variant="secondary" className="h-4 rounded-sm px-1 text-[9px]">
-        {t('recipe.calc.experimental')}
-      </Badge>
-      <div className="w-60 overflow-hidden rounded-md border bg-card">
-        <div className="flex items-center gap-1 border-b border-border/60 px-2 py-1">
-          <Crosshair className="size-3.5 shrink-0 text-muted-foreground" />
-          <span className="min-w-0 flex-1 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-            {t('recipe.calc.goal')}
-          </span>
-          {onClear ? (
-            <IconButton
-              variant="ghost"
-              size="icon-xs"
-              tooltip={false}
-              label={t('recipe.calc.clear.title')}
-              className="size-5"
-              onClick={onClear}
-            >
-              <Trash2 className="size-3" />
-            </IconButton>
-          ) : null}
-          <IconButton
-            variant="ghost"
-            size="icon-xs"
-            tooltip={false}
-            label={t('recipe.calc.collapse')}
-            className={cn('size-5', !open && '-rotate-180')}
-            onClick={() => setOpen((prev) => !prev)}
-          >
-            <ChevronDown className="size-3" />
-          </IconButton>
-        </div>
-        {open ? (
-          <div className="max-h-56 overflow-y-auto p-1">
-            {target ? (
-              <AmountRow
-                row={target}
-                dataset={dataset}
-                lang={lang}
-                langMap={langMap}
-                onAmount={onAmount}
-                onRemove={onRemoveTarget}
-                onFocus={onFocus}
-                trailing={
-                  showIdeal ? (
-                    <IconButton
-                      variant="ghost"
-                      size="icon-xs"
-                      tooltip={false}
-                      label={t('recipe.calc.ideal', {
-                        variables: { count: formatCount(ideal) },
-                      })}
-                      className="size-5 text-primary"
-                      onClick={onApplyIdeal}
-                    >
-                      <Zap className="size-3" />
-                    </IconButton>
-                  ) : undefined
-                }
-              />
-            ) : null}
-            {target || inventory.length ? (
-              <>
-                <div className="mt-1 flex items-center gap-1 border-t border-border/60 px-2 pt-1.5 pb-0.5">
-                  <Package className="size-3 shrink-0 text-muted-foreground" />
-                  <span className="min-w-0 flex-1 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-                    {t('recipe.calc.stock')}
-                  </span>
-                  <span className="shrink-0 tabular-nums text-[10px] text-muted-foreground/70">
-                    {inventory.length}
-                  </span>
-                  {iconItems?.length ? (
-                    <IconPicker
-                      items={iconItems}
-                      meta={{ dataset, lang, langMap }}
-                      onPick={(item) => onAddStock(item.id, item.kind)}
-                      label={t('recipe.calc.add.stock')}
-                      icon={<Plus className="size-3" />}
-                      alwaysVisible
-                    />
-                  ) : null}
-                </div>
-                {inventory.map((row, index) => (
-                  <AmountRow
-                    key={`${row.kind}:${row.id}`}
-                    row={row}
-                    dataset={dataset}
-                    lang={lang}
-                    langMap={langMap}
-                    onAmount={(amount) => onStockAmount(index, amount)}
-                    onRemove={() => onRemoveStock(index)}
-                  />
-                ))}
-              </>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-}