lilact 0.24.1 → 0.26.0

package/docs/variables/accessories.SplitPane.html

@@ -32,17 +32,22 @@
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-position">Param: position<a href="#param-position" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Controlled splitter position. Normalized value within <code>[min, max]</code>.
 If provided, the component uses this value instead of internal state.</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-defaultposition">Param: defaultPosition<a href="#param-defaultposition" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Initial splitter position for uncontrolled usage. Defaults to <code>0.5</code>.</p>
-</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-min">Param: min<a href="#param-min" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Minimum allowed position. Defaults to <code>0.1</code>.</p>
-</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-max">Param: max<a href="#param-max" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Maximum allowed position. Defaults to <code>0.9</code>.</p>
+</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-min">Param: min<a href="#param-min" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Minimum allowed position. Defaults to <code>0.1</code>.
+Can also be a function that will be called with (containerWidth|containerHeight,splitterSize) as arguments</p>
+</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-max">Param: max<a href="#param-max" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Maximum allowed position. Defaults to <code>0.9</code>.
+Can also be a function that will be called with (containerWidth|containerHeight,splitterSize) as arguments</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-splittersize">Param: splitterSize<a href="#param-splittersize" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Thickness of the draggable splitter in pixels. Defaults to <code>8</code>.</p>
+</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-resizemode">Param: resizeMode<a href="#param-resizemode" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>The behavior on container resize. Its value can be <code>proportional</code>, <code>fixFirst</code> or <code>fixSecond</code>.
+Default is <code>proportional</code>.</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-onsizechange">Param: onSizeChange<a href="#param-onsizechange" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Callback invoked when the position changes. Receives the new normalized position.</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-style">Param: style<a href="#param-style" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Optional root container styles.</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-classname">Param: className<a href="#param-classname" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Optional root container CSS class.</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-leftpanestyle">Param: leftPaneStyle<a href="#param-leftpanestyle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Optional styles applied to the left pane (or top pane in vertical mode).</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-rightpanestyle">Param: rightPaneStyle<a href="#param-rightpanestyle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Optional styles applied to the right pane (or bottom pane in vertical mode).</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-splitterstyle">Param: splitterStyle<a href="#param-splitterstyle" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Optional styles applied to the splitter element.</p>
+</div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-splitterchild">Param: splitterChild<a href="#param-splitterchild" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Child to be rendered into the splitter itself.</p>
 </div><div class="tsd-tag-param"><h4 class="tsd-anchor-link" id="param-children">Param: children<a href="#param-children" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Children to be rendered into the two pane containers.</p>
 </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="tsx"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-7">ref</span><span class="hl-1"> = </span><span class="hl-0">useRef</span><span class="hl-1">&lt;</span><span class="hl-8">SplitPaneHandle</span><span class="hl-1">&gt;(</span><span class="hl-3">null</span><span class="hl-1">);</span><br/><br/><span class="hl-9">&lt;</span><span class="hl-8">SplitPane</span><br/><span class="hl-1">  </span><span class="hl-12">ref</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-5">ref</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-12">mode</span><span class="hl-1">=</span><span class="hl-2">&quot;horizontal&quot;</span><br/><span class="hl-1">  </span><span class="hl-12">defaultPosition</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-14">0.5</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-12">min</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-14">0.1</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-12">max</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-14">0.9</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-12">onSizeChange</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-11">(</span><span class="hl-5">pos</span><span class="hl-11">) </span><span class="hl-3">=&gt;</span><span class="hl-11"> </span><span class="hl-5">console</span><span class="hl-11">.</span><span class="hl-0">log</span><span class="hl-11">(</span><span class="hl-5">pos</span><span class="hl-11">)</span><span class="hl-3">}</span><br/><span class="hl-9">&gt;</span><br/><span class="hl-1">  </span><span class="hl-9">&lt;</span><span class="hl-10">div</span><span class="hl-1"> </span><span class="hl-9">/&gt;</span><span class="hl-1"> </span><span class="hl-9">&lt;</span><span class="hl-10">div</span><span class="hl-1"> </span><span class="hl-9">/&gt;</span><br/><span class="hl-9">&lt;/</span><span class="hl-8">SplitPane</span><span class="hl-9">&gt;</span>
 </code><button type="button">Copy</button></pre>
 
-</div></div><aside class="tsd-sources"><ul><li>Defined in accessories.jsx:425</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+</div></div><aside class="tsd-sources"><ul><li>Defined in accessories.jsx:430</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

package/docs/variables/components.cloneElement.html

@@ -1 +1 @@
-<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>cloneElement | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/components.html">components</a></li><li><a href="" aria-current="page">cloneElement</a></li></ul><h1>Variable cloneElement<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">cloneElement</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">component</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">propsPatch</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">entity</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-kind-property">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol"> = cloneComponent</span></div><div class="tsd-type-declaration"><h4>Type Declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures"><li class="tsd-signature" id="__type"><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">component</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">propsPatch</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">entity</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-kind-property">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">}</span></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">component</span>: <span class="tsd-signature-type">any</span></span></li><li><span><span class="tsd-kind-parameter">propsPatch</span>: <span class="tsd-signature-type">any</span></span></li><li><span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">children</span>: <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">entity</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-kind-property">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">}</span></h4></li></ul></li></ul></div><aside class="tsd-sources"><ul><li>Defined in components.jsx:1221</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>cloneElement | Lilact</title><meta name="description" content="Documentation for Lilact"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Lilact</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="../modules/components.html">components</a></li><li><a href="" aria-current="page">cloneElement</a></li></ul><h1>Variable cloneElement<code class="tsd-tag">Const</code></h1></div><div class="tsd-signature"><span class="tsd-kind-variable">cloneElement</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">component</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">propsPatch</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=&gt;</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">entity</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-kind-property">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">}</span><span class="tsd-signature-symbol"> = cloneComponent</span></div><div class="tsd-type-declaration"><h4>Type Declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures"><li class="tsd-signature" id="__type"><span class="tsd-signature-symbol">(</span><br/>    <span class="tsd-kind-parameter">component</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-kind-parameter">propsPatch</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">,</span><br/>    <span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">children</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">entity</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-kind-property">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">}</span></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">component</span>: <span class="tsd-signature-type">any</span></span></li><li><span><span class="tsd-kind-parameter">propsPatch</span>: <span class="tsd-signature-type">any</span></span></li><li><span><span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">children</span>: <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">entity</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-kind-property">props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span> <span class="tsd-signature-symbol">[</span><span class="tsd-kind-index-signature">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">]:</span> <span class="tsd-signature-type">null</span> <span class="tsd-signature-symbol">}</span></h4></li></ul></li></ul></div><aside class="tsd-sources"><ul><li>Defined in components.jsx:1228</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Lilact</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

package/examples/demos/usedefered.jsx

@@ -1,7 +1,7 @@
 import { useState, useDeferredValue } from "lilact";
 
 function ExpensiveList({ query }) {
-  const items = Array.from({ length: 5000 }, (_, i) => `${query} item ${i}`);
+  const items = Array.from({ length: 2000 }, (_, i) => `${query} item ${i}`);
   return (
     <ul>
       {items.map((it) => (

package/examples/lilact.development.js

@@ -2408,6 +2408,8 @@ var ComponentCore = class {
     	insert_index
     	loader_args
     
+    	is_svg
+    
     	*/
     __publicField(this, "component");
     __publicField(this, "props");
@@ -2446,7 +2448,8 @@ var ComponentCore = class {
       if (this.component.shouldComponentUpdate && !this.component.shouldComponentUpdate(next_state, next_props, this.context)) return;
       if (typeof this.entity === "string") {
         if (!(this.element instanceof Element)) {
-          if (this.parent.entity === "svg" || this.entity === "svg") {
+          if (this.is_svg || this.container.is_svg) {
+            this.is_svg = true;
             this.element = document.createElementNS(SVG_NS, this.entity);
           } else {
             this.element = document.createElement(this.entity);
@@ -3028,6 +3031,9 @@ var HTMLComponent = class extends Component {
   constructor(entity, props) {
     super(props);
     this[CORE].entity = entity;
+    if (entity === "svg") {
+      this[CORE].is_svg = true;
+    }
   }
   render() {
     return this[CORE].props.children;
@@ -3035,7 +3041,7 @@ var HTMLComponent = class extends Component {
 };
 var RootComponent = class extends HTMLComponent {
   constructor(element, props) {
-    super(":root", props);
+    super(":root:", props);
     __publicField(this, "displayName", "Root");
     if (typeof this.element === "string") {
       element = document.querySelector(element);
@@ -4964,26 +4970,55 @@ var SplitPane = forwardRef(function SplitPane2({
   max = 0.9,
   splitterSize = 8,
   onSizeChange,
+  resizeMode = "proportional",
   style,
   className,
   firstPaneStyle,
   secondPaneStyle,
   splitterStyle,
+  splitterChild,
   children
 }, ref) {
+  const containerRef = useRef(null);
+  const sizeRef = useRef({ w: 0, h: 0 });
   const initialMode = mode === "vertical" ? "vertical" : "horizontal";
   const [internalMode, setInternalMode] = useState(initialMode);
-  const [internalPos, setInternalPos] = useState(clamp(defaultPosition, min, max));
-  const posResolved = position2 == null ? internalPos : clamp(position2, min, max);
+  const [internalPos, setInternalPos] = useState(clamp(
+    defaultPosition,
+    min,
+    max,
+    mode === "verical" ? sizeRef.current.h : sizeRef.current.w,
+    splitterSize
+  ));
+  let posResolved = position2 == null ? internalPos : position2;
+  posResolved = clamp(
+    posResolved,
+    min,
+    max,
+    mode === "verical" ? sizeRef.current.h : sizeRef.current.w,
+    splitterSize
+  );
   useEffect(() => {
     if (position2 == null) return;
-    setInternalPos(clamp(position2, min, max));
+    setInternalPos(clamp(
+      position2,
+      min,
+      max,
+      mode === "verical" ? sizeRef.current.h : sizeRef.current.w,
+      splitterSize
+    ));
   }, [position2, min, max]);
   useEffect(() => {
     setInternalMode(mode === "vertical" ? "vertical" : "horizontal");
   }, [mode]);
   const setPosition = (next2) => {
-    const clamped = clamp(next2, min, max);
+    const clamped = clamp(
+      next2,
+      min,
+      max,
+      mode === "verical" ? sizeRef.current.h : sizeRef.current.w,
+      splitterSize
+    );
     if (position2 == null) setInternalPos(clamped);
     onSizeChange == null ? void 0 : onSizeChange(clamped);
   };
@@ -4993,20 +5028,35 @@ var SplitPane = forwardRef(function SplitPane2({
     getPosition: () => posResolved,
     getMode: () => internalMode
   }));
-  const containerRef = useRef(null);
-  const sizeRef = useRef({ w: 0, h: 0 });
   useLayoutEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver(() => {
+      var _a;
       const rect2 = el.getBoundingClientRect();
+      const o = sizeRef.current;
       sizeRef.current = { w: rect2.width, h: rect2.height };
+      if ((_a = ref.current) == null ? void 0 : _a.getPosition) {
+        if (resizeMode === "fixFirst") {
+          if (internalMode === "vertical" && o.h > 0) {
+            setPosition(ref.current.getPosition() * o.h / sizeRef.current.h);
+          } else if (o.w > 0) {
+            setPosition(ref.current.getPosition() * o.w / sizeRef.current.w);
+          }
+        } else if (resizeMode === "fixSecond") {
+          if (internalMode === "vertical" && o.h > 0) {
+            setPosition(1 - (1 - ref.current.getPosition()) * o.h / sizeRef.current.h);
+          } else if (o.w > 0) {
+            setPosition(1 - (1 - ref.current.getPosition()) * o.w / sizeRef.current.w);
+          }
+        }
+      }
     });
     ro.observe(el);
     const rect = el.getBoundingClientRect();
     sizeRef.current = { w: rect.width, h: rect.height };
     return () => ro.disconnect();
-  }, []);
+  }, [resizeMode, internalMode]);
   const startPosRef = useRef(posResolved);
   const [dragging, setDragging] = useState(false);
   const handleStart = () => {
@@ -5014,11 +5064,11 @@ var SplitPane = forwardRef(function SplitPane2({
     startPosRef.current = posResolved;
   };
   const handleDelta = (x, y, _data) => {
-    const { w, h } = sizeRef.current;
+    const { w: w2, h: h2 } = sizeRef.current;
     if (internalMode === "horizontal") {
-      setPosition(startPosRef.current + x / (w || 1));
+      setPosition(startPosRef.current + x / (w2 || 1));
     } else {
-      setPosition(startPosRef.current + y / (h || 1));
+      setPosition(startPosRef.current + y / (h2 || 1));
     }
   };
   const handleEnd = () => setDragging(false);
@@ -5026,79 +5076,113 @@ var SplitPane = forwardRef(function SplitPane2({
   const firstChild = arr[0];
   const secondChild = arr[1];
   const p = posResolved;
-  const pane1StyleAbs = internalMode === "horizontal" ? {
+  const { w, h } = sizeRef.current;
+  const computedPane1Style = {
     position: "absolute",
     top: 0,
-    bottom: 0,
     left: 0,
-    width: `calc(${p} * (100% - ${splitterSize}px))`,
-    overflow: "auto",
-    ...firstPaneStyle || {}
-  } : {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: 0,
-    height: `calc(${p} * (100% - ${splitterSize}px))`,
     overflow: "auto",
     ...firstPaneStyle || {}
   };
-  const pane2StyleAbs = internalMode === "horizontal" ? {
+  const computedPane2Style = {
     position: "absolute",
-    top: 0,
     bottom: 0,
-    left: `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`,
     right: 0,
     overflow: "auto",
     ...secondPaneStyle || {}
-  } : {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`,
-    bottom: 0,
-    overflow: "auto",
-    ...secondPaneStyle || {}
   };
-  const splitterBase = {
+  const computedSplitterStyle = {
     background: "rgba(0,0,0,0.08)",
     boxShadow: "inset 0 0 2px rgba(0,0,0,0.25)",
-    zIndex: 10
-  };
-  const splitterAbsStyle = internalMode === "horizontal" ? {
+    zIndex: 10,
     position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: `calc(${p} * (100% - ${splitterSize}px))`,
-    width: splitterSize,
-    height: "100%",
-    cursor: dragging ? "col-resize" : "col-resize",
+    cursor: internalMode === "horizontal" ? "col-resize" : "row-resize",
     touchAction: "none",
     pointerEvents: "auto",
-    ...splitterBase,
-    ...splitterStyle || {}
-  } : {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: `calc(${p} * (100% - ${splitterSize}px))`,
-    height: splitterSize,
-    width: "100%",
-    cursor: dragging ? "row-resize" : "row-resize",
-    touchAction: "none",
-    pointerEvents: "auto",
-    ...splitterBase,
     ...splitterStyle || {}
   };
+  if (internalMode === "horizontal") {
+    computedPane1Style.bottom = 0;
+    computedPane2Style.top = 0;
+    if (resizeMode === "fixFirst") {
+      computedPane1Style.width = p * (w - splitterSize);
+      computedPane2Style.left = computedPane1Style.width + splitterSize;
+      Object.assign(computedSplitterStyle, {
+        top: 0,
+        bottom: 0,
+        left: computedPane1Style.width,
+        width: splitterSize
+      });
+    } else if (resizeMode === "fixSecond") {
+      computedPane2Style.width = (1 - p) * (w - splitterSize);
+      computedPane1Style.right = computedPane2Style.width + splitterSize;
+      Object.assign(computedSplitterStyle, {
+        top: 0,
+        bottom: 0,
+        left: computedPane2Style.width,
+        width: splitterSize
+      });
+    } else {
+      computedPane1Style.width = `calc(${p} * (100% - ${splitterSize}px))`;
+      computedPane2Style.left = `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`;
+      Object.assign(computedSplitterStyle, {
+        top: 0,
+        bottom: 0,
+        left: `calc(${p} * (100% - ${splitterSize}px))`,
+        width: splitterSize
+      });
+    }
+  } else {
+    computedPane1Style.right = 0;
+    computedPane2Style.left = 0;
+    if (resizeMode === "fixFirst") {
+      computedPane1Style.height = p * (h - splitterSize);
+      computedPane2Style.top = computedPane1Style.height + splitterSize;
+      Object.assign(computedSplitterStyle, {
+        left: 0,
+        right: 0,
+        top: computedPane1Style.height,
+        height: splitterSize
+      });
+    } else if (resizeMode === "fixSecond") {
+      computedPane2Style.height = (1 - p) * (h - splitterSize);
+      computedPane1Style.bottom = computedPane2Style.height + splitterSize;
+      Object.assign(computedSplitterStyle, {
+        left: 0,
+        right: 0,
+        bottom: computedPane2Style.height,
+        height: splitterSize
+      });
+    } else {
+      computedPane1Style.height = `calc(${p} * (100% - ${splitterSize}px))`;
+      computedPane2Style.top = `calc(${p} * (100% - ${splitterSize}px) + ${splitterSize}px)`;
+      Object.assign(computedSplitterStyle, {
+        left: 0,
+        right: 0,
+        top: computedPane1Style.height,
+        height: splitterSize
+      });
+    }
+  }
   return createComponent("div", { "ref": containerRef, "className": className, "style": {
     position: "relative",
     width: "100%",
     height: "100%",
     overflow: "hidden",
     ...style || {}
-  } }, createComponent("div", { "style": pane1StyleAbs }, firstChild), createComponent("div", { "style": pane2StyleAbs }, secondChild), createComponent(DragHandle, { "onStart": handleStart, "onDelta": handleDelta, "onEnd": handleEnd, "style": splitterAbsStyle, "className": "splitter" }));
+  } }, createComponent("div", { "style": computedPane1Style }, firstChild), createComponent("div", { "style": computedPane2Style }, secondChild), createComponent(DragHandle, { "onStart": handleStart, "onDelta": handleDelta, "onEnd": handleEnd, "style": computedSplitterStyle, "className": "splitter" }, splitterChild));
 });
-var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+var clamp = function(v, min, max, size, splitterSize) {
+  if (typeof min === "function") {
+    if (size > 0) min = min(size, splitterSize);
+    else min = 0;
+  }
+  if (typeof max === "function") {
+    if (size > 0) max = max(size, splitterSize);
+    else max = 1;
+  }
+  return Math.max(min, Math.min(max, v));
+};
 
 // .tmp/src/vlq.js
 var char_to_integer = {};
@@ -5564,7 +5648,7 @@ var transpilerConfig = {
 };
 var raiseError;
 var tab = 0;
-var TOKENIZE_RE = /(\{|\}|\[|\]|\(|\)|\.\.\.|=>|\?\?=|\?\?|\?\.|===|!==|>>>|<<=|>>=|>>>=|\*\*=|\*\*|&&=|\|\|=|<=|>=|==|!=|<<|>>|\+\+|--|\+=|-=|\*=|\/=|%=|&=|\^=|\|=|=|\+|-|\*|\/|%|&|\^|\||!|~|\?|:|<|>|=|\.|,|;|\n+|[\s^\n]+)/gm;
+var TOKENIZE_RE = /(\{|\}|\[|\]|\(|\)|\.\.\.|=>|\?\?=|\?\?|\?\.|===|!==|>>>|<<=|>>=|>>>=|\*\*=|\*\*|&&=|\|\|=|<=|>=|==|!=|<<|>>|\+\+|--|\+=|-=|\*=|\/=|%=|&=|\^=|\|=|=|\+|-|\*|\/|%|&|\^|\||!|~|\?|:|<|>|=|\.|,|;|\n+|[\s^\n]+)/g;
 function lookAhead(f, code2, index2, ...args) {
   const b2 = f(code2, index2, ...args);
   if (b2) {
@@ -6429,7 +6513,7 @@ function transpileJSX(jsx2, {
 
 // .tmp/src/lilact.jsx
 var Lilact2 = {
-  VERSION: "RC.1",
+  VERSION: "RC.3",
   // Configuration
   defaultTransitionTimeout: 300,
   defaultIsEqual: Object.is,