@synetics/ui 0.7.0-alpha

package/src/showcase/svg-canvas/shape/components/canvas-diamond-body.syn

@@ -0,0 +1,48 @@
+/**
+ * CanvasDiamondBody — SVG polygon + centred text label for a Diamond shape.
+ * Grabs mousedown for drag; text is non-interactive.
+ */
+
+interface ICanvasDiamondBodyProps {
+  x:           number
+  y:           number
+  width:       number
+  height:      number
+  name:        string
+  selected:    () => boolean
+  onShapeDown: (e: MouseEvent) => void
+}
+
+export component CanvasDiamondBody({
+  x,
+  y,
+  width,
+  height,
+  name,
+  selected,
+  onShapeDown,
+}: ICanvasDiamondBodyProps) {
+  const cx  = x + width  / 2;
+  const cy  = y + height / 2;
+  const pts = `${cx},${y} ${x + width},${cy} ${cx},${y + height} ${x},${cy}`;
+
+  return (
+    <g>
+      <polygon
+        points={pts}
+        fill={() => selected() ? 'rgba(34,211,238,0.06)' : 'rgba(59,130,246,0.07)'}
+        stroke={() => selected() ? '#22d3ee' : '#3b82f6'}
+        stroke-width={() => selected() ? '2.5' : '1.5'}
+        style="cursor: grab;"
+        onMouseDown={onShapeDown}
+      />
+      <text
+        x={String(cx)} y={String(cy)}
+        text-anchor="middle" dominant-baseline="middle"
+        fill={() => selected() ? '#22d3ee' : '#64748b'}
+        font-size="12"
+        style="pointer-events: none; user-select: none;"
+      >{name}</text>
+    </g>
+  );
+}

package/src/showcase/svg-canvas/shape/components/canvas-entity-card.syn

@@ -0,0 +1,89 @@
+/**
+ * CanvasEntityCard — foreignObject HTML card for rect/square shapes.
+ * Composes CardHeader + PropertyRow atoms; body is hidden when collapsed.
+ */
+
+import type { IProperty }  from '../../shared/model/i-entity';
+import { CARD_HEADER_H }   from '../../shared/model/i-drag';
+import { CardHeader }      from './card-header.syn';
+import { PropertyRow }     from './property-row.syn';
+
+interface ICanvasEntityCardProps {
+  x:                      number
+  y:                      number
+  width:                  number
+  height:                 number
+  name:                   string
+  collapsed:              boolean
+  properties:             IProperty[]
+  onShapeDown:            (e: MouseEvent) => void
+  onNameChange:           (name: string)  => void
+  onSettingsOpen:         ()              => void
+  onCollapseToggle:       ()              => void
+  onDeleteShape:          ()              => void
+  onAddProperty:          ()              => void
+  onDeleteProperty:       (propId: string) => void
+  onPropertyNameChange:   (propId: string, name: string) => void
+  onPropertySettingsOpen: (propId: string) => void
+}
+
+export component CanvasEntityCard({
+  x,
+  y,
+  width,
+  height,
+  name,
+  collapsed,
+  properties,
+  onShapeDown,
+  onNameChange,
+  onSettingsOpen,
+  onCollapseToggle,
+  onDeleteShape,
+  onAddProperty,
+  onDeleteProperty,
+  onPropertyNameChange,
+  onPropertySettingsOpen,
+}: ICanvasEntityCardProps) {
+  return (
+    <foreignObject
+      x={String(x)}
+      y={String(y)}
+      width={String(width)}
+      height={String(collapsed ? CARD_HEADER_H : height)}
+    >
+      <div style="box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;font-family:system-ui,sans-serif;font-size:12px;color:#cbd5e1;overflow:hidden;">
+
+        <CardHeader
+          name={name}
+          collapsed={collapsed}
+          onShapeDown={onShapeDown}
+          onNameChange={onNameChange}
+          onSettingsOpen={onSettingsOpen}
+          onCollapseToggle={onCollapseToggle}
+          onDeleteShape={onDeleteShape}
+        />
+
+        {() => collapsed ? null : (
+          <div style="flex:1;overflow-y:auto;padding:4px 6px;background:#07111f;">
+            {properties.map((p: IProperty) => (
+              <PropertyRow
+                property={p}
+                onNameChange={(n: string) => onPropertyNameChange(p.id, n)}
+                onSettingsOpen={() => onPropertySettingsOpen(p.id)}
+                onDelete={() => onDeleteProperty(p.id)}
+              />
+            ))}
+            <button
+              onMouseDown={(e: MouseEvent) => e.stopPropagation()}
+              onClick={onAddProperty}
+              style="margin-top:4px;width:100%;background:transparent;border:1px dashed #1e3a5f;border-radius:3px;color:#475569;cursor:pointer;padding:3px;font-size:10px;">
+              + Add Property
+            </button>
+          </div>
+        )}
+
+      </div>
+    </foreignObject>
+  );
+}

package/src/showcase/svg-canvas/shape/components/canvas-rect-body.syn

@@ -0,0 +1,37 @@
+/**
+ * CanvasRectBody — selection-aware background <rect> for Square/Rectangle shapes.
+ * pointer-events: none — the card foreignObject handles all interaction.
+ */
+
+import { CARD_HEADER_H } from '../../shared/model/i-drag';
+
+interface ICanvasRectBodyProps {
+  x:         number
+  y:         number
+  width:     number
+  height:    number
+  collapsed: boolean
+  selected:  () => boolean
+}
+
+export component CanvasRectBody({
+  x,
+  y,
+  width,
+  height,
+  collapsed,
+  selected,
+}: ICanvasRectBodyProps) {
+  return (
+    <rect
+      x={String(x)} y={String(y)}
+      width={String(width)}
+      height={String(collapsed ? CARD_HEADER_H : height)}
+      fill={() => selected() ? 'rgba(34,211,238,0.06)' : 'rgba(59,130,246,0.07)'}
+      stroke={() => selected() ? '#22d3ee' : '#3b82f6'}
+      stroke-width={() => selected() ? '2.5' : '1.5'}
+      rx="4"
+      style="pointer-events: none;"
+    />
+  );
+}

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

@@ -0,0 +1,110 @@
+/**
+ * CanvasShapeItem — thin orchestrator for a single shape entity.
+ *
+ * Square / Rectangle → CanvasRectBody + CanvasEntityCard.
+ * Diamond            → CanvasDiamondBody.
+ * Anchor group       → CanvasAnchorGroup (always in DOM, hidden by default).
+ */
+
+import { AnchorPosition }      from '../../shared/model/i-entity';
+import type { IShape }         from '../model/i-shape';
+import { ShapeKind }           from '../model/i-shape';
+import { CanvasAnchorGroup }   from './canvas-anchor-group.syn';
+import { CanvasDiamondBody }   from './canvas-diamond-body.syn';
+import { CanvasEntityCard }    from './canvas-entity-card.syn';
+import { CanvasRectBody }      from './canvas-rect-body.syn';
+
+interface ICanvasShapeItemProps {
+  shape:                  IShape
+  selectedId:             () => string | null
+  hoveredShapeId:         () => string | null
+  isDrawing:              () => boolean
+  onShapeDown:            (e: MouseEvent) => void
+  onAnchorDown:           (e: MouseEvent, pos: AnchorPosition) => void
+  onHoverEnter:           () => void
+  onHoverLeave:           () => void
+  onNameChange:           (name: string) => void
+  onCollapseToggle:       () => void
+  onDeleteShape:          () => void
+  onAddProperty:          () => void
+  onDeleteProperty:       (propId: string) => void
+  onPropertyNameChange:   (propId: string, name: string) => void
+  onSettingsOpen:         () => void
+  onPropertySettingsOpen: (propId: string) => void
+}
+
+export component CanvasShapeItem({
+  shape,
+  selectedId,
+  hoveredShapeId,
+  isDrawing,
+  onShapeDown,
+  onAnchorDown,
+  onHoverEnter,
+  onHoverLeave,
+  onNameChange,
+  onCollapseToggle,
+  onDeleteShape,
+  onAddProperty,
+  onDeleteProperty,
+  onPropertyNameChange,
+  onSettingsOpen,
+  onPropertySettingsOpen,
+}: ICanvasShapeItemProps) {
+  const sel     = () => selectedId() === shape.id;
+  // Force-read ALL three signals unconditionally every time.
+  // wire.js only subscribes signals that are read during the FIRST run (when
+  // _currentEffect is the wire effect). JS short-circuit would skip reading
+  // hoveredShapeId when selectedId already matches, meaning hoveredShapeId
+  // would never be subscribed — hover updates would be silently ignored after
+  // any SHAPES/UPDATE re-mount. Assigning to locals before the || prevents that.
+  const visible = () => {
+    const d = isDrawing();
+    const s = selectedId() === shape.id;
+    const h = hoveredShapeId() === shape.id;
+    return d || s || h;
+  };
+
+  return (
+    <g
+      data-entity-id={shape.id}
+      onMouseEnter={onHoverEnter}
+      onMouseLeave={onHoverLeave}>
+
+      {shape.kind === ShapeKind.Diamond
+        ? <CanvasDiamondBody
+            x={shape.x} y={shape.y} width={shape.width} height={shape.height}
+            name={shape.name} selected={sel}
+            onShapeDown={onShapeDown}
+          />
+        : <CanvasRectBody
+            x={shape.x} y={shape.y} width={shape.width} height={shape.height}
+            collapsed={shape.collapsed} selected={sel}
+          />
+      }
+
+      {() => shape.kind !== ShapeKind.Diamond ? (
+        <CanvasEntityCard
+          x={shape.x} y={shape.y} width={shape.width} height={shape.height}
+          name={shape.name} collapsed={shape.collapsed} properties={shape.properties}
+          onShapeDown={onShapeDown}
+          onNameChange={onNameChange}
+          onSettingsOpen={onSettingsOpen}
+          onCollapseToggle={onCollapseToggle}
+          onDeleteShape={onDeleteShape}
+          onAddProperty={onAddProperty}
+          onDeleteProperty={onDeleteProperty}
+          onPropertyNameChange={onPropertyNameChange}
+          onPropertySettingsOpen={onPropertySettingsOpen}
+        />
+      ) : null}
+
+      <CanvasAnchorGroup
+        shapeId={shape.id}
+        anchors={shape.anchors}
+        visible={visible}
+        onAnchorDown={onAnchorDown}
+      />
+    </g>
+  );
+}

package/src/showcase/svg-canvas/shape/components/card-header.syn

@@ -0,0 +1,45 @@
+/**
+ * CardHeader — drag handle row at the top of every entity card.
+ * Passes through mousedown only when the target is not an INPUT or BUTTON.
+ */
+
+import { CanvasIconBtn }   from '../../shared/atoms/canvas-icon-btn.syn';
+import { CanvasTextInput } from '../../shared/atoms/canvas-text-input.syn';
+
+interface ICardHeaderProps {
+  name:             string
+  collapsed:        boolean
+  onShapeDown:      (e: MouseEvent) => void
+  onNameChange:     (name: string)  => void
+  onSettingsOpen:   ()              => void
+  onCollapseToggle: ()              => void
+  onDeleteShape:    ()              => void
+}
+
+export component CardHeader({
+  name,
+  collapsed,
+  onShapeDown,
+  onNameChange,
+  onSettingsOpen,
+  onCollapseToggle,
+  onDeleteShape,
+}: ICardHeaderProps) {
+  const handleMouseDown = (e: MouseEvent) => {
+    const t = e.target as HTMLElement;
+    if (t.tagName === 'INPUT' || t.tagName === 'BUTTON') return;
+    onShapeDown(e);
+  };
+
+  return (
+    <div
+      style="display:flex;align-items:center;gap:3px;padding:0 5px;height:32px;min-height:32px;background:#0c1a28;border-bottom:1px solid #1a2e45;cursor:grab;"
+      onMouseDown={handleMouseDown}
+    >
+      <CanvasTextInput value={name} onBlur={onNameChange} />
+      <CanvasIconBtn title="Settings"                             icon="⚙" onClick={onSettingsOpen}   />
+      <CanvasIconBtn title={collapsed ? 'Expand' : 'Collapse'}   icon={collapsed ? '▶' : '▼'} onClick={onCollapseToggle} />
+      <CanvasIconBtn title="Delete" icon="✕" danger onClick={onDeleteShape} />
+    </div>
+  );
+}

package/src/showcase/svg-canvas/shape/components/property-row.syn

@@ -0,0 +1,29 @@
+/**
+ * PropertyRow — single property entry inside an entity card body.
+ */
+
+import type { IProperty }  from '../../shared/model/i-entity';
+import { CanvasIconBtn }   from '../../shared/atoms/canvas-icon-btn.syn';
+import { CanvasTextInput } from '../../shared/atoms/canvas-text-input.syn';
+
+interface IPropertyRowProps {
+  property:       IProperty
+  onNameChange:   (name: string) => void
+  onSettingsOpen: ()             => void
+  onDelete:       ()             => void
+}
+
+export component PropertyRow({
+  property,
+  onNameChange,
+  onSettingsOpen,
+  onDelete,
+}: IPropertyRowProps) {
+  return (
+    <div style="display:flex;align-items:center;gap:3px;padding:2px 0;border-bottom:1px solid #0f1e2e;">
+      <CanvasTextInput value={property.name} small onBlur={onNameChange} />
+      <CanvasIconBtn title="Property settings" icon="⚙" small onClick={onSettingsOpen} />
+      <CanvasIconBtn title="Delete property"   icon="✕" small danger onClick={onDelete} />
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+/**
+ * SvgAnchorCircle — a single anchor point circle.
+ * Edge-midpoint anchors (snap-only, no pointer events) render as small cyan circles.
+ * Vertex anchors (resize handles) render as amber circles with hover grow and mousedown.
+ */
+
+import { AnchorPosition } from '../../../shared/model/i-entity';
+import { VERTEX_ANCHORS }  from '../../../shared/model/i-drag';
+
+interface ISvgAnchorCircleProps {
+  position:     AnchorPosition
+  cx:           number
+  cy:           number
+  onMouseDown?: (e: MouseEvent) => void
+}
+
+export component SvgAnchorCircle({ position, cx, cy, onMouseDown }: ISvgAnchorCircleProps) {
+  if (!VERTEX_ANCHORS.has(position)) {
+    return (
+      <circle
+        data-anchor-pos={position}
+        cx={String(cx)} cy={String(cy)}
+        r="4" fill="#22d3ee" opacity="0.7"
+        style="pointer-events: none;"
+      />
+    );
+  }
+
+  const isNWSE =
+    position === AnchorPosition.TopLeft ||
+    position === AnchorPosition.BottomRight;
+
+  return (
+    <circle
+      data-anchor-pos={position}
+      cx={String(cx)} cy={String(cy)}
+      r="6" fill="#f59e0b" opacity="0.9" stroke="#060e1a" stroke-width="1.5"
+      style={`cursor: ${isNWSE ? 'nwse-resize' : 'nesw-resize'};`}
+      onMouseEnter={(e: MouseEvent) => { (e.currentTarget as SVGCircleElement).setAttribute('r', '9'); }}
+      onMouseLeave={(e: MouseEvent) => { (e.currentTarget as SVGCircleElement).setAttribute('r', '6'); }}
+      onMouseDown={(e: MouseEvent) => onMouseDown?.(e)}
+    />
+  );
+}

package/src/showcase/svg-canvas/shape/entity/canvas-diamond.ts

@@ -0,0 +1,102 @@
+/**
+ * CanvasDiamond — prototype constructor for a diamond shape.
+ * Diamond vertices map to edge-midpoint anchor positions for a consistent API.
+ */
+
+import { AnchorPosition } from '../../shared/model/i-entity';
+import type { IAnchor, IShape } from '../model/i-shape';
+import { ShapeKind } from '../model/i-shape';
+import { CanvasEntity } from './canvas-entity';
+
+export const buildDiamondAnchors = (
+  entityId: string,
+  x: number,
+  y: number,
+  w: number,
+  h: number
+): IAnchor[] => {
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  return [
+    // Diamond vertices → edge-midpoint positions
+    { id: `${entityId}-tc`, position: AnchorPosition.TopCenter, x: cx, y: y, entityId },
+    { id: `${entityId}-rc`, position: AnchorPosition.RightCenter, x: x + w, y: cy, entityId },
+    { id: `${entityId}-bc`, position: AnchorPosition.BottomCenter, x: cx, y: y + h, entityId },
+    { id: `${entityId}-lc`, position: AnchorPosition.LeftCenter, x: x, y: cy, entityId },
+    // Edge segment midpoints → vertex positions
+    {
+      id: `${entityId}-tr`,
+      position: AnchorPosition.TopRight,
+      x: cx + w / 4,
+      y: cy - h / 4,
+      entityId,
+    },
+    {
+      id: `${entityId}-br`,
+      position: AnchorPosition.BottomRight,
+      x: cx + w / 4,
+      y: cy + h / 4,
+      entityId,
+    },
+    {
+      id: `${entityId}-bl`,
+      position: AnchorPosition.BottomLeft,
+      x: cx - w / 4,
+      y: cy + h / 4,
+      entityId,
+    },
+    {
+      id: `${entityId}-tl`,
+      position: AnchorPosition.TopLeft,
+      x: cx - w / 4,
+      y: cy - h / 4,
+      entityId,
+    },
+  ];
+};
+
+export const CanvasDiamond = function (
+  this: IShape,
+  id: string,
+  code: string,
+  name: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number
+): void {
+  CanvasEntity.call(this as unknown as InstanceType<typeof CanvasEntity>, id, code, name);
+  this.kind = ShapeKind.Diamond;
+  this.x = x;
+  this.y = y;
+  this.width = width;
+  this.height = height;
+  this.anchors = buildDiamondAnchors(id, x, y, width, height);
+  this.collapsed = false;
+} as unknown as new (
+  id: string,
+  code: string,
+  name: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number
+) => IShape;
+
+CanvasDiamond.prototype = Object.create(CanvasEntity.prototype);
+CanvasDiamond.prototype.constructor = CanvasDiamond;
+CanvasDiamond.prototype.updateGeometry = function (
+  this: IShape,
+  x: number,
+  y: number,
+  w: number,
+  h: number
+): void {
+  this.x = x;
+  this.y = y;
+  this.width = w;
+  this.height = h;
+  this.anchors = buildDiamondAnchors(this.id, x, y, w, h);
+};
+
+export { buildDiamondAnchors as buildDiamondAnchorsAlias };

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

@@ -0,0 +1,19 @@
+/**
+ * CanvasEntity — base prototype constructor implementing IEntity.
+ * All canvas items (shapes, lines) extend this.
+ */
+
+import type { IEntity, IProperty } from '../../shared/model/i-entity';
+
+export const CanvasEntity = function (this: IEntity, id: string, code: string, name: string): void {
+  this.id = id;
+  this.code = code;
+  this.name = name;
+
+  Object.defineProperty(this, 'properties', {
+    value: [] as IProperty[],
+    writable: true,
+    enumerable: true,
+    configurable: true,
+  });
+} as unknown as new (id: string, code: string, name: string) => IEntity;

package/src/showcase/svg-canvas/shape/entity/canvas-rectangle.ts

@@ -0,0 +1,53 @@
+/**
+ * CanvasRectangle — prototype constructor for a rectangle shape.
+ * Reuses the square anchor formula (rectangular bounding box).
+ */
+
+import type { IShape } from '../model/i-shape';
+import { ShapeKind } from '../model/i-shape';
+import { CanvasEntity } from './canvas-entity';
+import { buildSquareAnchors } from './canvas-square';
+
+export const CanvasRectangle = function (
+  this: IShape,
+  id: string,
+  code: string,
+  name: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number
+): void {
+  CanvasEntity.call(this as unknown as InstanceType<typeof CanvasEntity>, id, code, name);
+  this.kind = ShapeKind.Rectangle;
+  this.x = x;
+  this.y = y;
+  this.width = width;
+  this.height = height;
+  this.anchors = buildSquareAnchors(id, x, y, width, height);
+  this.collapsed = false;
+} as unknown as new (
+  id: string,
+  code: string,
+  name: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number
+) => IShape;
+
+CanvasRectangle.prototype = Object.create(CanvasEntity.prototype);
+CanvasRectangle.prototype.constructor = CanvasRectangle;
+CanvasRectangle.prototype.updateGeometry = function (
+  this: IShape,
+  x: number,
+  y: number,
+  w: number,
+  h: number
+): void {
+  this.x = x;
+  this.y = y;
+  this.width = w;
+  this.height = h;
+  this.anchors = buildSquareAnchors(this.id, x, y, w, h);
+};

package/src/showcase/svg-canvas/shape/entity/canvas-square.ts

@@ -0,0 +1,72 @@
+/**
+ * CanvasSquare — prototype constructor for a square shape.
+ * Exports buildSquareAnchors for reuse by rect + helpers.
+ */
+
+import { AnchorPosition } from '../../shared/model/i-entity';
+import type { IAnchor, IShape } from '../model/i-shape';
+import { ShapeKind } from '../model/i-shape';
+import { CanvasEntity } from './canvas-entity';
+
+export const buildSquareAnchors = (
+  entityId: string,
+  x: number,
+  y: number,
+  w: number,
+  h: number
+): IAnchor[] => {
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  return [
+    { id: `${entityId}-tl`, position: AnchorPosition.TopLeft, x, y, entityId },
+    { id: `${entityId}-tr`, position: AnchorPosition.TopRight, x: x + w, y, entityId },
+    { id: `${entityId}-bl`, position: AnchorPosition.BottomLeft, x, y: y + h, entityId },
+    { id: `${entityId}-br`, position: AnchorPosition.BottomRight, x: x + w, y: y + h, entityId },
+    { id: `${entityId}-tc`, position: AnchorPosition.TopCenter, x: cx, y, entityId },
+    { id: `${entityId}-rc`, position: AnchorPosition.RightCenter, x: x + w, y: cy, entityId },
+    { id: `${entityId}-bc`, position: AnchorPosition.BottomCenter, x: cx, y: y + h, entityId },
+    { id: `${entityId}-lc`, position: AnchorPosition.LeftCenter, x, y: cy, entityId },
+  ];
+};
+
+export const CanvasSquare = function (
+  this: IShape,
+  id: string,
+  code: string,
+  name: string,
+  x: number,
+  y: number,
+  size: number
+): void {
+  CanvasEntity.call(this as unknown as InstanceType<typeof CanvasEntity>, id, code, name);
+  this.kind = ShapeKind.Square;
+  this.x = x;
+  this.y = y;
+  this.width = size;
+  this.height = size;
+  this.anchors = buildSquareAnchors(id, x, y, size, size);
+  this.collapsed = false;
+} as unknown as new (
+  id: string,
+  code: string,
+  name: string,
+  x: number,
+  y: number,
+  size: number
+) => IShape;
+
+CanvasSquare.prototype = Object.create(CanvasEntity.prototype);
+CanvasSquare.prototype.constructor = CanvasSquare;
+CanvasSquare.prototype.updateGeometry = function (
+  this: IShape,
+  x: number,
+  y: number,
+  w: number,
+  h: number
+): void {
+  this.x = x;
+  this.y = y;
+  this.width = w;
+  this.height = h;
+  this.anchors = buildSquareAnchors(this.id, x, y, w, h);
+};