@visns-studio/visns-components 6.21.0 → 6.23.1

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

@@ -234,6 +234,15 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     }
 }
 
+// A ghost button that is currently ON — the Select toggle while the timeline is
+// in picking mode. Tinted rather than filled: it is a mode, not the pane's
+// primary action.
+.ghostButtonOn {
+    border-color: var(--s-primary);
+    background: var(--s-tint);
+    color: var(--s-primary);
+}
+
 .iconButton {
     @include sms-reset;
     @include sms-focus;
@@ -1521,6 +1530,101 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     font-weight: 600;
 }
 
+// --------------------------------------------------- picking and annotations
+//
+// Both are off unless the host asked for them: `.pickRow` only ever wraps a
+// bubble while the panel is in Select mode, and `.annotations` renders only
+// where the host supplied chips.
+
+// The whole row is the hit target while picking. The checkbox sits on the
+// bubble's own side of the pane so the ticks line up down one margin rather
+// than zig-zagging with the conversation.
+.pickRow {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    max-width: 100%;
+    padding: 0.15rem 0.25rem;
+    border: 1px solid transparent;
+    border-radius: 14px;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--s-hover);
+    }
+}
+
+.bubbleOut .pickRow {
+    flex-direction: row-reverse;
+}
+
+.pickRowOn {
+    border-color: color-mix(in srgb, var(--s-primary) 45%, transparent);
+    background: var(--s-tint);
+}
+
+// A message that has not reached the server yet — nothing to file it against.
+.pickRowOff {
+    opacity: 0.5;
+    cursor: default;
+
+    &:hover {
+        background: none;
+    }
+}
+
+.pickBox {
+    flex-shrink: 0;
+    width: 15px;
+    height: 15px;
+    margin: 0;
+    accent-color: var(--s-primary);
+    cursor: inherit;
+}
+
+// Host-supplied chips under a bubble, on the bubble's own side.
+.annotations {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    max-width: min(60ch, 64%);
+    margin-top: 0.25rem;
+    padding: 0 0.25rem;
+}
+
+.bubbleOut .annotations {
+    justify-content: flex-end;
+}
+
+.annotation {
+    @include sms-reset;
+
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    max-width: 100%;
+    padding: 0.1rem 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--s-primary) 30%, transparent);
+    border-radius: 999px;
+    background: var(--s-tint);
+    color: var(--s-primary);
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-align: left;
+    overflow-wrap: anywhere;
+}
+
+.annotationAction {
+    @include sms-focus;
+
+    cursor: pointer;
+
+    &:hover {
+        border-color: var(--s-primary);
+        background: color-mix(in srgb, var(--s-primary) 16%, var(--s-background));
+    }
+}
+
 .retryButton {
     @include sms-reset;
     @include sms-focus;
@@ -1599,6 +1703,33 @@ $sms-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     background: var(--s-surface);
 }
 
+// Stands exactly where the composer does while the timeline is being picked
+// over, so the pane keeps its height and its one footer.
+.selectBar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0.6rem 0.7rem 0.7rem;
+    border-top: 1px solid var(--s-line);
+    background: var(--s-surface);
+}
+
+.selectCount {
+    color: var(--s-paragraph);
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.selectActions {
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-left: auto;
+}
+
 // One card: the text on top, every control in a bar along its bottom edge.
 // Buttons beside a textarea line up with nothing once the box grows; a bar
 // inside the same border always reads as part of the message being written.

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

@@ -41,6 +41,11 @@ $vault-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     --v-tint: color-mix(in srgb, var(--v-primary) 12%, var(--v-background));
     --v-ok: rgb(31, 122, 71);
     --v-bad: rgb(190, 62, 62);
+    // Between the two: something did not happen, and nothing is broken or at
+    // risk because of it. Its one user is "the link could not be emailed" —
+    // the link itself is fine and on screen right above the line, so painting
+    // that in --v-bad would read as "your credential is in trouble".
+    --v-warn: rgb(176, 106, 20);
 }
 
 // Undo anything a host may have imposed on a generic element. Applied to every
@@ -1279,6 +1284,74 @@ input.checkControl {
     resize: vertical;
 }
 
+// ---------------------------------------------------------------------------
+// Notes: the Formatted / Raw toggle
+// ---------------------------------------------------------------------------
+// Notes holding a machine-written JSON backup are READ as a tree (JsonView) and
+// EDITED as text. Two chips rather than a switch, because a switch has to be
+// labelled with the state it is not in and there is no good way to word that
+// here; two chips name both and light the one you are looking at.
+
+.viewToggle {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-self: flex-start;
+    padding: 0.15rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-surface);
+}
+
+.viewChip {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    align-items: center;
+    padding: 0.2rem 0.55rem;
+    border: 1px solid transparent;
+    border-radius: calc(var(--v-btn-br) - 1px);
+    background: none;
+    color: var(--v-muted);
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+        color: var(--v-primary);
+    }
+
+    // Disabled here means "the JSON is broken, so there is nothing to lay
+    // out"; the chip carries a title saying so. Dimmed rather than removed —
+    // a control that disappears takes its own explanation with it.
+    &:disabled {
+        cursor: default;
+        opacity: 0.45;
+    }
+}
+
+.viewChipOn {
+    border-color: var(--v-line);
+    background: var(--v-background);
+    color: var(--v-primary);
+}
+
+// The tree's container. JsonView declares no height of its own on purpose, so
+// the cap belongs here: 50vh keeps a 32KB backup scrolling inside the field
+// instead of pushing Save off the bottom of the dialog.
+.notesJson {
+    @include vault-focus;
+
+    box-sizing: border-box;
+    max-height: 50vh;
+    padding: 0.5rem 0.6rem;
+    overflow: auto;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-surface);
+}
+
 .help {
     margin: 0;
     color: var(--v-muted);
@@ -2312,6 +2385,47 @@ input.checkControl {
     }
 }
 
+// "Also emailed to dana@acme.example." Quiet, and under the URL rather than
+// instead of it: the copy-the-link flow is what actually happened, the email is
+// a convenience on top of it.
+.shareEmailed {
+    display: flex;
+    gap: 0.35rem;
+    align-items: flex-start;
+    margin: 0;
+    color: var(--v-ok);
+    font-size: 0.78rem;
+    line-height: 1.45;
+
+    svg {
+        flex-shrink: 0;
+        margin-top: 0.15rem;
+    }
+}
+
+// The send failed. Louder than the line above, because the sender is about to
+// close a dialog believing the recipient has the link — but not red: the link
+// is on screen and copyable, and nothing about the credential is at risk.
+.shareEmailFailed {
+    display: flex;
+    gap: 0.35rem;
+    align-items: flex-start;
+    margin: 0;
+    padding: 0.5rem 0.6rem;
+    border: 1px solid color-mix(in srgb, var(--v-warn) 40%, transparent);
+    border-radius: var(--v-btn-br);
+    background: color-mix(in srgb, var(--v-warn) 10%, var(--v-background));
+    color: var(--v-warn);
+    font-size: 0.78rem;
+    font-weight: 500;
+    line-height: 1.45;
+
+    svg {
+        flex-shrink: 0;
+        margin-top: 0.15rem;
+    }
+}
+
 .shareList {
     display: flex;
     flex-direction: column;