@synetics/ui 0.7.0-alpha

package/src/showcase/ssr/components/hydration-script-demo.syn

@@ -0,0 +1,104 @@
+/**
+ * Hydration Script Demo
+ * createHydrationScript → serialized JSON blob
+ * serializeData / deserializeData round-trip
+ * extractHydrationState — parse blob back to original object
+ */
+
+import {
+  createSignal,
+  createHydrationScript,
+  serializeData,
+  deserializeData,
+  extractHydrationState,
+  ShowRegistry as Show,
+} from '@synetics/synetics.dev';
+
+const SAMPLE_STATE = {
+  user: { id: 42, name: 'Tadeo', roles: ['admin', 'dev'] },
+  theme: 'dark',
+  count: 7,
+};
+
+export component HydrationScriptDemo() {
+  const [script, setScript] = createSignal<string | null>(null);
+  const [serialized, setSerialized] = createSignal<string | null>(null);
+  const [roundTrip, setRoundTrip] = createSignal<unknown | null>(null);
+  const [roundTripMatch, setRoundTripMatch] = createSignal<boolean | null>(null);
+  const [extracted, setExtracted] = createSignal<unknown | null>(null);
+
+  const runScript = () => {
+    const s = createHydrationScript(SAMPLE_STATE);
+    setScript(s);
+  };
+
+  const runRoundTrip = () => {
+    const s = serializeData(SAMPLE_STATE);
+    setSerialized(s);
+    const restored = deserializeData<typeof SAMPLE_STATE>(s);
+    setRoundTrip(restored);
+    setRoundTripMatch(JSON.stringify(restored) === JSON.stringify(SAMPLE_STATE));
+  };
+
+  const runExtract = () => {
+    // Inject a hydration script into document.head and extract it back
+    const tag = document.createElement('script');
+    tag.id = '__PULSAR_SSR_STATE__';
+    tag.type = 'application/json';
+    tag.textContent = serializeData(SAMPLE_STATE);
+    document.head.appendChild(tag);
+    const out = extractHydrationState<typeof SAMPLE_STATE>();
+    setExtracted(out);
+    tag.remove();
+  };
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">3️⃣ Hydration Script Round-Trip</h3>
+      <p class="demo-desc">
+        <code>createHydrationScript(state)</code> → serialized <code>{'<script>'}</code> tag blob.
+        <code>serializeData / deserializeData</code> round-trip verifies equality.
+        <code>extractHydrationState()</code> reads the blob back from DOM.
+      </p>
+
+      <div class="state-panel" style="margin-bottom: 12px;">
+        <strong style="color: #94a3b8; font-size: 12px;">Input state</strong>
+        <pre class="result-pre" style="font-size: 11px;">{JSON.stringify(SAMPLE_STATE, null, 2)}</pre>
+      </div>
+
+      <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;">
+        <button class="submit-btn" onClick={runScript}>createHydrationScript</button>
+        <button class="submit-btn" onClick={runRoundTrip}>serialize → deserialize</button>
+        <button class="submit-btn" onClick={runExtract}>extractHydrationState</button>
+      </div>
+
+      <Show when={script()}>
+        <div class="state-panel" style="margin-bottom: 8px;">
+          <strong style="color: #60a5fa; font-size: 12px;">createHydrationScript output</strong>
+          <pre class="result-pre" style="font-size: 10px; max-height: 100px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;">
+            {script()}
+          </pre>
+        </div>
+      </Show>
+
+      <Show when={serialized()}>
+        <div class="state-panel" style="margin-bottom: 8px;">
+          <strong style="color: #f59e0b; font-size: 12px;">serializeData → deserializeData</strong>
+          <pre class="result-pre" style="font-size: 11px; max-height: 80px; overflow-y: auto;">{serialized()}</pre>
+          <Show when={roundTripMatch() !== null}>
+            <p class={roundTripMatch() ? 'status-ok' : 'status-fail'} style="margin-top: 6px;">
+              {roundTripMatch() ? '✅ Round-trip: equality confirmed' : '❌ Round-trip: mismatch'}
+            </p>
+          </Show>
+        </div>
+      </Show>
+
+      <Show when={extracted()}>
+        <div class="state-panel">
+          <strong style="color: #34d399; font-size: 12px;">extractHydrationState output</strong>
+          <pre class="result-pre" style="font-size: 11px;">{JSON.stringify(extracted(), null, 2)}</pre>
+        </div>
+      </Show>
+    </div>
+  );
+}

package/src/showcase/ssr/components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * SSR Components Index
+ */
+
+export { EscapeDemo } from './escape-demo.syn';
+export { HydrateDemo } from './hydrate-demo.syn';
+export { HydrationScriptDemo } from './hydration-script-demo.syn';
+export { RenderToStringDemo } from './render-to-string-demo.syn';

package/src/showcase/ssr/components/render-to-string-demo.syn

@@ -0,0 +1,71 @@
+/**
+ * renderToString Demo
+ * Live renderToString output viewer — call against a stateful component, display raw HTML
+ */
+
+import { createSignal, renderToString, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+// A stateful component used as the SSR target
+const SampleComponent = () => {
+  return {
+    type: 'div',
+    props: {
+      className: 'ssr-sample',
+      children: [
+        { type: 'h2', props: { children: ['Hello from SSR'] } },
+        { type: 'p', props: { children: ['Rendered server-side at: ', new Date().toISOString()] } },
+        { type: 'ul', props: { children: [1, 2, 3].map((n) => ({ type: 'li', props: { children: [`Item ${n}`] } })) } },
+      ],
+    },
+  };
+};
+
+export component RenderToStringDemo() {
+  const [output, setOutput] = createSignal<{ html: string; styles?: string[] } | null>(null);
+  const [elapsed, setElapsed] = createSignal<number | null>(null);
+  const [error, setError] = createSignal<string | null>(null);
+
+  const run = () => {
+    setError(null);
+    try {
+      const t0 = performance.now();
+      const result = renderToString(SampleComponent, { serializeState: false });
+      const t1 = performance.now();
+      setElapsed(+(t1 - t0).toFixed(3));
+      setOutput(result as unknown as { html: string });
+    } catch (e) {
+      setError(String(e));
+    }
+  };
+
+  return (
+    <div class="demo-card">
+      <h3 class="demo-title">1️⃣ renderToString — Live Output Viewer</h3>
+      <p class="demo-desc">
+        <code>renderToString(componentFn, options)</code> — executes a component tree synchronously,
+        returns an <code>IRenderResult</code> with the HTML string. Displayed below as a
+        syntax-highlighted <code>{'<pre>'}</code>.
+      </p>
+
+      <button class="submit-btn" onClick={run} style="margin-bottom: 12px;">
+        ▶ Run renderToString
+      </button>
+
+      <Show when={error()}>
+        <p class="status-fail">❌ {error()}</p>
+      </Show>
+
+      <Show when={output()}>
+        <div class="state-panel">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+            <strong style="color: #94a3b8; font-size: 12px;">IRenderResult.html</strong>
+            <span style="color: #6b7280; font-size: 11px;">⏱ {elapsed()}ms</span>
+          </div>
+          <pre class="result-pre" style="white-space: pre-wrap; word-break: break-all; max-height: 280px; overflow-y: auto; font-size: 11px;">
+            {JSON.stringify(output(), null, 2)}
+          </pre>
+        </div>
+      </Show>
+    </div>
+  );
+}

package/src/showcase/ssr/ssr-test.syn

@@ -0,0 +1,88 @@
+/**
+ * P1-05 SSR Showcase
+ * renderToString · escapeHtml · escapeAttribute
+ * createHydrationScript · serializeData / deserializeData · extractHydrationState
+ * hydrate() — calls option A (split-pane in-browser visualizer)
+ */
+
+import { createSignal, ShowRegistry as Show } from '@synetics/synetics.dev';
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { DemoButton } from '../common/components/demo-button.syn';
+import { RenderToStringDemo } from './components/render-to-string-demo.syn';
+import { EscapeDemo } from './components/escape-demo.syn';
+import { HydrationScriptDemo } from './components/hydration-script-demo.syn';
+import { HydrateDemo } from './components/hydrate-demo.syn';
+
+export component SSRTestPage() {
+  const [showRender, setShowRender] = createSignal(false);
+  const [showEscape, setShowEscape] = createSignal(false);
+  const [showScript, setShowScript] = createSignal(false);
+  const [showHydrate, setShowHydrate] = createSignal(false);
+
+  return (
+    <div>
+      <PageHeader
+        title="SSR — Server-Side Rendering"
+        emoji="🖥️"
+        description="P1-05 · renderToString · escapeHtml/Attribute · createHydrationScript · serialize round-trip · hydrate()"
+      />
+
+      <DemoSection
+        title="1️⃣ renderToString — Live Output"
+        description="Executes a component tree synchronously. Returns IRenderResult with html string. Displayed raw in a <pre>."
+        borderColor="#3b82f6"
+      >
+        <DemoButton
+          label={showRender() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowRender((v) => !v)}
+        />
+        <Show when={showRender()}>
+          <RenderToStringDemo />
+        </Show>
+      </DemoSection>
+
+      <DemoSection
+        title="2️⃣ escapeHtml / escapeAttribute — XSS Safety"
+        description="Every user-controlled prop goes through escapeHtml (text) or escapeAttribute (attributes). Table proves XSS payloads are neutralised."
+        borderColor="#ef4444"
+      >
+        <DemoButton
+          label={showEscape() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowEscape((v) => !v)}
+        />
+        <Show when={showEscape()}>
+          <EscapeDemo />
+        </Show>
+      </DemoSection>
+
+      <DemoSection
+        title="3️⃣ Hydration Script Round-Trip"
+        description="createHydrationScript → serialized blob. serializeData / deserializeData equality check. extractHydrationState reads blob from DOM."
+        borderColor="#10b981"
+      >
+        <DemoButton
+          label={showScript() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowScript((v) => !v)}
+        />
+        <Show when={showScript()}>
+          <HydrationScriptDemo />
+        </Show>
+      </DemoSection>
+
+      <DemoSection
+        title="4️⃣ hydrate() — SSR → Client Lifecycle"
+        description="renderToString → innerHTML inject → hydrate(). B-07: hydrate() partially implemented — demo exercises call path + captures warning."
+        borderColor="#f59e0b"
+      >
+        <DemoButton
+          label={showHydrate() ? 'Hide Demo' : 'Show Demo'}
+          onClick={() => setShowHydrate((v) => !v)}
+        />
+        <Show when={showHydrate()}>
+          <HydrateDemo />
+        </Show>
+      </DemoSection>
+    </div>
+  );
+}

package/src/showcase/svg-canvas/board/components/canvas-badge-list.syn

@@ -0,0 +1,59 @@
+/**
+ * CanvasBadgeList — horizontal scrollable row of item chips at the bottom of the canvas.
+ */
+
+import type { IShape }      from '../../shape/model/i-shape';
+import type { ICanvasLine } from '../../line/model/i-canvas-line';
+import { CanvasBadge }      from '../../shared/atoms/canvas-badge.syn';
+
+interface ICanvasBadgeListProps {
+  shapes:        () => IShape[]
+  lines:         () => ICanvasLine[]
+  selectedId:    () => string | null
+  onSelectShape: (id: string) => void
+  onSelectLine:  (id: string) => void
+  onDeleteShape: (e: MouseEvent, id: string) => void
+  onDeleteLine:  (e: MouseEvent, id: string) => void
+}
+
+export component CanvasBadgeList({
+  shapes,
+  lines,
+  selectedId,
+  onSelectShape,
+  onSelectLine,
+  onDeleteShape,
+  onDeleteLine,
+}: ICanvasBadgeListProps) {
+  return (
+    <div>
+      {() => (shapes().length > 0 || lines().length > 0) ? (
+        <div style="display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px;">
+
+          {shapes().map((shape) => (
+            <CanvasBadge
+              label={shape.name}
+              active={selectedId() === shape.id}
+              onClick={() => onSelectShape(shape.id)}
+              onDelete={(e: MouseEvent) => onDeleteShape(e, shape.id)}
+            />
+          ))}
+
+          {lines().map((line) => (
+            <CanvasBadge
+              label={line.name}
+              active={selectedId() === line.id}
+              onClick={() => onSelectLine(line.id)}
+              onDelete={(e: MouseEvent) => onDeleteLine(e, line.id)}
+            />
+          ))}
+
+        </div>
+      ) : (
+        <p style="font-size: 12px; color: #334155; text-align: center; margin: 4px 0;">
+          No items yet — select a tool and drag on the canvas
+        </p>
+      )}
+    </div>
+  );
+}

package/src/showcase/svg-canvas/board/components/canvas-draw-preview.syn

@@ -0,0 +1,75 @@
+/**
+ * CanvasDrawPreview — overlay rendered while the user drags to draw a new shape or line.
+ * Shows a dashed ghost of the item being drawn.
+ */
+
+import type { ToolKind } from '../model/i-board';
+import { ShapeKind }     from '../../shape/model/i-shape';
+
+interface ICanvasDrawPreviewProps {
+  isDrawing:  () => boolean
+  drawStart:  () => { x: number; y: number } | null
+  drawEnd:    () => { x: number; y: number } | null
+  activeTool: () => ToolKind
+}
+
+export component CanvasDrawPreview({
+  isDrawing,
+  drawStart,
+  drawEnd,
+  activeTool,
+}: ICanvasDrawPreviewProps) {
+  return (
+    <g>
+      {() => {
+        if (!isDrawing()) return null;
+
+        const s    = drawStart();
+        const e    = drawEnd();
+        if (!s || !e) return null;
+        const tool = activeTool();
+
+        if (tool === 'line') {
+          return (
+            <g style="pointer-events: none;">
+              <line
+                x1={String(s.x)} y1={String(s.y)}
+                x2={String(e.x)} y2={String(e.y)}
+                stroke="#fbbf24" stroke-width="2" stroke-dasharray="8 5" stroke-linecap="round"
+              />
+              <circle cx={String(s.x)} cy={String(s.y)} r="4" fill="#fbbf24" opacity="0.7" />
+            </g>
+          );
+        }
+
+        const x = Math.min(s.x, e.x);
+        const y = Math.min(s.y, e.y);
+        const w = Math.abs(e.x - s.x);
+        const h = Math.abs(e.y - s.y);
+
+        if (tool === ShapeKind.Diamond) {
+          const cx = x + w / 2;
+          const cy = y + h / 2;
+          return (
+            <polygon
+              points={`${cx},${y} ${x + w},${cy} ${cx},${y + h} ${x},${cy}`}
+              fill="rgba(251,191,36,0.08)" stroke="#fbbf24"
+              stroke-width="2" stroke-dasharray="8 5"
+              style="pointer-events: none;"
+            />
+          );
+        }
+
+        return (
+          <rect
+            x={String(x)} y={String(y)}
+            width={String(w)} height={String(h)}
+            fill="rgba(251,191,36,0.08)" stroke="#fbbf24"
+            stroke-width="2" stroke-dasharray="8 5" rx="4"
+            style="pointer-events: none;"
+          />
+        );
+      }}
+    </g>
+  );
+}

package/src/showcase/svg-canvas/board/components/canvas-toolbar.syn

@@ -0,0 +1,59 @@
+/**
+ * CanvasToolbar — top bar showing draw/drag status, item count, and action buttons.
+ */
+
+import type { ToolKind } from '../model/i-board';
+
+interface ICanvasToolbarProps {
+  isDrawing:    () => boolean
+  isDragging:   () => boolean
+  activeTool:   () => ToolKind
+  itemCount:    () => number
+  hasSelection: () => boolean
+  onDelete:     () => void
+  onClear:      () => void
+}
+
+export component CanvasToolbar({
+  isDrawing,
+  isDragging,
+  activeTool,
+  itemCount,
+  hasSelection,
+  onDelete,
+  onClear,
+}: ICanvasToolbarProps) {
+  return (
+    <div style="display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 14px; background: #06101e; border: 1px solid #1a2e45; border-radius: 8px; min-height: 42px;">
+
+      <span style="font-size: 13px; color: #94a3b8;">
+        {() => {
+          if (isDrawing()) return activeTool() === 'line'
+            ? '✏️  Drawing line — release to commit'
+            : `▢  Drawing ${activeTool()} — release to commit`;
+          if (isDragging()) return '↔  Moving — release to drop';
+          return `Tool: ${activeTool()} · drag canvas to draw · click item to select`;
+        }}
+      </span>
+
+      <span style="margin-left: auto; font-size: 12px; color: #475569; white-space: nowrap;">
+        {() => { const n = itemCount(); return `${n} item${n === 1 ? '' : 's'}`; }}
+      </span>
+
+      {() => hasSelection() ? (
+        <button
+          onClick={onDelete}
+          style="padding: 5px 13px; background: transparent; color: #ef4444; border: 1px solid #ef4444; border-radius: 5px; cursor: pointer; font-size: 12px;">
+          Delete
+        </button>
+      ) : null}
+
+      <button
+        onClick={onClear}
+        style="padding: 5px 13px; background: transparent; color: #475569; border: 1px solid #334155; border-radius: 5px; cursor: pointer; font-size: 12px;">
+        Clear all
+      </button>
+
+    </div>
+  );
+}