@forge-kit/plugin-qr-code 0.0.1

package/dist/icon.svg

@@ -0,0 +1,7 @@
+<svg width="192" height="192" viewBox="0 0 192 192" fill="" xmlns="http://www.w3.org/2000/svg">
+<path d="M85 0H8C3.575 0 0 3.575 0 8V85C0 86.1 0.9 87 2 87H85C86.1 87 87 86.1 87 85V2C87 0.9 86.1 0 85 0ZM71 71H16V16H71V71Z" />
+<path d="M36.5 52.5H50.5C51.6 52.5 52.5 51.6 52.5 50.5V36.5C52.5 35.4 51.6 34.5 50.5 34.5H36.5C35.4 34.5 34.5 35.4 34.5 36.5V50.5C34.5 51.6 35.4 52.5 36.5 52.5ZM85 105H2C0.9 105 0 105.9 0 107V184C0 188.425 3.575 192 8 192H85C86.1 192 87 191.1 87 190V107C87 105.9 86.1 105 85 105ZM71 176H16V121H71V176Z" />
+<path d="M36.5 157.5H50.5C51.6 157.5 52.5 156.6 52.5 155.5V141.5C52.5 140.4 51.6 139.5 50.5 139.5H36.5C35.4 139.5 34.5 140.4 34.5 141.5V155.5C34.5 156.6 35.4 157.5 36.5 157.5ZM184 0H107C105.9 0 105 0.9 105 2V85C105 86.1 105.9 87 107 87H190C191.1 87 192 86.1 192 85V8C192 3.575 188.425 0 184 0ZM176 71H121V16H176V71Z" />
+<path d="M141.5 52.5H155.5C156.6 52.5 157.5 51.6 157.5 50.5V36.5C157.5 35.4 156.6 34.5 155.5 34.5H141.5C140.4 34.5 139.5 35.4 139.5 36.5V50.5C139.5 51.6 140.4 52.5 141.5 52.5ZM190 105H178C176.9 105 176 105.9 176 107V140.5H156.5V107C156.5 105.9 155.6 105 154.5 105H107C105.9 105 105 105.9 105 107V190C105 191.1 105.9 192 107 192H119C120.1 192 121 191.1 121 190V129H140.5V154.5C140.5 155.6 141.4 156.5 142.5 156.5H190C191.1 156.5 192 155.6 192 154.5V107C192 105.9 191.1 105 190 105Z" />
+<path d="M154.5 176H142.5C141.4 176 140.5 176.9 140.5 178V190C140.5 191.1 141.4 192 142.5 192H154.5C155.6 192 156.5 191.1 156.5 190V178C156.5 176.9 155.6 176 154.5 176ZM190 176H178C176.9 176 176 176.9 176 178V190C176 191.1 176.9 192 178 192H190C191.1 192 192 191.1 192 190V178C192 176.9 191.1 176 190 176Z" />
+</svg>

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@forge-kit/plugin-qr-code",
+  "entry": "./dist/app.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "author": "yu.pan <panyupy@vip.qq.com>",
+  "license": "MIT",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@forge-kit/component": "workspace:*",
+    "@forge-kit/icons": "workspace:*",
+    "@forge-kit/types": "workspace:*",
+    "classnames": "^2.5.1",
+    "jsqr": "^1.4.0",
+    "lodash-es": "^4.17.23",
+    "qrcode": "^1.5.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@forge-kit/vite-plugin-forge-kit": "workspace:*",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^24.10.1",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

package/src/App.less

@@ -0,0 +1,34 @@
+html,
+body,
+#root {
+  -webkit-app-region: drag;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.forge-kit-plugin-qr-code {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .qr-tabs {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+
+    .tab-list {
+      flex-shrink: 0;
+    }
+
+    .tab-panel {
+      flex: 1;
+      margin-top: var(--space-3);
+      overflow: hidden;
+      height: max-content;
+    }
+  }
+}

package/src/App.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import {Theme, Tabs} from '@forge-kit/component'
+import '@forge-kit/component/style.css'
+import {QrDecoderPanel} from '@/components/qr-decoder-panel'
+import {QrGeneratorPanel} from '@/components/qr-generator-panel'
+import './App.less'
+
+interface AppProps {
+    themeProps?: React.ComponentProps<typeof Theme>
+}
+
+export const App: React.FC<AppProps> = (props) => {
+    const {themeProps} = props
+
+    return (
+        <Theme className="forge-kit-plugin-qr-code" accentColor="gray" appearance="dark" radius="full" grayColor="slate" panelBackground="translucent" {...themeProps}>
+            <Tabs.Root defaultValue="generate" className="qr-tabs">
+                <Tabs.List size="2" className="tab-list">
+                    <Tabs.Trigger value="generate">生成二维码</Tabs.Trigger>
+                    <Tabs.Trigger value="decode">解析二维码</Tabs.Trigger>
+                </Tabs.List>
+
+                <Tabs.Content value="generate" className="tab-panel">
+                    <QrGeneratorPanel/>
+                </Tabs.Content>
+
+                <Tabs.Content value="decode" className="tab-panel">
+                    <QrDecoderPanel/>
+                </Tabs.Content>
+            </Tabs.Root>
+        </Theme>
+    )
+}

package/src/components/qr-decoder-panel.less

@@ -0,0 +1,58 @@
+.qr-decoder-panel {
+  &-grid {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-card {
+    height: 100%;
+    box-sizing: border-box;
+    padding: var(--space-4);
+  }
+
+  &-control,
+  &-preview {
+    flex: 1;
+  }
+
+  &-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-preview-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-preview-stage {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    flex-shrink: 0;
+    border: 1px dashed var(--gray-7);
+    border-radius: var(--radius-3);
+    padding: var(--space-2);
+    background-color: var(--gray-2);
+  }
+
+  &-result {
+    border: 1px solid var(--gray-6);
+    border-radius: var(--radius-3);
+    padding: var(--space-3);
+    background-color: var(--gray-2);
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  &-preview-image {
+    max-width: 100%;
+    max-height: 260px;
+    object-fit: contain;
+    border-radius: var(--radius-2);
+  }
+}

package/src/components/qr-decoder-panel.tsx

@@ -0,0 +1,105 @@
+import React, {useEffect} from 'react'
+import {Box, Button, Card, Flex, Text} from '@forge-kit/component'
+import classNames from "classnames";
+import {UploadFileView} from '@/components/upload-file-view'
+import {decodeQrFromImageUrl} from '@/utils/qr-code'
+import {usePartialState} from '@/hooks/use-partial-state'
+import {useToRef} from '@/hooks/use-to-ref'
+import './qr-decoder-panel.less'
+
+interface DecoderState {
+    decodeText: string
+    decodeError: string
+    decodeImageName: string
+    decodeImageUrl: string
+    isDecoding: boolean
+}
+
+const DEFAULT_DECODER_STATE: DecoderState = {
+    decodeText: '',
+    decodeError: '',
+    decodeImageName: '',
+    decodeImageUrl: '',
+    isDecoding: false,
+}
+
+export const QrDecoderPanel: React.FC = () => {
+    const {state: decoderState, updateState: updateDecoderState} = usePartialState<DecoderState>(DEFAULT_DECODER_STATE)
+
+    const revokeDecodeImageUrl = useToRef(() => {
+        if (!decoderState.decodeImageUrl) return
+        URL.revokeObjectURL(decoderState.decodeImageUrl)
+    })
+
+    useEffect(() => {
+        const revokeDecodeImageUrlFn = revokeDecodeImageUrl.current
+        return () => revokeDecodeImageUrlFn()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [decoderState.decodeImageUrl])
+
+    const handleDecodeFile = async (file: File) => {
+        const imageUrl = URL.createObjectURL(file)
+        revokeDecodeImageUrl.current()
+
+        updateDecoderState({
+            decodeImageName: file.name,
+            decodeImageUrl: imageUrl,
+            decodeError: '',
+            decodeText: '',
+            isDecoding: true,
+        })
+
+        try {
+            const result = await decodeQrFromImageUrl(imageUrl)
+            updateDecoderState({decodeText: result})
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : '二维码识别失败，请重试'
+            updateDecoderState({decodeError: errorMessage})
+        } finally {
+            updateDecoderState({isDecoding: false})
+        }
+    }
+
+    const handleInvalidFile = () => {
+        updateDecoderState({decodeError: '仅支持上传图片文件'})
+    }
+
+    const handleCopyDecodedText = async () => {
+        if (!decoderState.decodeText) return
+        try {
+            await navigator.clipboard.writeText(decoderState.decodeText)
+        } catch {
+            updateDecoderState({decodeError: '复制失败，请手动复制识别结果'})
+        }
+    }
+
+    return (
+        <Flex className="qr-decoder-panel-grid" gap="4">
+            <Card className={classNames('qr-decoder-panel-card', 'qr-decoder-panel-control')}>
+                <Flex direction="column" gap="3">
+                    <Text size="2" weight="medium">上传二维码图片</Text>
+                    <UploadFileView onFileSelected={handleDecodeFile} onInvalidFile={handleInvalidFile}/>
+                    {decoderState.isDecoding && <Text size="1" color="gray">识别中...</Text>}
+                    {Boolean(decoderState.decodeError) && <Text size="1" color="red">{decoderState.decodeError}</Text>}
+                    {Boolean(decoderState.decodeImageName) && <Text size="1" color="gray">当前文件: {decoderState.decodeImageName}</Text>}
+                </Flex>
+            </Card>
+
+            <Card className={classNames('qr-decoder-panel-card', 'qr-decoder-panel-preview')}>
+                <Flex direction="column" gap="3" className="qr-decoder-panel-preview-content">
+                    <Box className="qr-decoder-panel-preview-stage">
+                        {Boolean(decoderState.decodeImageUrl) && (<img className="qr-decoder-panel-preview-image" src={decoderState.decodeImageUrl} alt="上传二维码预览"/>)}
+                        {!decoderState.decodeImageUrl && <Text color="gray">上传图片后在此预览</Text>}
+                    </Box>
+
+                    <Box className="qr-decoder-panel-result">
+                        {Boolean(decoderState.decodeText) && <Text>{decoderState.decodeText}</Text>}
+                        {!decoderState.decodeText && <Text color="gray">识别结果会显示在这里</Text>}
+                    </Box>
+
+                    <Button variant="soft" disabled={!decoderState.decodeText} onClick={handleCopyDecodedText}>复制结果</Button>
+                </Flex>
+            </Card>
+        </Flex>
+    )
+}

package/src/components/qr-generator-panel.less

@@ -0,0 +1,57 @@
+.qr-generator-panel {
+  width: 100%;
+  height: 100%;
+
+  &-card {
+    height: 100%;
+    box-sizing: border-box;
+    padding: var(--space-4);
+  }
+
+  &-control,
+  &-preview {
+    flex: 1;
+  }
+
+  &-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-preview-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-preview-stage {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  &-textarea {
+    margin-top: var(--space-2);
+    min-height: 140px;
+  }
+
+  &-field-label {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 120px;
+    flex: 1;
+  }
+
+  &-preview-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: var(--radius-2);
+    border: 1px solid var(--gray-6);
+    padding: var(--space-2);
+    background: #fff;
+  }
+}

package/src/components/qr-generator-panel.tsx

@@ -0,0 +1,154 @@
+import React, {useEffect} from 'react'
+import {Box, Button, Card, Flex, Text, TextArea, Select, TextField} from '@forge-kit/component'
+import {
+    downloadDataUrl,
+    generateQrDataUrl,
+    QR_ERROR_CORRECTION_LEVEL_OPTIONS,
+} from '@/utils/qr-code'
+import classNames from "classnames";
+import type {QRCodeErrorCorrectionLevel} from 'qrcode'
+import {useDebouncedCallback} from '@/hooks/use-debounced-callback'
+import {useLatestTaskGuard} from '@/hooks/use-latest-task-guard'
+import {usePartialState} from '@/hooks/use-partial-state'
+import {useToRef} from '@/hooks/use-to-ref'
+import './qr-generator-panel.less'
+
+interface GeneratorConfigState {
+    text: string
+    size: number
+    margin: number
+    errorCorrectionLevel: QRCodeErrorCorrectionLevel
+}
+
+interface GeneratorResultState {
+    qrDataUrl: string
+    generateError: string
+    isGenerating: boolean
+}
+
+const DEFAULT_GENERATOR_CONFIG: GeneratorConfigState = {
+    text: '',
+    size: 320,
+    margin: 2,
+    errorCorrectionLevel: 'M',
+}
+
+const DEFAULT_GENERATOR_RESULT: GeneratorResultState = {
+    qrDataUrl: '',
+    generateError: '',
+    isGenerating: false,
+}
+
+export const QrGeneratorPanel: React.FC = () => {
+    const {state: configState, updateState: updateConfigState} = usePartialState<GeneratorConfigState>(DEFAULT_GENERATOR_CONFIG)
+    const {state: resultState, updateState: updateResultState} = usePartialState<GeneratorResultState>(DEFAULT_GENERATOR_RESULT)
+
+    const generateLatestTaskGuardQrDataUrl = useLatestTaskGuard(async (nextConfig: GeneratorConfigState) => {
+        const {text, size, margin, errorCorrectionLevel} = nextConfig
+        return generateQrDataUrl(text.trim(), {width: size, margin, errorCorrectionLevel})
+    })
+
+    const runGenerateByConfig = useToRef(async (nextConfig: GeneratorConfigState) => {
+        const normalizedText = nextConfig.text.trim()
+
+        if (!normalizedText) {
+            updateResultState({generateError: '请输入二维码内容', qrDataUrl: '', isGenerating: false})
+            return
+        }
+
+        updateResultState({isGenerating: true, generateError: ''})
+        try {
+            const dataUrl = await generateLatestTaskGuardQrDataUrl(nextConfig)
+            if (dataUrl === undefined) return
+            updateResultState({qrDataUrl: dataUrl, isGenerating: false})
+        } catch {
+            updateResultState({generateError: '二维码生成失败，请检查输入后重试', qrDataUrl: '', isGenerating: false})
+        }
+    })
+
+    const debouncedGenerate = useDebouncedCallback((nextConfig: GeneratorConfigState) => {
+        return runGenerateByConfig.current(nextConfig)
+    }, 300)
+
+    useEffect(() => {
+        debouncedGenerate(configState)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [configState])
+
+    const handleDownload = () => {
+        if (!resultState.qrDataUrl) return
+        downloadDataUrl(resultState.qrDataUrl, 'qrcode.png')
+    }
+
+    return (
+        <Flex className="qr-generator-panel" gap="4">
+            <Card className={classNames('qr-generator-panel-card', 'qr-generator-panel-control')}>
+                <Flex direction="column" gap="3">
+                    <Box>
+                        <Text size="1" color="gray">内容</Text>
+                        <TextArea
+                            className="qr-generator-panel-textarea"
+                            size="2"
+                            value={configState.text}
+                            placeholder="输入文本、链接或任意内容"
+                            onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => updateConfigState({text: event.target.value})}
+                        />
+                    </Box>
+
+                    <Flex gap="3" wrap="wrap">
+                        <Flex className="qr-generator-panel-field-label">
+                            <Text size="1" color="gray">尺寸(px)</Text>
+                            <TextField.Root
+                                type="number"
+                                radius="large"
+                                min={120}
+                                max={1024}
+                                value={configState.size}
+                                onChange={(event) => updateConfigState({size: Number(event.target.value) || DEFAULT_GENERATOR_CONFIG.size})}
+                            />
+                        </Flex>
+
+                        <Flex className="qr-generator-panel-field-label">
+                            <Text size="1" color="gray">边距</Text>
+                            <TextField.Root
+                                type="number"
+                                radius="large"
+                                min={0}
+                                max={12}
+                                value={configState.margin}
+                                onChange={(event) => updateConfigState({margin: Number(event.target.value) || 0})}
+                            />
+                        </Flex>
+
+                        <Flex className="qr-generator-panel-field-label">
+                            <Text size="1" color="gray">容错级别</Text>
+                            <Select.Root
+                                value={configState.errorCorrectionLevel}
+                                onValueChange={(value: QRCodeErrorCorrectionLevel) => updateConfigState({errorCorrectionLevel: value})}
+                            >
+                                <Select.Trigger radius="large"/>
+                                <Select.Content>
+                                    {QR_ERROR_CORRECTION_LEVEL_OPTIONS.map((level) => (
+                                        <Select.Item key={level} value={level}>{level}</Select.Item>
+                                    ))}
+                                </Select.Content>
+                            </Select.Root>
+                        </Flex>
+                    </Flex>
+                    {resultState.isGenerating && <Text size="1" color="gray">生成中...</Text>}
+                    {Boolean(resultState.generateError) && <Text size="1" color="red">{resultState.generateError}</Text>}
+                </Flex>
+            </Card>
+
+            <Card className={classNames('qr-generator-panel-card', 'qr-generator-panel-preview')}>
+                <Flex direction="column" gap="3" className="qr-generator-panel-preview-content">
+                    <Box className="qr-generator-panel-preview-stage">
+                        {Boolean(resultState.qrDataUrl) && (<img className="qr-generator-panel-preview-image" src={resultState.qrDataUrl} alt="二维码预览"/>)}
+                        {!resultState.qrDataUrl && <Text color="gray">输入内容后将自动生成二维码</Text>}
+                    </Box>
+                    <Button variant="soft" onClick={handleDownload} disabled={!resultState.qrDataUrl}>下载 PNG</Button>
+                </Flex>
+            </Card>
+        </Flex>
+    )
+}

package/src/components/upload-file-view.less

@@ -0,0 +1,26 @@
+.upload-file-view {
+  &-input {
+    display: none;
+  }
+
+  &-dropzone {
+    min-height: 180px;
+    border: 1px dashed var(--gray-7);
+    border-radius: var(--radius-3);
+    background-color: var(--gray-2);
+    padding: var(--space-3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+    outline: none;
+  }
+
+  &-dropzone:hover,
+  &-dropzone:focus-visible,
+  &-dropzone.is-drag-over {
+    border-color: var(--gray-10);
+    background-color: var(--gray-3);
+  }
+}

package/src/components/upload-file-view.tsx

@@ -0,0 +1,80 @@
+import React, {useRef, useState} from 'react'
+import {Box, Flex, Text} from '@forge-kit/component'
+import {getImageFileFromClipboard, getImageFileFromFileList} from '@/utils/qr-code'
+import classNames from 'classnames'
+import './upload-file-view.less'
+
+interface UploadFileViewProps {
+    helperText?: string
+    onFileSelected: (file: File) => Promise<void> | void
+    onInvalidFile?: () => void
+}
+
+export const UploadFileView: React.FC<UploadFileViewProps> = (props) => {
+    const {helperText = '支持拖动、Ctrl/Cmd+V 粘贴、点击上传', onFileSelected, onInvalidFile} = props
+    const [isDragOver, setIsDragOver] = useState(false)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+
+    const handleInputChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = getImageFileFromFileList(event.target.files)
+        if (!file) return
+        await onFileSelected(file)
+        event.target.value = ''
+    }
+
+    const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
+        event.preventDefault()
+        setIsDragOver(false)
+
+        const file = getImageFileFromFileList(event.dataTransfer.files)
+        if (!file) {
+            if (event.dataTransfer.files.length > 0) onInvalidFile?.()
+            return
+        }
+        await onFileSelected(file)
+    }
+
+    const handlePaste = async (event: React.ClipboardEvent<HTMLDivElement>) => {
+        const file = getImageFileFromClipboard(event.clipboardData)
+        if (!file) return
+        event.preventDefault()
+        await onFileSelected(file)
+    }
+
+    const handleChooseFileClick = () => {
+        fileInputRef.current?.click()
+    }
+
+    const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+        event.preventDefault()
+        setIsDragOver(true)
+    }
+
+    const handleDragLeave = () => {
+        setIsDragOver(false)
+    }
+
+    return (
+        <Flex className="upload-file-view" direction="column" gap="2">
+            <Text size="1" color="gray">{helperText}</Text>
+            <input
+                ref={fileInputRef}
+                className="upload-file-view-input"
+                type="file"
+                accept="image/*"
+                onChange={handleInputChange}
+            />
+            <Box
+                className={classNames('upload-file-view-dropzone', {'is-drag-over': isDragOver})}
+                tabIndex={0}
+                onClick={handleChooseFileClick}
+                onPaste={handlePaste}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+            >
+                <Text align="center" color="gray">拖拽 / 点击 / 粘贴 上传</Text>
+            </Box>
+        </Flex>
+    )
+}

package/src/hooks/use-debounced-callback.ts

@@ -0,0 +1,14 @@
+import debounce from 'lodash-es/debounce'
+import {useEffect, useMemo} from 'react'
+
+export const useDebouncedCallback = <Args extends unknown[]>(callback: (...args: Args) => void, wait: number) => {
+    const debouncedCallback = useMemo(() => {
+        return debounce(callback, wait)
+    }, [callback, wait])
+
+    useEffect(() => {
+        return () => debouncedCallback.cancel()
+    }, [debouncedCallback])
+
+    return debouncedCallback
+}

package/src/hooks/use-latest-task-guard.ts

@@ -0,0 +1,21 @@
+import {useCallback, useRef} from 'react'
+
+export const useLatestTaskGuard = <Args extends unknown[], Result>(
+    execute: (...args: Args) => Promise<Result>,
+) => {
+    const latestTaskIdRef = useRef(0)
+
+    return useCallback(async (...args: Args): Promise<Result | undefined> => {
+        latestTaskIdRef.current += 1
+        const currentTaskId = latestTaskIdRef.current
+
+        try {
+            const result = await execute(...args)
+            if (currentTaskId !== latestTaskIdRef.current) return
+            return result
+        } catch (error) {
+            if (currentTaskId !== latestTaskIdRef.current) return
+            throw error
+        }
+    }, [execute])
+}

package/src/hooks/use-partial-state.ts

@@ -0,0 +1,15 @@
+import {useCallback, useState} from 'react'
+
+export const usePartialState = <T extends object>(initialState: T) => {
+    const [state, setState] = useState<T>(initialState)
+
+    const updateState = useCallback((patch: Partial<T>) => {
+        setState((prev) => ({...prev, ...patch}))
+    }, [])
+
+    return {
+        state,
+        setState,
+        updateState,
+    }
+}

package/src/hooks/use-to-ref.ts

@@ -0,0 +1,11 @@
+import {useEffect, useRef} from 'react'
+
+export const useToRef = <T>(value: T) => {
+    const valueRef = useRef<T>(value)
+
+    useEffect(() => {
+        valueRef.current = value
+    }, [value])
+
+    return valueRef
+}