{"_id":"@darksnow-ui/fractal-layout","_rev":"3-9ab040313e8bc9a9d0ad90ae1c4c6f77","name":"@darksnow-ui/fractal-layout","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@darksnow-ui/fractal-layout","version":"0.0.1","keywords":["react","layout","panels","resizable","split","fractal","recursive","dashboard","ui","component","typescript","drag","resize","grid","panes","splitter","window-manager","tmux-like","vscode-like"],"author":{"name":"Anderson D. Rosa","email":"andersondrosa@gmail.com"},"license":"MIT","_id":"@darksnow-ui/fractal-layout@0.0.1","maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"homepage":"https://github.com/darksnow-ui/darksnow-ui/tree/main/packages/fractal-layout","bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"dist":{"shasum":"9280ddc3936d58270a7969f28efa350a281077ee","tarball":"https://registry.npmjs.org/@darksnow-ui/fractal-layout/-/fractal-layout-0.0.1.tgz","fileCount":13,"integrity":"sha512-rZHnaarm2RqClBxpPs4LSqVFDVjRVItYKAUaKGqPXJaeSotPC1yTPSwYD5hPUHJwV/PfOBU4IzQV33xXjbCHXw==","signatures":[{"sig":"MEYCIQDu3X+U3z9HIcS6KtYhXkT3f2KwdCX83Ho68IO9em+1mwIhAJTKM57x1vmtDjnmfVFMLYexWsVnE2mjOQfUFHr9/Vgm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":170299},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=16"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"scripts":{"dev":"tsup --watch","demo":"vite","lint":"eslint src --ext ts,tsx","test":"vitest --run","build":"tsup","clean":"rm -rf dist","format":"prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"","test:ui":"vitest --ui","lint:fix":"eslint src --ext ts,tsx --fix","typecheck":"tsc --noEmit","demo:build":"vite build","test:watch":"vitest --watch","demo:preview":"vite preview","format:check":"prettier --check \"src/**/*.{ts,tsx,js,jsx,json,md}\"","test:coverage":"vitest --coverage","prepublishOnly":"pnpm run clean && pnpm run typecheck && pnpm run test && pnpm run build"},"_npmUser":{"name":"andersondrosa","actor":{"name":"andersondrosa","type":"user","email":"andersondrosa@outlook.com"},"email":"andersondrosa@outlook.com"},"repository":{"url":"git+https://github.com/darksnow-ui/darksnow-ui.git","type":"git","directory":"packages/fractal-layout"},"description":"Advanced panel management system for web applications with dynamic splitting, resizing, and recursive layouts","directories":{},"licenseText":"MIT License\n\nCopyright (c) 2024 Anderson D. Rosa\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","sideEffects":false,"dependencies":{"@darksnow-ui/ui-utils":"workspace:*"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^7.2.0","vite":"^5.0.0","jsdom":"^22.1.0","react":"^19.0.0","eslint":"^8.37.0","vitest":"^0.34.0","prettier":"^3.5.3","react-dom":"^19.0.0","@vitest/ui":"^0.34.0","typescript":"^5.0.0","@types/node":"^18.15.0","@types/react":"^19.1.6","@types/react-dom":"^19.0.2","@vitest/coverage-v8":"^0.34.0","@vitejs/plugin-react":"^4.0.0","@testing-library/react":"^14.0.0","@testing-library/jest-dom":"^6.0.0","@typescript-eslint/parser":"^5.57.0","@testing-library/react-hooks":"^8.0.1","@typescript-eslint/eslint-plugin":"^5.57.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/fractal-layout_0.0.1_1750553606071_0.8468629557505909","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@darksnow-ui/fractal-layout","version":"0.0.2","keywords":["react","layout","panels","resizable","split","fractal","recursive","dashboard","ui","component","typescript","drag","resize","grid","panes","splitter","window-manager","tmux-like","vscode-like"],"author":{"name":"Anderson D. Rosa","email":"andersondrosa@gmail.com"},"license":"MIT","_id":"@darksnow-ui/fractal-layout@0.0.2","maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"homepage":"https://github.com/darksnow-ui/darksnow-ui/tree/main/packages/fractal-layout","bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"dist":{"shasum":"fb5f1a7e0d9dad1dee118122429935388c5d3eaf","tarball":"https://registry.npmjs.org/@darksnow-ui/fractal-layout/-/fractal-layout-0.0.2.tgz","fileCount":13,"integrity":"sha512-PfopFr8QecLFs0tCe67YtPe1vTID2BGvykONgcJ4UCzKxof8+DugN4fLH9eqI4oO3zfCz7O9E9sHwJQ1c434GQ==","signatures":[{"sig":"MEUCIGiZKOgZAIXPmNk/8ziA7u2kdlQED3lgp5loFWDpVizDAiEA/0F+KpeK+ShMIHc0UPUJSUR5/ppWt2hOddIfEU4ju/I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":172539},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=16"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"scripts":{"dev":"concurrently \"pnpm:dev:lib\" \"pnpm:dev:demo\"","demo":"vite","lint":"eslint src --ext ts,tsx","test":"vitest --run","build":"tsup","clean":"rm -rf dist","format":"prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"","dev:lib":"tsup --watch","test:ui":"vitest --ui","dev:demo":"vite","lint:fix":"eslint src --ext ts,tsx --fix","typecheck":"tsc --noEmit","demo:build":"vite build","test:watch":"vitest --watch","demo:preview":"vite preview","format:check":"prettier --check \"src/**/*.{ts,tsx,js,jsx,json,md}\"","test:coverage":"vitest --coverage","prepublishOnly":"pnpm run clean && pnpm run typecheck && pnpm run test && pnpm run build"},"_npmUser":{"name":"andersondrosa","actor":{"name":"andersondrosa","type":"user","email":"andersondrosa@outlook.com"},"email":"andersondrosa@outlook.com"},"repository":{"url":"git+https://github.com/darksnow-ui/darksnow-ui.git","type":"git","directory":"packages/fractal-layout"},"description":"Advanced panel management system for web applications with dynamic splitting, resizing, and recursive layouts","directories":{},"licenseText":"MIT License\n\nCopyright (c) 2024 Anderson D. Rosa\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","sideEffects":false,"dependencies":{"@darksnow-ui/ui-utils":"workspace:*"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^7.2.0","vite":"^5.0.0","jsdom":"^22.1.0","react":"^19.0.0","eslint":"^8.37.0","vitest":"^0.34.0","prettier":"^3.5.3","react-dom":"^19.0.0","@vitest/ui":"^0.34.0","typescript":"^5.0.0","@types/node":"^18.15.0","@types/react":"^19.1.6","concurrently":"^9.1.2","@types/react-dom":"^19.0.2","@vitest/coverage-v8":"^0.34.0","@vitejs/plugin-react":"^4.0.0","@testing-library/react":"^14.0.0","@testing-library/jest-dom":"^6.0.0","@typescript-eslint/parser":"^5.57.0","@testing-library/react-hooks":"^8.0.1","@typescript-eslint/eslint-plugin":"^5.57.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/fractal-layout_0.0.2_1750555844962_0.9453040236644878","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@darksnow-ui/fractal-layout","version":"0.0.3","description":"Advanced panel management system for web applications with dynamic splitting, resizing, and recursive layouts","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"scripts":{"build":"tsup","dev":"concurrently \"pnpm:dev:lib\" \"pnpm:dev:demo\"","dev:lib":"tsup --watch","dev:demo":"vite","demo":"vite","demo:build":"vite build","demo:preview":"vite preview","test":"vitest --run","test:watch":"vitest --watch","test:ui":"vitest --ui","test:coverage":"vitest --coverage","typecheck":"tsc --noEmit","lint":"eslint src --ext ts,tsx","lint:fix":"eslint src --ext ts,tsx --fix","format":"prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md}\"","format:check":"prettier --check \"src/**/*.{ts,tsx,js,jsx,json,md}\"","clean":"rm -rf dist","prepublishOnly":"pnpm run clean && pnpm run typecheck && pnpm run test && pnpm run build"},"keywords":["react","layout","panels","resizable","split","fractal","recursive","dashboard","ui","component","typescript","drag","resize","grid","panes","splitter","window-manager","tmux-like","vscode-like"],"author":{"name":"Anderson D. Rosa","email":"andersondrosa@outlook.com"},"license":"MIT","sideEffects":false,"engines":{"node":">=16"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"dependencies":{},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@testing-library/jest-dom":"^6.0.0","@testing-library/react":"^14.0.0","@testing-library/react-hooks":"^8.0.1","@types/node":"^18.15.0","@types/react":"^19.1.6","@types/react-dom":"^19.0.2","@typescript-eslint/eslint-plugin":"^5.57.0","@typescript-eslint/parser":"^5.57.0","@vitejs/plugin-react":"^4.0.0","@vitest/coverage-v8":"^0.34.0","@vitest/ui":"^0.34.0","concurrently":"^9.1.2","eslint":"^8.37.0","jsdom":"^22.1.0","prettier":"^3.5.3","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^7.2.0","typescript":"^5.0.0","vite":"^5.0.0","vitest":"^0.34.0"},"licenseText":"MIT License\n\nCopyright (c) 2024 Anderson D. Rosa\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"@darksnow-ui/fractal-layout@0.0.3","dist":{"shasum":"18a1840bad8e4255fc897130b1a2df9651d4abc9","integrity":"sha512-BDM4VMd2XhHIF1GcJmVHGYEoGO6RqStDcn7+0+vVIzZ3sC16HcALA0Jf2h37onHCJgZYo4wXDNohRmBgzTby0Q==","tarball":"https://registry.npmjs.org/@darksnow-ui/fractal-layout/-/fractal-layout-0.0.3.tgz","fileCount":13,"unpackedSize":172577,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHM7dk8V9MaXtcAy5CvOFd34xzskIB3/QIG8mnDBo9bDAiBMTMObeFKHDkLR+8+yrPl+SQVHJTiZr6Sese06XO1JZA=="}]},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com","actor":{"name":"andersondrosa","email":"andersondrosa@outlook.com","type":"user"}},"directories":{},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/fractal-layout_0.0.3_1750556242365_0.6465542002654521"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-22T00:53:26.006Z","modified":"2025-06-22T01:37:22.727Z","0.0.1":"2025-06-22T00:53:26.244Z","0.0.2":"2025-06-22T01:30:45.154Z","0.0.3":"2025-06-22T01:37:22.552Z"},"author":{"name":"Anderson D. Rosa","email":"andersondrosa@outlook.com"},"license":"MIT","keywords":["react","layout","panels","resizable","split","fractal","recursive","dashboard","ui","component","typescript","drag","resize","grid","panes","splitter","window-manager","tmux-like","vscode-like"],"description":"Advanced panel management system for web applications with dynamic splitting, resizing, and recursive layouts","maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"readme":"# @darksnow-ui/fractal-layout\n\n<p align=\"center\">\n  <strong>Sistema avançado de gerenciamento de painéis para aplicações web</strong>\n</p>\n\n<p align=\"center\">\n  Crie interfaces complexas com painéis divisíveis, redimensionáveis e recursivos de forma intuitiva.\n</p>\n\n## ✨ Features\n\n- 🎯 **Divisão Dinâmica** - Divida qualquer painel horizontal ou verticalmente\n- 📐 **Redimensionamento Fluído** - Arraste para redimensionar com constraints min/max\n- 🔄 **Layouts Recursivos** - Crie layouts dentro de layouts infinitamente\n- 🧩 **Sistema de Widgets** - Plugável e extensível\n- 🎨 **Totalmente Customizável** - Estilos, comportamentos e configurações\n- ⚡ **Alta Performance** - Otimizado para layouts complexos\n- 📱 **Responsivo** - Funciona em desktop e mobile (em desenvolvimento)\n\n## 📦 Instalação\n\n```bash\nnpm install @darksnow-ui/fractal-layout\n# ou\npnpm add @darksnow-ui/fractal-layout\n# ou\nyarn add @darksnow-ui/fractal-layout\n```\n\n## 🚀 Quick Start\n\n### ResizablePanels Básico\n\n```jsx\nimport { ResizablePanels } from '@darksnow-ui/fractal-layout'\n\nfunction App() {\n  const panels = [\n    {\n      id: \"sidebar\",\n      size: 30,\n      minSize: 20,\n      maxSize: 40,\n      children: <Sidebar />\n    },\n    {\n      id: \"content\",\n      size: 70,\n      children: <Content />\n    }\n  ]\n\n  return (\n    <ResizablePanels \n      panels={panels}\n      direction=\"horizontal\"\n      onSizeChange={(sizes) => console.log(sizes)}\n    />\n  )\n}\n```\n\n### FractalLayout Completo\n\n```jsx\nimport { FractalLayout } from '@darksnow-ui/fractal-layout'\n\n// Defina seus widgets\nconst widgets = {\n  editor: {\n    id: \"editor\",\n    component: EditorWidget,\n    icon: FileTextIcon\n  },\n  terminal: {\n    id: \"terminal\",\n    component: TerminalWidget\n  },\n  preview: {\n    id: \"preview\",\n    component: PreviewWidget\n  }\n}\n\n// Layout inicial com props\nconst initialLayout = {\n  id: \"root\",\n  type: \"layout\",\n  direction: \"horizontal\",\n  children: [\n    {\n      id: \"left\",\n      type: \"widget\",\n      widget: \"editor\",\n      props: {\n        filename: \"App.tsx\",\n        language: \"typescript\",\n        theme: \"dark\"\n      },\n      size: 60\n    },\n    {\n      id: \"right\",\n      type: \"widget\",\n      widget: \"preview\",\n      props: {\n        url: \"http://localhost:3000\",\n        zoom: 0.8\n      },\n      size: 40\n    }\n  ]\n}\n\nfunction App() {\n  const [layout, setLayout] = useState(initialLayout)\n\n  return (\n    <FractalLayout\n      layout={layout}\n      widgets={widgets}\n      onLayoutChange={setLayout}\n      config={{\n        enableContextMenu: true,\n        minPanelSize: 200\n      }}\n    />\n  )\n}\n```\n\n## 📖 Documentação\n\n### ResizablePanels\n\nComponente base para painéis redimensionáveis.\n\n#### Props\n\n| Prop | Tipo | Padrão | Descrição |\n|------|------|--------|-----------|\n| `panels` | `Panel[]` | - | Array de painéis a renderizar |\n| `direction` | `\"horizontal\" \\| \"vertical\"` | `\"horizontal\"` | Direção do layout |\n| `handleSize` | `number` | `6` | Tamanho do handle em pixels |\n| `onSizeChange` | `(sizes: Record<string, number>) => void` | - | Callback quando tamanhos mudam |\n| `className` | `string` | - | Classes CSS adicionais |\n\n#### Tipo Panel\n\n```typescript\ninterface Panel {\n  id: string\n  size?: number      // Porcentagem (0-100)\n  minSize?: number   // Tamanho mínimo\n  maxSize?: number   // Tamanho máximo\n  children: ReactNode\n}\n```\n\n### FractalLayout\n\nSistema completo de gerenciamento de layouts com recursos avançados.\n\n#### Props\n\n| Prop | Tipo | Descrição |\n|------|------|-----------|\n| `layout` | `FractalPanel` | Estrutura do layout |\n| `widgets` | `WidgetRegistry` | Registro de widgets disponíveis |\n| `onLayoutChange` | `(layout: FractalPanel) => void` | Callback para mudanças |\n| `config` | `FractalConfig` | Configurações opcionais |\n\n#### Tipos Principais\n\n```typescript\ninterface FractalPanel {\n  id: string\n  type: \"widget\" | \"layout\"\n  widget?: string              // ID do widget\n  props?: Record<string, any>  // Props específicas para a instância do widget\n  children?: FractalPanel[]    // Sub-painéis\n  direction?: \"horizontal\" | \"vertical\"\n  size?: number\n  minSize?: number\n  maxSize?: number\n}\n\ninterface Widget {\n  id: string\n  component: React.ComponentType\n  icon?: React.ComponentType\n  config?: Record<string, any>\n}\n\ninterface FractalConfig {\n  minPanelSize?: number      // Default: 300\n  scrollThreshold?: number   // Default: 3\n  enableContextMenu?: boolean // Default: true\n  handleSize?: number        // Default: 6\n}\n```\n\n## 🎮 Exemplos Avançados\n\n### Persistência de Layout\n\n```jsx\nfunction PersistentLayout() {\n  const [layout, setLayout] = useState(() => {\n    const saved = localStorage.getItem('app-layout')\n    return saved ? JSON.parse(saved) : defaultLayout\n  })\n\n  const handleLayoutChange = (newLayout) => {\n    setLayout(newLayout)\n    localStorage.setItem('app-layout', JSON.stringify(newLayout))\n  }\n\n  return <FractalLayout layout={layout} onLayoutChange={handleLayoutChange} />\n}\n```\n\n### Undo/Redo\n\n```jsx\nfunction LayoutWithHistory() {\n  const [history, setHistory] = useState([initialLayout])\n  const [index, setIndex] = useState(0)\n  \n  const layout = history[index]\n  \n  const handleChange = (newLayout) => {\n    const newHistory = history.slice(0, index + 1)\n    newHistory.push(newLayout)\n    setHistory(newHistory)\n    setIndex(newHistory.length - 1)\n  }\n  \n  const undo = () => index > 0 && setIndex(index - 1)\n  const redo = () => index < history.length - 1 && setIndex(index + 1)\n  \n  return (\n    <>\n      <button onClick={undo} disabled={index === 0}>Undo</button>\n      <button onClick={redo} disabled={index === history.length - 1}>Redo</button>\n      <FractalLayout layout={layout} onLayoutChange={handleChange} />\n    </>\n  )\n}\n```\n\n### Widgets com Props Customizadas\n\nUma das features mais poderosas é a capacidade de passar props específicas para cada instância de widget através do campo `props`:\n\n```jsx\n// Definir um widget que aceita props\nconst ChartWidget = ({ title, data, type = 'bar', color }) => {\n  return (\n    <div>\n      <h3>{title}</h3>\n      <Chart type={type} data={data} color={color} />\n    </div>\n  )\n}\n\n// Registrar o widget uma única vez\nconst widgets = {\n  chart: {\n    id: 'chart',\n    component: ChartWidget\n  }\n}\n\n// Criar múltiplas instâncias com configurações diferentes\nconst layout = {\n  id: \"root\",\n  type: \"layout\",\n  direction: \"horizontal\",\n  children: [\n    {\n      id: \"sales-chart\",\n      type: \"widget\",\n      widget: \"chart\",\n      props: {\n        title: \"Vendas 2024\",\n        type: \"bar\",\n        data: salesData,\n        color: \"#3b82f6\"\n      },\n      size: 50\n    },\n    {\n      id: \"growth-chart\",\n      type: \"widget\",\n      widget: \"chart\",\n      props: {\n        title: \"Crescimento Anual\",\n        type: \"line\",\n        data: growthData,\n        color: \"#10b981\"\n      },\n      size: 50\n    }\n  ]\n}\n```\n\n#### Persistência e Identificação\n\nCada widget pode receber um ID único através das props, permitindo:\n\n```jsx\nconst StatefulWidget = ({ id, initialValue }) => {\n  // Usar o ID para persistir estado\n  const [value, setValue] = usePersistedState(`widget-${id}`, initialValue)\n  \n  // Buscar dados específicos\n  const { data } = useWidgetData(id)\n  \n  return <div>...</div>\n}\n\n// No layout\n{\n  widget: \"stateful\",\n  props: {\n    id: \"metrics-dashboard-main\",\n    initialValue: { view: 'monthly' }\n  }\n}\n```\n\n### Widget Recursivo\n\n```jsx\nconst LayoutWidget = () => {\n  const nestedLayout = {\n    id: \"nested\",\n    type: \"layout\",\n    direction: \"vertical\",\n    children: [/* ... */]\n  }\n  \n  return (\n    <div className=\"nested-layout-widget\">\n      <h4>Sub-layout</h4>\n      <FractalLayout \n        layout={nestedLayout}\n        widgets={widgets}\n        config={{ enableContextMenu: false }}\n      />\n    </div>\n  )\n}\n\n// Registrar no widgets\nconst widgets = {\n  // ... outros widgets\n  layout: {\n    id: \"layout\",\n    component: LayoutWidget,\n    acceptsChildren: true\n  }\n}\n```\n\n## 🎨 Customização\n\n### CSS Variables\n\n```css\n:root {\n  --fractal-border: #e2e8f0;\n  --fractal-handle-color: #cbd5e1;\n  --fractal-handle-hover: #94a3b8;\n  --fractal-radius: 0.5rem;\n}\n```\n\n### Estilos Customizados\n\n```jsx\n<FractalLayout\n  className=\"my-custom-layout\"\n  layout={layout}\n  widgets={widgets}\n/>\n```\n\n```css\n.my-custom-layout .resize-handle {\n  background: linear-gradient(90deg, #3b82f6, #8b5cf6);\n}\n\n.my-custom-layout .widget-panel {\n  border-radius: 1rem;\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n}\n```\n\n## 🛠️ Desenvolvimento\n\n### Setup\n\n```bash\n# Clone o repositório\ngit clone https://github.com/darksnow-ui/fractal-layout\n\n# Instale dependências\npnpm install\n\n# Rode a demo\npnpm demo\n```\n\n### Scripts\n\n```bash\npnpm build      # Build da biblioteca\npnpm test       # Rodar testes\npnpm demo       # Demo interativa (porta 3000)\npnpm typecheck  # Verificar tipos\n```\n\n### Estrutura\n\n```\nfractal-layout/\n├── src/\n│   ├── components/\n│   │   ├── ResizablePanels/   # Componente base\n│   │   └── FractalLayout/     # Sistema completo\n│   ├── demo/                  # Aplicação de demonstração\n│   └── index.ts              # Exports principais\n├── docs/                     # Documentação detalhada\n└── package.json\n```\n\n## 🤝 Contribuindo\n\nContribuições são bem-vindas! Por favor:\n\n1. Fork o projeto\n2. Crie uma branch para sua feature (`git checkout -b feature/AmazingFeature`)\n3. Commit suas mudanças (`git commit -m 'Add some AmazingFeature'`)\n4. Push para a branch (`git push origin feature/AmazingFeature`)\n5. Abra um Pull Request\n\n## 📄 Licença\n\nMIT © [DarkSnow UI](https://github.com/darksnow-ui)\n\n## 🙏 Agradecimentos\n\nInspirado por:\n- [React Resizable Panels](https://github.com/bvaughn/react-resizable-panels)\n- VSCode Split View\n- tmux\n\n---\n\nFeito com ❤️ pela equipe DarkSnow UI","readmeFilename":"README.md"}