npm - @quilltap/theme-storybook - Versions diffs - 1.0.32 → 1.0.33 - Mend

@quilltap/theme-storybook 1.0.32 → 1.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.css +167 -1
package/package.json +3 -3
package/src/css/qt-components.css +199 -1

package/dist/index.css CHANGED Viewed

@@ -1106,9 +1106,175 @@ body {
   line-height: 1.5;
   color: var(--color-foreground);
 }
-.qt-chat-composer-input:focus {
+.qt-chat-composer-input:focus,
+.qt-chat-composer-input:focus-within {
   outline: none;
 }
+.qt-lexical-contenteditable {
+  overflow-y: auto;
+  position: relative;
+}
+.qt-lexical-contenteditable [contenteditable] {
+  outline: none;
+  min-height: 1.5em;
+}
+.qt-lexical-placeholder {
+  color: var(--color-muted-foreground);
+  font-size: 0.875rem;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: var(--qt-input-padding-y, 0.5rem) var(--qt-input-padding-x, 0.75rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.qt-lexical-root {
+  outline: none;
+  min-height: 1.5em;
+}
+.qt-lexical-paragraph {
+  margin: 0;
+}
+.qt-lexical-bold {
+  font-weight: 700;
+}
+.qt-lexical-italic {
+  font-style: italic;
+}
+.qt-lexical-underline {
+  text-decoration: underline;
+}
+.qt-lexical-strikethrough {
+  text-decoration: line-through;
+}
+.qt-lexical-code {
+  font-family: monospace;
+  font-size: 0.75rem;
+  background: rgba(0, 0, 0, 0.1);
+  padding: 0.1em 0.3em;
+  border-radius: 0.2em;
+}
+.qt-lexical-h1 {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin: 0.5em 0 0.25em;
+}
+.qt-lexical-h2 {
+  font-size: 1.125rem;
+  font-weight: bold;
+  margin: 0.4em 0 0.2em;
+}
+.qt-lexical-h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0.3em 0 0.15em;
+}
+.qt-lexical-h4 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0.25em 0 0.1em;
+}
+.qt-lexical-h5 {
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin: 0.2em 0 0.1em;
+}
+.qt-lexical-h6 {
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin: 0.2em 0 0.1em;
+}
+.qt-lexical-ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+  margin: 0.25em 0;
+}
+.qt-lexical-ol {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+  margin: 0.25em 0;
+}
+.qt-lexical-li {
+  margin: 0.1em 0;
+}
+.qt-lexical-checklist {
+  list-style: none;
+  padding-left: 0;
+}
+.qt-lexical-li-checked,
+.qt-lexical-li-unchecked {
+  position: relative;
+  padding-left: 1.5rem;
+  list-style: none;
+  margin: 0.15em 0;
+}
+.qt-lexical-li-checked::before,
+.qt-lexical-li-unchecked::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--qt-border-color, rgba(0, 0, 0, 0.3));
+  cursor: pointer;
+}
+.qt-lexical-li-checked::before {
+  background: hsl(var(--primary, 220 90% 56%));
+  border-color: hsl(var(--primary, 220 90% 56%));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
+  background-size: 12px 12px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.qt-lexical-li-checked {
+  opacity: 0.6;
+  text-decoration: line-through;
+}
+.qt-lexical-blockquote {
+  border-left: 4px solid rgba(0, 0, 0, 0.2);
+  padding-left: 0.75rem;
+  font-style: italic;
+  margin: 0.25em 0;
+}
+.qt-lexical-link {
+  text-decoration: underline;
+  color: hsl(var(--primary, 220 90% 56%));
+}
+.qt-lexical-code-block {
+  font-family: monospace;
+  font-size: 0.75rem;
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.5em 0.75em;
+  border-radius: 0.3em;
+  margin: 0.25em 0;
+  overflow-x: auto;
+  -moz-tab-size: 2;
+  -o-tab-size: 2;
+  tab-size: 2;
+}
+.qt-lexical-contenteditable table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.5rem 0;
+}
+.qt-lexical-contenteditable th,
+.qt-lexical-contenteditable td {
+  border: 1px solid var(--qt-border-color, rgba(0, 0, 0, 0.2));
+  padding: 0.375rem 0.75rem;
+  text-align: left;
+  min-width: 60px;
+}
+.qt-lexical-contenteditable th {
+  font-weight: 600;
+  background: var(--color-muted, rgba(0, 0, 0, 0.05));
+}
+.qt-lexical-contenteditable tr:nth-child(even) td {
+  background: rgba(0, 0, 0, 0.02);
+}
 .qt-chat-composer-input::-moz-placeholder {
   color: var(--color-muted-foreground);
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,10 +43,10 @@
     "storybook": ">=8.0.0"
   },
   "devDependencies": {
-    "@storybook/react": "^10.3.5",
+    "@storybook/react": "^10.3.6",
     "@types/react": "^19.2.14",
     "react": "^19.2.5",
-    "storybook": "^10.3.5",
+    "storybook": "^10.3.6",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },

package/src/css/qt-components.css CHANGED Viewed

@@ -1183,10 +1183,208 @@
   color: var(--color-foreground);
 }
-.qt-chat-composer-input:focus {
+.qt-chat-composer-input:focus,
+.qt-chat-composer-input:focus-within {
   outline: none;
 }
+/* Lexical editor rich text node styles */
+.qt-lexical-contenteditable {
+  overflow-y: auto;
+  position: relative;
+}
+.qt-lexical-contenteditable [contenteditable] {
+  outline: none;
+  min-height: 1.5em;
+}
+.qt-lexical-placeholder {
+  color: var(--color-muted-foreground);
+  font-size: 0.875rem;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: var(--qt-input-padding-y, 0.5rem) var(--qt-input-padding-x, 0.75rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.qt-lexical-root {
+  outline: none;
+  min-height: 1.5em;
+}
+.qt-lexical-paragraph {
+  margin: 0;
+}
+.qt-lexical-bold {
+  font-weight: 700;
+}
+.qt-lexical-italic {
+  font-style: italic;
+}
+.qt-lexical-underline {
+  text-decoration: underline;
+}
+.qt-lexical-strikethrough {
+  text-decoration: line-through;
+}
+.qt-lexical-code {
+  font-family: monospace;
+  font-size: 0.75rem;
+  background: rgba(0, 0, 0, 0.1);
+  padding: 0.1em 0.3em;
+  border-radius: 0.2em;
+}
+.qt-lexical-h1 {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin: 0.5em 0 0.25em;
+}
+.qt-lexical-h2 {
+  font-size: 1.125rem;
+  font-weight: bold;
+  margin: 0.4em 0 0.2em;
+}
+.qt-lexical-h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0.3em 0 0.15em;
+}
+.qt-lexical-h4 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0.25em 0 0.1em;
+}
+.qt-lexical-h5 {
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin: 0.2em 0 0.1em;
+}
+.qt-lexical-h6 {
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin: 0.2em 0 0.1em;
+}
+.qt-lexical-ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+  margin: 0.25em 0;
+}
+.qt-lexical-ol {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+  margin: 0.25em 0;
+}
+.qt-lexical-li {
+  margin: 0.1em 0;
+}
+/* Checklist items */
+.qt-lexical-checklist {
+  list-style: none;
+  padding-left: 0;
+}
+.qt-lexical-li-checked,
+.qt-lexical-li-unchecked {
+  position: relative;
+  padding-left: 1.5rem;
+  list-style: none;
+  margin: 0.15em 0;
+}
+.qt-lexical-li-checked::before,
+.qt-lexical-li-unchecked::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--qt-border-color, rgba(0, 0, 0, 0.3));
+  cursor: pointer;
+}
+.qt-lexical-li-checked::before {
+  background: hsl(var(--primary, 220 90% 56%));
+  border-color: hsl(var(--primary, 220 90% 56%));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
+  background-size: 12px 12px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.qt-lexical-li-checked {
+  opacity: 0.6;
+  text-decoration: line-through;
+}
+.qt-lexical-blockquote {
+  border-left: 4px solid rgba(0, 0, 0, 0.2);
+  padding-left: 0.75rem;
+  font-style: italic;
+  margin: 0.25em 0;
+}
+.qt-lexical-link {
+  text-decoration: underline;
+  color: hsl(var(--primary, 220 90% 56%));
+}
+.qt-lexical-code-block {
+  font-family: monospace;
+  font-size: 0.75rem;
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.5em 0.75em;
+  border-radius: 0.3em;
+  margin: 0.25em 0;
+  overflow-x: auto;
+  tab-size: 2;
+}
+/* Lexical table styling */
+.qt-lexical-contenteditable table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.5rem 0;
+}
+.qt-lexical-contenteditable th,
+.qt-lexical-contenteditable td {
+  border: 1px solid var(--qt-border-color, rgba(0, 0, 0, 0.2));
+  padding: 0.375rem 0.75rem;
+  text-align: left;
+  min-width: 60px;
+}
+.qt-lexical-contenteditable th {
+  font-weight: 600;
+  background: var(--color-muted, rgba(0, 0, 0, 0.05));
+}
+.qt-lexical-contenteditable tr:nth-child(even) td {
+  background: rgba(0, 0, 0, 0.02);
+}
 .qt-chat-composer-input::placeholder {
   color: var(--color-muted-foreground);
 }