@pictogrammers/components 0.5.14 → 0.5.17

package/pg/nodeInputText/nodeInputText.ts

@@ -0,0 +1,105 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './nodeInputText.html';
+import style from './nodeInputText.css';
+
+@Component({
+  selector: 'pg-node-input-text',
+  style,
+  template,
+})
+export default class PgNodeInputText extends HTMLElement {
+
+  @Prop() index: number;
+  @Prop() value: string = '';
+  @Prop() name: string = '';
+  @Prop() removable: boolean = false;
+
+  @Part() $input: HTMLInputElement;
+  @Part() $remove: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          index: this.index,
+          value: this.$input.value,
+        }
+      }));
+    });
+    this.$input.addEventListener('input', (e: any) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent('input', {
+        detail: {
+          index: this.index,
+          value: this.$input.value,
+        }
+      }));
+    });
+    this.$input.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('inputprevious', {
+          detail: {
+            index: this.index,
+            selectionIndex: this.$input.selectionDirection === 'forward'
+              ? this.$input.selectionStart
+              : this.$input.selectionEnd,
+          }
+        }));
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('inputnext', {
+          detail: {
+            index: this.index,
+            selectionIndex: this.$input.selectionDirection === 'forward'
+              ? this.$input.selectionStart
+              : this.$input.selectionEnd,
+          }
+        }));
+      } else if (e.key === 'Enter' && this.$input.value !== '') {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('enter', {
+          detail: {
+            index: this.index,
+          }
+        }));
+      }
+    });
+    this.$remove.addEventListener('click', (e: any) => {
+      this.dispatchEvent(new CustomEvent('remove', {
+        detail: {
+          index: this.index,
+        }
+      }));
+    });
+  }
+
+  render(changes: any) {
+    if (changes.value) {
+      this.$input.value = this.value;
+    }
+    if (changes.removable) {
+      this.$remove.classList.toggle('hide', !this.removable);
+    }
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+
+  get selectionStart(){
+    return this.$input.selectionStart || 0;
+  }
+  set selectionStart(value: number) {
+    this.$input.selectionStart = value;
+  }
+
+  get selectionEnd(){
+    return this.$input.selectionEnd || 0;
+  }
+  set selectionEnd(value: number) {
+    this.$input.selectionEnd = value;
+  }
+}

package/pg/nodeOutput/nodeOutput.css

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+}
+
+[part=label] {
+  position: relative;
+  display: flex;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding-right: 1.125rem;
+  color: rgba(255, 255, 255, 0.8);
+  justify-content: right;
+}
+
+[part=label]::after {
+  position: absolute;
+  content: ' ';
+  width: 0.25rem;
+  height: 0.25rem;
+  transform: rotate(45deg);
+  border-top: 2px solid rgba(255, 255, 255, 0.5);
+  border-right: 2px solid rgba(255, 255, 255, 0.5);
+  border-top-right-radius: 0.125rem;
+  right: 0.5rem;
+  top: 0.4rem;
+}

package/pg/nodeResize/README.md

@@ -0,0 +1,3 @@
+# Node Resize Utility
+
+Resize component allows an overlay for resizing.

package/pg/nodeResize/THINKING.md

@@ -0,0 +1,81 @@
+# Preview Sub-Grid Offset Bug
+
+## The Problem
+
+When `snap` fires it updates the node's x/y/width/height via `emit`. That moves the CSS
+anchor. The preview CSS vars must then represent the **remaining sub-grid offset** so the
+overlay tracks the cursor smoothly. If the formula is wrong, the overlay jumps by ~gridSize
+pixels at each snap boundary.
+
+## dragUtil snap algorithm (asymmetric — the root bug)
+
+```
+snapDx = (lastDx + half < 0)
+  ? Math.ceil((lastDx + half) / gridSize)   // negative direction: ceil
+  : Math.floor((lastDx + half) / gridSize)  // positive direction: floor
+```
+
+Because of ceil vs floor the first snap threshold is **asymmetric**:
+- Positive drag: first snap at +8 px  (half grid unit) ← works correctly (south)
+- Negative drag: first snap at -24 px (1.5 grid units) ← broken (north)
+
+Negative example step-by-step with gridSize=16, half=8:
+  dy=-8:  (-8+8)/16 = 0/16 = 0,    ceil(0) = 0   → no snap yet
+  dy=-16: (-16+8)/16 = -8/16 = -0.5, ceil(-0.5) = 0 → still no snap
+  dy=-24: (-24+8)/16 = -16/16 = -1,  ceil(-1)  = -1 → FIRST snap (at 1.5 grid units!)
+
+**Fix: use Math.floor for ALL values** — this rounds toward −∞ symmetrically:
+  dy=+8:  floor((8+8)/16)  = floor(1)      = 1   → snap ✓
+  dy=-8:  floor((-8+8)/16) = floor(0)      = 0   → no snap yet
+  dy=-9:  floor((-9+8)/16) = floor(-0.0625)= -1  → snap (≈half grid unit) ✓
+
+## Correct sub-grid formula
+
+The correct sub-grid residual (pixels past the last snap) must mirror the same algorithm:
+
+```ts
+subGrid(delta) = delta - (
+  delta + half < 0
+    ? Math.ceil((delta + half) / gridSize) * gridSize
+    : Math.floor((delta + half) / gridSize) * gridSize
+)
+```
+
+## Why the existing formulas fail
+
+`delta % gridSize` (used by previewX/Y/Width):
+- delta = -20 → -20 % 16 = -4  (JS truncated modulo)
+- correct: no snap at -20 (threshold is -24), so sub-grid = -20
+- WRONG by 16 px
+
+`((delta + half) % gridSize) - half` (used by previewHeight):
+- delta = 9 → ((17) % 16) - 8 = -7  ✓ (correct, snap fired at +8)
+- delta = -20 → ((-12) % 16) - 8 = -12 - 8 = -20  ✓ (correct, no snap yet)
+- delta = -9 → ((-1) % 16) - 8 = -1 - 8 = -9  
+  - correct: snap fires at -24, so sub-grid = -9  ✓ happens to be right
+
+## Why the west/north handles jump but south mostly does not
+
+For south (hDir=1), dy is positive when the height grows (normal use). The previewHeight
+formula is correct for positive dy. Negative dy (shrinking the south edge) rarely reaches
+the problematic range.
+
+For north (hDir=-1), the previewY/previewWidth/previewX use `% gridSize` which is
+wrong in the range (-24, -16) for dx/dy values.
+
+## Critical insight about width/x coupling
+
+For a west handle (wDir=-1), dx is the raw pointer delta:
+- x sub-grid  = subGrid(dx)
+- width sub-grid = -subGrid(dx)  ← NOT subGrid(-dx)
+
+`subGrid` is NOT an odd function (asymmetric snap means subGrid(-dx) ≠ -subGrid(dx)).
+So calling previewWidth(-dx) with an internal formula on -dx is wrong.
+
+## Fix
+
+Compute `sgX = subGrid(dx)` and `sgY = subGrid(dy)` once per `move` event, then:
+- delta-x   = sgX          (when wDir == -1)
+- delta-width = wDir * sgX  (when wDir != 0)
+- delta-y   = sgY          (when hDir == -1)
+- delta-height = hDir * sgY (when hDir != 0)

package/pg/nodeResize/THINKING.md.tmp.24812.99a70ba81062

@@ -0,0 +1,81 @@
+# Preview Sub-Grid Offset Bug
+
+## The Problem
+
+When `snap` fires it updates the node's x/y/width/height via `emit`. That moves the CSS
+anchor. The preview CSS vars must then represent the **remaining sub-grid offset** so the
+overlay tracks the cursor smoothly. If the formula is wrong, the overlay jumps by ~gridSize
+pixels at each snap boundary.
+
+## dragUtil snap algorithm (asymmetric — the root bug)
+
+```
+snapDx = (lastDx + half < 0)
+  ? Math.ceil((lastDx + half) / gridSize)   // negative direction: ceil
+  : Math.floor((lastDx + half) / gridSize)  // positive direction: floor
+```
+
+Because of ceil vs floor the first snap threshold is **asymmetric**:
+- Positive drag: first snap at +8 px  (half grid unit) ← works correctly (south)
+- Negative drag: first snap at -24 px (1.5 grid units) ← broken (north)
+
+Negative example step-by-step with gridSize=16, half=8:
+  dy=-8:  (-8+8)/16 = 0/16 = 0,    ceil(0) = 0   → no snap yet
+  dy=-16: (-16+8)/16 = -8/16 = -0.5, ceil(-0.5) = 0 → still no snap
+  dy=-24: (-24+8)/16 = -16/16 = -1,  ceil(-1)  = -1 → FIRST snap (at 1.5 grid units!)
+
+**Fix: use Math.floor for ALL values** — this rounds toward −∞ symmetrically:
+  dy=+8:  floor((8+8)/16)  = floor(1)      = 1   → snap ✓
+  dy=-8:  floor((-8+8)/16) = floor(0)      = 0   → no snap yet
+  dy=-9:  floor((-9+8)/16) = floor(-0.0625)= -1  → snap (≈half grid unit) ✓
+
+## Correct sub-grid formula
+
+The correct sub-grid residual (pixels past the last snap) must mirror the same algorithm:
+
+```ts
+subGrid(delta) = delta - (
+  delta + half < 0
+    ? Math.ceil((delta + half) / gridSize) * gridSize
+    : Math.floor((delta + half) / gridSize) * gridSize
+)
+```
+
+## Why the existing formulas fail
+
+`delta % gridSize` (used by previewX/Y/Width):
+- delta = -20 → -20 % 16 = -4  (JS truncated modulo)
+- correct: no snap at -20 (threshold is -24), so sub-grid = -20
+- WRONG by 16 px
+
+`((delta + half) % gridSize) - half` (used by previewHeight):
+- delta = 9 → ((17) % 16) - 8 = -7  ✓ (correct, snap fired at +8)
+- delta = -20 → ((-12) % 16) - 8 = -12 - 8 = -20  ✓ (correct, no snap yet)
+- delta = -9 → ((-1) % 16) - 8 = -1 - 8 = -9  
+  - correct: snap fires at -24, so sub-grid = -9  ✓ happens to be right
+
+## Why the west/north handles jump but south mostly does not
+
+For south (hDir=1), dy is positive when the height grows (normal use). The previewHeight
+formula is correct for positive dy. Negative dy (shrinking the south edge) rarely reaches
+the problematic range.
+
+For north (hDir=-1), the previewY/previewWidth/previewX use `% gridSize` which is
+wrong in the range (-24, -16) for dx/dy values.
+
+## Critical insight about width/x coupling
+
+For a west handle (wDir=-1), dx is the raw pointer delta:
+- x sub-grid  = subGrid(dx)
+- width sub-grid = -subGrid(dx)  ← NOT subGrid(-dx)
+
+`subGrid` is NOT an odd function (asymmetric snap means subGrid(-dx) ≠ -subGrid(dx)).
+So calling previewWidth(-dx) with an internal formula on -dx is wrong.
+
+## Fix
+
+Compute `sgX = subGrid(dx)` and `sgY = subGrid(dy)` once per `move` event, then:
+- delta-x   = sgX          (when wDir == -1)
+- delta-width = wDir * sgX  (when wDir != 0)
+- delta-y   = sgY          (when hDir == -1)
+- delta-height = hDir * sgY (when hDir != 0)

package/pg/nodeResize/basic/basic.ts

@@ -0,0 +1,17 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgNodeResize from '../nodeResize';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-node-resize-basic',
+  template,
+})
+export default class XPgNodeResizeBasic extends HTMLElement {
+
+  @Part() $resize: PgNodeResize;
+
+  connectedCallback() {
+
+  }
+}

package/pg/nodeResize/dragUtil.ts

@@ -0,0 +1,105 @@
+interface DragConfig {
+  source: HTMLElement;
+  gridSize: number;
+  start?: (dx: number, dy: number) => void;
+  move?: (dx: number, dy: number) => void;
+  snap?: (dx: number, dy: number) => void;
+  end?: (dx: number, dy: number, complete: boolean) => void;
+}
+
+export function drag({ source, gridSize, start, move, snap, end }: DragConfig): () => void {
+  let startX = 0;
+  let startY = 0;
+  let lastDx = 0;
+  let lastDy = 0;
+  let lastSnapDx = 0;
+  let lastSnapDy = 0;
+  let activePointerId: number | null = null;
+  const halfGridSize = gridSize / 2;
+
+  const onPointerDown = (e: PointerEvent) => {
+    e.preventDefault();
+    startX = e.clientX;
+    startY = e.clientY;
+    lastDx = 0;
+    lastDy = 0;
+    lastSnapDx = 0;
+    lastSnapDy = 0;
+    activePointerId = e.pointerId;
+    source.setPointerCapture(e.pointerId);
+    source.addEventListener('pointermove', onPointerMove);
+    source.addEventListener('pointerup', onPointerUp);
+    source.addEventListener('pointercancel', onPointerCancel);
+    document.addEventListener('keydown', onKeyDown);
+    start?.(0, 0);
+  };
+
+  const onPointerMove = (e: PointerEvent) => {
+    lastDx = e.clientX - startX;
+    lastDy = e.clientY - startY;
+    move?.(lastDx, lastDy);
+    const snapDx = lastDx + halfGridSize < 0
+      ? Math.ceil((lastDx + halfGridSize) / gridSize)
+      : Math.floor((lastDx + halfGridSize) / gridSize);
+    const snapDy = lastDy + halfGridSize < 0
+      ? Math.ceil((lastDy + halfGridSize) / gridSize)
+      : Math.floor((lastDy + halfGridSize) / gridSize);
+    if (snapDx !== lastSnapDx || snapDy !== lastSnapDy) {
+      lastSnapDx = snapDx;
+      lastSnapDy = snapDy;
+      snap?.(snapDx, snapDy);
+    }
+  };
+
+  const onPointerUp = (e: PointerEvent) => {
+    const dx = e.clientX + halfGridSize - startX < 0
+      ? Math.ceil((e.clientX + halfGridSize - startX) / gridSize)
+      : Math.floor((e.clientX + halfGridSize - startX) / gridSize);
+    const dy = e.clientY + halfGridSize - startY < 0
+      ? Math.ceil((e.clientY + halfGridSize - startY) / gridSize)
+      : Math.floor((e.clientY + halfGridSize - startY) / gridSize);
+    stopDrag();
+    end?.(dx, dy, true);
+  };
+
+  const onPointerCancel = () => {
+    const dx = lastDx < 0
+      ? Math.ceil((lastDx + halfGridSize) / gridSize)
+      : Math.floor((lastDx + halfGridSize) / gridSize);
+    const dy = lastDy < 0
+      ? Math.ceil((lastDy + halfGridSize) / gridSize)
+      : Math.floor((lastDy + halfGridSize) / gridSize);
+    stopDrag();
+    end?.(dx, dy, false);
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== 'Escape') { return; }
+    const dx = lastDx < 0
+      ? Math.ceil((lastDx + halfGridSize) / gridSize)
+      : Math.floor((lastDx + halfGridSize) / gridSize);
+    const dy = lastDy < 0
+      ? Math.ceil((lastDy + halfGridSize) / gridSize)
+      : Math.floor((lastDy + halfGridSize) / gridSize);
+    if (activePointerId !== null) {
+      source.releasePointerCapture(activePointerId);
+    }
+    stopDrag();
+    end?.(dx, dy, false);
+  };
+
+  const stopDrag = () => {
+    activePointerId = null;
+    source.removeEventListener('pointermove', onPointerMove);
+    source.removeEventListener('pointerup', onPointerUp);
+    source.removeEventListener('pointercancel', onPointerCancel);
+    document.removeEventListener('keydown', onKeyDown);
+  };
+
+  source.addEventListener('pointerdown', onPointerDown);
+
+  return () => {
+    source.removeEventListener('pointerdown', onPointerDown);
+    stopDrag();
+  };
+}

package/pg/nodeResize/dragUtil.ts.tmp.34372.787464c73309

@@ -0,0 +1,75 @@
+interface DragConfig {
+  source: HTMLElement;
+  start?: (dx: number, dy: number) => void;
+  move?: (dx: number, dy: number) => void;
+  end?: (dx: number, dy: number, complete: boolean) => void;
+}
+
+export function drag({ source, start, move, end }: DragConfig): () => void {
+  let startX = 0;
+  let startY = 0;
+  let lastDx = 0;
+  let lastDy = 0;
+  let activePointerId: number | null = null;
+
+  const onPointerDown = (e: PointerEvent) => {
+    e.preventDefault();
+    startX = e.clientX;
+    startY = e.clientY;
+    lastDx = 0;
+    lastDy = 0;
+    activePointerId = e.pointerId;
+    source.setPointerCapture(e.pointerId);
+    source.addEventListener('pointermove', onPointerMove);
+    source.addEventListener('pointerup', onPointerUp);
+    source.addEventListener('pointercancel', onPointerCancel);
+    document.addEventListener('keydown', onKeyDown);
+    start?.(0, 0);
+  };
+
+  const onPointerMove = (e: PointerEvent) => {
+    lastDx = e.clientX - startX;
+    lastDy = e.clientY - startY;
+    move?.(lastDx, lastDy);
+  };
+
+  const onPointerUp = (e: PointerEvent) => {
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+    stopDrag();
+    end?.(dx, dy, true);
+  };
+
+  const onPointerCancel = () => {
+    const dx = lastDx;
+    const dy = lastDy;
+    stopDrag();
+    end?.(dx, dy, false);
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== 'Escape') { return; }
+    const dx = lastDx;
+    const dy = lastDy;
+    if (activePointerId !== null) {
+      source.releasePointerCapture(activePointerId);
+    }
+    stopDrag();
+    end?.(dx, dy, false);
+  };
+
+  const stopDrag = () => {
+    activePointerId = null;
+    source.removeEventListener('pointermove', onPointerMove);
+    source.removeEventListener('pointerup', onPointerUp);
+    source.removeEventListener('pointercancel', onPointerCancel);
+    document.removeEventListener('keydown', onKeyDown);
+  };
+
+  source.addEventListener('pointerdown', onPointerDown);
+
+  return () => {
+    source.removeEventListener('pointerdown', onPointerDown);
+    stopDrag();
+  };
+}

package/pg/nodeResize/nodeResize.css

@@ -0,0 +1,187 @@
+:host {
+  position: absolute;
+  display: grid;
+  width: calc(anchor-size(width) + 0.5rem + var(--node-resize-delta-width, 0px));
+  height: calc(anchor-size(height) + 0.5rem + var(--node-resize-delta-height, 0px));
+  top: calc(anchor(top) - 0.25rem + var(--node-resize-delta-y, 0px));
+  left: calc(anchor(left) - 0.25rem + var(--node-resize-delta-x, 0px));
+  border: 0;
+  background: transparent;
+  --resize-radius: 0.25rem;
+  grid-template-columns: 0.75rem auto 0.75rem;
+  grid-template-rows: 0.75rem auto 0.75rem;
+  --node-resize-outline: transparent;
+  --node-resize-hover: #248BE5;
+  pointer-events: none;
+}
+
+:host(.preview) {
+  --node-resize-outline: rgba(36, 139, 229, 0.5);
+}
+
+[part=header] {
+  height: 1rem;
+  pointer-events: all;
+}
+
+[part=northWest] {
+  width: 0.75rem;
+  height: 0.75rem;
+  grid-column: 1;
+  grid-row: 1;
+  padding-top: 0.25rem;
+  padding-left: 0.25rem;
+  pointer-events: all;
+}
+[part=northWest]::before {
+  content: ' ';
+  display: flex;
+  border-top-left-radius: var(--resize-radius);
+  border-top: 2px solid var(--node-resize-outline);
+  border-left: 2px solid var(--node-resize-outline);
+  width: 0.375rem;
+  height: 0.375rem;
+}
+[part=northWest]:hover::before {
+  border-color: var(--node-resize-hover);
+}
+[part=north] {
+  height: 0.5rem;
+  grid-column: 2;
+  grid-row: 1;
+  padding-top: 0.25rem;
+  pointer-events: all;
+}
+[part=north]::before {
+  content: ' ';
+  display: flex;
+  border-top: 2px solid var(--node-resize-outline);
+  height: 0.375rem;
+}
+[part=north]:hover::before {
+  border-color: var(--node-resize-hover);
+}
+[part=northEast] {
+  width: 0.75rem;
+  height: 0.75rem;
+  grid-column: 3;
+  grid-row: 1;
+  padding-top: 0.25rem;
+  padding-right: 0.25rem;
+  pointer-events: all;
+}
+[part=northEast]::before {
+  content: ' ';
+  display: flex;
+  border-top-right-radius: var(--resize-radius);
+  border-top: 2px solid var(--node-resize-outline);
+  border-right: 2px solid var(--node-resize-outline);
+  width: 0.375rem;
+  height: 0.375rem;
+}
+[part=northEast]:hover::before {
+  border-color: var(--node-resize-hover);
+}
+[part=west] {
+  width: 0.5rem;
+  grid-column: 1;
+  grid-row: 2;
+  padding-left: 0.25rem;
+  pointer-events: all;
+}
+[part=west]::before {
+  content: ' ';
+  display: flex;
+  border-left: 2px solid var(--node-resize-outline);
+  width: 0.375rem;
+  height: 100%;
+}
+[part=west]:hover::before {
+  border-color: var(--node-resize-hover);
+}
+[part=east] {
+  width: 0.5rem;
+  grid-column: 3;
+  grid-row: 2;
+  padding-right: 0.25rem;
+  pointer-events: all;
+}
+[part=east]::before {
+  content: ' ';
+  display: flex;
+  border-right: 2px solid var(--node-resize-outline);
+  width: 0.375rem;
+  height: 100%;
+}
+[part=east]:hover::before {
+  border-color: var(--node-resize-hover);
+}
+[part=southWest] {
+  width: 0.5rem;
+  height: 0.5rem;
+  grid-column: 1;
+  grid-row: 3;
+  padding-left: 0.25rem;
+  padding-bottom: 0.25rem;
+  pointer-events: all;
+}
+[part=southWest]::before {
+  content: ' ';
+  display: flex;
+  border-bottom-left-radius: var(--resize-radius);
+  border-bottom: 2px solid var(--node-resize-outline);
+  border-left: 2px solid var(--node-resize-outline);
+  width: 0.375rem;
+  height: 0.375rem;
+}
+[part=southWest]:hover::before {
+  border-color: var(--node-resize-hover);
+}
+[part=south] {
+  height: 0.5rem;
+  grid-column: 2;
+  grid-row: 3;
+  pointer-events: all;
+  padding-bottom: 0.25rem;
+}
+[part=south]::before {
+  content: ' ';
+  display: flex;
+  border-bottom: 2px solid var(--node-resize-outline);
+  height: 0.375rem;
+}
+[part=south]:hover::before {
+  border-color: var(--node-resize-hover);
+}
+[part=southEast] {
+  width: 0.5rem;
+  height: 0.5rem;
+  grid-column: 3;
+  grid-row: 3;
+  padding-right: 0.25rem;
+  padding-bottom: 0.25rem;
+  pointer-events: all;
+}
+[part=southEast]::before {
+  content: ' ';
+  display: flex;
+  border-bottom-right-radius: var(--resize-radius);
+  border-bottom: 2px solid var(--node-resize-outline);
+  border-right: 2px solid var(--node-resize-outline);
+  width: 0.375rem;
+  height: 0.375rem;
+}
+[part=southEast]:hover::before {
+  border-color: var(--node-resize-hover);
+}
+
+[part=northWest].stop::before,
+[part=north].stop::before,
+[part=northEast].stop::before,
+[part=west].stop::before,
+[part=east].stop::before,
+[part=southWest].stop::before,
+[part=south].stop::before,
+[part=southEast].stop::before {
+  border-color: red;
+}

package/pg/nodeResize/nodeResize.html

@@ -0,0 +1,9 @@
+<div part="header"></div>
+<div part="northWest"></div>
+<div part="north"></div>
+<div part="northEast"></div>
+<div part="west"></div>
+<div part="east"></div>
+<div part="southWest"></div>
+<div part="south"></div>
+<div part="southEast"></div>