minecraft-inventory 0.1.0 → 0.1.2

package/src/components/JEI/JEI.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react'
+import React, { useState, useMemo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import type { ItemStack, RecipeGuide, RecipeNavFrame } from '../../types'
 import { useScale } from '../../context/ScaleContext'
 import { useInventoryContext } from '../../context/InventoryContext'
@@ -16,7 +16,12 @@ export interface JEIItem {
 interface JEIProps {
   items?: JEIItem[]
   position?: 'left' | 'right'
+  /** Override number of item columns (default: ITEMS_PER_ROW=6). Set by InventoryOverlay from slot-grid calc. */
+  cols?: number
+  /** Override panel width in px. If omitted, derived from cols. */
   width?: number
+  /** Max height in px for the panel. Controls rows visible. */
+  maxHeight?: number
   onItemClick?: (item: JEIItem) => void
   onItemMiddleClick?: (item: JEIItem) => void
   /** Called when R is pressed while hovering an item — return list of recipes to display */
@@ -55,7 +60,9 @@ function saveFavorites(favs: Set<string>) {
 export function JEI({
   items = [],
   position = 'right',
+  cols: colsProp,
   width,
+  maxHeight,
   onItemClick,
   onItemMiddleClick,
   onGetRecipes,
@@ -73,6 +80,38 @@ export function JEI({
   // Map from negative slot index → JEI item (to enable F-key and R/U on hover)
   const slotToItemRef = useRef<Map<number, JEIItem>>(new Map())
 
+  // Self-measured dimensions so the panel can be width:100% and fill its container
+  const rootRef = useRef<HTMLDivElement>(null)
+  const gridRef = useRef<HTMLDivElement>(null)
+  const [measuredCols, setMeasuredCols] = useState(ITEMS_PER_ROW)
+  const [measuredRows, setMeasuredRows] = useState(5)
+
+  useLayoutEffect(() => {
+    const root = rootRef.current
+    const grid = gridRef.current
+    if (!root || !grid) return
+
+    // Track latest sizes across both entries
+    const sizes = { rootW: 0, gridH: 0 }
+
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === (root as unknown as Element)) {
+          sizes.rootW = entry.contentRect.width
+        } else if (entry.target === (grid as unknown as Element)) {
+          sizes.gridH = entry.contentRect.height
+        }
+      }
+      const innerPad = PADDING * scale * 2
+      setMeasuredCols(Math.max(1, Math.floor((sizes.rootW - innerPad) / contentSize)))
+      setMeasuredRows(Math.max(1, Math.floor(sizes.gridH / contentSize)))
+    })
+
+    ro.observe(root as unknown as Element)
+    ro.observe(grid as unknown as Element)
+    return () => ro.disconnect()
+  }, [scale, contentSize])
+
   const pushRecipeFrame = useCallback((targetItem: JEIItem, mode: 'recipes' | 'usages') => {
     const getter = mode === 'recipes' ? onGetRecipes : onGetUsages
     if (!getter || !onPushRecipeFrame) return
@@ -83,9 +122,12 @@ export function JEI({
 
   const padding = PADDING * scale
   const itemSize = contentSize
-  const cols = ITEMS_PER_ROW
-  const panelWidth = width ?? cols * itemSize + padding * 2
-  const rows = Math.floor((300 * scale) / itemSize)
+  // cols: explicit prop > internal measurement > default
+  const cols = colsProp ?? measuredCols
+  // panelWidth: explicit prop > 100% (container controls width)
+  const panelWidth = width ?? '100%'
+  // rows: explicit maxHeight override > internal measurement
+  const rows = maxHeight ? Math.max(1, Math.floor(maxHeight / itemSize)) : measuredRows
   const itemsPerPage = cols * rows
 
   const toggleFavorite = useCallback((key: string) => {
@@ -149,7 +191,7 @@ export function JEI({
   }, [])
 
   const handleWheel = useCallback(
-    (e: React.WheelEvent<HTMLDivElement>) => {
+    (e: WheelEvent) => {
       e.preventDefault()
       setPage((prev) => {
         if (e.deltaY > 0) return Math.min(prev + 1, totalPages - 1)
@@ -159,6 +201,14 @@ export function JEI({
     [totalPages],
   )
 
+  // Non-passive wheel listener so preventDefault() actually suppresses page scroll.
+  useEffect(() => {
+    const el = gridRef.current
+    if (!el) return
+    el.addEventListener('wheel', handleWheel, { passive: false })
+    return () => el.removeEventListener('wheel', handleWheel)
+  }, [handleWheel])
+
   // Build slot→item map on each render
   slotToItemRef.current.clear()
   visibleItems.forEach((jeiItem, i) => {
@@ -168,18 +218,27 @@ export function JEI({
 
   return (
     <div
+      ref={rootRef}
       className={['mc-inv-root', styles.jei, className].filter(Boolean).join(' ')}
       style={{
         width: panelWidth,
-        background: '#c6c6c6',
-        border: `${scale}px solid #555555`,
+        maxHeight: maxHeight ?? undefined,
         display: 'flex',
         flexDirection: 'column',
+        overflow: 'hidden',
         ...style,
       }}
     >
-      {/* Search + pagination controls */}
-      <div style={{ padding: `${padding}px`, borderBottom: `${scale}px solid #555555` }}>
+      {/* Search + pagination controls — background only here */}
+      <div
+        className="mc-inv-jei-header"
+        style={{
+          padding: `${padding}px`,
+          background: '#c6c6c6',
+          border: `${scale}px solid #555555`,
+          flexShrink: 0,
+        }}
+      >
         <input
           type="text"
           value={search}
@@ -199,14 +258,17 @@ export function JEI({
           }}
         />
         {/* Prev / Next / Favorites below search bar */}
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: scale,
-          marginTop: 2 * scale,
-          fontSize: 6 * scale,
-          fontFamily: "'Minecraftia', 'Minecraft', monospace",
-        }}>
+        <div
+          className="mc-inv-jei-pagination"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: scale,
+            marginTop: 2 * scale,
+            fontSize: 6 * scale,
+            fontFamily: "'Minecraftia', 'Minecraft', monospace",
+          }}
+        >
           <button
             className={styles.pageBtn}
             onClick={() => setPage((p) => Math.max(0, p - 1))}
@@ -216,7 +278,7 @@ export function JEI({
           >
             ◀
           </button>
-          <span style={{ flex: 1, textAlign: 'center', color: '#404040' }}>
+          <span className="mc-inv-jei-page-counter" style={{ flex: 1, textAlign: 'center', color: '#404040' }}>
             {page + 1} / {Math.max(1, totalPages)}
           </span>
           <button
@@ -241,6 +303,8 @@ export function JEI({
 
       {/* Item grid — no slot backgrounds, just raw items */}
       <div
+        ref={gridRef}
+        className="mc-inv-jei-grid"
         style={{
           position: 'relative',
           display: 'flex',
@@ -251,7 +315,6 @@ export function JEI({
           alignContent: 'flex-start',
           overflowY: 'hidden',
         }}
-        onWheel={handleWheel}
       >
         {visibleItems.map((jeiItem, i) => {
           const itemStack: ItemStack = {
@@ -266,6 +329,7 @@ export function JEI({
           return (
             <div
               key={`${jeiItem.type}-${jeiItem.metadata ?? 0}-${i}`}
+              className="mc-inv-jei-item-wrapper"
               style={{ position: 'relative' }}
             >
               <Slot
@@ -282,16 +346,21 @@ export function JEI({
                 }}
               />
               {isFav && (
-                <span style={{
-                  position: 'absolute',
-                  top: 0,
-                  right: 0,
-                  fontSize: Math.round(5 * scale),
-                  color: '#ffcc00',
-                  lineHeight: 1,
-                  pointerEvents: 'none',
-                  textShadow: `0 0 ${scale}px rgba(0,0,0,0.8)`,
-                }}>★</span>
+                <span
+                  className="mc-inv-jei-favorite-star"
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    fontSize: Math.round(5 * scale),
+                    color: '#ffcc00',
+                    lineHeight: 1,
+                    pointerEvents: 'none',
+                    textShadow: `0 0 ${scale}px rgba(0,0,0,0.8)`,
+                  }}
+                >
+                  ★
+                </span>
               )}
             </div>
           )

package/src/components/Notes/Notes.tsx

@@ -0,0 +1,237 @@
+import React, { useState, useCallback, useEffect } from 'react'
+import { useScale } from '../../context/ScaleContext'
+
+export interface Note {
+  id: number
+  text: string
+}
+
+interface NotesProps {
+  /** Callback to get notes. If not provided, uses localStorage. */
+  onGetNotes?: () => Note[] | Promise<Note[]>
+  /** Callback to save notes. If not provided, uses localStorage. */
+  onSaveNotes?: (notes: Note[]) => void | Promise<void>
+  /** Storage key for localStorage (default: 'mc-inv-notes') */
+  storageKey?: string
+  className?: string
+  style?: React.CSSProperties
+}
+
+const DEFAULT_STORAGE_KEY = 'mc-inv-notes'
+
+function loadNotesFromStorage(key: string): Note[] {
+  try {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : []
+  } catch {
+    return []
+  }
+}
+
+function saveNotesToStorage(key: string, notes: Note[]) {
+  try {
+    localStorage.setItem(key, JSON.stringify(notes))
+  } catch {}
+}
+
+export function Notes({
+  onGetNotes,
+  onSaveNotes,
+  storageKey = DEFAULT_STORAGE_KEY,
+  className,
+  style,
+}: NotesProps) {
+  const { scale } = useScale()
+  const [notes, setNotes] = useState<Note[]>([])
+  const [draft, setDraft] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  // Load notes on mount
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+
+    const loadNotes = async () => {
+      if (onGetNotes) {
+        try {
+          const loaded = await onGetNotes()
+          if (!cancelled) {
+            setNotes(loaded)
+            setLoading(false)
+          }
+        } catch (err) {
+          console.error('Failed to load notes:', err)
+          if (!cancelled) {
+            setNotes([])
+            setLoading(false)
+          }
+        }
+      } else {
+        // Use localStorage
+        const loaded = loadNotesFromStorage(storageKey)
+        if (!cancelled) {
+          setNotes(loaded)
+          setLoading(false)
+        }
+      }
+    }
+
+    loadNotes()
+    return () => {
+      cancelled = true
+    }
+  }, [onGetNotes, storageKey])
+
+  const saveNotes = useCallback(async (newNotes: Note[]) => {
+    setNotes(newNotes)
+    if (onSaveNotes) {
+      try {
+        await onSaveNotes(newNotes)
+      } catch (err) {
+        console.error('Failed to save notes:', err)
+      }
+    } else {
+      // Use localStorage
+      saveNotesToStorage(storageKey, newNotes)
+    }
+  }, [onSaveNotes, storageKey])
+
+  const addNote = useCallback(() => {
+    const text = draft.trim()
+    if (!text) return
+    const next = [...notes, { id: Date.now(), text }]
+    saveNotes(next)
+    setDraft('')
+  }, [draft, notes, saveNotes])
+
+  const removeNote = useCallback((id: number) => {
+    const next = notes.filter((n) => n.id !== id)
+    saveNotes(next)
+  }, [notes, saveNotes])
+
+  const fs = Math.max(9, Math.round(7 * scale))
+
+  return (
+    <div
+      className={['mc-inv-root', 'mc-inv-notes', className].filter(Boolean).join(' ')}
+      style={{
+        width: '100%',
+        height: '100%',
+        fontFamily: "'Minecraftia', 'Minecraft', monospace",
+        fontSize: fs,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        ...style,
+      }}
+    >
+      <div style={{
+        padding: `${3 * scale}px ${4 * scale}px`,
+        color: '#404040',
+        fontWeight: 'bold',
+        flexShrink: 0,
+      }}>
+        Current Tasks
+      </div>
+
+      {/* Task list */}
+      <div style={{ overflowY: 'auto', padding: `${2 * scale}px`, minHeight: 0 }}>
+        {loading ? (
+          <div style={{ color: '#888', fontSize: Math.round(6 * scale), textAlign: 'center', padding: `${4 * scale}px` }}>
+            Loading...
+          </div>
+        ) : notes.length === 0 ? (
+          <div style={{ color: '#888', fontSize: Math.round(6 * scale), textAlign: 'center', padding: `${4 * scale}px` }}>
+            No tasks yet
+          </div>
+        ) : (
+          notes.map((note) => (
+            <div key={note.id} style={{
+              display: 'flex',
+              alignItems: 'flex-start',
+              gap: scale,
+              marginBottom: 2 * scale,
+              padding: `${2 * scale}px`,
+            }}>
+              <span style={{ flex: 1, color: '#222', wordBreak: 'break-word', lineHeight: 1.3 }}>
+                {note.text}
+              </span>
+              <button
+                onClick={() => removeNote(note.id)}
+                style={{
+                  background: '#8b0000',
+                  color: '#fff',
+                  border: 'none',
+                  cursor: 'pointer',
+                  fontSize: Math.round(6 * scale),
+                  padding: `0 ${2 * scale}px`,
+                  fontFamily: 'inherit',
+                  flexShrink: 0,
+                }}
+              >
+                ×
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Add task input */}
+      <div style={{
+        padding: `${2 * scale}px`,
+        display: 'flex',
+        gap: scale,
+        flexShrink: 0,
+        alignItems: 'flex-end',
+        width: '100%',
+        boxSizing: 'border-box',
+        // borderTop: `${scale}px solid #555555`,
+      }}>
+        <textarea
+          value={draft}
+          rows={2}
+          onChange={(e) => {
+            // Strip newlines — behave like a single-line input but with word wrap
+            setDraft(e.target.value.replace(/[\r\n]/g, ''))
+          }}
+          onKeyDown={(e) => {
+            if (e.code === 'Enter') { e.preventDefault(); addNote() }
+          }}
+          placeholder="Add task…"
+          style={{
+            flex: 1,
+            minWidth: 0,
+            resize: 'none',
+            background: '#8b8b8b',
+            border: `${scale}px solid #373737`,
+            color: '#fff',
+            fontSize: Math.round(6 * scale),
+            padding: `${scale}px`,
+            fontFamily: 'inherit',
+            outline: 'none',
+            lineHeight: 1.4,
+            boxSizing: 'border-box',
+            overflowY: 'hidden',
+          }}
+        />
+        <button
+          onClick={addNote}
+          disabled={!draft.trim()}
+          style={{
+            background: '#404040',
+            color: '#fff',
+            border: `${scale}px solid #666`,
+            cursor: draft.trim() ? 'pointer' : 'not-allowed',
+            fontSize: Math.round(6 * scale),
+            padding: `${scale}px ${2 * scale}px`,
+            fontFamily: 'inherit',
+            flexShrink: 0,
+            opacity: draft.trim() ? 1 : 0.5,
+          }}
+        >
+          +
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/Notes/index.ts

@@ -0,0 +1,2 @@
+export { Notes } from './Notes'
+export type { Note } from './Notes'

package/src/components/RecipeGuide/RecipeInventoryView.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react'
-import { createPortal } from 'react-dom'
 import type { RecipeNavFrame, ItemStack } from '../../types'
 import { ItemCanvas } from '../ItemCanvas'
 import { Tooltip } from '../Tooltip'
@@ -27,9 +26,8 @@ function RecipeItemCell({
   x: number
   y: number
   size: number
-  onHover: (item: ItemStack | null, mx: number, my: number) => void
+  onHover: (item: ItemStack | null) => void
 }) {
-  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 })
   const [hovered, setHovered] = useState(false)
 
   if (!item) {
@@ -49,25 +47,17 @@ function RecipeItemCell({
   return (
     <div
       style={{ position: 'absolute', left: x, top: y, width: size, height: size, cursor: 'default' }}
-      onMouseEnter={(e) => {
-        setTooltipPos({ x: e.clientX, y: e.clientY })
+      onMouseEnter={() => {
         setHovered(true)
-        onHover(item, e.clientX, e.clientY)
+        onHover(item)
       }}
       onMouseLeave={() => {
         setHovered(false)
-        onHover(null, 0, 0)
-      }}
-      onMouseMove={(e) => {
-        setTooltipPos({ x: e.clientX, y: e.clientY })
-        onHover(item, e.clientX, e.clientY)
+        onHover(null)
       }}
     >
       <ItemCanvas item={item} size={size} style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }} />
-      {hovered && createPortal(
-        <Tooltip item={item} mouseX={tooltipPos.x} mouseY={tooltipPos.y} visible />,
-        document.body
-      )}
+      {hovered && <Tooltip item={item} visible />}
     </div>
   )
 }

package/src/components/Slot/Slot.tsx

@@ -53,13 +53,40 @@ export function Slot({
   const { contentSize } = useScale()
   const isMobile = useMobile()
   const slotRef = useRef<HTMLDivElement>(null)
-  const mousePos = useRef({ x: 0, y: 0 })
-  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 })
+  const labelRef = useRef<HTMLDivElement>(null)
+  const [mobileTouchPos, setMobileTouchPos] = useState({ x: 0, y: 0 })
   const [showTooltip, setShowTooltip] = useState(false)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [labelFontSize, setLabelFontSize] = useState<number | undefined>(undefined)
   // Slot div = item content area. Slot is already positioned inside the texture border by InventoryWindow.
   const renderSize = size ?? contentSize
 
+  // Measure label text and scale font size if it exceeds slot bounds
+  useEffect(() => {
+    if (!label || item) {
+      setLabelFontSize(undefined)
+      return
+    }
+    const baseFontSize = Math.round(renderSize * 0.35)
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    if (!ctx) {
+      setLabelFontSize(baseFontSize)
+      return
+    }
+    // Use the same font family as the label
+    ctx.font = `${baseFontSize}px 'Minecraft', monospace`
+    const textWidth = ctx.measureText(label).width
+    const maxWidth = renderSize * 0.9 // Leave 10% padding on each side
+    if (textWidth <= maxWidth) {
+      setLabelFontSize(baseFontSize)
+    } else {
+      // Scale down proportionally
+      const scaleFactor = maxWidth / textWidth
+      setLabelFontSize(Math.max(Math.round(baseFontSize * scaleFactor), Math.round(renderSize * 0.2))) // Min 20% of slot size
+    }
+  }, [label, item, renderSize])
+
   const isHovered = hoveredSlot === index
   const isDragTarget = dragSlots.includes(index)
 
@@ -72,7 +99,6 @@ export function Slot({
   const handleMouseEnter = useCallback((e: React.MouseEvent) => {
     if (isMobile) return
     setHoveredSlot(index)
-    setTooltipPos({ x: e.clientX, y: e.clientY })
     setShowTooltip(true)
     if (isDragging) addDragSlot(index)
   }, [isMobile, index, setHoveredSlot, isDragging, addDragSlot])
@@ -83,12 +109,6 @@ export function Slot({
     setShowTooltip(false)
   }, [isMobile, setHoveredSlot])
 
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    if (isMobile) return
-    mousePos.current = { x: e.clientX, y: e.clientY }
-    setTooltipPos({ x: e.clientX, y: e.clientY })
-  }, [isMobile])
-
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
       if (isMobile || disabled) return
@@ -145,7 +165,7 @@ export function Slot({
   }, [])
 
   const handleWheel = useCallback(
-    (e: React.WheelEvent) => {
+    (e: WheelEvent) => {
       if (isMobile || disabled) return
       if (!item && !heldItem) return
       e.preventDefault()
@@ -162,6 +182,16 @@ export function Slot({
     [isMobile, disabled, item, heldItem, sendAction, index, onClickOverride],
   )
 
+  // Attach wheel listener as non-passive so preventDefault() is effective.
+  // React 17+ registers wheel events at the root as passive, which prevents
+  // calling preventDefault() from within React's onWheel synthetic handler.
+  useEffect(() => {
+    const el = slotRef.current
+    if (!el) return
+    el.addEventListener('wheel', handleWheel, { passive: false })
+    return () => el.removeEventListener('wheel', handleWheel)
+  }, [handleWheel])
+
   // Mobile touch handlers
   const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null)
 
@@ -187,7 +217,7 @@ export function Slot({
         sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
       } else if (item) {
         const rect = slotRef.current?.getBoundingClientRect()
-        if (rect) setTooltipPos({ x: rect.right, y: rect.top })
+        if (rect) setMobileTouchPos({ x: rect.right, y: rect.top })
         setMobileMenuOpen(true)
         setShowTooltip(true)
       }
@@ -253,12 +283,10 @@ export function Slot({
       }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      onMouseMove={handleMouseMove}
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
       onDoubleClick={handleDoubleClick}
       onContextMenu={handleContextMenu}
-      onWheel={handleWheel}
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}
       aria-label={
@@ -277,13 +305,17 @@ export function Slot({
       )}
 
       {!item && label && (
-        <div className={styles.emptyLabel} style={{ fontSize: Math.round(renderSize * 0.35) }}>
+        <div
+          ref={labelRef}
+          className={styles.emptyLabel}
+          style={{ fontSize: labelFontSize ?? Math.round(renderSize * 0.35) }}
+        >
           {label}
         </div>
       )}
 
       {item && showTooltip && !mobileMenuOpen && (
-        <Tooltip item={item} mouseX={tooltipPos.x} mouseY={tooltipPos.y} visible />
+        <Tooltip item={item} visible />
       )}
 
       {isMobile && mobileMenuOpen && item && (
@@ -291,8 +323,8 @@ export function Slot({
           <div className={styles.mobileOverlay} onClick={closeMobileMenu} />
           <MobileSlotMenu
             item={item}
-            x={tooltipPos.x}
-            y={tooltipPos.y}
+            x={mobileTouchPos.x}
+            y={mobileTouchPos.y}
             onPickAll={handleMobilePickAll}
             onPickHalf={handleMobilePickHalf}
             onPickCustom={handleMobilePickCustom}

package/src/components/Text/MessageFormatted.tsx

@@ -2,7 +2,7 @@ import { ComponentProps } from 'react'
 import { MessageFormatOptions, MessageFormatPart } from './chatUtils'
 import './MessageFormatted.css'
 
-export const MessagePart = ({ part, formatOptions, ...props }: { part: MessageFormatPart, formatOptions?: MessageFormatOptions } & ComponentProps<'span'>) => {
+export const MessagePart = ({ part, formatOptions, ...props }: { part: MessageFormatPart, formatOptions?: MessageFormatOptions } & Pick<ComponentProps<'span'>, 'style' | 'className' | 'children'>) => {
 
   const { color: _color, italic, bold, underlined, strikethrough, text, clickEvent, hoverEvent, obfuscated } = part
   const color = _color ?? 'white'