useFileSystemAccess

import { useFileSystemAccess } from '@usegrand/react-hokss';

function FileEditor() {
  const { 
    readFile, 
    writeFile, 
    saveFile, 
    hasPermission, 
    isSupported, 
    isLoading, 
    error 
  } = useFileSystemAccess();

  const [content, setContent] = useState('');

  const handleOpenFile = async () => {
    const fileContent = await readFile({
      types: [{
        description: 'Text files',
        accept: { 'text/plain': ['.txt', '.md'] }
      }]
    });
    if (fileContent) setContent(fileContent);
  };

  const handleSaveFile = async () => {
    await saveFile(content, 'document.txt', {
      types: [{
        description: 'Text files',
        accept: { 'text/plain': ['.txt'] }
      }]
    });
  };

  if (!isSupported) {
    return <div>File System Access API not supported</div>;
  }

  return (
    <div>
      <div className="toolbar">
        <button onClick={handleOpenFile} disabled={isLoading}>
          Open File
        </button>
        <button onClick={handleSaveFile} disabled={isLoading || !content}>
          Save File
        </button>
        <span>Permission: {hasPermission ? '✅' : '❌'}</span>
      </div>
      
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Open a file or start typing..."
        rows={20}
        cols={80}
      />
      
      {error && <div className="error">Error: {error}</div>}
    </div>
  );
}