minecraft-inventory 0.1.0

package/src/components/Slot/Slot.tsx

@@ -0,0 +1,363 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import type { ItemStack } from '../../types'
+import { useInventoryContext } from '../../context/InventoryContext'
+import { useScale } from '../../context/ScaleContext'
+import { ItemCanvas } from '../ItemCanvas'
+import { Tooltip } from '../Tooltip'
+import { useMobile } from '../../hooks/useMobile'
+import styles from './Slot.module.css'
+
+interface SlotProps {
+  index: number
+  item: ItemStack | null
+  size?: number
+  highlighted?: boolean
+  disabled?: boolean
+  resultSlot?: boolean
+  label?: string
+  className?: string
+  style?: React.CSSProperties
+  /** Remove slot background/border (e.g. for JEI items) */
+  noBackground?: boolean
+  /** Override default click behavior - when provided, calls this instead of sendAction */
+  onClickOverride?: (button: 'left' | 'right' | 'middle', mode: 'normal' | 'shift' | 'double') => void
+}
+
+export function Slot({
+  index,
+  item,
+  size,
+  highlighted,
+  disabled,
+  resultSlot,
+  label,
+  className,
+  style,
+  noBackground,
+  onClickOverride,
+}: SlotProps) {
+  const {
+    heldItem,
+    sendAction,
+    isDragging,
+    dragSlots,
+    dragButton,
+    startDrag,
+    addDragSlot,
+    endDrag,
+    hoveredSlot,
+    setHoveredSlot,
+    activeNumberKey,
+  } = useInventoryContext()
+
+  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 [showTooltip, setShowTooltip] = useState(false)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  // Slot div = item content area. Slot is already positioned inside the texture border by InventoryWindow.
+  const renderSize = size ?? contentSize
+
+  const isHovered = hoveredSlot === index
+  const isDragTarget = dragSlots.includes(index)
+
+  // Keyboard number key while hovering
+  useEffect(() => {
+    if (!isHovered || activeNumberKey === null || isMobile) return
+    sendAction({ type: 'hotbar-swap', slotIndex: index, hotbarSlot: activeNumberKey })
+  }, [activeNumberKey, isHovered, index, sendAction, isMobile])
+
+  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])
+
+  const handleMouseLeave = useCallback(() => {
+    if (isMobile) return
+    setHoveredSlot(null)
+    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
+      e.preventDefault()
+      const button = e.button === 2 ? 'right' : e.button === 1 ? 'middle' : 'left'
+      if (button === 'middle') {
+        sendAction({ type: 'click', slotIndex: index, button: 'middle', mode: 'middle' })
+        return
+      }
+      if (heldItem && (button === 'left' || button === 'right')) {
+        startDrag(index, button)
+      }
+    },
+    [isMobile, disabled, heldItem, index, sendAction, startDrag],
+  )
+
+  const handleMouseUp = useCallback(
+    (e: React.MouseEvent) => {
+      if (isMobile || disabled) return
+      e.preventDefault()
+      const button = e.button === 2 ? 'right' : e.button === 1 ? 'middle' : 'left'
+      if (isDragging && dragSlots.length > 1) {
+        endDrag()
+        return
+      }
+      const mode = e.shiftKey ? 'shift' : 'normal'
+      if (onClickOverride) {
+        onClickOverride(button, mode)
+      } else {
+        // Hide tooltip immediately when picking up or placing an item
+        if (button === 'left' || button === 'right') setShowTooltip(false)
+        sendAction({ type: 'click', slotIndex: index, button, mode })
+      }
+      if (isDragging) endDrag()
+    },
+    [isMobile, disabled, isDragging, dragSlots.length, sendAction, index, endDrag, onClickOverride],
+  )
+
+  const handleDoubleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isMobile || disabled) return
+      e.preventDefault()
+      if (onClickOverride) {
+        onClickOverride('left', 'double')
+      } else {
+        sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'double' })
+      }
+    },
+    [isMobile, disabled, sendAction, index, onClickOverride],
+  )
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+  }, [])
+
+  const handleWheel = useCallback(
+    (e: React.WheelEvent) => {
+      if (isMobile || disabled) return
+      if (!item && !heldItem) return
+      e.preventDefault()
+      if (onClickOverride) {
+        onClickOverride('right', 'normal')
+      } else {
+        if (e.deltaY < 0 && item) {
+          sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
+        } else if (e.deltaY > 0 && heldItem) {
+          sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
+        }
+      }
+    },
+    [isMobile, disabled, item, heldItem, sendAction, index, onClickOverride],
+  )
+
+  // Mobile touch handlers
+  const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null)
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      if (!isMobile) return
+      const touch = e.touches[0]
+      touchStartRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() }
+    },
+    [isMobile],
+  )
+
+  const handleTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      if (!isMobile || disabled) return
+      const start = touchStartRef.current
+      if (!start) return
+      touchStartRef.current = null
+      const touch = e.changedTouches[0]
+      if (Math.abs(touch.clientX - start.x) > 10 || Math.abs(touch.clientY - start.y) > 10) return
+
+      if (heldItem) {
+        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 })
+        setMobileMenuOpen(true)
+        setShowTooltip(true)
+      }
+    },
+    [isMobile, disabled, heldItem, item, sendAction, index],
+  )
+
+  const handleMobilePickAll = useCallback(() => {
+    setMobileMenuOpen(false)
+    setShowTooltip(false)
+    sendAction({ type: 'click', slotIndex: index, button: 'left', mode: 'normal' })
+  }, [sendAction, index])
+
+  const handleMobilePickHalf = useCallback(() => {
+    setMobileMenuOpen(false)
+    setShowTooltip(false)
+    sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
+  }, [sendAction, index])
+
+  const handleMobilePickCustom = useCallback(() => {
+    if (!item) return
+    const input = window.prompt(`Pick amount (max ${item.count}):`, String(item.count))
+    const amount = parseInt(input ?? '', 10)
+    if (isNaN(amount) || amount <= 0) return
+    setMobileMenuOpen(false)
+    setShowTooltip(false)
+    for (let i = 0; i < Math.min(amount, item.count); i++) {
+      sendAction({ type: 'click', slotIndex: index, button: 'right', mode: 'normal' })
+    }
+  }, [item, sendAction, index])
+
+  const handleMobileDrop = useCallback(() => {
+    setMobileMenuOpen(false)
+    setShowTooltip(false)
+    sendAction({ type: 'drop', slotIndex: index, all: true })
+  }, [sendAction, index])
+
+  const closeMobileMenu = useCallback(() => {
+    setMobileMenuOpen(false)
+    setShowTooltip(false)
+  }, [])
+
+  return (
+    <div
+      ref={slotRef}
+      className={[
+        noBackground ? styles.slotBare : styles.slot,
+        highlighted && styles.highlighted,
+        disabled && styles.disabled,
+        resultSlot && styles.resultSlot,
+        isHovered && !isMobile && styles.hovered,
+        isDragTarget && styles.dragTarget,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={{
+        width: renderSize,
+        height: renderSize,
+        position: 'relative',
+        flexShrink: 0,
+        ...style,
+      }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onMouseMove={handleMouseMove}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onDoubleClick={handleDoubleClick}
+      onContextMenu={handleContextMenu}
+      onWheel={handleWheel}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      aria-label={
+        label ??
+        (item
+          ? `Slot ${index}: ${item.displayName ?? item.name ?? item.type} ×${item.count}`
+          : `Slot ${index} (empty)`)
+      }
+    >
+      {item && (
+        <ItemCanvas
+          item={item}
+          size={renderSize}
+          style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}
+        />
+      )}
+
+      {!item && label && (
+        <div className={styles.emptyLabel} style={{ fontSize: Math.round(renderSize * 0.35) }}>
+          {label}
+        </div>
+      )}
+
+      {item && showTooltip && !mobileMenuOpen && (
+        <Tooltip item={item} mouseX={tooltipPos.x} mouseY={tooltipPos.y} visible />
+      )}
+
+      {isMobile && mobileMenuOpen && item && (
+        <>
+          <div className={styles.mobileOverlay} onClick={closeMobileMenu} />
+          <MobileSlotMenu
+            item={item}
+            x={tooltipPos.x}
+            y={tooltipPos.y}
+            onPickAll={handleMobilePickAll}
+            onPickHalf={handleMobilePickHalf}
+            onPickCustom={handleMobilePickCustom}
+            onDrop={handleMobileDrop}
+            onClose={closeMobileMenu}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
+interface MobileSlotMenuProps {
+  item: ItemStack
+  x: number
+  y: number
+  onPickAll(): void
+  onPickHalf(): void
+  onPickCustom(): void
+  onDrop(): void
+  onClose(): void
+}
+
+function MobileSlotMenu({ item, x, y, onPickAll, onPickHalf, onPickCustom, onDrop, onClose }: MobileSlotMenuProps) {
+  const { scale } = useScale()
+  const menuRef = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState({ left: x, top: y })
+
+  useEffect(() => {
+    if (!menuRef.current) return
+    const mw = menuRef.current.offsetWidth
+    const mh = menuRef.current.offsetHeight
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+    let left = x + 8
+    let top = y
+    if (left + mw > vw - 4) left = x - mw - 8
+    if (top + mh > vh - 4) top = vh - mh - 4
+    if (top < 4) top = 4
+    setPos({ left, top })
+  }, [x, y])
+
+  return (
+    <div
+      ref={menuRef}
+      className={styles.mobileMenu}
+      style={{
+        position: 'fixed',
+        left: pos.left,
+        top: pos.top,
+        zIndex: 10001,
+        fontSize: Math.round(9 * scale),
+        padding: 6 * scale,
+        gap: 4 * scale,
+        minWidth: 100 * scale,
+      }}
+    >
+      <div className={styles.mobileMenuTitle}>
+        {item.displayName ?? item.name ?? `Item #${item.type}`} ×{item.count}
+      </div>
+      <button className={styles.mobileBtn} onClick={onPickAll}>Take All ({item.count})</button>
+      <button className={styles.mobileBtn} onClick={onPickHalf}>Take Half ({Math.ceil(item.count / 2)})</button>
+      <button className={styles.mobileBtn} onClick={onPickCustom}>Take Amount…</button>
+      <button className={[styles.mobileBtn, styles.mobileBtnDanger].join(' ')} onClick={onDrop}>Drop</button>
+      <button className={styles.mobileBtn} onClick={onClose}>Cancel</button>
+    </div>
+  )
+}

package/src/components/Slot/index.ts

@@ -0,0 +1 @@
+export { Slot } from './Slot'

package/src/components/Text/MessageFormatted.css

@@ -0,0 +1,5 @@
+/* base global styles */
+
+.formatted-message {
+    /* text-shadow: 1px 1px 0px #3f3f3f; */
+}

package/src/components/Text/MessageFormatted.tsx

@@ -0,0 +1,79 @@
+import { ComponentProps } from 'react'
+import { MessageFormatOptions, MessageFormatPart } from './chatUtils'
+import './MessageFormatted.css'
+
+export const MessagePart = ({ part, formatOptions, ...props }: { part: MessageFormatPart, formatOptions?: MessageFormatOptions } & ComponentProps<'span'>) => {
+
+  const { color: _color, italic, bold, underlined, strikethrough, text, clickEvent, hoverEvent, obfuscated } = part
+  const color = _color ?? 'white'
+
+  const applyStyles = [
+    colorF(color.toLowerCase()) + ((formatOptions?.doShadow ?? true) ? `; text-shadow: 1px 1px 0px ${getColorShadow(colorF(color.toLowerCase()).replace('color:', ''))}` : ''),
+    italic && messageFormatStylesMap.italic,
+    bold && messageFormatStylesMap.bold,
+    italic && messageFormatStylesMap.italic,
+    underlined && messageFormatStylesMap.underlined,
+    strikethrough && messageFormatStylesMap.strikethrough,
+    obfuscated && messageFormatStylesMap.obfuscated
+  ].filter(a => a !== false && a !== undefined).filter(Boolean)
+
+  return <span style={parseInlineStyle(applyStyles.join(';'))} {...props}>{text}</span>
+}
+
+export default ({ parts, className, formatOptions }: { parts: readonly MessageFormatPart[], className?: string, formatOptions?: MessageFormatOptions }) => {
+  return (
+    <span className={`formatted-message ${className ?? ''}`}>
+      {parts.map((part, i) => <MessagePart key={i} part={part} formatOptions={formatOptions} />)}
+    </span>
+  )
+}
+
+const colorF = (color) => {
+  return color.trim().startsWith('#') ? `color:${color}` : messageFormatStylesMap[color] ?? undefined
+}
+
+export function getColorShadow (hex, dim = 0.25) {
+  const color = parseInt(hex.replace('#', ''), 16)
+
+  const r = Math.trunc((color >> 16 & 0xFF) * dim)
+  const g = Math.trunc((color >> 8 & 0xFF) * dim)
+  const b = Math.trunc((color & 0xFF) * dim)
+
+  const f = (c) => ('00' + c.toString(16)).slice(-2)
+  return `#${f(r)}${f(g)}${f(b)}`
+}
+
+export function parseInlineStyle (style: string): Record<string, any> {
+  const obj: Record<string, any> = {}
+  for (const rule of style.split(';')) {
+    const [prop, value] = rule.split(':')
+    const cssInJsProp = prop.trim().replaceAll(/-./g, (x) => x.toUpperCase()[1])
+    obj[cssInJsProp] = value.trim()
+  }
+  return obj
+}
+
+export const messageFormatStylesMap = {
+  black: 'color:color(display-p3 0 0 0)',
+  dark_blue: 'color:color(display-p3 0 0 0.6667)',
+  dark_green: 'color:color(display-p3 0 0.6667 0)',
+  dark_aqua: 'color:color(display-p3 0 0.6667 0.6667)',
+  dark_red: 'color:color(display-p3 0.6667 0 0)',
+  dark_purple: 'color:color(display-p3 0.6667 0 0.6667)',
+  gold: 'color:color(display-p3 1 0.6667 0)',
+  gray: 'color:color(display-p3 0.6667 0.6667 0.6667)',
+  dark_gray: 'color:color(display-p3 0.3333 0.3333 0.3333)',
+  blue: 'color:color(display-p3 0.3333 0.3333 1)',
+  green: 'color:color(display-p3 0.3333 1 0.3333)',
+  aqua: 'color:color(display-p3 0.3333 1 1)',
+  red: 'color:color(display-p3 1 0.3333 0.3333)',
+  light_purple: 'color:color(display-p3 1 0.3333 1)',
+  yellow: 'color:color(display-p3 1 1 0.3333)',
+  white: 'color:color(display-p3 1 1 1)',
+  bold: 'font-weight:900',
+  strikethrough: 'text-decoration:line-through',
+  underlined: 'text-decoration:underline',
+  italic: 'font-style:italic',
+  obfuscated: 'filter:blur(2px)',
+  clickEvent: 'cursor:pointer',
+}

package/src/components/Text/MessageFormattedString.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import MessageFormatted from './MessageFormatted'
+import type { MessageFormatPart } from './chatUtils'
+
+/**
+ * Map §-format color codes to Minecraft named colors.
+ * Supports color codes (§0-§9, §a-§f) and formatting (§l, §o, §n, §m, §k, §r).
+ */
+const CODE_COLORS: Record<string, string> = {
+  '0': 'black',      '1': 'dark_blue',   '2': 'dark_green', '3': 'dark_aqua',
+  '4': 'dark_red',   '5': 'dark_purple', '6': 'gold',       '7': 'gray',
+  '8': 'dark_gray',  '9': 'blue',        'a': 'green',      'b': 'aqua',
+  'c': 'red',        'd': 'light_purple','e': 'yellow',     'f': 'white',
+}
+
+function parseSectionCodes(text: string): MessageFormatPart[] {
+  const parts: MessageFormatPart[] = []
+  const regex = /§([0-9a-fk-orA-FK-OR])|([^§]+)/g
+  let color: string | undefined
+  let bold = false, italic = false, underlined = false
+  let strikethrough = false, obfuscated = false
+  let match: RegExpExecArray | null
+  while ((match = regex.exec(text)) !== null) {
+    const code = match[1]?.toLowerCase()
+    const chunk = match[2]
+    if (code !== undefined) {
+      if (CODE_COLORS[code]) {
+        color = CODE_COLORS[code]
+        bold = italic = underlined = strikethrough = obfuscated = false
+      } else if (code === 'l') bold = true
+      else if (code === 'o') italic = true
+      else if (code === 'n') underlined = true
+      else if (code === 'm') strikethrough = true
+      else if (code === 'k') obfuscated = true
+      else if (code === 'r') {
+        color = undefined
+        bold = italic = underlined = strikethrough = obfuscated = false
+      }
+    } else if (chunk) {
+      parts.push({ text: chunk, color, bold, italic, underlined, strikethrough, obfuscated })
+    }
+  }
+  return parts
+}
+
+interface Props {
+  text: string | undefined | null
+  className?: string
+  /** Wrap in a specific element; defaults to the MessageFormatted span wrapper */
+  fallbackColor?: string
+}
+
+/**
+ * Renders a Minecraft text string that may contain §-formatting codes.
+ * For plain strings without §, renders as a simple <span>.
+ * Used for inventory titles, tooltip names, and lore lines.
+ */
+export function MessageFormattedString({ text, className, fallbackColor }: Props) {
+  if (!text) return null
+
+  if (!text.includes('§')) {
+    return (
+      <span
+        className={className}
+        style={fallbackColor ? { color: fallbackColor } : undefined}
+      >
+        {text}
+      </span>
+    )
+  }
+
+  const parts = parseSectionCodes(text)
+  return <MessageFormatted parts={parts} className={className} />
+}

package/src/components/Text/chatUtils.ts

@@ -0,0 +1,172 @@
+// this should actually be moved to mineflayer / renderer
+
+import { fromFormattedString, TextComponent } from '@xmcl/text-component'
+import type { IndexedData } from 'minecraft-data'
+
+export interface MessageFormatOptions {
+  doShadow?: boolean
+}
+
+export type MessageFormatPart = Pick<TextComponent, 'hoverEvent' | 'clickEvent'> & {
+  text: string
+  color?: string
+  bold?: boolean
+  italic?: boolean
+  underlined?: boolean
+  strikethrough?: boolean
+  obfuscated?: boolean
+}
+
+type MessageInput = {
+  text?: string
+  translate?: string
+  with?: Array<MessageInput | string>
+  color?: string
+  bold?: boolean
+  italic?: boolean
+  underlined?: boolean
+  strikethrough?: boolean
+  obfuscated?: boolean
+  extra?: MessageInput[]
+  json?: any
+}
+
+const global = globalThis as any
+
+// todo move to sign-renderer, replace with prismarine-chat, fix mcData issue!
+export const formatMessage = (message: MessageInput, mcData: IndexedData = global.loadedData) => {
+  let msglist: MessageFormatPart[] = []
+
+  const readMsg = (msg: MessageInput) => {
+    const styles = {
+      color: msg.color,
+      bold: !!msg.bold,
+      italic: !!msg.italic,
+      underlined: !!msg.underlined,
+      strikethrough: !!msg.strikethrough,
+      obfuscated: !!msg.obfuscated
+    }
+
+    if (!msg.text && typeof msg.json?.[''] === 'string') msg.text = msg.json['']
+    if (msg.text) {
+      msglist.push({
+        ...msg,
+        text: msg.text,
+        ...styles
+      })
+    } else if (msg.translate) {
+      const tText = mcData?.language[msg.translate] ?? msg.translate
+
+      if (msg.with) {
+        const splitted = tText.split(/%s|%\d+\$s/g)
+
+        let i = 0
+        for (const [j, part] of splitted.entries()) {
+          msglist.push({ text: part, ...styles })
+
+          if (j + 1 < splitted.length) {
+            if (msg.with[i]) {
+              const msgWith = msg.with[i]
+              if (typeof msgWith === 'string') {
+                readMsg({
+                  ...styles,
+                  text: msgWith
+                })
+              } else {
+                readMsg({
+                  ...styles,
+                  ...msgWith
+                })
+              }
+            }
+            i++
+          }
+        }
+      } else {
+        msglist.push({
+          ...msg,
+          text: tText,
+          ...styles
+        })
+      }
+    }
+
+    if (msg.extra) {
+      for (let ex of msg.extra) {
+        if (typeof ex === 'string') {
+          ex = { text: ex }
+        }
+        readMsg({ ...styles, ...ex })
+      }
+    }
+  }
+
+  readMsg(message)
+
+  const flat = (msg) => {
+    return [msg, msg.extra?.flatMap(flat) ?? []]
+  }
+
+  msglist = msglist.map(msg => {
+    // normalize §
+    if (!msg.text.includes?.('§')) return msg
+    const newMsg = fromFormattedString(msg.text)
+    return flat(newMsg)
+  }).flat(Infinity)
+
+  return msglist
+}
+
+export const messageToString = (message: MessageInput | string) => {
+  if (typeof message === 'string') {
+    return message
+  }
+  const msglist = formatMessage(message)
+  return msglist.map(msg => msg.text).join('')
+}
+
+const blockToItemRemaps = {
+  water: 'water_bucket',
+  lava: 'lava_bucket',
+  redstone_wire: 'redstone',
+  tripwire: 'tripwire_hook'
+}
+
+export const getItemFromBlock = (block: any) => {
+  const item = global.loadedData.itemsByName[blockToItemRemaps[block.name] ?? block.name]
+  return item
+}
+
+export function isAllowedChatCharacter (char: string): boolean {
+  // if (char.length !== 1) {
+  //   throw new Error('Input must be a single character')
+  // }
+
+  const charCode = char.codePointAt(0)!
+  return charCode !== 167 && charCode >= 32 && charCode !== 127
+}
+
+export const isStringAllowed = (str: string) => {
+  const invalidChars = new Set<string>()
+  for (const [i, char] of [...str].entries()) {
+    const isSurrogatePair = str.codePointAt(i) !== str['charCodeAt'](i)
+    if (isSurrogatePair) continue
+
+    if (!isAllowedChatCharacter(char)) {
+      invalidChars.add(char)
+    }
+  }
+
+  const valid = invalidChars.size === 0
+  if (valid) {
+    return {
+      valid: true
+    }
+  }
+
+  return {
+    valid,
+    clean: [...str].filter(c => !invalidChars.has(c)).join(''),
+    invalid: [...invalidChars]
+  }
+}