spiderly 19.11.8 → 19.12.0

package/styles/components/spiderly-data-table/spiderly-data-table.component.scss

@@ -1,3 +1,5 @@
+@use "../../styles/layout/mixins" as *;
+
 .table-header {
   display: flex;
   justify-content: space-between;
@@ -48,12 +50,9 @@
   cursor: pointer;
 }
 .column-chooser-reset {
+  @include bare-button();
   margin-top: 4px;
-  padding: 0;
-  border: none;
-  background: none;
   color: var(--p-primary-color);
-  cursor: pointer;
   align-self: flex-start;
   font-size: 0.875rem;
 
@@ -62,8 +61,44 @@
   }
 }
 
+// Teleported with its popover, so top level — the same rule the chooser follows above.
+.column-menu {
+  display: flex;
+  flex-direction: column;
+  min-width: 11rem;
+}
+
+.column-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  // The label takes the slack so a trailing check sits at the far edge rather than beside the
+  // text, where it would read as part of it.
+  .column-menu-item-label {
+    flex: 1;
+  }
+  @include bare-button();
+  text-align: left;
+  padding: 6px 10px;
+  border-radius: var(--p-content-border-radius);
+
+  &:hover:not(:disabled) {
+    background: var(--p-content-hover-background);
+  }
+
+  &:disabled {
+    color: var(--p-text-muted-color);
+    cursor: default;
+  }
+}
+
 :host {
   // In-template content only — rules for teleported overlay content go at top level (see above).
+
+  // onPageChange scrolls this wrapper back into view; the mixin carries the offset contract.
+  .spiderly-table-container {
+    @include scroll-target-below-top-chrome();
+  }
   // The `.clickable` affordance is shared: clickable rows (navigateOnRowClick) and opt-in cells
   // (Column.onCellClick) both get a pointer cursor; cells additionally underline on hover.
   ::ng-deep .clickable {
@@ -73,11 +108,142 @@
     text-decoration: underline;
   }
 
+  // Only ink on hover or focus: a chevron on every header at rest is noise across nineteen of
+  // them, and the header already carries a name and a sort icon.
+  .column-menu-button {
+    @include bare-button();
+    color: var(--p-text-muted-color);
+    padding: 0 2px;
+    opacity: 0;
+    font-size: 0.75rem;
+  }
+
+  th:hover .column-menu-button,
+  .column-menu-button:focus-visible {
+    opacity: 1;
+  }
+
+  // Tabs, above the bar: a view names the question, the bar shows what it resolved to. Shopify
+  // puts saved order views in the same place for the same reason.
+  .table-views {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding-top: 8px;
+  }
+
+  .table-view {
+    @include bare-button();
+    color: var(--p-text-muted-color);
+    padding: 4px 10px;
+    border-radius: var(--p-content-border-radius);
+
+    &:hover {
+      background: var(--p-content-hover-background);
+    }
+  }
+
+  .table-view-active {
+    color: var(--p-primary-color);
+    font-weight: 600;
+    background: var(--p-content-hover-background);
+  }
+
+  // The left edge that survives a horizontal scroll. Geometry only here: the opaque background
+  // lives on the BODY cells below, because the header th already gets an opaque
+  // header.cell.background from PrimeNG's own th rule. Painting the row palette on the whole
+  // class put the pinned th on the row colour and let the hover rule tint it whenever the pointer
+  // crossed ANY header cell — the locked column reacting on its own, again ("na hover ostalih
+  // hoveruje i locked kolone", Filip, 2026-09-05) — and overrode PrimeNG's per-cell sortable
+  // header hover, which is the hover a th should have.
+  .frozen-column {
+    position: sticky;
+    z-index: 1;
+  }
+
+  // Body cells: the background must be OPAQUE and must track hover and striping, or rows show
+  // through the pinned cells as they pass underneath — which is the one thing that makes a sticky
+  // column look broken rather than merely unstyled. It inherits rather than naming a colour so
+  // PrimeNG's own row states keep working.
+  td.frozen-column {
+    background: var(--p-datatable-row-background, var(--p-content-background));
+    // The row fades between its two backgrounds and this repainted instantly, so the pinned
+    // columns changed shade a beat before the rest of the row — which reads as the locked column
+    // reacting on its own rather than as one row highlighting (Filip, on /tags). Same duration
+    // token PrimeNG's own row uses, so the two are one movement.
+    transition: background-color var(--p-transition-duration, 0.2s);
+  }
+
+  tr:hover > td.frozen-column {
+    background: var(--p-datatable-row-hover-background, inherit);
+  }
+
+  // The seam. NN/g calls for a shadow so the pinned columns read as floating ABOVE the rest
+  // rather than as the first two columns of a table that happens not to move.
+  //
+  // `:last-of-type` shipped here first and drew NOTHING: it means "last th among its siblings",
+  // and the frozen cells are the FIRST ones — it was written for "the last frozen column", which
+  // is a concept the markup never expressed. The class does.
+  .frozen-column-last {
+    box-shadow: 2px 0 4px -2px rgb(0 0 0 / 15%);
+  }
+
+  // The grab handle on a header's right edge. The th is position:relative through PrimeNG's own
+  // styles; the strip is wider than the line it draws so it can actually be hit.
+  th {
+    position: relative;
+  }
+
+  .column-resizer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 8px;
+    height: 100%;
+    cursor: col-resize;
+    user-select: none;
+  }
+
+  // The select-all counter. A smaller step than the body text because it is a parenthetical, and
+  // because it is what decides how narrow the checkbox column can be.
+  .selection-count {
+    font-size: 0.75rem;
+    color: var(--p-text-muted-color);
+  }
+
   // Belt to onSelectionCellMouseDown's preventDefault (shift+click text-selection suppression).
   td.selection-cell {
     user-select: none;
   }
 
+  // The operator's per-column wrap (header menu) travels as inherited custom properties, because
+  // the library cannot style a projected spiderlyCellTemplate directly (CLAUDE.md → Column
+  // widths). Unset, the var()s below fall back to the clamp; a wrapped td flips both, and any
+  // consumer clamp written against the same vars follows — that is the whole contract. Only these
+  // two: text-overflow needs no property, since it has no effect once overflow is visible.
+  td.cell-wrap {
+    --spiderly-cell-overflow: visible;
+    --spiderly-cell-white-space: normal;
+  }
+
+  // The cost the fixed layout would otherwise hand over: text no longer widens its column, so
+  // it wraps inside it and a long value grows the row — which pushes every row below it, a worse
+  // shift than the horizontal one the fixed layout removes. One line, ellipsis, whole value still
+  // in the DOM to select and copy. The clamp stays the default precisely because a row that grows
+  // by content costs more than the line saves — wrapping is a choice someone makes about one
+  // column (td.cell-wrap above), not a shape every table inherits.
+  .cell-text {
+    display: block;
+    overflow: var(--spiderly-cell-overflow, hidden);
+    text-overflow: ellipsis;
+    white-space: var(--spiderly-cell-white-space, nowrap);
+  }
+
+  // PrimeNG-rendered markup, so ::ng-deep is the only way in; the mixin carries the contract.
+  ::ng-deep .p-datatable-mask {
+    @include table-pending-veil();
+  }
+
   ::ng-deep {
     .p-datatable-thead {
       position: unset !important;

package/styles/components/spiderly-data-view/spiderly-data-view.component.scss

@@ -1,3 +1,19 @@
+@use "../../styles/layout/mixins" as *;
+
+:host {
+  // onPageChange scrolls this wrapper back into view; the mixin carries the offset contract.
+  .spiderly-table-container {
+    @include scroll-target-below-top-chrome();
+  }
+
+  // PrimeNG-rendered markup, so ::ng-deep is the only way in. Kept under :host deliberately:
+  // the block further down is at SCSS top level, which strips encapsulation entirely and leaks
+  // its rules to every component in the consuming app. Do not extend that one.
+  ::ng-deep .p-datatable-mask {
+    @include table-pending-veil();
+  }
+}
+
 ::ng-deep {
   .p-datatable-tbody {
     display: flex;

package/styles/filters/spiderly-filter-bar.component.scss

@@ -0,0 +1,163 @@
+@use "../styles/layout/mixins" as *;
+
+// Not teleported, so `:host` scoping holds here — unlike the column chooser, whose rules must sit
+// at top level because PrimeNG moves its popover into document.body (Angular/CLAUDE.md → overlay
+// styling). Colours come from the PrimeNG theme's variables so the bar follows the admin's theme
+// rather than carrying a second palette.
+:host {
+  display: block;
+}
+
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0 0;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 999px;
+  background: var(--p-content-background);
+  // The chip is two buttons in one pill; the padding lives on them so both halves are fully
+  // clickable rather than leaving a dead ring around the text.
+  padding: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.filter-chip-edit {
+  @include bare-button();
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 4px 4px 10px;
+  border-radius: 999px 0 0 999px;
+
+  &:hover .filter-chip-value {
+    text-decoration: underline;
+  }
+}
+
+.filter-chip-label {
+  color: var(--p-text-muted-color);
+}
+
+.filter-chip-value {
+  font-weight: 600;
+}
+
+.filter-chip-remove {
+  @include bare-button();
+  color: var(--p-text-muted-color);
+  font-size: 1.05rem;
+  line-height: 1;
+  padding: 4px 9px 5px 4px;
+  border-radius: 0 999px 999px 0;
+
+  &:hover {
+    color: var(--p-primary-color);
+  }
+}
+
+// PrimeNG's button owns the look; only placement belongs here.
+.filter-add {
+  flex: none;
+}
+
+// The add menu is teleported into document.body with its popover, so its rules must sit at TOP
+// LEVEL — `:host` nesting dies on teleport, exactly as the column chooser's do (Angular/CLAUDE.md
+// → overlay styling). The editor is in-template and could be nested, but the two are kept together
+// so nobody has to remember which is which.
+.filter-add-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2px;
+  min-width: 14rem;
+  // Nineteen filters is taller than a popover should ever be; the list scrolls and the search box
+  // above it does not move with it.
+  max-height: 20rem;
+  overflow-y: auto;
+}
+
+.filter-add-search {
+  margin-bottom: 4px;
+  position: sticky;
+  top: 0;
+}
+
+.filter-add-option {
+  @include bare-button();
+  text-align: left;
+  padding: 6px 10px;
+  border-radius: var(--p-content-border-radius);
+
+  &:hover {
+    background: var(--p-content-hover-background);
+  }
+}
+
+// Its own row under the chips, full width, so the controls have room and always appear in one
+// predictable place.
+// Every control here is sized through its own `size="small"` input, never a hand-written
+// `p-inputtext-sm`: each PrimeNG component has its OWN small class (p-select-sm,
+// p-multiselect-sm), so the input class silently did nothing on a select and left it a head
+// taller than the box beside it.
+.filter-editor {
+  display: flex;
+  margin-top: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: var(--p-content-border-radius);
+  background: var(--p-content-background);
+  padding: 8px;
+}
+
+.filter-editor-label {
+  font-weight: 600;
+}
+
+.filter-editor-tick {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.filter-bar-count {
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+  // Pushed away from the chips it summarises, not crowded against the last one.
+  margin-left: 4px;
+}
+
+.sort-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+}
+
+.sort-chip-key {
+  // The direction arrow is the non-colour channel; the priority is the reading order, which is
+  // the thing the scattered header icons could never show.
+  color: var(--p-text-color);
+}
+
+.filter-bar-clear {
+  // Pushed to the far end, away from the chips: a destructive action next to the x it resembles
+  // is how a single chip gets removed by someone reaching for all of them. It is also the LAST
+  // child, because an auto margin here pushes everything after it to the right edge too — which
+  // is how the editor ended up across the screen from the click it answered.
+  margin-left: auto;
+  flex: none;
+}

package/styles/styles/layout/_content.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  padding: 7rem 2rem 2rem 4rem;
+  padding: calc(var(--spiderly-topbar-height) + 2rem) 2rem 2rem 4rem;
   transition: margin-left $transitionDuration;
 }
 

package/styles/styles/layout/_main.scss

@@ -4,10 +4,24 @@
   box-sizing: border-box;
 }
 
+// Declared through :where() so both vars carry ZERO specificity: a consumer's own
+// `html { --spiderly-… }` then wins wherever it sits in the cascade, instead of the override
+// working or not depending on stylesheet order. Full contract, and the fallback rule
+// components must follow: Angular/CLAUDE.md → fixed-chrome offset.
+:where(html) {
+  // Two names because they are two quantities that merely coincide in THIS shell: the topbar's
+  // own height, and how much fixed chrome covers the top of the viewport. A shell that pins a
+  // second bar under the topbar raises the inset without stretching the topbar.
+  --spiderly-topbar-height: 5rem;
+  --spiderly-viewport-top-inset: var(--spiderly-topbar-height);
+}
+
 html {
   height: 100%;
   font-size: $scale;
-  scroll-behavior: smooth;
+
+  // No `scroll-behavior` here, deliberately (2026-08-29) — the argument against re-adding it
+  // is in Angular/CLAUDE.md → fixed-chrome offset.
 }
 
 body {

package/styles/styles/layout/_menu.scss

@@ -8,7 +8,7 @@
   z-index: 999;
   overflow-y: auto;
   user-select: none;
-  top: 7rem;
+  top: calc(var(--spiderly-topbar-height) + 2rem);
   left: 2rem;
   transition:
     transform $transitionDuration,

package/styles/styles/layout/_mixins.scss

@@ -1,3 +1,16 @@
+// A <button> stripped to bare text — the reset behind the library chrome's chips, view tabs,
+// menu rows and plain-text actions. Only the reset lives here: colour, padding, radius and hover
+// stay at the call site (declared AFTER the include, so they win), because what a bare button
+// looks like is per surface — that it stops looking like a UA button is not.
+@mixin bare-button() {
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  padding: 0;
+}
+
 @mixin focused() {
   outline: 0 none;
   outline-offset: 0;
@@ -11,3 +24,36 @@
   transition: box-shadow 0.2s;
   box-shadow: inset 0 0 0 0.2rem var(--p-primary-400);
 }
+
+// Marks an element as a scroll-into-view target that must clear the shell's fixed top chrome.
+// This is the ONE declaration of that offset: scrollElementIntoViewIfAboveViewport reads the
+// computed value back rather than taking a number, so nothing in TypeScript knows the shell's
+// dimensions. The 0px fallback is what stops a consumer running its own shell (no
+// --spiderly-viewport-top-inset declared) from getting a phantom gap above the element.
+@mixin scroll-target-below-top-chrome() {
+  scroll-margin-top: calc(var(--spiderly-viewport-top-inset, 0px) + 1rem);
+}
+
+// The overlay PrimeNG mounts over a table while a fetch is in flight (.p-datatable-mask).
+// Its own theme token is a modal-strength scrim -- rgba(0,0,0,0.4) light, 0.6 dark -- which
+// makes the rows underneath unreadable. Since the whole point of keeping the previous page on
+// screen during a refetch is that it stays READABLE, the scrim is replaced by a light veil.
+// Three parts, each load-bearing:
+// - `color`, because SpinnerIcon paints fill="currentColor". Overriding only the background
+//   leaves a near-white spinner on a near-white veil.
+// - `flex-start` plus a top pad, because the mask spans the whole datatable root: a centred
+//   spinner on a long list sits far below the fold, worst right after a page change has
+//   scrolled the reader to the table's top. The pad is deliberately approximate -- it only has
+//   to land the spinner inside the first screenful, not on any particular row. `position:
+//   sticky` was tried and cannot work here: the icon's containing block IS the mask.
+// - A fallback on every var: Karma loads no PrimeNG theme, and a consumer need not either.
+@mixin table-pending-veil() {
+  background: color-mix(
+    in srgb,
+    var(--p-content-background, #ffffff) 65%,
+    transparent
+  );
+  color: var(--p-primary-color, #334155);
+  align-items: flex-start;
+  padding-top: 6rem;
+}

package/styles/styles/layout/_topbar.scss

@@ -3,7 +3,7 @@
 
 .layout-topbar {
   position: fixed;
-  height: 5rem;
+  height: var(--spiderly-topbar-height);
   z-index: 997;
   left: 0;
   top: 0;
@@ -136,7 +136,7 @@
       border-radius: var(--p-content-border-radius);
       padding: 1rem;
       right: 2rem;
-      top: 5rem;
+      top: var(--spiderly-topbar-height);
       min-width: 15rem;
       display: none;
       -webkit-animation: scalein 0.15s linear;
@@ -181,7 +181,7 @@
   border-radius: var(--p-content-border-radius);
   padding: 1rem;
   right: 2rem;
-  top: 5rem;
+  top: var(--spiderly-topbar-height);
   min-width: 15rem;
   -webkit-animation: scalein 0.15s linear;
   animation: scalein 0.15s linear;
@@ -196,7 +196,7 @@
   @media (max-width: 991px) {
     width: 210px;
     right: 1rem;
-    top: 4.5rem;
+    top: calc(var(--spiderly-topbar-height) - 0.5rem);
   }
 
   .layout-topbar-profile-dropdown-button {