lilact 0.21.1 → 0.23.0

package/docs/variables/accessories.SplitPane.html

@@ -42,7 +42,7 @@ 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-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-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-4">ref</span><span class="hl-1"> = </span><span class="hl-0">useRef</span><span class="hl-1">&lt;</span><span class="hl-6">SplitPaneHandle</span><span class="hl-1">&gt;(</span><span class="hl-3">null</span><span class="hl-1">);</span><br/><br/><span class="hl-7">&lt;</span><span class="hl-6">SplitPane</span><br/><span class="hl-1">  </span><span class="hl-10">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-10">mode</span><span class="hl-1">=</span><span class="hl-2">&quot;horizontal&quot;</span><br/><span class="hl-1">  </span><span class="hl-10">defaultPosition</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.5</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-10">min</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.1</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-10">max</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-13">0.9</span><span class="hl-3">}</span><br/><span class="hl-1">  </span><span class="hl-10">onSizeChange</span><span class="hl-1">=</span><span class="hl-3">{</span><span class="hl-9">(</span><span class="hl-5">pos</span><span class="hl-9">) </span><span class="hl-3">=&gt;</span><span class="hl-9"> </span><span class="hl-5">console</span><span class="hl-9">.</span><span class="hl-0">log</span><span class="hl-9">(</span><span class="hl-5">pos</span><span class="hl-9">)</span><span class="hl-3">}</span><br/><span class="hl-7">&gt;</span><br/><span class="hl-1">  </span><span class="hl-7">&lt;</span><span class="hl-8">div</span><span class="hl-1"> </span><span class="hl-7">/&gt;</span><span class="hl-1"> </span><span class="hl-7">&lt;</span><span class="hl-8">div</span><span class="hl-1"> </span><span class="hl-7">/&gt;</span><br/><span class="hl-7">&lt;/</span><span class="hl-6">SplitPane</span><span class="hl-7">&gt;</span>
+</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>

package/docs/variables/components.cloneElement.html

@@ -0,0 +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"> = 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></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></h4></li></ul></li></ul></div><aside class="tsd-sources"><ul><li>Defined in components.jsx:1214</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/actionstate.jsx

@@ -1,4 +1,4 @@
-const { useActionState, Spinner } = Lilact;
+import { useActionState, Spinner } from "lilact";
 
 async function addToCart(prevState, queryData) {
 
@@ -36,4 +36,4 @@ function Demo() {
 }
 
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/capture.jsx

@@ -1,6 +1,6 @@
-const { useEffect } = Lilact;
+import { useEffect } from "lilact";
 
-module.exports = function Demo() {
+export default function Demo() {
   useEffect(() => {
     // Just to make it obvious in the console that this is running once
     console.log("mount");

package/examples/demos/cloneelement.jsx

@@ -0,0 +1,66 @@
+import React from "lilact";
+
+function FancyButton({ label, variant, onClick, children }) {
+  return (
+    <button
+      className={`btn btn--${variant}`}
+      onClick={onClick}
+      style={{ marginRight: 12 }}
+    >
+      {label}
+      {children ? <span style={{ marginLeft: 8 }}>{children}</span> : null}
+    </button>
+  );
+}
+
+export default function Demo() {
+  const original = (
+    <FancyButton
+      label="Original"
+      variant="primary"
+      onClick={() => alert("Original clicked")}
+    >
+      (child)
+    </FancyButton>
+  );
+
+  const cloned = React.cloneElement(original, {
+    // Override props:
+    label: "Cloned!",
+    variant: "success",
+
+    // You can override event handlers too:
+    onClick: () => alert("Cloned clicked"),
+  });
+
+  const clonedWithNewChildren = React.cloneElement(
+    original,
+    {
+      // Override just one prop; leave others as-is
+      variant: "warning",
+    },
+
+    <span style={{ fontStyle: "italic" }}>(new child)</span>
+  );
+
+  return (
+    <div style={{ padding: 16 }}>
+      <h2>React.cloneElement behavior</h2>
+
+      <div style={{ marginBottom: 16 }}>
+        <div>1) Original element (unchanged):</div>
+        {original}
+      </div>
+
+      <div style={{ marginBottom: 16 }}>
+        <div>2) Cloned with overridden props:</div>
+        {cloned}
+      </div>
+
+      <div>
+        <div>3) Cloned with overridden props + replaced children:</div>
+        {clonedWithNewChildren}
+      </div>
+    </div>
+  );
+}

package/examples/demos/context.jsx

@@ -1,5 +1,5 @@
-const { createContext, useContext, useState } = Lilact;
-const { css, cx } = Lilact.emotion;
+import { createContext, useContext, useState } from "lilact";
+import { css, cx } from "@emotion/css";
 
 const ThemeContext = createContext(null);
 
@@ -63,4 +63,4 @@ function Demo() {
 			</ThemeContext.Provider>
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/css-transition.jsx

@@ -1,4 +1,4 @@
-const { CSSTransition, useState, useRef } = Lilact;
+import { CSSTransition, useState, useRef } from "lilact";
 
 
 Lilact.emotion.injectGlobal(`
@@ -29,7 +29,7 @@ function Demo()
 
   const chs = [];
 
-  for(let i=0; i<10;i++) chs.push( <div className='test'>{i}</div> );
+  for(let i=1; i<10;i++) chs.push( <div className='test'>{i}</div> );
 
   return (
     <div style={{overflow:"hidden", textAlign: "center"}}>
@@ -62,4 +62,4 @@ function Demo()
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/error-boundary.jsx

@@ -1,4 +1,4 @@
-const { ErrorBoundary, useState } = Lilact;
+import { ErrorBoundary, useState } from "lilact";
 
 function Demo() {
   const [mode, setMode] = useState("safe"); // "safe" | "direct" | "deep"
@@ -56,4 +56,4 @@ function MyFallback({ error, reset }) {
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/error-callback.jsx

@@ -1,4 +1,4 @@
-module.exports = function() {
+export default function() {
 
   return <center>
           <button onClick={()=>{doUnknown()}}>

package/examples/demos/error-component-stack.jsx

@@ -1,4 +1,4 @@
-const { useState } = Lilact;
+import { useState } from "lilact";
 
 function Demo() {
   const [mode, setMode] = useState("safe"); // "safe" | "direct" | "deep"
@@ -36,4 +36,4 @@ function DeepTree() {
   return <section><Middle /></section>;
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/error-init.jsx

@@ -1,4 +1,4 @@
-module.exports = function Demo() {
+export default function Demo() {
 
   return <>
       <NotDefined/>

package/examples/demos/error-parser.jsx

@@ -1,4 +1,4 @@
-module.exports = function() {
+export default function() {
 
   return <>
 

package/examples/demos/form-elements.jsx

@@ -1,4 +1,4 @@
-module.exports = function() {
+export default function() {
 
   return <>
 

package/examples/demos/forwardref.jsx

@@ -1,4 +1,4 @@
-const { forwardRef, useImperativeHandle, useRef } = Lilact;
+import { forwardRef, useImperativeHandle, useRef } from "lilact";
 
 const Child = forwardRef(function Child({ id }, ref) {
   // Each child exposes a custom imperative API on its *own* ref
@@ -11,7 +11,7 @@ const Child = forwardRef(function Child({ id }, ref) {
   return <div>Child {id}</div>;
 });
 
-module.exports = function Demo() {
+export default function Demo() {
   const childRefs = useRef([]);
 
   // helper: store the function ref for each child index

package/examples/demos/lazy.jsx

@@ -1,6 +1,6 @@
-const {Suspense, Spinner, lazy, require} = Lilact;
+import {Suspense, Spinner, lazy } from "lilact";
 
-const StopWatch = lazy( ()=>require('demos/stopwatch.jsx') );
+const StopWatch = lazy( () => require('./stopwatch.jsx') );
 
 function Demo({file}) 
 {
@@ -12,4 +12,4 @@ function Demo({file})
 			</div>
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/legacy-context.jsx

@@ -4,7 +4,7 @@
 // - static contextTypes
 // - instance.context available during render
 
-const { Component, PropTypes, render } = Lilact;
+import { Component, PropTypes, render } from "lilact";
 
 
 // ----- Consumer -----
@@ -74,6 +74,6 @@ function Demo() {
          </>
 }
 
-module.exports = Demo;
+export default Demo;
 
 

package/examples/demos/memo.jsx

@@ -1,11 +1,11 @@
-const { useState, memo } = Lilact;
+import { useState, memo } from "lilact"
 
 const Child = memo(function Child({ count }) {
   console.log("Child render. count =", count);
   return <div>Child count: {count}</div>;
 });
 
-module.exports = function Demo() {
+export default function Demo() {
   const [tick, setTick] = useState(0);
   const [count] = useState(5); // never changes
 

package/examples/demos/modal.jsx

@@ -1,4 +1,4 @@
-const { useEffect, useRef, useState } = Lilact;
+import { useEffect, useRef, useState } from "lilact";
 
 function ModalDialog({ isOpen, children }) {
 	const ref = useRef();
@@ -37,4 +37,4 @@ function Demo() {
 			</>;
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/pane.jsx

@@ -1,6 +1,6 @@
-const { useRef, useState, SplitPane } = Lilact;
+import { useRef, useState, SplitPane } from "lilact";
 
-module.exports = function Demo() {
+export default function Demo() {
   const ref = useRef(null);
   const [mode, setMode] = useState("horizontal");
   const [position, setPosition] = useState(0.35);

package/examples/demos/portal.jsx

@@ -1,4 +1,4 @@
-const { createPortal, useState } = Lilact;
+import { createPortal, useState } from "lilact";
 
 function Modal({ open, onClose, children }) {
   if (!open) return null;
@@ -41,11 +41,13 @@ function Modal({ open, onClose, children }) {
   );
 }
 
-module.exports = function Demo() {
+export default function Demo() {
   const [open, setOpen] = useState(false);
 
   return (
     <>
+      <p>This example creates a modal, but uses a portal for it.</p>
+      <p>Notice that the modal close button style does not obey this container CSS rules as it is rendered outside.</p>
       <button onClick={() => setOpen(true)}>Open modal</button>
       <Modal open={open} onClose={() => setOpen(false)}>
         <b>Hello World!</b><br/>

package/examples/demos/priorities.jsx

@@ -1,4 +1,4 @@
-const {useEffect, useLayoutEffect, useInsertionEffect, useState, startTransition} = Lilact;
+import {useEffect, useLayoutEffect, useInsertionEffect, useState, startTransition} from "lilact";
 
 function Demo() {
   const [n, setN] = useState(0);
@@ -65,4 +65,4 @@ function Demo() {
   </>);
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/proptypes.jsx

@@ -1,4 +1,4 @@
-const { PropTypes } = Lilact;
+import { PropTypes } from "lilact";
 
 function UserCard({ name, age, tags, onClick }) {
   return (
@@ -31,4 +31,4 @@ function Demo() {
           </div>
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/reducer.jsx

@@ -1,4 +1,4 @@
-const { useReducer } = Lilact;
+import { useReducer } from "lilact";
 
 function createInitialState(username) {
 	const initialTodos = [];
@@ -37,6 +37,8 @@ function reducer(state, action) {
 
 function Demo({ username }) 
 {
+	username ??= "Tester";
+	
 	const [state, dispatch] = useReducer(
 		reducer,
 		username,
@@ -73,4 +75,4 @@ function Demo({ username })
 	</>
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/redux.jsx

@@ -1,5 +1,5 @@
-const { Provider, useSelector, useDispatch, connect } = Lilact;
-const { createStore } = Lilact.redux;
+import { Provider, useSelector, useDispatch, connect } from "lilact";
+import { createStore } from "redux";
 
 // Reducer + store
 function counterReducer(state = { count: 0 }, action) {
@@ -54,5 +54,5 @@ function Demo({ username })
 			</Provider>;
 }
 
-module.exports = Demo;
+export default Demo;
 

package/examples/demos/router.jsx

@@ -1,4 +1,4 @@
-const { HashRouter, NavLink, Routes, Route, useNavigate, useLocation } = Lilact;
+import { HashRouter, NavLink, Routes, Route, useNavigate, useLocation } from "lilact";
 
 /* Simple pages */
 function Home() {
@@ -79,7 +79,7 @@ function NavControls() {
         }
         style={{ marginLeft: 8 }}
       >
-        Go Profile (replace + state)
+        Go Profile (replace + state) (Clears History)
       </button>
       <button onClick={() => navigate(-1)} style={{ marginLeft: 8 }}>
         Back
@@ -143,4 +143,4 @@ function Demo() {
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/stopwatch.jsx

@@ -1,4 +1,4 @@
-const { useState, useRef } = Lilact;
+import { useState, useRef } from "lilact";
 
 function Demo() 
 {
@@ -39,4 +39,4 @@ function Demo()
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/suspense.jsx

@@ -1,4 +1,4 @@
-const { Suspense, Spinner } = Lilact;
+import { Suspense, Spinner } from "lilact";
 
 // resource factory that throws its internal promise until resolved
 function createResource(delay, value) {
@@ -43,4 +43,4 @@ function Demo() {
 }
 
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/switch-transition.jsx

@@ -1,4 +1,4 @@
-const { useState, SwitchTransition } = Lilact;
+import { useState, SwitchTransition } from "lilact";
 
 Lilact.emotion.injectGlobal(`
 .switch-enter,
@@ -51,4 +51,4 @@ function Demo() {
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/transition.jsx

@@ -1,4 +1,4 @@
-const { useState, Transition } = Lilact;
+import { useState, Transition } from "lilact";
 
 function Demo() {
   const [inProp, setInProp] = useState(false);
@@ -38,4 +38,4 @@ function Demo() {
         </>;
 };
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/usedefered.jsx

@@ -1,4 +1,4 @@
-const { useState, useDeferredValue } = Lilact;
+import { useState, useDeferredValue } from "lilact";
 
 function ExpensiveList({ query }) {
   const items = Array.from({ length: 5000 }, (_, i) => `${query} item ${i}`);
@@ -30,4 +30,4 @@ function Demo() {
   );
 }
 
-module.exports = Demo;
+export default Demo;

package/examples/demos/usetransition.jsx

@@ -1,5 +1,5 @@
-const { useTransition, useState, useCallback, useId } = Lilact;
-const { css, cx } = Lilact.emotion;
+import { useTransition, useState, useCallback, useId } from "lilact";
+import { css, cx } from "@emotion/css";
 
 const Demo = ()=>{
 
@@ -32,4 +32,4 @@ const Demo = ()=>{
 	);
 };
 
-module.exports = Demo;
+export default Demo;

package/examples/index.html

@@ -20,8 +20,8 @@
 
 <script type='text/jsx'>
 	
-const { useRef, useEffect, useState, Suspense, Spinner, run, render } = Lilact;
-const { css,cx,keyframes,injectGlobal } = Lilact.emotion;
+import { useRef, useEffect, useState, Suspense, Spinner, run, render } from "lilact";
+import { css,cx,keyframes,injectGlobal } from "@emotion/css";
 
 
 const cache = new Map();
@@ -161,7 +161,7 @@ function DemoView({ entry })
 	//console.log(code);
 	if(isOpen) {
 		useEffect(() => {
-			const Comp = run(code, "demos/"+entry[0]);
+			const Comp = run(code, "demos/"+entry[0]).default;
 			Lilact.render(<Comp/>, viewRef.current);
 		});
 
@@ -172,8 +172,8 @@ function DemoView({ entry })
 	
 	return 	<>
 						<button onClick={()=>setOpen(!isOpen)} className={collapsible} type="button">
-							<span className={left}>{ (isOpen?'- ':'+ ') + entry[0] + ' '}</span>
-							<b className={right}>{entry[1]}</b>
+							<b className={left}>{ (isOpen?'- ':'+ ') + entry[1] + ' '}</b>
+							<span className={right}>{entry[0]}</span>
 						</button>
 						{isOpen &&
 						<div style={{width:"100%"}}>
@@ -216,40 +216,41 @@ function App()
 {
 	const demos =[
 		"Hooks",
-		['stopwatch.jsx',				'( useState, useRef )'],
-		['actionstate.jsx',			'( useActionState, Spinner )'],
-		['usedefered.jsx',		'( useState, useDeferredValue )'],
-		['usetransition.jsx',		'( useTransition, useState, useCallback, useId ), emotion:( css, cx )'],
-		['reducer.jsx',					'( useReducer )'],
-		['context.jsx',					'( createContext, useContext, useState ), emotion:( css, cx )'],
+		['stopwatch.jsx',				'Stop Watch ( useState, useRef )'],
+		['actionstate.jsx',			'Action State ( useActionState, Spinner )'],
+		['usedefered.jsx',		'Deferred List Update ( useState, useDeferredValue )'],
+		['usetransition.jsx',		'Transition ( useTransition, useState, useCallback, useId ), emotion:( css, cx )'],
+		['reducer.jsx',					'Todo List: ( useReducer )'],
+		['context.jsx',					'Modern Context API ( createContext, useContext, useState ), emotion:( css, cx )'],
 		
 		"API",
-		['capture.jsx',						'-- Event Capture and Bubble --'],
-		['priorities.jsx',						'-- Effect Priorities --'],
-		['forwardref.jsx',						'( forwardRef, useImperativeHandle, useRef )'],
-		['memo.jsx',						'( memo, useState )'],
-		['lazy.jsx',						'( lazy, require, Suspene, Spinner )'],
-		['proptypes.jsx',				'( PropTypes )'],
-		['legacy-context.jsx',				'-- Legacy Context API --'],
-		['redux.jsx',						'( Provider, useSelector, useDispatch, connect ), redux:( createStore )'],
-		['transition.jsx',			'( useState, Transition )'],
+		['capture.jsx',						'Event Capture and Bubble'],
+		['priorities.jsx',						'Effect Priorities'],
+		['forwardref.jsx',						'ForwardRef with Function Refs ( forwardRef, useImperativeHandle, useRef )'],
+		['memo.jsx',						'Component Memoization ( memo, useState )'],
+		['lazy.jsx',						'Lazy Loading ( lazy, require, Suspene, Spinner )'],
+		['proptypes.jsx',				'PropTypes Validation'],
+		['legacy-context.jsx',				'Legacy Context API'],
+		['redux.jsx',						'Redux and Despatch ( Provider, useSelector, useDispatch, connect ), redux:( createStore )'],
+		['transition.jsx',			'Transition States ( useState, Transition )'],
+		['cloneelement.jsx',			'Cloning Components ( cloneElement, import as React )'],
 
 		"Components",
-		['router.jsx',					'( HashRouter, NavLink, Routes, Route, useNavigate, useLocation )'],
-		['modal.jsx',						'( useEffect, useRef, useState )'],
-		['portal.jsx',						'(createPortal, useState )'],
-		['pane.jsx',						'( useRef, useState, SplitPane )'],
-		['css-transition.jsx',		'( CSSTransition, useState, useRef )'],
-		['switch-transition.jsx',		'( SwitchTransition )'],
-		['suspense.jsx',				'( Suspense, Spinner )'],
-		['form-elements.jsx',		'()'],
+		['router.jsx',					'Hash Router ( HashRouter, NavLink, Routes, Route, useNavigate, useLocation )'],
+		['modal.jsx',						'Simple Modal ( useEffect, useRef, useState )'],
+		['portal.jsx',						'Portal (createPortal, useState )'],
+		['pane.jsx',						'SplitPane ( useRef, useState, SplitPane )'],
+		['css-transition.jsx',		'CSSTransition ( CSSTransition, useState, useRef )'],
+		['switch-transition.jsx',		'SwitchTransition'],
+		['suspense.jsx',				'Suspense and Spinner'],
+		['form-elements.jsx',		'Form Elements'],
 
 		"Error Report and Handling",
-		['error-boundary.jsx',						'( ErrorBoundary, useState )'],
-		['error-parser.jsx',							'-- JSX Parser Error --'],
-		['error-init.jsx',								'-- Error in Component initialization --'],
-		['error-component-stack.jsx',			'-- Error Component Stack --'],
-		['error-callback.jsx',						'-- Error in Callback --'],
+		['error-boundary.jsx',						'Error Boundary'],
+		['error-parser.jsx',							'JSX Parser Error'],
+		['error-init.jsx',								'Error in Component initialization'],
+		['error-component-stack.jsx',			'Error Component Stack'],
+		['error-callback.jsx',						'Error in Callback'],
 	];
 
 	return<>