@p4ulcristian/iris-layout 0.2.0 → 0.2.2

package/dist/styles.css

@@ -12,14 +12,31 @@
    - .iris-drop-*              Drop indicator overlay
    ============================================================ */
 
+/* --- Global: disable text selection across all layout elements --- */
+
+.iris-body,
+.iris-body *,
+.iris-sidebar,
+.iris-sidebar * {
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
 /* --- Body --- */
 
 .iris-body {
-  display: flex;
-  flex-direction: column;
+  --iris-grid-gap: 16px;
+  display: grid;
+  grid-template-columns: var(--iris-grid-gap) 1fr var(--iris-grid-gap);
+  grid-template-rows: var(--iris-grid-gap) 1fr var(--iris-grid-gap);
+  grid-template-areas:
+    ".    top    ."
+    "left center right"
+    ".    bottom .";
   flex: 1;
   overflow: hidden;
-  position: relative;
+  min-width: 0;
 }
 
 .iris-body-stage {
@@ -28,12 +45,14 @@
   position: relative;
   height: 100%;
   min-height: 0;
+  min-width: 0;
+  overflow: hidden;
 }
 
 /* Stacked layers — all stages rendered, only active is visible */
 .iris-body-stack {
+  grid-area: center;
   position: relative;
-  flex: 1;
   min-height: 0;
   overflow: hidden;
 }
@@ -45,6 +64,7 @@
   opacity: 0;
   pointer-events: none;
   z-index: 0;
+  overflow: hidden;
 }
 
 .iris-body-layer.iris-body-layer-active {
@@ -53,7 +73,154 @@
   z-index: 1;
 }
 
-/* Stage slide animations — vertical based on stage order */
+.iris-body-layer.iris-body-layer-exiting {
+  opacity: 1;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Navigation edge buttons */
+.iris-nav-edge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  z-index: 2;
+}
+
+.iris-nav-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Half-circle indicator inside nav edges */
+.iris-nav-semicircle {
+  background: rgba(255,255,255,0.08);
+  transition: background 200ms ease, transform 200ms ease;
+}
+
+.iris-nav-edge:hover .iris-nav-semicircle {
+  background: rgba(255,255,255,0.18);
+}
+
+/* Left / Right: tall half-circle, flat side flush with viewport edge */
+.iris-nav-left {
+  grid-area: left;
+  justify-content: flex-start;
+}
+
+.iris-nav-left .iris-nav-semicircle {
+  width: 10px;
+  height: 48px;
+  border-radius: 0 10px 10px 0;
+}
+
+.iris-nav-right {
+  grid-area: right;
+  justify-content: flex-end;
+}
+
+.iris-nav-right .iris-nav-semicircle {
+  width: 10px;
+  height: 48px;
+  border-radius: 10px 0 0 10px;
+}
+
+/* Top / Bottom: wide half-circle, flat side flush with viewport edge */
+.iris-nav-top {
+  grid-area: top;
+  align-items: flex-start;
+}
+
+.iris-nav-top .iris-nav-semicircle {
+  width: 48px;
+  height: 10px;
+  border-radius: 0 0 10px 10px;
+}
+
+.iris-nav-bottom {
+  grid-area: bottom;
+  align-items: flex-end;
+}
+
+.iris-nav-bottom .iris-nav-semicircle {
+  width: 48px;
+  height: 10px;
+  border-radius: 10px 10px 0 0;
+}
+
+/* Nav edge drag-over highlight */
+.iris-nav-drag-over {
+  visibility: visible !important;
+  pointer-events: auto !important;
+}
+
+.iris-nav-drag-over .iris-nav-semicircle {
+  background: rgba(99, 102, 241, 0.6);
+  transform: scale(1.3);
+}
+
+/* Empty workspace placeholder */
+.iris-empty-workspace {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  color: rgba(255,255,255,0.2);
+  font-size: 24px;
+  font-weight: 300;
+}
+
+/* --- Grid viewport (camera-based navigation) --- */
+
+.iris-grid-viewport {
+  --iris-grid-gap: 16px;
+  display: grid;
+  grid-template-columns: var(--iris-grid-gap) 1fr var(--iris-grid-gap);
+  grid-template-rows: var(--iris-grid-gap) 1fr var(--iris-grid-gap);
+  grid-template-areas:
+    ".    top    ."
+    "left center right"
+    ".    bottom .";
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+}
+
+.iris-grid-center {
+  grid-area: center;
+  position: relative;
+  min-height: 0;
+  min-width: 0;
+}
+
+.iris-grid-canvas {
+  position: absolute;
+  display: grid;
+  gap: var(--iris-grid-gap, 16px);
+  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.iris-grid-cell {
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid rgba(255,255,255,0.04);
+}
+
+.iris-grid-cell-active {
+  border-color: rgba(99, 102, 241, 0.3);
+}
+
+.iris-grid-zoomed .iris-grid-cell-active {
+  border-color: rgba(234, 179, 8, 0.6);
+  box-shadow: 0 0 24px rgba(234, 179, 8, 0.4), inset 0 0 12px rgba(234, 179, 8, 0.1);
+}
+
+/* Slide animations — directional based on navigation */
 @keyframes iris-slide-from-bottom {
   from { transform: translateY(80px); }
   to   { transform: translateY(0); }
@@ -64,6 +231,37 @@
   to   { transform: translateY(0); }
 }
 
+@keyframes iris-slide-from-left {
+  from { transform: translateX(-80px); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes iris-slide-from-right {
+  from { transform: translateX(80px); }
+  to   { transform: translateX(0); }
+}
+
+/* Exit animations — outgoing workspace slides away */
+@keyframes iris-slide-out-left {
+  from { transform: translateX(0); opacity: 1; }
+  to   { transform: translateX(-80px); opacity: 0; }
+}
+
+@keyframes iris-slide-out-right {
+  from { transform: translateX(0); opacity: 1; }
+  to   { transform: translateX(80px); opacity: 0; }
+}
+
+@keyframes iris-slide-out-top {
+  from { transform: translateY(0); opacity: 1; }
+  to   { transform: translateY(-80px); opacity: 0; }
+}
+
+@keyframes iris-slide-out-bottom {
+  from { transform: translateY(0); opacity: 1; }
+  to   { transform: translateY(80px); opacity: 0; }
+}
+
 /* --- Entity tile group (split container) --- */
 
 .iris-entity-tile-group {
@@ -73,12 +271,14 @@
   position: relative;
   min-height: 0;
   min-width: 0;
+  overflow: hidden;
 }
 
 .iris-entity-tile-group > div {
   transition: flex 200ms cubic-bezier(0.22, 1, 0.36, 1);
   min-height: 0;
   min-width: 0;
+  overflow: hidden;
   display: flex;
 }
 
@@ -110,6 +310,9 @@
               box-shadow 200ms ease;
   display: flex;
   flex-direction: column;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 .iris-entity-tile:hover {
@@ -126,14 +329,68 @@
   /* Placeholder — user can style unfocused tiles */
 }
 
-.iris-entity-tile.iris-entity-tile-grabbable {
+/* --- Entity tile header --- */
+
+.iris-entity-tile-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: rgba(255,255,255,0.04);
+  border-bottom: 1px solid rgba(255,255,255,0.06);
   cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  flex-shrink: 0;
+  touch-action: none;
 }
 
-.iris-entity-tile.iris-entity-tile-grabbable:active {
+.iris-entity-tile-header:active {
   cursor: grabbing;
 }
 
+.iris-entity-tile-header-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(255,255,255,0.7);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.iris-entity-tile-header-close {
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.3);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 2px;
+  transition: color 150ms ease;
+  flex-shrink: 0;
+}
+
+.iris-entity-tile-header-close:hover {
+  color: rgba(255,255,255,0.9);
+}
+
+.iris-entity-tile-content {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+  min-width: 0;
+}
+
+.iris-entity-tile-fullscreen {
+  position: absolute !important;
+  inset: 0;
+  z-index: 50;
+  border-radius: 0;
+  flex: none !important;
+}
+
 .iris-entity-tile.iris-dragging {
   opacity: 0.3;
 }
@@ -201,7 +458,7 @@
 }
 
 .iris-resizer:hover {
-  background: rgba(99, 102, 241, 0.4);
+  background: transparent;
 }
 
 .iris-resizer.horizontal {
@@ -217,7 +474,28 @@
 }
 
 .iris-resizer.dragging {
-  background: rgba(99, 102, 241, 0.5);
+  background: transparent;
+}
+
+/* Prevent all selection during resize */
+body.iris-resizing,
+body.iris-resizing * {
+  -webkit-user-select: none !important;
+  user-select: none !important;
+  -webkit-touch-callout: none !important;
+  cursor: inherit;
+}
+
+/* Touch: bigger hit area for resizer */
+@media (pointer: coarse) {
+  .iris-resizer.horizontal {
+    width: 16px;
+    margin: 0 -8px;
+  }
+  .iris-resizer.vertical {
+    height: 16px;
+    margin: -8px 0;
+  }
 }
 
 /* --- Sidebar --- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@p4ulcristian/iris-layout",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Tiling layout library for React — resizable splits, drag-drop rearrangement, multi-stage workspaces",
   "type": "module",
   "main": "dist/iris-layout.js",