@issuegraph/editor 0.25.0 → 0.26.0

package/dist/workspace/styles.js

@@ -35,6 +35,7 @@
  * the next edit targets the wrong thing — and this is the file where both
  * could creep back in without touching a line of TypeScript.
  */
+import { heldRailDeclarations } from "../reevaluate/styles.js";
 export const workspaceStylesheet = `
 .ig-workspace {
   display: grid;
@@ -665,12 +666,32 @@ export const workspaceStylesheet = `
   gap: var(--ig-space-tight);
 }
 
-.ig-inspector-issue {
+.ig-inspector-issue,
+.ig-inspector-issues {
   display: flex;
   flex-direction: column;
   gap: var(--ig-space-tight);
 }
 
+/* A SELECTED SET, LISTED AS TEXT: one issue a line, title then key, the key in
+   the muted role the rail's own id chips use. Nothing here is a control. */
+.ig-inspector-set {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+}
+
+.ig-inspector-set-item {
+  color: var(--ig-text-body);
+}
+
+.ig-inspector-set-item .ig-id {
+  color: var(--ig-text-muted);
+}
+
 .ig-inspector-title {
   margin: 0;
   font-size: var(--ig-font-size);
@@ -1420,6 +1441,21 @@ export const workspaceStylesheet = `
   background-color: color-mix(in srgb, var(--ig-text-muted) var(--ig-tint-unit), transparent);
 }
 
+/* A RECEDED ROW DRAWS LAYER 1'S RECEDED GROUND, TINTED OR NOT.
+
+   The tints above tie layer 1's recede ground on specificity and this sheet
+   loads after it, so without this rule a receded row that the edit also
+   changed kept its tint and read as one the selection touches. Placed after
+   every tint so it wins by order at the same specificity. The delta chip and
+   the row's accessible name still report the change. Background-color, never
+   the shorthand, for the held hatch's sake, as above. The footer selector
+   names .ig-linear, as layer 1's does: the canvas graph draws footer rows
+   too, and a receded graph row takes no ground. */
+.ig-workspace .ig-slot[data-recede='true'],
+.ig-workspace .ig-linear .ig-footer-row[data-recede='true'] {
+  background-color: var(--ig-surface-2);
+}
+
 /* THE THIRD COLUMN IS WHAT PUTS THE CHIP AT THE ROW'S TRAILING EDGE.
 
    The frame draws the row as rank, body, chip — three columns, the last
@@ -1452,11 +1488,12 @@ export const workspaceStylesheet = `
 /* §17c's "write landed · order computing": the PREVIOUS order, held still and
    greyed one step, with the label saying why.
 
-   THE SAME FILTER, for the reason reevaluate/styles.ts gives where it greys
-   .ig-reevaluate[data-order='held'] .ig-viewer: layer 1 sets color directly on
-   its own descendants, so an inherited colour greys almost nothing, and a list
-   of descendants to override goes stale the first time layer 1 colours
-   something new.
+   THE SAME HUE-TOKEN BLOCK, for the reason reevaluate/styles.ts gives where it
+   greys .ig-reevaluate[data-order='held'] .ig-viewer: layer 1 sets color
+   directly on its own descendants, so an inherited colour greys almost
+   nothing, and a list of descendants to override goes stale the first time
+   layer 1 colours something new. Redefined hue tokens inherit, and greying by
+   colour keeps the rail's text at its theme's contrast.
 
    SCOPED TO THE RAIL ZONE, WHICH THE STANDALONE SURFACE DID NOT HAVE TO BE.
    There, .ig-viewer is the rail and nothing else. The workspace draws a SECOND
@@ -1468,7 +1505,7 @@ export const workspaceStylesheet = `
    in flight. The rail is the only surface whose ranks the store cannot vouch
    for, so it is the only one greyed. */
 .ig-workspace[data-order='held'] .ig-zone[data-zone='rail'] .ig-viewer {
-  filter: grayscale(1);
+${heldRailDeclarations}
 }
 
 /* ── 17k's OTHER TWO LAYOUTS ───────────────────────────────────────────────
@@ -1484,7 +1521,9 @@ export const workspaceStylesheet = `
        below 1120         rail unchanged; the canvas collapses to a strip that
                           opens full-width on demand; the inspector returns inline
 
-   Below roughly 860 is section 9 territory and out of scope for the package.
+       below 640          one view at a time, picked from three tabs: the
+                          order, the selection's Related groups, or the
+                          Sub-issues tree; the inspector is not drawn
 
    THE RAIL IS THE SAME 50 CHARACTERS IN ALL THREE. That is the whole rule, and
    it is the one thing to check when touching this block: measured on the demo
@@ -1545,6 +1584,112 @@ export const workspaceStylesheet = `
   outline-offset: var(--ig-space-tight);
 }
 
+/* THE TABS AND THE RELATED GROUPS LIST, DRAWN ONLY UNDER 640, on the strip's
+   reasoning above: render.ts cannot know its width, so the tabs are always in
+   the markup and the list is in it whenever its tab is selected, and this is
+   what keeps both off the three wider layouts. The block at the foot of the
+   sheet draws them. */
+/* THE DESIGN'S TABS PART: FILLED, NOT BORDERED. An idle tab is muted text on
+   no fill; hover takes the secondary fill (--ig-surface-2) with full text; the selected tab
+   takes the strong fill (--ig-surface) with full text. 32 tall, 12 inline
+   padding, the control radius, 4 apart. The package has no 32 or 4 token, so
+   both are written from the spacing scale: 2 x --ig-space-loose and
+   2 x --ig-space-micro. */
+.ig-workspace .ig-narrow-tabs {
+  display: none;
+  gap: calc(var(--ig-space-micro) * 2);
+  padding: var(--ig-space-tight) var(--ig-space);
+  border-bottom: var(--ig-stroke) solid var(--ig-line);
+}
+
+.ig-workspace .ig-narrow-tab {
+  flex: 1;
+  min-block-size: calc(var(--ig-space-loose) * 2);
+  border: 0;
+  border-radius: var(--ig-radius);
+  background: none;
+  color: var(--ig-text-muted);
+  font-family: var(--ig-font-ui);
+  font-size: var(--ig-font-size-small);
+  padding: 0 var(--ig-space);
+  cursor: pointer;
+}
+
+.ig-workspace .ig-narrow-tab:hover {
+  background: var(--ig-surface-2);
+  color: var(--ig-text);
+}
+
+.ig-workspace .ig-narrow-tab[aria-selected='true'] {
+  background: var(--ig-surface);
+  color: var(--ig-text);
+}
+
+.ig-workspace .ig-narrow-tab:focus-visible,
+.ig-workspace .ig-related-group:focus-visible {
+  outline: var(--ig-focus-ring) solid var(--ig-focus);
+  outline-offset: var(--ig-space-tight);
+}
+
+.ig-workspace .ig-related {
+  display: none;
+  padding: var(--ig-space);
+}
+
+/* The rows take the Inspector's own row box, '.ig-relationship', so they read
+   the same; only the lists around them are this list's. */
+.ig-related-rows,
+.ig-related-groups {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+}
+
+.ig-related-groups > li {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+}
+
+.ig-related-group {
+  display: flex;
+  gap: var(--ig-space-tight);
+  align-items: baseline;
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  background: var(--ig-surface);
+  color: var(--ig-text-body);
+  font-family: inherit;
+  font-size: inherit;
+  padding: var(--ig-space-tight);
+  text-align: left;
+  cursor: pointer;
+}
+
+.ig-related-search {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+  margin-bottom: var(--ig-space-tight);
+  color: var(--ig-text-muted);
+  font-size: var(--ig-font-size-small);
+}
+
+/* The list's own sentences: the empty states, and the search's status line
+   (nothing matched, or how many the 60-row cut left out). All muted, at the
+   size of the group counts. An empty status line takes no room with no
+   margin, and it is never display: none, which would take the region out of
+   the accessibility tree and lose the first announcement. */
+.ig-related-empty,
+.ig-related-status {
+  margin: 0;
+  color: var(--ig-text-muted);
+  font-size: var(--ig-font-size-small);
+}
+
 /* ONE KEY PER SURFACE, AND THE CANVAS KEEPS IT.
 
    Both zones hold a viewer, so both draw the grammar legend, and this surface
@@ -1754,5 +1899,117 @@ export const workspaceStylesheet = `
     justify-self: start;
   }
 }
+
+/* THE PHONE LAYOUT: one view at a time, under the tabs.
+
+   THE TAB IS THE ROOT'S data-tab, which render.ts derives from the host's
+   narrowView and canvas mode. The rail and the canvas zone share one grid
+   area, and the tab decides which of them is drawn in it. The inspector is not
+   drawn at this width.
+
+   THE TWO BLOCKS ABOVE ALSO MATCH HERE, because every condition in this sheet
+   is single-sided, so each of their rules this layout disagrees with is
+   answered below on a selector at least as specific, and source order settles
+   it. That includes the collapsed and opened canvas: neither means anything
+   when the canvas is a whole tab. */
+@container ig-workspace (width < 640px) {
+  .ig-workspace {
+    grid-template-areas:
+      'header'
+      'view';
+    grid-template-columns: 1fr;
+  }
+
+  .ig-workspace[data-canvas='open'] {
+    grid-template-areas:
+      'header'
+      'view';
+    grid-template-columns: 1fr;
+  }
+
+  .ig-workspace .ig-zone[data-zone='rail'],
+  .ig-workspace .ig-zone[data-zone='canvas'] {
+    grid-area: view;
+  }
+
+  .ig-workspace .ig-zone[data-zone='rail'] {
+    border-right: 0;
+  }
+
+  .ig-workspace .ig-narrow-tabs {
+    display: flex;
+  }
+
+  /* Every value of data-inspector, so the narrow block's 'dismissed' restore
+     and the middle block's lifted panel are both answered. */
+  .ig-workspace[data-inspector] .ig-zone[data-zone='inspector'] {
+    display: none;
+  }
+
+  .ig-workspace[data-tab='related'] .ig-zone[data-zone='rail'],
+  .ig-workspace[data-tab='sub-issues'] .ig-zone[data-zone='rail'] {
+    display: none;
+  }
+
+  /* THE ORDER TAB HIDES THE CANVAS ZONE BUT NOT THE AUDIT OVERLAY IN IT. The
+     header's problem count opens findings in that zone, and display:none would
+     take them down with it on the one tab a reader starts on. visibility is the
+     property a child can turn back on, and a hidden box is also out of hit
+     testing, the tab order and the accessibility tree, so the rail beneath it
+     stays the view. */
+  .ig-workspace[data-tab='order'] .ig-zone[data-zone='canvas'] {
+    visibility: hidden;
+  }
+
+  .ig-workspace[data-tab='order'] .ig-zone[data-zone='canvas'] .ig-audit-overlay {
+    visibility: visible;
+  }
+
+  /* NO STRIP: the tabs are the way to the canvas here. */
+  .ig-workspace[data-canvas] .ig-canvas-strip {
+    display: none;
+  }
+
+  /* THE COLLAPSED CANVAS IS UNDONE, rule by rule. The narrow block hides every
+     child of the zone but the strip and the audit overlay, lets the zone spill
+     and re-anchors the overlay to its leading edge. On the Sub-issues tab the
+     zone's children are drawn again — the tree, the isolated list and the
+     toolbar, which is a flex row; the ':not' on the toolbar's rule only lifts
+     it to the specificity of the rule before it. */
+  .ig-workspace[data-tab='sub-issues'][data-canvas='strip']
+    .ig-zone[data-zone='canvas']
+    > :not(.ig-canvas-strip):not(.ig-audit-overlay) {
+    display: block;
+  }
+
+  .ig-workspace[data-tab='sub-issues'][data-canvas='strip']
+    .ig-zone[data-zone='canvas']
+    > .ig-canvas-toolbar:not(.ig-audit-overlay) {
+    display: flex;
+  }
+
+  .ig-workspace[data-canvas='strip'] .ig-zone[data-zone='canvas'] {
+    overflow: auto;
+  }
+
+  .ig-workspace[data-canvas='strip'] .ig-zone[data-zone='canvas'] .ig-audit-overlay {
+    left: auto;
+    right: var(--ig-space-tight);
+    width: min(calc(var(--ig-char-width) * 66.67), calc(100% - var(--ig-space-tight) * 2));
+    max-height: calc(100% - var(--ig-space-tight) * 2);
+    box-shadow: var(--ig-elevation-overlay);
+  }
+
+  /* RELATED GROUPS SHOWS ONLY ITS LIST. The graph beneath it is the wide
+     layouts' view of the same relationships, and a line needs two columns. The
+     audit overlay is the exception, as it is in the collapsed canvas. */
+  .ig-workspace[data-tab='related'] .ig-zone[data-zone='canvas'] > :not(.ig-related):not(.ig-audit-overlay) {
+    display: none;
+  }
+
+  .ig-workspace[data-tab='related'][data-canvas] .ig-zone[data-zone='canvas'] > .ig-related {
+    display: block;
+  }
+}
 `;
 //# sourceMappingURL=styles.js.map

package/dist/workspace/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/workspace/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAurDlC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/workspace/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAE/D,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA67CjC,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0frB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@issuegraph/editor",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Everything that mutates an Issuegraph document: edit affordances drawn as overlays on a viewer, dispatching through a store. Composes the viewer and the store through their public surfaces and performs no write itself.",
   "keywords": [
     "issuegraph",
@@ -41,9 +41,9 @@
     "node": ">=18"
   },
   "dependencies": {
+    "@issuegraph/store": "^0.2.0",
     "@issuegraph/core": "^0.1.3",
-    "@issuegraph/viewer": "^0.12.0",
-    "@issuegraph/store": "^0.2.0"
+    "@issuegraph/viewer": "^0.13.0"
   },
   "devDependencies": {
     "@types/jsdom": "^30.0.0",