@synetics/ui 0.7.0-alpha

package/src/showcase/svg-canvas/board/components/side-toolbox.syn

@@ -0,0 +1,51 @@
+/**
+ * SideToolbox — vertical strip for selecting the active drawing tool.
+ */
+
+import type { ToolKind } from '../model/i-board';
+
+interface ISideToolboxProps {
+  activeTool: () => ToolKind
+  onSelect:   (tool: ToolKind) => void
+}
+
+interface IToolEntry {
+  kind:  ToolKind
+  label: string
+  icon:  string
+}
+
+const TOOLS: IToolEntry[] = [
+  { kind: 'select',    label: 'Select',  icon: '↖' },
+  { kind: 'line',      label: 'Line',    icon: '╱' },
+  { kind: 'square',    label: 'Square',  icon: '▢' },
+  { kind: 'rectangle', label: 'Rect',    icon: '▭' },
+  { kind: 'diamond',   label: 'Diamond', icon: '◇' },
+];
+
+export component SideToolbox({ activeTool, onSelect }: ISideToolboxProps) {
+  return (
+    <div style="display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; background: #06101e; border: 1px solid #1a2e45; border-radius: 8px; min-width: 60px; align-items: center; flex-shrink: 0;">
+
+      <span style="font-size: 9px; color: #334155; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px;">Tools</span>
+
+      {TOOLS.map((t) => (
+        <button
+          title={t.label}
+          onClick={() => onSelect(t.kind)}
+          style={() =>
+            `display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;` +
+            `width: 46px; height: 54px; border-radius: 6px; cursor: pointer;` +
+            `font-size: 20px; transition: all 0.15s;` +
+            (activeTool() === t.kind
+              ? `background: rgba(34,211,238,0.12); border: 1px solid #22d3ee; color: #22d3ee;`
+              : `background: transparent; border: 1px solid #1a2e45; color: #475569;`)
+          }>
+          <span>{t.icon}</span>
+          <span style="font-size: 9px; letter-spacing: 0.03em;">{t.label}</span>
+        </button>
+      ))}
+
+    </div>
+  );
+}

package/src/showcase/svg-canvas/board/components/svg/canvas-dot-grid.syn

@@ -0,0 +1,18 @@
+/**
+ * CanvasDotGrid — SVG background: solid fill + dot-pattern overlay.
+ * Encapsulates the <defs> pattern so line-canvas.syn stays clean.
+ */
+
+export component CanvasDotGrid() {
+  return (
+    <g>
+      <defs>
+        <pattern id="vsb-dot-grid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
+          <circle cx="12" cy="12" r="1.3" fill="#1a3045" />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill="#060e1a" rx="10" />
+      <rect width="100%" height="100%" fill="url(#vsb-dot-grid)" rx="10" />
+    </g>
+  );
+}

package/src/showcase/svg-canvas/board/model/i-board.ts

@@ -0,0 +1,20 @@
+/** Board-level types: tool selection and draw state — board feature slice model. */
+
+import type { ShapeKind } from '../../shape/model/i-shape';
+
+export type ToolKind = 'select' | 'line' | ShapeKind;
+
+export interface IDrawPoint {
+  x: number;
+  y: number;
+}
+
+export interface IBoardSliceState {
+  selectedId: string | null;
+  activeTool: ToolKind;
+  isDrawing: boolean;
+  drawStart: IDrawPoint | null;
+  drawEnd: IDrawPoint | null;
+  isDragging: boolean;
+  hoveredShapeId: string | null;
+}

package/src/showcase/svg-canvas/board/store/canvas-board.slice.ts

@@ -0,0 +1,51 @@
+/** Board slice — reducer, actions, initial state. */
+
+import type { IStoreAction } from '@synetics/synetics.dev';
+import type { IBoardSliceState, IDrawPoint, ToolKind } from '../model/i-board';
+
+// ── Initial state ─────────────────────────────────────────────────────────────
+
+export const boardInitialState: IBoardSliceState = {
+  selectedId: null,
+  activeTool: 'select',
+  isDrawing: false,
+  drawStart: null,
+  drawEnd: null,
+  isDragging: false,
+  hoveredShapeId: null,
+};
+
+// ── Actions ───────────────────────────────────────────────────────────────────
+
+export type IBoardAction =
+  | { type: 'BOARD/SET_SELECTED'; payload: string | null }
+  | { type: 'BOARD/SET_TOOL'; payload: ToolKind }
+  | { type: 'BOARD/SET_DRAWING'; payload: boolean }
+  | { type: 'BOARD/SET_DRAW_START'; payload: IDrawPoint | null }
+  | { type: 'BOARD/SET_DRAW_END'; payload: IDrawPoint | null }
+  | { type: 'BOARD/SET_DRAGGING'; payload: boolean }
+  | { type: 'BOARD/SET_HOVERED'; payload: string | null };
+
+// ── Reducer ───────────────────────────────────────────────────────────────────
+
+export function boardReducer(state: IBoardSliceState, action: IStoreAction): IBoardSliceState {
+  const a = action as IBoardAction;
+  switch (a.type) {
+    case 'BOARD/SET_SELECTED':
+      return { ...state, selectedId: a.payload };
+    case 'BOARD/SET_TOOL':
+      return { ...state, activeTool: a.payload };
+    case 'BOARD/SET_DRAWING':
+      return { ...state, isDrawing: a.payload };
+    case 'BOARD/SET_DRAW_START':
+      return { ...state, drawStart: a.payload };
+    case 'BOARD/SET_DRAW_END':
+      return { ...state, drawEnd: a.payload };
+    case 'BOARD/SET_DRAGGING':
+      return { ...state, isDragging: a.payload };
+    case 'BOARD/SET_HOVERED':
+      return { ...state, hoveredShapeId: a.payload };
+    default:
+      return state;
+  }
+}

package/src/showcase/svg-canvas/index.ts

@@ -0,0 +1,2 @@
+export { LineCanvasDemo } from './board/components/line-canvas.syn';
+export { SvgCanvasPage } from './svg-canvas-page.syn';

package/src/showcase/svg-canvas/line/components/canvas-line-item.syn

@@ -0,0 +1,85 @@
+/**
+ * CanvasLineItem — renders a single canvas line entity.
+ * Hit target + visual stroke (polyline for orthogonal, line for linear)
+ * + optional name label + optional endpoint handles.
+ */
+
+import type { ICanvasLine }      from '../model/i-canvas-line';
+import { SvgEndpointHandle }     from './svg/svg-endpoint-handle.syn';
+import { SvgLineLabel }          from './svg/svg-line-label.syn';
+import { waypointsToPoints }     from '../../shared/helpers/route-orthogonal';
+
+interface ICanvasLineItemProps {
+  line:            ICanvasLine
+  selectedId:      () => string | null
+  onLineDown:      (e: MouseEvent) => void
+  onEndpointDown:  (e: MouseEvent, endpoint: 'start' | 'end') => void
+  onHoverEnter:    (e: MouseEvent) => void
+  onHoverLeave:    (e: MouseEvent) => void
+  onDblClick?:     () => void
+}
+
+export component CanvasLineItem({
+  line,
+  selectedId,
+  onLineDown,
+  onEndpointDown,
+  onHoverEnter,
+  onHoverLeave,
+  onDblClick,
+}: ICanvasLineItemProps) {
+  return (
+    <g data-entity-id={line.id}>
+
+      {/* Wide transparent hit target — always a <line> for click/drag detection */}
+      <line
+        x1={String(line.x1)} y1={String(line.y1)}
+        x2={String(line.x2)} y2={String(line.y2)}
+        stroke="transparent" stroke-width="18"
+        style="cursor: grab;"
+        onMouseDown={onLineDown}
+        onMouseEnter={onHoverEnter}
+        onMouseLeave={onHoverLeave}
+        onDblClick={() => onDblClick?.()}
+      />
+
+      {/* Visual stroke — polyline when orthogonal, line when linear */}
+      {() => line.mode === 'orthogonal' && line.waypoints.length > 1
+        ? (
+          <polyline
+            data-line-visual="1"
+            points={waypointsToPoints(line.waypoints)}
+            stroke={() => selectedId() === line.id ? '#22d3ee' : '#3b82f6'}
+            stroke-width={() => selectedId() === line.id ? '3' : '2'}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            fill="none"
+            style="pointer-events: none;"
+          />
+        ) : (
+          <line
+            x1={String(line.x1)} y1={String(line.y1)}
+            x2={String(line.x2)} y2={String(line.y2)}
+            stroke={() => selectedId() === line.id ? '#22d3ee' : '#3b82f6'}
+            stroke-width={() => selectedId() === line.id ? '3' : '2'}
+            stroke-linecap="round"
+            style="pointer-events: none;"
+          />
+        )
+      }
+
+      {() => line.name
+        ? <SvgLineLabel x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2} name={line.name} onDblClick={onDblClick} />
+        : null}
+
+      {() => selectedId() === line.id ? (
+        <g>
+          <SvgEndpointHandle cx={line.x1} cy={line.y1} onMouseDown={(e: MouseEvent) => onEndpointDown(e, 'start')} />
+          <SvgEndpointHandle cx={line.x2} cy={line.y2} onMouseDown={(e: MouseEvent) => onEndpointDown(e, 'end')}   />
+        </g>
+      ) : null}
+
+    </g>
+  );
+}
+

package/src/showcase/svg-canvas/line/components/svg/svg-endpoint-handle.syn

@@ -0,0 +1,29 @@
+/**
+ * SvgEndpointHandle — visual + hit-target circle pair for a line endpoint.
+ * Inner circle is decorative (pointer-events: none).
+ * Outer ring is the interactive grab target.
+ */
+
+interface ISvgEndpointHandleProps {
+  cx:           number
+  cy:           number
+  onMouseDown:  (e: MouseEvent) => void
+}
+
+export component SvgEndpointHandle({ cx, cy, onMouseDown }: ISvgEndpointHandleProps) {
+  return (
+    <g>
+      <circle
+        cx={String(cx)} cy={String(cy)}
+        r="5" fill="#22d3ee" opacity="0.9"
+        style="pointer-events: none;"
+      />
+      <circle
+        cx={String(cx)} cy={String(cy)}
+        r="10" fill="transparent" stroke="#22d3ee" stroke-width="1.5" opacity="0.5"
+        style="cursor: crosshair;"
+        onMouseDown={(e: MouseEvent) => { e.stopPropagation(); onMouseDown(e); }}
+      />
+    </g>
+  );
+}

package/src/showcase/svg-canvas/line/components/svg/svg-line-label.syn

@@ -0,0 +1,33 @@
+/**
+ * SvgLineLabel — midpoint rect + text label for a canvas line.
+ * Entirely non-interactive (pointer-events: none on entire group).
+ */
+
+interface ISvgLineLabelProps {
+  x1:        number
+  y1:        number
+  x2:        number
+  y2:        number
+  name:      string
+  onDblClick?: () => void
+}
+
+export component SvgLineLabel({ x1, y1, x2, y2, name, onDblClick }: ISvgLineLabelProps) {
+  const mx = Math.round((x1 + x2) / 2);
+  const my = Math.round((y1 + y2) / 2);
+
+  return (
+    <g data-line-label="1" style="cursor: pointer;" onDblClick={() => onDblClick?.()}>
+      <rect
+        x={String(mx - 28)} y={String(my - 9)}
+        width="56" height="16" rx="3"
+        fill="#07111f" opacity="0.85"
+      />
+      <text
+        x={String(mx)} y={String(my + 4)}
+        text-anchor="middle" font-size="10" fill="#94a3b8"
+        style="user-select: none;"
+      >{name}</text>
+    </g>
+  );
+}

package/src/showcase/svg-canvas/line/entity/canvas-line.ts

@@ -0,0 +1,42 @@
+/**
+ * CanvasLine — prototype constructor implementing ICanvasLine.
+ * Extends CanvasEntity with two endpoints and cardinality bindings.
+ */
+
+import { CanvasEntity } from '../../shape/entity/canvas-entity';
+import type { ICardinality } from '../../shared/model/i-entity';
+import type { ICanvasLine } from '../model/i-canvas-line';
+
+export const CanvasLine = function (
+  this: ICanvasLine,
+  id: string,
+  code: string,
+  name: string,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number
+): void {
+  CanvasEntity.call(this as unknown as InstanceType<typeof CanvasEntity>, id, code, name);
+  this.x1 = x1;
+  this.y1 = y1;
+  this.x2 = x2;
+  this.y2 = y2;
+  this.mode = 'linear';
+  this.waypoints = [];
+  this.leftCardinality = null as ICardinality | null;
+  this.rightCardinality = null as ICardinality | null;
+  this.startConnection = null;
+  this.endConnection = null;
+} as unknown as new (
+  id: string,
+  code: string,
+  name: string,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number
+) => ICanvasLine;
+
+CanvasLine.prototype = Object.create(CanvasEntity.prototype);
+CanvasLine.prototype.constructor = CanvasLine;

package/src/showcase/svg-canvas/line/entity/create-canvas-line.ts

@@ -0,0 +1,24 @@
+/** Line factory helper. */
+
+import type { ICanvasLine } from '../model/i-canvas-line';
+import { CanvasLine } from './canvas-line';
+
+let _seq = 0;
+
+export const nextLineId = (): string => `line-${++_seq}`;
+export const resetLineIdSequence = (): void => {
+  _seq = 0;
+};
+
+export const createCanvasLine = (x1: number, y1: number, x2: number, y2: number): ICanvasLine => {
+  const id = nextLineId();
+  return new (CanvasLine as unknown as new (
+    id: string,
+    code: string,
+    name: string,
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number
+  ) => ICanvasLine)(id, id, `Line ${_seq}`, x1, y1, x2, y2);
+};

package/src/showcase/svg-canvas/line/model/i-canvas-line.ts

@@ -0,0 +1,42 @@
+/** ICanvasLine and connection types — line feature slice model. */
+
+import type { ICardinality, IEntity } from '../../shared/model/i-entity';
+
+// ── Line mode ─────────────────────────────────────────────────────────────────
+
+export type LineMode = 'linear' | 'orthogonal';
+
+// ── Waypoint ─────────────────────────────────────────────────────────────────
+
+export interface IWaypoint {
+  x: number;
+  y: number;
+}
+
+// ── Line connection ───────────────────────────────────────────────────────────
+
+export interface ILineConnection {
+  shapeId: string;
+  anchorId: string;
+}
+
+// ── Canvas line ───────────────────────────────────────────────────────────────
+
+export interface ICanvasLine extends IEntity {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  /** Routing mode: straight line or axis-aligned orthogonal segments */
+  mode: LineMode;
+  /** Computed orthogonal waypoints — empty for linear mode */
+  waypoints: IWaypoint[];
+  /** Cardinality at the start endpoint — null until bound */
+  leftCardinality: ICardinality | null;
+  /** Cardinality at the end endpoint — null until bound */
+  rightCardinality: ICardinality | null;
+  /** Which anchor the start endpoint is connected to — null if free */
+  startConnection: ILineConnection | null;
+  /** Which anchor the end endpoint is connected to — null if free */
+  endConnection: ILineConnection | null;
+}

package/src/showcase/svg-canvas/line/store/canvas-line.slice.ts

@@ -0,0 +1,38 @@
+/** Line slice — reducer, actions, initial state. */
+
+import type { IStoreAction } from '@synetics/synetics.dev';
+import type { ICanvasLine } from '../model/i-canvas-line';
+
+// ── State ─────────────────────────────────────────────────────────────────────
+
+export interface ILineSliceState {
+  items: ICanvasLine[];
+}
+
+export const lineInitialState: ILineSliceState = { items: [] };
+
+// ── Actions ───────────────────────────────────────────────────────────────────
+
+export type ILineAction =
+  | { type: 'LINES/SET'; payload: ICanvasLine[] }
+  | { type: 'LINES/ADD'; payload: ICanvasLine }
+  | { type: 'LINES/UPDATE'; payload: ICanvasLine }
+  | { type: 'LINES/REMOVE'; payload: string }; // line id
+
+// ── Reducer ───────────────────────────────────────────────────────────────────
+
+export function lineReducer(state: ILineSliceState, action: IStoreAction): ILineSliceState {
+  const a = action as ILineAction;
+  switch (a.type) {
+    case 'LINES/SET':
+      return { items: a.payload };
+    case 'LINES/ADD':
+      return { items: [...state.items, a.payload] };
+    case 'LINES/UPDATE':
+      return { items: state.items.map((l) => (l.id === a.payload.id ? a.payload : l)) };
+    case 'LINES/REMOVE':
+      return { items: state.items.filter((l) => l.id !== a.payload) };
+    default:
+      return state;
+  }
+}

package/src/showcase/svg-canvas/modal/components/canvas-settings-modal.syn

@@ -0,0 +1,118 @@
+/**
+ * CanvasSettingsModal — full-screen overlay for shape / line / property settings.
+ * Zero props — reads all state from canvasStore, dispatches directly.
+ */
+
+import { CanvasIconBtn }    from '../../shared/atoms/canvas-icon-btn.syn';
+import {
+  canvasStore,
+  selectModal,
+  selectShapes,
+  selectLines,
+}                           from '../../store/canvas-store';
+import type { ICanvasModalState } from '../model/i-canvas-modal';
+import type { LineMode }          from '../../line/model/i-canvas-line';
+import { recomputeWaypoints }     from '../../shared/helpers/route-orthogonal';
+
+const TITLES: Record<ICanvasModalState['kind'], string> = {
+  shape:    'Shape Settings',
+  line:     'Line Settings',
+  property: 'Property Settings',
+};
+
+export component CanvasSettingsModal() {
+  const modal  = selectModal;   // () => ICanvasModalState | null
+  const shapes = selectShapes;  // () => IShape[]
+  const lines  = selectLines;   // () => ICanvasLine[]
+
+  const handleClose = () => {
+    canvasStore.dispatch({ type: 'MODAL/CLOSE' });
+  };
+
+  const handleNameChange = (val: string) => {
+    const m = modal();
+    if (!m) return;
+
+    canvasStore.dispatch({ type: 'MODAL/SET_NAME', payload: val });
+
+    if (m.kind === 'shape') {
+      const s = shapes().find(sh => sh.id === m.id);
+      if (s) canvasStore.dispatch({ type: 'SHAPES/UPDATE', payload: { ...s, name: val } });
+    } else if (m.kind === 'line') {
+      const l = lines().find(ln => ln.id === m.id);
+      if (l) canvasStore.dispatch({ type: 'LINES/UPDATE', payload: { ...l, name: val } });
+    } else if (m.kind === 'property' && m.propId) {
+      const s = shapes().find(sh => sh.id === m.id);
+      if (s) {
+        canvasStore.dispatch({
+          type: 'SHAPES/UPDATE',
+          payload: {
+            ...s,
+            properties: s.properties.map(p => p.id === m.propId ? { ...p, name: val } : p),
+          },
+        });
+      }
+    }
+  };
+
+  const handleModeChange = (lineId: string, mode: LineMode) => {
+    const l = lines().find(ln => ln.id === lineId);
+    if (!l) return;
+    const waypoints = mode === 'orthogonal' ? recomputeWaypoints(l, shapes()) : [];
+    canvasStore.dispatch({ type: 'LINES/UPDATE', payload: { ...l, mode, waypoints } });
+  };
+
+  return (
+    <>{() => {
+      const m = modal();
+      return m === null ? null : (
+        <div
+          style="position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1000;"
+          onMouseDown={(e: MouseEvent) => { if (e.target === e.currentTarget) handleClose(); }}
+        >
+          <div style="background:#0c1a28;border:1px solid #1a3a5f;border-radius:8px;padding:20px;min-width:300px;color:#cbd5e1;font-family:system-ui,sans-serif;">
+
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+              <h3 style="margin:0;font-size:14px;color:#e2e8f0;">{TITLES[m.kind]}</h3>
+              <CanvasIconBtn title="Close" icon="✕" onClick={handleClose} />
+            </div>
+
+            <div style="margin-bottom:12px;">
+              <label style="display:block;font-size:11px;color:#64748b;margin-bottom:4px;">Name</label>
+              <input
+                type="text"
+                value={m.name}
+                onBlur={(e: FocusEvent) => handleNameChange((e.target as HTMLInputElement).value)}
+                style="width:100%;box-sizing:border-box;background:#07111f;border:1px solid #1a3a5f;border-radius:4px;color:#e2e8f0;padding:6px 8px;font-size:12px;outline:none;"
+              />
+            </div>
+
+            {() => m.kind === 'line' ? (() => {
+              const l = lines().find(ln => ln.id === m.id);
+              if (!l) return null;
+              const isOrtho        = l.mode === 'orthogonal';
+              const canBeOrthogonal = l.startConnection !== null && l.endConnection !== null;
+              return (
+                <div style="margin-bottom:12px;">
+                  <label style="display:block;font-size:11px;color:#64748b;margin-bottom:6px;">Routing</label>
+                  <div style="display:flex;gap:6px;">
+                    <button
+                      onClick={() => handleModeChange(m.id, 'linear')}
+                      style={`background:${!isOrtho ? '#1a3a5f' : '#07111f'};border:1px solid ${!isOrtho ? '#22d3ee' : '#1a3a5f'};border-radius:4px;color:${!isOrtho ? '#22d3ee' : '#64748b'};padding:5px 12px;font-size:11px;cursor:pointer;`}
+                    >Linear</button>
+                    <button
+                      onClick={() => canBeOrthogonal && handleModeChange(m.id, 'orthogonal')}
+                      title={canBeOrthogonal ? '' : 'Connect both endpoints to entities first'}
+                      style={`background:${isOrtho ? '#1a3a5f' : '#07111f'};border:1px solid ${isOrtho ? '#22d3ee' : '#1a3a5f'};border-radius:4px;color:${canBeOrthogonal ? (isOrtho ? '#22d3ee' : '#64748b') : '#334155'};padding:5px 12px;font-size:11px;cursor:${canBeOrthogonal ? 'pointer' : 'not-allowed'};opacity:${canBeOrthogonal ? '1' : '0.45'};`}
+                    >Orthogonal</button>
+                  </div>
+                </div>
+              );
+            })() : null}
+
+          </div>
+        </div>
+      );
+    }}</>
+  );
+}

package/src/showcase/svg-canvas/modal/model/i-canvas-modal.ts

@@ -0,0 +1,10 @@
+/** Modal state types — modal feature slice model. */
+
+export type ICanvasModalKind = 'shape' | 'line' | 'property';
+
+export interface ICanvasModalState {
+  kind: ICanvasModalKind;
+  id: string;
+  name: string;
+  propId?: string;
+}

package/src/showcase/svg-canvas/modal/store/canvas-modal.slice.ts

@@ -0,0 +1,36 @@
+/** Modal slice — reducer, actions, initial state. */
+
+import type { IStoreAction } from '@synetics/synetics.dev';
+import type { ICanvasModalState } from '../model/i-canvas-modal';
+
+// ── State ─────────────────────────────────────────────────────────────────────
+
+export interface IModalSliceState {
+  current: ICanvasModalState | null;
+}
+
+export const modalInitialState: IModalSliceState = { current: null };
+
+// ── Actions ───────────────────────────────────────────────────────────────────
+
+export type IModalAction =
+  | { type: 'MODAL/OPEN'; payload: ICanvasModalState }
+  | { type: 'MODAL/CLOSE' }
+  | { type: 'MODAL/SET_NAME'; payload: string };
+
+// ── Reducer ───────────────────────────────────────────────────────────────────
+
+export function modalReducer(state: IModalSliceState, action: IStoreAction): IModalSliceState {
+  const a = action as IModalAction;
+  switch (a.type) {
+    case 'MODAL/OPEN':
+      return { current: a.payload };
+    case 'MODAL/CLOSE':
+      return { current: null };
+    case 'MODAL/SET_NAME':
+      if (state.current === null) return state;
+      return { current: { ...state.current, name: a.payload } };
+    default:
+      return state;
+  }
+}

package/src/showcase/svg-canvas/shape/components/canvas-anchor-group.syn

@@ -0,0 +1,33 @@
+/**
+ * CanvasAnchorGroup — anchor group for a single shape entity.
+ *
+ * ALWAYS in the DOM, hidden by default (visibility: hidden).
+ * Visibility is toggled reactively via the style prop (wired to style.cssText).
+ *
+ * Uses <ForRegistry isSvg={true}> which creates a <g> container (not <div>)
+ * and accepts SVGElement children. This is the correct declarative approach —
+ * ForRegistry was fixed in synetics.dev to support SVG contexts via the isSvg prop.
+ */
+
+import { SvgAnchorCircle } from './svg/svg-anchor-circle.syn';
+
+export component CanvasAnchorGroup({ shapeId, anchors, visible, onAnchorDown }) {
+  return (
+    <g
+      data-anchor-group={shapeId}
+      style={() => visible() ? 'visibility: visible;' : 'visibility: hidden; pointer-events: none;'}
+    >
+      <ForRegistry each={() => anchors} isSvg={true} key={(a) => a.position}>
+        {(a) => (
+          <SvgAnchorCircle
+            position={a.position}
+            cx={a.x}
+            cy={a.y}
+            onMouseDown={(e) => onAnchorDown(e, a.position)}
+          />
+        )}
+      </ForRegistry>
+    </g>
+  );
+}
+