@quilltap/theme-storybook 1.0.81 → 1.0.83

package/dist/index.css

@@ -298,6 +298,8 @@ body {
   --qt-status-danger-bg: color-mix(in srgb, var(--color-destructive) 85%, transparent);
   --qt-status-danger-fg: var(--color-destructive-foreground);
   --qt-status-danger-border: var(--color-destructive);
+  --qt-punctuation-warning-bg: color-mix(in srgb, var(--color-warning) 35%, transparent);
+  --qt-punctuation-warning-underline: var(--color-warning);
   --qt-badge-primary-bg: var(--color-primary);
   --qt-badge-primary-fg: var(--color-primary-foreground);
   --qt-badge-secondary-bg: var(--color-secondary);
@@ -1911,6 +1913,12 @@ body {
     animation: none;
   }
 }
+::highlight(qt-punctuation-warning) {
+  background-color: var(--qt-punctuation-warning-bg);
+  -webkit-text-decoration: underline wavy var(--qt-punctuation-warning-underline);
+  text-decoration: underline wavy var(--qt-punctuation-warning-underline);
+  text-decoration-thickness: 2px;
+}
 .qt-lexical-contenteditable {
   overflow-y: auto;
   position: relative;
@@ -2253,6 +2261,21 @@ body {
   font-size: 0.625rem;
   opacity: 0.65;
 }
+.qt-mention-chip {
+  color: inherit;
+  padding: 0 0.25em;
+  border-radius: 0.375rem;
+  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+  border-bottom: 1px dotted color-mix(in srgb, var(--color-primary) 70%, transparent);
+  cursor: help;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+.qt-mention-chip:hover,
+.qt-mention-chip:focus-visible {
+  background: color-mix(in srgb, var(--color-primary) 26%, transparent);
+  outline: none;
+}
 .qt-typeahead-menu {
   position: absolute;
   z-index: 50;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.81",
+  "version": "1.0.83",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/css/qt-components.css

@@ -166,6 +166,10 @@
   --qt-status-danger-fg: var(--color-destructive-foreground);
   --qt-status-danger-border: var(--color-destructive);
 
+  /* Composer punctuation warnings (PunctuationLintPlugin, ::highlight) */
+  --qt-punctuation-warning-bg: color-mix(in srgb, var(--color-warning) 35%, transparent);
+  --qt-punctuation-warning-underline: var(--color-warning);
+
   /* Badge palette tokens - referenced by the provider badges */
   --qt-badge-primary-bg: var(--color-primary);
   --qt-badge-primary-fg: var(--color-primary-foreground);
@@ -2302,6 +2306,15 @@
   .qt-chat-interrupt-button-raised { animation: none; }
 }
 
+/* Composer punctuation warnings — painted by PunctuationLintPlugin through the
+   CSS Custom Highlight API, so no element carries a class. Only background and
+   text-decoration are styleable on a ::highlight. */
+::highlight(qt-punctuation-warning) {
+  background-color: var(--qt-punctuation-warning-bg);
+  text-decoration: underline wavy var(--qt-punctuation-warning-underline);
+  text-decoration-thickness: 2px;
+}
+
 /* Lexical editor rich text node styles */
 .qt-lexical-contenteditable {
   overflow-y: auto;
@@ -2730,6 +2743,26 @@
   opacity: 0.65;
 }
 
+/* Name chip: an absent character's first mention in a chat (MentionChip).
+   It keeps the surrounding roleplay colour; a soft tint and a dotted rule
+   say there is a card to hover. */
+.qt-mention-chip {
+  color: inherit;
+  padding: 0 0.25em;
+  border-radius: 0.375rem;
+  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+  border-bottom: 1px dotted color-mix(in srgb, var(--color-primary) 70%, transparent);
+  cursor: help;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.qt-mention-chip:hover,
+.qt-mention-chip:focus-visible {
+  background: color-mix(in srgb, var(--color-primary) 26%, transparent);
+  outline: none;
+}
+
 /* ==========================================================================
    TYPEAHEAD MENU
    ==========================================================================