@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/styles/TableFilter.module.scss

@@ -20,9 +20,10 @@
  * edge under the selected one instead of the vertical rail's brand fill. It is
  * the treatment narrow viewports get for any rail without expandable parents
  * (`.flatFilter`, inside the phone media query at the bottom of this file),
- * and the treatment a page opts into at every width with
- * `<TableFilter variant="underline">` — a vertical rail spends a fifth of the
- * page on navigation, which pays for itself at seven tabs and does not at two.
+ * and the treatment `<TableFilter variant="underline">` gets at every width —
+ * which is every detail page, since GenericDetail now asks for it
+ * unconditionally. A vertical rail spends a fifth of the page on navigation,
+ * permanently, and it is the content panel beside it that pays.
  *
  * The selectors inside are deliberately longer than the ones they override:
  * `.subactive` and `.activetab button` carry `!important`, so only a more
@@ -62,6 +63,54 @@
         display: none;
     }
 
+    /* The hidden scrollbar leaves a strip that overflows looking identical to
+       one that fits, so the overflowing edge is faded instead. TableFilter
+       measures the scroller and writes `data-overflow`; masking only the edge
+       that actually has something past it means a strip that fits is never
+       faded, and the fade disappears as you reach each end.
+
+       `mask-image` over a gradient rather than an overlay element: the strip is
+       a scroller, so a positioned overlay inside it would scroll away with the
+       tabs. */
+    .tableFilter[data-overflow='end'] {
+        -webkit-mask-image: linear-gradient(
+            to right,
+            #000 calc(100% - 2.5rem),
+            transparent
+        );
+        mask-image: linear-gradient(
+            to right,
+            #000 calc(100% - 2.5rem),
+            transparent
+        );
+    }
+
+    .tableFilter[data-overflow='start'] {
+        -webkit-mask-image: linear-gradient(
+            to right,
+            transparent,
+            #000 2.5rem
+        );
+        mask-image: linear-gradient(to right, transparent, #000 2.5rem);
+    }
+
+    .tableFilter[data-overflow='both'] {
+        -webkit-mask-image: linear-gradient(
+            to right,
+            transparent,
+            #000 2.5rem,
+            #000 calc(100% - 2.5rem),
+            transparent
+        );
+        mask-image: linear-gradient(
+            to right,
+            transparent,
+            #000 2.5rem,
+            #000 calc(100% - 2.5rem),
+            transparent
+        );
+    }
+
     .tableFilter > li {
         flex: 0 0 auto;
         margin: 0;
@@ -70,13 +119,20 @@
 
     /* Inactive tabs are muted labels, not tinted blocks. `white-space: nowrap`
        is what keeps the row one row: without it a two-word tab wraps and the
-       strip grows a second line instead of overflowing. */
+       strip grows a second line instead of overflowing.
+
+       Flex rather than block, with a floor on the height: the padding alone
+       gave a ~42px target for a one-line label and a taller one for anything
+       that wrapped, and a control people click all day should have one height
+       whatever is written in it. */
     .tableFilter > li > .link,
     .tableFilter > li > .parentLink,
     .tableFilter > li > button {
-        display: block;
+        display: flex;
+        align-items: center;
+        min-height: var(--tab-strip-height, 40px);
         white-space: nowrap;
-        padding: 0.75rem var(--spacing-md, 1rem);
+        padding: 0.5rem var(--spacing-md, 1rem);
         border: none;
         border-bottom: 3px solid transparent;
         border-radius: 0;
@@ -85,32 +141,68 @@
         font-size: var(--font-size-sm, 0.8125rem);
         font-weight: var(--font-weight-medium, 500);
         cursor: pointer;
+        transition:
+            color var(--speed, 0.18s) var(--ease, ease),
+            border-color var(--speed, 0.18s) var(--ease, ease);
     }
 
-    /* The selected tab. `--primary-color` first because it is what the rail
-       already fills the active item with everywhere else; `--accent-color`
-       covers apps that only declare that one, and the literal keeps the edge
-       visible in an app that declares neither. */
+    /* The selected tab. `--accent-color` first, because that is the variable
+       the vertical rail's own selected edge reads (`.subactive` below) and the
+       strip is the same marker turned on its side — an app that retunes the
+       accent should not have to discover it applies to one of the two.
+       `--primary-color` covers apps that only declare that one, and the
+       literal keeps the edge visible in an app that declares neither. */
     .tableFilter > li > .subactive,
     .tableFilter > li.activetab > button {
         background: none !important;
         color: var(--heading-color, #111) !important;
         font-weight: var(--font-weight-semibold, 600);
         border-bottom-color: var(
-            --primary-color,
-            var(--accent-color, #0076c0)
+            --accent-color,
+            var(--primary-color, #0076c0)
         );
+        /* The strip marks its selection with the bottom edge. The vertical
+           rail's left edge would read as a stray tick on a horizontal row, and
+           its compensating padding would knock the tab off the strip's
+           rhythm. */
+        border-left: none;
+        padding-left: var(--spacing-md, 1rem);
     }
 
     /* Touch devices keep :hover stuck on the last tap, which on the old rule
        tinted whichever tab was tapped last and made it compete with the
-       selected one. */
+       selected one. An unselected tab under the cursor darkens its ink and
+       shows a faint edge — enough to read as reachable, not enough to be
+       mistaken for the selection. */
     .tableFilter > li > .link:hover,
     .tableFilter > li > .parentLink:hover,
     .tableFilter > li > button:hover {
         background: none !important;
         color: var(--heading-color, #111) !important;
     }
+
+    .tableFilter > li > .link:not(.subactive):hover,
+    .tableFilter > li:not(.activetab) > button:hover {
+        border-bottom-color: color-mix(
+            in srgb,
+            var(--accent-color, var(--primary-color, #0076c0)) 35%,
+            transparent
+        );
+    }
+
+    /* The ring has to sit INSIDE the tab: the strip is `overflow-y: hidden`,
+       so the outset `--focus-ring` the base `.link` rule uses is clipped off
+       at the top and bottom here and the keyboard user sees two stray
+       vertical ticks. Written out rather than reusing the token, because the
+       token is an outset shadow and `inset var(--focus-ring)` would break for
+       any app that declares it as anything other than one plain shadow. */
+    .tableFilter > li > .link:focus-visible,
+    .tableFilter > li > .parentLink:focus-visible,
+    .tableFilter > li > button:focus-visible {
+        outline: none;
+        box-shadow: inset 0 0 0 2px
+            var(--accent-color, var(--primary-color, #0076c0));
+    }
 }
 
 /* The opt-in variant. Same strip, at every width; TableFilter sets this class
@@ -245,10 +337,29 @@
    rather than as decoration. */
 .subactive {
     font-weight: var(--font-weight-semibold, 600);
-    background: var(--primary-color, #000) !important;
-    /* Was --tertiary-color, which several projects set to their page
-       off-white; white is what sits on this blue elsewhere. */
-    color: #fff !important;
+    /* 2026: was a fully saturated fill of the brand colour with white type —
+       a solid block shouting at the same volume as the data it filters, and
+       the single loudest thing on an index page. A tint plus the brand ink
+       marks the selection just as unambiguously (still exactly one item) at a
+       fraction of the weight.
+    
+       The tint alone, though, was measured at 10% opacity against a white
+       panel, which is a ~1.02:1 difference from its neighbours — legible if
+       you are looking for it and invisible if you are not. So identity is
+       carried three ways now, none of them colour alone: the accent edge, a
+       firmer tint, and the weight. */
+    position: relative;
+    background: color-mix(
+        in srgb,
+        var(--primary-color, #000) 12%,
+        transparent
+    ) !important;
+    color: var(--primary-color, #000) !important;
+    /* The edge is a border rather than a pseudo-element so it cannot be
+       clipped by the rail's own `overflow-y: auto`. The matching negative
+       padding keeps the label from shifting 3px when it becomes selected. */
+    border-left: 3px solid var(--accent-color, var(--primary-color, #000));
+    padding-left: calc(var(--spacing-md, 1rem) - 3px);
 }
 
 .subactivechildren {

package/src/components/styles/TicketConversation.module.scss

@@ -0,0 +1,497 @@
+/**
+ * The support conversation.
+ *
+ * The three entry kinds are distinguished by an accent edge, a tint AND a
+ * word — never by colour alone, because the one mistake this view must make
+ * impossible is an agent reading an internal note as something the customer
+ * has already seen.
+ *
+ * Literal fallbacks on every token: a bare var() for a token the host has not
+ * declared is invalid at computed-value time and discards its declaration.
+ */
+
+.wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+/* -- header ---------------------------------------------------------------- */
+
+.head {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.75rem 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color, rgba(43, 43, 43, 0.12));
+}
+
+.headMain {
+    grid-column: 1 / -1;
+
+    h3 {
+        margin: 0.2rem 0 0;
+        color: var(--heading-color, #111827);
+        font-size: 1.05rem;
+        font-weight: var(--font-weight-semibold, 600);
+        line-height: 1.35;
+    }
+}
+
+.reference {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin: 0;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.78rem;
+    font-weight: var(--font-weight-semibold, 600);
+    font-variant-numeric: tabular-nums;
+}
+
+.status {
+    padding: 0.1rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.7rem;
+    letter-spacing: 0.02em;
+}
+
+.open {
+    background: color-mix(in srgb, var(--highlight-color, #3cbf7d) 20%, transparent);
+    color: #0f6b41;
+}
+
+.closed {
+    background: rgba(43, 43, 43, 0.09);
+    color: var(--muted-color, #6b7280);
+}
+
+.meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem 1.75rem;
+    margin: 0;
+
+    dt {
+        color: var(--muted-color, #6b7280);
+        font-size: 0.68rem;
+        font-weight: var(--font-weight-semibold, 600);
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+    }
+
+    dd {
+        margin: 0.1rem 0 0;
+        color: var(--paragraph-color, #2b2b2b);
+        font-size: 0.83rem;
+    }
+}
+
+.channel {
+    display: inline-flex;
+    gap: 0.3rem;
+    align-items: center;
+}
+
+.source {
+    display: inline-flex;
+    gap: 0.3rem;
+    align-items: center;
+    align-self: start;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.76rem;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:hover {
+        color: var(--primary-color, #1b3933);
+    }
+}
+
+/* -- thread ---------------------------------------------------------------- */
+
+.thread {
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.entry {
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--border-color, rgba(43, 43, 43, 0.12));
+    /* The accent edge carries the direction; the tag beside it says the same
+       thing in words. */
+    border-left-width: 3px;
+    border-radius: var(--btn-br, 5px);
+    background: var(--surface-color, #fff);
+}
+
+/* From the customer. The plainest surface — most of a thread is these, and
+   they should read as the baseline. */
+.entryIn {
+    border-left-color: var(--border-color, rgba(43, 43, 43, 0.25));
+}
+
+/* Our reply. Tinted so a scan down a long thread shows who answered when. */
+.entryOut {
+    border-left-color: var(--primary-color, #1b3933);
+    background: color-mix(in srgb, var(--primary-color, #1b3933) 4%, var(--surface-color, #fff));
+}
+
+/* An internal note. Deliberately the loudest of the three. */
+.entryNote {
+    border-left-color: #b7791f;
+    background: rgba(183, 121, 31, 0.07);
+    border-style: dashed;
+    border-left-style: solid;
+}
+
+.entryHead {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+    align-items: center;
+    margin-bottom: 0.45rem;
+}
+
+.entryIcon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--muted-color, #6b7280);
+}
+
+.author {
+    color: var(--heading-color, #111827);
+    font-size: 0.84rem;
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.tag,
+.privateTag,
+.firstTag,
+.attachTag {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    padding: 0.08rem 0.45rem;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.tag {
+    background: rgba(43, 43, 43, 0.07);
+    color: var(--muted-color, #6b7280);
+}
+
+.privateTag {
+    background: rgba(183, 121, 31, 0.18);
+    color: #8a5a00;
+}
+
+.firstTag {
+    background: color-mix(in srgb, var(--primary-color, #1b3933) 12%, transparent);
+    color: var(--primary-color, #1b3933);
+}
+
+.attachTag {
+    background: rgba(43, 43, 43, 0.07);
+    color: var(--paragraph-color, #374151);
+}
+
+.when {
+    margin-left: auto;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.72rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.body {
+    margin: 0;
+    color: var(--paragraph-color, #2b2b2b);
+    font-size: 0.85rem;
+    line-height: 1.55;
+    /* Email bodies arrive with their own newlines and no markup; preserving
+       them is the difference between a readable message and a wall. */
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+
+    /* A long email (forwarded chains, ticket-system footers) must not turn
+       the conversation into a mile of scrolling — the message scrolls inside
+       its own card instead. */
+    max-height: 24rem;
+    overflow-y: auto;
+}
+
+/* -- rendered email -------------------------------------------------------- */
+
+/**
+ * The sanitised HTML of a message.
+ *
+ * The markup is already safe by the time it reaches here — an allowlist ran on
+ * the server, and script, style, iframe, form and every event handler are gone.
+ * What is left is a STYLING problem: an email carries its own inline CSS,
+ * written for a full-width mail client, and dropped into a card it will happily
+ * set a 900px table, a 24pt font and a white background on a dark surface.
+ *
+ * So this block is containment, not sanitising. The message may lay itself out
+ * however it likes inside these bounds and may not affect anything outside
+ * them.
+ */
+.bodyHtml {
+    /* Same cap as the plain-text body: one long forwarded chain must not turn
+       the thread into a mile of scrolling. */
+    max-height: 24rem;
+    overflow: auto;
+
+    /* Layout, paint and style containment. The message cannot draw outside
+       this box, cannot reflow the card around it, and counters/quotes it
+       declares do not leak into the rest of the conversation. */
+    contain: content;
+
+    color: var(--paragraph-color, #2b2b2b);
+    font-size: 0.85rem;
+    line-height: 1.55;
+    overflow-wrap: anywhere;
+
+    /* Nothing in a message is wider than the card it sits in. This is the one
+       rule that keeps a 900px signature table from stretching the thread. */
+    * {
+        max-width: 100%;
+    }
+
+    p,
+    div,
+    ul,
+    ol,
+    blockquote,
+    table,
+    pre,
+    h1, h2, h3, h4, h5, h6 {
+        margin: 0 0 0.55rem;
+    }
+
+    > *:last-child {
+        margin-bottom: 0;
+    }
+
+    /* Email headings are written for a full-width client; at card width they
+       arrive as shouting. Capped, but still ranked. */
+    h1, h2 { font-size: 1rem; font-weight: 600; }
+    h3, h4 { font-size: 0.92rem; font-weight: 600; }
+    h5, h6 { font-size: 0.85rem; font-weight: 600; }
+
+    ul,
+    ol {
+        padding-left: 1.3rem;
+    }
+
+    a {
+        color: var(--primary-color, #1b3933);
+        text-decoration: underline;
+    }
+
+    img {
+        height: auto;
+        /* An inline `height="600"` on an image we have capped to the card
+           width would otherwise stretch it. */
+        max-width: 100%;
+    }
+
+    /* The quoted history under a reply. Marked rather than hidden — an agent
+       needs to see what was quoted, and needs to see that it IS a quote. */
+    blockquote {
+        margin-left: 0;
+        padding-left: 0.75rem;
+        border-left: 2px solid var(--border-color, rgba(43, 43, 43, 0.18));
+        color: var(--muted-color, #6b7280);
+    }
+
+    table {
+        border-collapse: collapse;
+    }
+
+    td,
+    th {
+        padding: 0.15rem 0.4rem;
+        vertical-align: top;
+    }
+
+    pre {
+        white-space: pre-wrap;
+        overflow-x: auto;
+    }
+
+    hr {
+        margin: 0.7rem 0;
+        border: 0;
+        border-top: 1px solid var(--border-color, rgba(43, 43, 43, 0.14));
+    }
+}
+
+/* A remote image that has not been unblocked. Deliberately visible: an image
+   that silently disappears reads as a broken message, and the reader would
+   never know there is a button that brings it back. */
+.blockedImage {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    padding: 0.05rem 0.4rem;
+    border: 1px dashed var(--border-color, rgba(43, 43, 43, 0.3));
+    border-radius: 3px;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.72rem;
+    vertical-align: middle;
+}
+
+.bodyBar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem 0.6rem;
+    align-items: center;
+    margin-bottom: 0.4rem;
+}
+
+.bodyAction {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    padding: 0.1rem 0.45rem;
+    border: 1px solid var(--border-color, rgba(43, 43, 43, 0.18));
+    border-radius: 999px;
+    background: transparent;
+    color: var(--muted-color, #6b7280);
+    font-family: inherit;
+    font-size: 0.68rem;
+    font-weight: var(--font-weight-semibold, 600);
+    cursor: pointer;
+
+    &:hover {
+        border-color: var(--primary-color, #1b3933);
+        color: var(--primary-color, #1b3933);
+    }
+}
+
+/* The reason, in words, next to the button. "Show images" alone does not tell
+   an agent why they were hidden, and the why is the part that matters. */
+.bodyHint {
+    color: var(--muted-color, #6b7280);
+    font-size: 0.68rem;
+}
+
+.state {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    padding: 1.5rem 0;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.85rem;
+}
+
+.spin { animation: ticketSpin 0.9s linear infinite; }
+
+@keyframes ticketSpin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .spin { animation: none; }
+}
+
+@media (max-width: 759px) {
+    .head { grid-template-columns: minmax(0, 1fr); }
+    .when { margin-left: 0; width: 100%; }
+}
+
+/* -- composer -------------------------------------------------------------- */
+
+.composer {
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--border-color, rgba(43, 43, 43, 0.14));
+    border-radius: var(--btn-br, 5px);
+    background: var(--surface-color, #fff);
+}
+
+/* An internal note looks like an internal note BEFORE it is sent, not after.
+   The composer takes on the note colour the moment the switch is flipped, so
+   the state is visible in peripheral vision while typing. */
+.composerNote {
+    border-color: rgba(183, 121, 31, 0.5);
+    background: rgba(183, 121, 31, 0.06);
+}
+
+.composerBar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.9rem;
+    align-items: center;
+    margin-bottom: 0.6rem;
+}
+
+.switch {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: center;
+    color: var(--paragraph-color, #374151);
+    font-size: 0.8rem;
+    font-weight: var(--font-weight-semibold, 600);
+    cursor: pointer;
+}
+
+/* The consequence in words, always present. */
+.consequence {
+    color: var(--muted-color, #6b7280);
+    font-size: 0.76rem;
+}
+
+.composerInput {
+    width: 100%;
+    padding: 0.6rem 0.7rem;
+    border: 1px solid var(--border-color, rgba(43, 43, 43, 0.15));
+    border-radius: var(--btn-br, 5px);
+    background: var(--background-color, #fff);
+    color: var(--paragraph-color, #2b2b2b);
+    font: inherit;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    resize: vertical;
+
+    &:focus {
+        outline: none;
+        border-color: color-mix(
+            in srgb,
+            var(--primary-color, #1b3933) 45%,
+            var(--border-color, rgba(43, 43, 43, 0.15))
+        );
+        box-shadow: 0 0 0 3px
+            color-mix(in srgb, var(--highlight-color, #3cbf7d) 22%, transparent);
+    }
+}
+
+.composerActions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.6rem;
+}
+
+.send {
+    height: 34px;
+    padding: 0 1.1rem;
+    border: 1px solid var(--primary-color, #1b3933);
+    border-radius: var(--btn-br, 5px);
+    background: var(--primary-color, #1b3933);
+    color: #fff;
+    font-family: inherit;
+    font-size: 0.8rem;
+    font-weight: var(--font-weight-semibold, 600);
+    cursor: pointer;
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}