@signal9/era-ui 1.8.6 → 1.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/ui/pane/pane-root.svelte +21 -27
  2. package/package.json +1 -1
package/dist/ui/pane/pane-root.svelte CHANGED
@@ -84,66 +84,60 @@
84
84
  // TEMP: show the grab zones while developing. Flip to false to hide them.
85
85
  const SHOW_RESIZE_ZONES = true;
86
86
 
87
- // Resize handles — 4 edges + 4 corners, each a hit zone that STRADDLES the
88
- // pane's edge, centered on it (translate ±50%), so it bleeds outward by
89
- // exactly as much as it reaches in — an even h-md grab band (T = --era-h-md).
90
- // Edges are inset from the ends by T/2, i.e. exactly where the corner squares
91
- // end, so a blue edge runs right up to each red corner with no gap. `dir` is
92
- // any of n/s/e/w; a 2-letter dir is a corner. Handles live in a layer aligned
93
- // to the pane's border box (markup) and are data-pane-control so they never
94
- // start a pane drag.
87
+ // Resize handles — a tidy OUTER MOAT: every hit zone sits fully OUTSIDE the
88
+ // pane (translate ±100%), so nothing reaches into the interior/frame and the
89
+ // whole content (drag bar included) is left completely clear. Edges are thin
90
+ // h-md/4 strips down each side; corners are h-md/2 squares filling the four
91
+ // diagonal gaps between them. `dir` is any of n/s/e/w; a 2-letter dir is a
92
+ // corner. Handles live in a layer aligned to the pane's border box (markup)
93
+ // and are data-pane-control so they never start a pane drag.
95
94
  type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
96
95
  const RESIZE_HANDLES: { dir: ResizeDir; cursor: string; place: string }[] = [
97
- // corners: a T×T square centered on each corner
96
+ // corners: a square just OUTSIDE each corner (diagonal gap filler)
98
97
  {
99
98
  dir: 'nw',
100
99
  cursor: 'cursor-nwse-resize',
101
- place: 'top:0;left:0;translate:-50% -50%;width:var(--era-h-md);height:var(--era-h-md)'
100
+ place:
101
+ 'top:0;left:0;translate:-100% -100%;width:calc(var(--era-h-md)/2);height:calc(var(--era-h-md)/2)'
102
102
  },
103
103
  {
104
104
  dir: 'ne',
105
105
  cursor: 'cursor-nesw-resize',
106
- place: 'top:0;right:0;translate:50% -50%;width:var(--era-h-md);height:var(--era-h-md)'
106
+ place:
107
+ 'top:0;right:0;translate:100% -100%;width:calc(var(--era-h-md)/2);height:calc(var(--era-h-md)/2)'
107
108
  },
108
109
  {
109
110
  dir: 'sw',
110
111
  cursor: 'cursor-nesw-resize',
111
- place: 'bottom:0;left:0;translate:-50% 50%;width:var(--era-h-md);height:var(--era-h-md)'
112
+ place:
113
+ 'bottom:0;left:0;translate:-100% 100%;width:calc(var(--era-h-md)/2);height:calc(var(--era-h-md)/2)'
112
114
  },
113
115
  {
114
116
  dir: 'se',
115
117
  cursor: 'cursor-nwse-resize',
116
- place: 'bottom:0;right:0;translate:50% 50%;width:var(--era-h-md);height:var(--era-h-md)'
118
+ place:
119
+ 'bottom:0;right:0;translate:100% 100%;width:calc(var(--era-h-md)/2);height:calc(var(--era-h-md)/2)'
117
120
  },
118
- // edges: a T-thick strip inset T/2 from each end so it meets the corners
121
+ // edges: a thin strip just OUTSIDE each side, corner to corner
119
122
  {
120
- // Top edge sits ENTIRELY outside (translate -100% → bottom flush at the
121
- // top edge, extending upward) so it never overlaps the drag bar below.
122
- // Half the others' thickness (h-md/4) because all of it shows outside,
123
- // whereas the centered edges only reveal half — so this matches their
124
- // external protrusion.
125
123
  dir: 'n',
126
124
  cursor: 'cursor-ns-resize',
127
- place:
128
- 'top:0;left:calc(var(--era-h-md)/2);right:calc(var(--era-h-md)/2);translate:0 -100%;height:calc(var(--era-h-md)/4)'
125
+ place: 'top:0;left:0;right:0;translate:0 -100%;height:calc(var(--era-h-md)/4)'
129
126
  },
130
127
  {
131
128
  dir: 's',
132
129
  cursor: 'cursor-ns-resize',
133
- place:
134
- 'bottom:0;left:calc(var(--era-h-md)/2);right:calc(var(--era-h-md)/2);translate:0 50%;height:calc(var(--era-h-md)/2)'
130
+ place: 'bottom:0;left:0;right:0;translate:0 100%;height:calc(var(--era-h-md)/4)'
135
131
  },
136
132
  {
137
133
  dir: 'w',
138
134
  cursor: 'cursor-ew-resize',
139
- place:
140
- 'left:0;top:calc(var(--era-h-md)/2);bottom:calc(var(--era-h-md)/2);translate:-50% 0;width:calc(var(--era-h-md)/2)'
135
+ place: 'left:0;top:0;bottom:0;translate:-100% 0;width:calc(var(--era-h-md)/4)'
141
136
  },
142
137
  {
143
138
  dir: 'e',
144
139
  cursor: 'cursor-ew-resize',
145
- place:
146
- 'right:0;top:calc(var(--era-h-md)/2);bottom:calc(var(--era-h-md)/2);translate:50% 0;width:calc(var(--era-h-md)/2)'
140
+ place: 'right:0;top:0;bottom:0;translate:100% 0;width:calc(var(--era-h-md)/4)'
147
141
  }
148
142
  ];
149
143
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@signal9/era-ui",
3
- "version": "1.8.6",
3
+ "version": "1.8.7",
4
4
  "scripts": {
5
5
  "dev": "vite dev --host",
6
6
  "build": "vite build && npm run prepack",