fix(toolbar-demo): properly handle node positioning in sections

Fix node filtering logic to correctly distribute nodes into left,
center, and right sections based on their position property.

Previous behavior:
- Filtered out nodes with position='right'
- Put everything else in left section
- Ignored center positioning entirely

New behavior:
- Left section: nodes with no position or position='left'
- Center section: nodes with position='center'
- Right section: nodes with position='right'

Also extracted renderNode helper to reduce duplication and improve
code readability.

Author: josephfusco

examples/next/toolbar-demo/example-app/app/components/Toolbar.tsx

@@ -17,48 +17,55 @@ export function Toolbar() {
     return unsubscribe;
   }, []);
 
-  return (
-    <div className={`hwp-toolbar hwp-toolbar-${position}`}>
-      <div className="hwp-toolbar-section hwp-toolbar-left">
-        {nodes
-          .filter((node) => node.position !== 'right')
-          .map((node) => {
-            const label = typeof node.label === 'function' ? node.label() : node.label;
+  const leftNodes = nodes.filter((node) => !node.position || node.position === 'left');
+  const centerNodes = nodes.filter((node) => node.position === 'center');
+  const rightNodes = nodes.filter((node) => node.position === 'right');
+
+  const renderNode = (node: any) => {
+    const label = typeof node.label === 'function' ? node.label() : node.label;
+
+    if (node.type === 'divider') {
+      return <div key={node.id} className="hwp-toolbar-divider" />;
+    }
 
-            if (node.type === 'divider') {
-              return <div key={node.id} className="hwp-toolbar-divider" />;
-            }
+    if (node.type === 'link' && node.href) {
+      return (
+        <a
+          key={node.id}
+          href={node.href}
+          target={node.target}
+          className="hwp-toolbar-link"
+        >
+          {label}
+        </a>
+      );
+    }
 
-            if (node.type === 'link' && node.href) {
-              return (
-                <a
-                  key={node.id}
-                  href={node.href}
-                  target={node.target}
-                  className="hwp-toolbar-link"
-                >
-                  {label}
-                </a>
-              );
-            }
+    return (
+      <button
+        key={node.id}
+        onClick={node.onClick}
+        className={`hwp-toolbar-button ${
+          node.id === 'preview' && state.preview ? 'hwp-toolbar-button-active' : ''
+        }`}
+      >
+        {label}
+      </button>
+    );
+  };
 
-            return (
-              <button
-                key={node.id}
-                onClick={node.onClick}
-                className={`hwp-toolbar-button ${
-                  node.id === 'preview' && state.preview ? 'hwp-toolbar-button-active' : ''
-                }`}
-              >
-                {label}
-              </button>
-            );
-          })}
+  return (
+    <div className={`hwp-toolbar hwp-toolbar-${position}`}>
+      <div className="hwp-toolbar-section hwp-toolbar-left">
+        {leftNodes.map(renderNode)}
       </div>
 
-      <div className="hwp-toolbar-section hwp-toolbar-center"></div>
+      <div className="hwp-toolbar-section hwp-toolbar-center">
+        {centerNodes.map(renderNode)}
+      </div>
 
       <div className="hwp-toolbar-section hwp-toolbar-right">
+        {rightNodes.map(renderNode)}
         {state.user && (
           <button
             className="hwp-toolbar-button"