@cubud/wen 1.0.0

package/dist/wen-full.css

@@ -0,0 +1,654 @@
+/* GitHub Dark syntax-highlighting theme (highlight.js 11.9.0), vendored and
+   scoped to the editor so it never leaks into a consumer's global stylesheet.
+   Source: github.com/highlightjs/highlight.js — MIT, theme by @Hirse. */
+.wen-editor-root pre code.hljs { display: block; overflow-x: auto; padding: 1em; }
+.wen-editor-root code.hljs { padding: 3px 5px; }
+.wen-editor-root .hljs { color: #c9d1d9; background: #0d1117; }
+.wen-editor-root .hljs-doctag,
+.wen-editor-root .hljs-keyword,
+.wen-editor-root .hljs-meta .hljs-keyword,
+.wen-editor-root .hljs-template-tag,
+.wen-editor-root .hljs-template-variable,
+.wen-editor-root .hljs-type,
+.wen-editor-root .hljs-variable.language_ { color: #ff7b72; }
+.wen-editor-root .hljs-title,
+.wen-editor-root .hljs-title.class_,
+.wen-editor-root .hljs-title.class_.inherited__,
+.wen-editor-root .hljs-title.function_ { color: #d2a8ff; }
+.wen-editor-root .hljs-attr,
+.wen-editor-root .hljs-attribute,
+.wen-editor-root .hljs-literal,
+.wen-editor-root .hljs-meta,
+.wen-editor-root .hljs-number,
+.wen-editor-root .hljs-operator,
+.wen-editor-root .hljs-selector-attr,
+.wen-editor-root .hljs-selector-class,
+.wen-editor-root .hljs-selector-id,
+.wen-editor-root .hljs-variable { color: #79c0ff; }
+.wen-editor-root .hljs-meta .hljs-string,
+.wen-editor-root .hljs-regexp,
+.wen-editor-root .hljs-string { color: #a5d6ff; }
+.wen-editor-root .hljs-built_in,
+.wen-editor-root .hljs-symbol { color: #ffa657; }
+.wen-editor-root .hljs-code,
+.wen-editor-root .hljs-comment,
+.wen-editor-root .hljs-formula { color: #8b949e; }
+.wen-editor-root .hljs-name,
+.wen-editor-root .hljs-quote,
+.wen-editor-root .hljs-selector-pseudo,
+.wen-editor-root .hljs-selector-tag { color: #7ee787; }
+.wen-editor-root .hljs-subst { color: #c9d1d9; }
+.wen-editor-root .hljs-section { color: #1f6feb; font-weight: 700; }
+.wen-editor-root .hljs-bullet { color: #f2cc60; }
+.wen-editor-root .hljs-emphasis { color: #c9d1d9; font-style: italic; }
+.wen-editor-root .hljs-strong { color: #c9d1d9; font-weight: 700; }
+.wen-editor-root .hljs-addition { color: #aff5b4; background-color: #033a16; }
+.wen-editor-root .hljs-deletion { color: #ffdcd7; background-color: #67060c; }
+
+:root {
+  --wen-bg: #ffffff;
+  --wen-surface: #f9fafb;          
+  --wen-surface-hover: #f3f4f6;    
+  --wen-border: #e5e7eb;           
+  --wen-text-main: #1f2937;        
+  --wen-text-muted: #6b7280;       
+  --wen-accent: #0f172a;           
+  --wen-accent-text: #ffffff;      
+  --wen-danger: #ef4444;           
+  --wen-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --wen-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --wen-radius: 8px;
+  --wen-radius-sm: 4px;
+  --wen-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+}
+
+.wen-editor-wrapper {
+  background: var(--wen-bg);
+  border: 1px solid var(--wen-border);
+  border-radius: var(--wen-radius);
+  box-shadow: var(--wen-shadow);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--wen-font-sans);
+  color: var(--wen-text-main);
+}
+
+.wen-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background: var(--wen-surface);
+  border-bottom: 1px solid var(--wen-border);
+  align-items: center;
+  border-top-left-radius: calc(var(--wen-radius) - 1px);
+  border-top-right-radius: calc(var(--wen-radius) - 1px);
+}
+
+.wen-toolbar-btn {
+  background: transparent;
+  border: 1px solid transparent;
+  padding: 0.35rem 0.6rem;
+  cursor: pointer;
+  font-family: var(--wen-font-sans);
+  font-size: 0.85rem;
+  color: var(--wen-text-muted);
+  border-radius: var(--wen-radius-sm);
+  transition: all 0.15s ease;
+}
+
+.wen-toolbar-btn:hover { background: var(--wen-surface-hover); color: var(--wen-text-main); }
+.wen-toolbar-btn.is-active { background: var(--wen-accent); color: var(--wen-accent-text); }
+.wen-toolbar-divider { width: 1px; height: 1.25rem; background: var(--wen-border); margin: 0 0.25rem; }
+
+.wen-editor-root { padding: 1.5rem; min-height: 300px; outline: none; line-height: 1.6; }
+.wen-editor-root p, .wen-editor-root h1, .wen-editor-root h2, .wen-editor-root h3 { margin-top: 0; margin-bottom: 1rem; }
+.wen-editor-root h1, .wen-editor-root h2 { font-weight: 600; color: var(--wen-text-main); }
+/* Inline code (e.g. `const x = 1`) */
+.wen-editor-root p code { 
+  background: var(--wen-surface); 
+  color: var(--wen-text-main); 
+  padding: 0.2em 0.4em; 
+  border-radius: var(--wen-radius-sm); 
+  font-family: var(--wen-font-mono); 
+  font-size: 0.9em; 
+  border: 1px solid var(--wen-border); 
+}
+
+/* Block code (Syntax Highlighted) */
+.wen-editor-root pre {
+  background: #0d1117; /* GitHub Dark background */
+  color: #c9d1d9;      /* GitHub Dark text */
+  padding: 1rem;
+  border-radius: var(--wen-radius);
+  font-family: var(--wen-font-mono);
+  font-size: 0.9rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+}
+
+.wen-editor-root pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  border: none;
+  font-size: inherit;
+}
+.wen-editor-root blockquote { border-left: 3px solid var(--wen-border); margin-left: 0; padding-left: 1rem; font-style: italic; color: var(--wen-text-muted); }
+
+/* Utility Modals (Link/Image) must always sit absolute top */
+.wen-modal-overlay {
+  position: fixed; 
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.6); 
+  z-index: 99999 !important; /* Wins the z-index battle */
+  display: flex; 
+  align-items: center; 
+  justify-content: center;
+}
+
+.wen-modal {
+  background: var(--wen-bg);
+  padding: 1.5rem;
+  border-radius: var(--wen-radius);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border: 1px solid var(--wen-border);
+  color: var(--wen-text-main);
+  font-family: var(--wen-font-sans);
+}
+
+.wen-modal strong {
+  font-size: 1.1rem;
+}
+
+.wen-modal input {
+  padding: 0.5rem;
+  border-radius: var(--wen-radius-sm);
+  border: 1px solid var(--wen-border);
+  background: var(--wen-surface);
+  color: var(--wen-text-main);
+  font-family: var(--wen-font-mono);
+  outline: none;
+}
+
+.wen-modal input:focus {
+  border-color: #3b82f6;
+}
+
+.wen-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.wen-modal-cancel, .wen-modal-submit {
+  padding: 0.4rem 0.8rem;
+  border-radius: var(--wen-radius-sm);
+  cursor: pointer;
+  border: none;
+  font-weight: 600;
+}
+
+.wen-modal-cancel {
+  background: transparent;
+  color: var(--wen-text-muted);
+}
+
+.wen-modal-cancel:hover {
+  background: var(--wen-surface);
+  color: var(--wen-text-main);
+}
+
+.wen-modal-submit {
+  background: #3b82f6;
+  color: white;
+}
+
+.wen-modal-submit:hover {
+  background: #2563eb;
+}
+
+/* Disabled Toolbar Buttons */
+.wen-toolbar-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  background: transparent !important;
+  color: var(--wen-text-muted) !important;
+}
+
+/* Table Architecture */
+.wen-editor-root .tableWrapper {
+  overflow-x: auto;
+  margin: 1.5rem 0;
+  border: 1px solid var(--wen-border);
+  border-radius: var(--wen-radius-sm);
+}
+
+/* Bulletproof: Target ALL tables inside the editor */
+.wen-editor-root table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+.wen-editor-root table td,
+.wen-editor-root table th {
+  min-width: 1em;
+  border: 1px solid #cbd5e1; /* Darker, crisp slate border */
+  padding: 0.5rem;
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.wen-editor-root table th {
+  font-weight: 600;
+  text-align: left;
+  background-color: var(--wen-surface);
+  color: var(--wen-text-main);
+}
+
+.wen-editor-root table p {
+  margin: 0;
+}
+
+/* Task Lists (Checklists) */
+.wen-editor-root ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+}
+
+.wen-editor-root ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+}
+
+.wen-editor-root ul[data-type="taskList"] li > label {
+  margin-right: 0.5rem;
+  user-select: none;
+  margin-top: 0.15rem; /* Optical alignment with text */
+}
+
+.wen-editor-root ul[data-type="taskList"] li > label input[type="checkbox"] {
+  cursor: pointer;
+}
+
+.wen-editor-root ul[data-type="taskList"] li > div {
+  flex: 1;
+}
+
+.wen-editor-root ul[data-type="taskList"] li p {
+  margin: 0;
+}
+
+/* GitHub Flavored Alerts (Admonitions) */
+.wen-editor-root .wen-github-alert {
+  border-left: 4px solid var(--wen-border);
+  padding: 0.75rem 1rem;
+  margin: 1.5rem 0;
+  border-radius: 0 var(--wen-radius-sm) var(--wen-radius-sm) 0;
+  font-style: normal; /* Overrides standard blockquote italic */
+  color: var(--wen-text-main);
+}
+
+.wen-editor-root .wen-github-alert p:last-child {
+  margin-bottom: 0;
+}
+
+/* Background Tints & Border Colors */
+.wen-editor-root .wen-github-alert-note { border-left-color: #0969da; background-color: rgba(9, 105, 218, 0.05); }
+.wen-editor-root .wen-github-alert-tip { border-left-color: #1a7f37; background-color: rgba(26, 127, 55, 0.05); }
+.wen-editor-root .wen-github-alert-important { border-left-color: #8250df; background-color: rgba(130, 80, 223, 0.05); }
+.wen-editor-root .wen-github-alert-warning { border-left-color: #bf8700; background-color: rgba(191, 135, 0, 0.05); }
+.wen-editor-root .wen-github-alert-caution { border-left-color: #cf222e; background-color: rgba(207, 34, 46, 0.05); }
+
+/* The [!TAG] Badge styling */
+.wen-editor-root .wen-github-alert-badge {
+  display: inline-block;
+  font-weight: 600;
+  font-size: 0.9em;
+  font-family: var(--wen-font-mono);
+}
+
+.wen-editor-root .wen-github-alert-badge-note { color: #0969da; }
+.wen-editor-root .wen-github-alert-badge-tip { color: #1a7f37; }
+.wen-editor-root .wen-github-alert-badge-important { color: #8250df; }
+.wen-editor-root .wen-github-alert-badge-warning { color: #bf8700; }
+.wen-editor-root .wen-github-alert-badge-caution { color: #cf222e; }
+
+/* Rich Recursive Modal */
+.wen-rich-modal-overlay {
+  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.7); z-index: 9999;
+  display: flex; align-items: center; justify-content: center;
+}
+
+.wen-rich-modal {
+  width: 90vw; height: 90vh; background: #fff;
+  border-radius: var(--wen-radius); display: flex; flex-direction: column;
+  overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+}
+
+.wen-rich-modal-header {
+  padding: 1rem 1.5rem; background: #1e1e1e; color: white;
+  display: flex; justify-content: space-between; align-items: center;
+}
+
+.wen-rich-modal-body {
+  flex: 1; min-height: 0; display: flex; flex-direction: column;
+  background: var(--wen-bg);
+}
+
+.wen-rich-modal-body .wen-editor-wrapper {
+  height: 100%; border: none;
+}/* Prevent width + padding horizontal blowouts */
+.wen-yaml-block *, .wen-yaml-block *::before, .wen-yaml-block *::after {
+  box-sizing: border-box;
+}
+
+.wen-yaml-block { border: 1px solid var(--wen-border); border-radius: var(--wen-radius); margin: 1.5rem 0; background: var(--wen-bg); }
+.wen-yaml-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--wen-border); padding: 0.5rem 1rem; background: var(--wen-surface); border-top-left-radius: calc(var(--wen-radius) - 1px); border-top-right-radius: calc(var(--wen-radius) - 1px); }
+.wen-yaml-title { font-size: 0.85rem; font-weight: 600; color: var(--wen-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+.wen-yaml-toggle-btn { background: var(--wen-bg); border: 1px solid var(--wen-border); color: var(--wen-text-muted); cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--wen-radius-sm); }
+.wen-yaml-toggle-btn:hover { background: var(--wen-surface-hover); color: var(--wen-text-main); }
+
+/* Collapsible Container Logic */
+.wen-yaml-visual-container { position: relative; display: block; }
+.wen-yaml-view-visual { padding: 0.5rem !important; }
+.wen-yaml-view-raw, .wen-yaml-error-state { display: none; padding: 1rem; }
+.wen-yaml-view-raw.active, .wen-yaml-error-state.active { display: block; }
+.wen-yaml-visual-container.is-collapsed .wen-yaml-view-visual { max-height: 220px; overflow: hidden; }
+.wen-yaml-fade { display: none; }
+.wen-yaml-visual-container.is-collapsed .wen-yaml-fade { display: block; position: absolute; bottom: 33px; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, var(--wen-bg)); pointer-events: none; z-index: 5; }
+.wen-yaml-expand-btn { display: none; width: 100%; background: var(--wen-surface); border: none; border-top: 1px solid var(--wen-border); padding: 0.5rem; color: var(--wen-text-muted); cursor: pointer; font-size: 0.8rem; text-align: center; font-weight: 600; transition: background 0.15s; border-bottom-left-radius: calc(var(--wen-radius) - 1px); border-bottom-right-radius: calc(var(--wen-radius) - 1px); }
+.wen-yaml-expand-btn:hover { color: var(--wen-text-main); background: var(--wen-border); }
+.wen-yaml-visual-container.needs-collapse .wen-yaml-expand-btn { display: block; }
+
+.wen-yaml-raw-input { width: 100%; min-height: 150px; border: 1px solid var(--wen-border); border-radius: var(--wen-radius-sm); padding: 0.75rem; font-family: var(--wen-font-mono); font-size: 0.9rem; color: var(--wen-text-main); background: var(--wen-surface); resize: vertical; outline: none; }
+.wen-yaml-error-state { color: var(--wen-danger); background: #fef2f2; border-top: 1px solid #fecaca; font-size: 0.9rem; }
+
+/* Hierarchical Vertical Layout */
+.wen-type-object, .wen-type-array { display: flex; flex-direction: column; width: 100%; background: rgba(0, 0, 0, 0.02); border-radius: var(--wen-radius-sm); padding: 0.5rem; border: 1px solid rgba(0,0,0,0.05); }
+.wen-row, .wen-array-item { display: flex; flex-direction: column; margin-bottom: 0.5rem; transition: background 0.15s ease; border-radius: var(--wen-radius-sm); }
+.wen-row-top { display: flex; align-items: flex-start; width: 100%; padding: 0.2rem; }
+.wen-row:hover > .wen-row-top, .wen-array-item:hover > .wen-row-top { background: var(--wen-surface); border-radius: var(--wen-radius-sm); }
+
+/* Precise Typography Alignment */
+.wen-key-wrap { 
+  display: flex; 
+  align-items: baseline; /* Aligns the input text and colon perfectly on the bottom edge */
+  width: 140px; 
+  flex-shrink: 0; 
+  padding: 0; /* Strip any old wrap padding */
+}
+
+/* Force identical box models for inputs and textareas */
+.wen-key, .wen-val { 
+  padding: 0; 
+  margin: 0;
+  font-size: 0.9rem; 
+  font-family: var(--wen-font-sans);
+  line-height: 1.5;
+  border: none; 
+  background: transparent; 
+  outline: none; 
+}
+
+.wen-key { 
+  width: 100%; 
+  font-weight: 600; 
+  color: var(--wen-text-muted); 
+}
+
+.wen-val { 
+  flex-grow: 1; 
+  color: var(--wen-text-main); 
+  resize: none; 
+}
+
+.wen-colon { 
+  margin: 0 0.5rem 0 0; 
+  padding: 0;
+  color: var(--wen-text-muted); 
+  font-weight: bold; 
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+/* Italic Placeholders */
+.wen-key::placeholder, 
+.wen-val::placeholder {
+  font-style: italic;
+  opacity: 0.6;
+  font-weight: normal;
+}
+
+.wen-key:focus { color: var(--wen-text-main); }
+
+/* Primitives sit on the same line, complex drops below */
+.wen-val-wrap { flex-grow: 1; min-width: 0; display: flex; align-items: flex-start; }
+.wen-complex-wrap { padding-left: 1rem; width: 100%; margin-top: 0.25rem; }
+.wen-type-primitive { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; }
+
+/* The Action Buttons */
+.wen-type-controls { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s; }
+.wen-row:hover .wen-type-controls, .wen-array-item:hover .wen-type-controls { opacity: 1; }
+.wen-type-controls button { background: var(--wen-bg); border: 1px solid var(--wen-border); border-radius: var(--wen-radius-sm); cursor: pointer; padding: 0.2rem 0.4rem; font-size: 0.8rem; color: var(--wen-text-muted); }
+.wen-type-controls button:hover { background: var(--wen-surface-hover); color: var(--wen-text-main); }
+
+.wen-bullet { color: var(--wen-text-muted); font-weight: bold; padding-top: 0.2rem; width: 24px; text-align: center; }
+
+/* Refined Add/Delete UI */
+.wen-btn-delete { background: transparent; border: none; color: var(--wen-text-muted); font-size: 1.25rem; cursor: pointer; opacity: 0; padding: 0 0.5rem; margin-left: auto; }
+.wen-row:hover > .wen-row-top > .wen-btn-delete, .wen-array-item:hover > .wen-row-top > .wen-btn-delete { opacity: 1; }
+.wen-btn-delete:hover { color: var(--wen-danger); }
+
+.wen-btn-add { background: transparent; border: 1px dashed var(--wen-border); color: var(--wen-text-muted); cursor: pointer; text-align: left; font-weight: 500; padding: 0.4rem 0.75rem; font-family: var(--wen-font-sans); transition: all 0.15s ease; border-radius: var(--wen-radius-sm); font-size: 0.85rem; margin-top: 0.25rem; width: 100%; }
+.wen-btn-add:hover { color: var(--wen-text-main); background: var(--wen-surface); border-color: #cbd5e1; }.wen-component-block *, .wen-component-block *::before, .wen-component-block *::after {
+  box-sizing: border-box;
+}
+
+.wen-component-block {
+  border: 2px solid var(--wen-accent);
+  border-radius: var(--wen-radius);
+  margin: 1.5rem 0;
+  background: var(--wen-bg);
+}
+
+.wen-component-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid var(--wen-accent);
+  padding: 0.5rem 1rem;
+  background: var(--wen-accent);
+  color: var(--wen-accent-text);
+  border-top-left-radius: calc(var(--wen-radius) - 2px);
+  border-top-right-radius: calc(var(--wen-radius) - 2px);
+}
+
+.wen-component-title { font-size: 0.85rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
+.wen-component-toggle-btn { background: var(--wen-bg); border: none; color: var(--wen-text-main); cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--wen-radius-sm); font-weight: 600; }
+
+.wen-component-view-visual, .wen-component-view-raw { display: none; padding: 1rem; }
+.wen-component-view-visual.active, .wen-component-view-raw.active { display: block; }
+
+.wen-component-raw-input { width: 100%; min-height: 200px; border: 1px solid var(--wen-border); border-radius: var(--wen-radius-sm); padding: 0.75rem; font-family: var(--wen-font-mono); font-size: 0.9rem; background: #1e1e1e; color: #d4d4d4; resize: vertical; outline: none; }
+
+.wen-wireframe { border: 1px dashed var(--wen-border); border-radius: var(--wen-radius-sm); background: var(--wen-surface); padding: 1rem; }
+.wen-wireframe-header { color: var(--wen-text-main); font-size: 1.1rem; margin-bottom: 0.75rem; font-family: var(--wen-font-mono); }
+.wen-prop-val { color: var(--wen-accent); }
+.wen-component-error { color: var(--wen-danger); font-weight: bold; }
+
+.wen-wireframe-props {
+  padding: 0.5rem; background: var(--wen-surface);
+  border-bottom: 1px solid var(--wen-border);
+  display: flex; flex-wrap: wrap; gap: 0.5rem;
+}
+
+.wen-wireframe-prop {
+  background: var(--wen-bg); border: 1px solid var(--wen-border);
+  padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;
+  font-family: var(--wen-font-mono); display: flex; align-items: center; gap: 0.25rem;
+}
+
+.wen-prop-key { color: #8b5cf6; font-weight: bold; }
+
+/* The Editable Attribute Input */
+.wen-prop-val-input {
+  background: transparent; border: none; border-bottom: 1px dashed #cbd5e1;
+  color: #10b981; font-family: inherit; font-size: inherit; outline: none;
+  min-width: 60px; padding: 0 0.2rem; transition: border-color 0.2s;
+}
+.wen-prop-val-input:focus { border-bottom-color: #10b981; }
+
+.wen-wireframe-content { padding: 1rem; }
+
+/* Live Markdown Preview Box */
+.wen-wireframe-preview-box {
+  background: #ffffff;
+  border: 1px solid #cbd5e1;
+  border-radius: var(--wen-radius-sm);
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  max-height: 250px;
+  overflow-y: auto;
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
+}
+
+.wen-wireframe-preview {
+  font-size: 0.9rem;
+  color: #334155;
+  font-family: var(--wen-font-sans);
+  line-height: 1.5;
+}
+
+/* Reset typography inside the preview so headers don't blow out */
+.wen-wireframe-preview h1,
+.wen-wireframe-preview h2,
+.wen-wireframe-preview h3,
+.wen-wireframe-preview h4 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.wen-wireframe-preview h1 { font-size: 1.4em; }
+.wen-wireframe-preview h2 { font-size: 1.2em; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.2rem; }
+.wen-wireframe-preview h3 { font-size: 1.1em; }
+.wen-wireframe-preview p { margin-top: 0; margin-bottom: 0.75rem; }
+.wen-wireframe-preview p:last-child { margin-bottom: 0; }
+.wen-wireframe-preview blockquote { border-left: 3px solid #cbd5e1; margin: 0; padding-left: 1rem; color: #64748b; }
+
+/* The WYSIWYG Trigger Button */
+.wen-wireframe-edit-btn {
+  background: #3b82f6; color: white; border: none; border-radius: var(--wen-radius-sm);
+  padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: bold; cursor: pointer;
+  transition: background 0.15s; width: 100%; text-align: left;
+}
+.wen-wireframe-edit-btn:hover { background: #2563eb; }
+
+/* The Custom Tag & Markdown Preview Styles */
+.wen-preview-tag {
+  font-family: var(--wen-font-mono);
+  color: #8b5cf6;
+  font-weight: bold;
+  font-size: 0.8rem;
+  background: rgba(139, 92, 246, 0.1);
+  display: inline-block;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  margin: 0.25rem 0;
+}
+
+.wen-preview-md p:first-child { margin-top: 0; }
+.wen-preview-md p:last-child { margin-bottom: 0; }.wen-mermaid-block {
+  border: 2px solid #0d9488;
+  border-radius: var(--wen-radius);
+  margin: 1.5rem 0;
+  background: var(--wen-bg);
+  box-sizing: border-box;
+}
+
+.wen-mermaid-block *, .wen-mermaid-block *::before, .wen-mermaid-block *::after {
+  box-sizing: border-box;
+}
+
+.wen-mermaid-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #0d9488;
+  padding: 0.5rem 1rem;
+  background: #0d9488;
+  color: white;
+  border-top-left-radius: calc(var(--wen-radius) - 2px);
+  border-top-right-radius: calc(var(--wen-radius) - 2px);
+}
+
+.wen-mermaid-title { font-size: 0.85rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
+.wen-mermaid-toggle-btn { background: var(--wen-bg); border: none; color: var(--wen-text-main); cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--wen-radius-sm); font-weight: 600; transition: background 0.15s; }
+.wen-mermaid-toggle-btn:hover { background: var(--wen-surface-hover); }
+
+/* THE FIX: Hard-lock the display states so they cannot both show at once */
+.wen-mermaid-view-visual, .wen-mermaid-view-raw { 
+  display: none !important; 
+  padding: 1rem; 
+}
+.wen-mermaid-view-visual.active, .wen-mermaid-view-raw.active { 
+  display: block !important; 
+}
+
+/* Ensure the SVG scales nicely and forces dark text */
+.wen-mermaid-view-visual { 
+  text-align: center; 
+  overflow-x: auto; 
+  background: var(--wen-surface); 
+  border-bottom-left-radius: var(--wen-radius); 
+  border-bottom-right-radius: var(--wen-radius);
+  color: #1f2937 !important; 
+}
+.wen-mermaid-view-visual svg { max-width: 100%; height: auto !important; color: #1f2937; }
+
+.wen-mermaid-raw-input { width: 100%; min-height: 250px; border: 1px solid var(--wen-border); border-radius: var(--wen-radius-sm); padding: 0.75rem; font-family: var(--wen-font-mono); font-size: 0.9rem; background: #1e1e1e; color: #d4d4d4; resize: vertical; outline: none; }
+.wen-mermaid-error { color: var(--wen-danger); font-family: var(--wen-font-mono); font-size: 0.85rem; text-align: left; background: #fef2f2; padding: 1rem; border-radius: var(--wen-radius-sm); border-left: 4px solid var(--wen-danger); white-space: pre-wrap; }.wen-chart-block *, .wen-chart-block *::before, .wen-chart-block *::after {
+  box-sizing: border-box;
+}
+
+.wen-chart-block {
+  border: 2px solid #8250df;
+  border-radius: var(--wen-radius);
+  margin: 1.5rem 0;
+  background: var(--wen-bg);
+  box-sizing: border-box;
+}
+
+.wen-chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #8250df;
+  padding: 0.5rem 1rem;
+  background: #8250df;
+  color: white;
+  border-top-left-radius: calc(var(--wen-radius) - 2px);
+  border-top-right-radius: calc(var(--wen-radius) - 2px);
+}
+
+.wen-chart-title { font-size: 0.85rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
+.wen-chart-toggle-btn { background: var(--wen-bg); border: none; color: var(--wen-text-main); cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--wen-radius-sm); font-weight: 600; transition: background 0.15s; }
+.wen-chart-toggle-btn:hover { background: var(--wen-surface-hover); }
+
+.wen-chart-view-visual, .wen-chart-view-raw { display: none !important; padding: 1rem; }
+.wen-chart-view-visual.active, .wen-chart-view-raw.active { display: block !important; }
+
+.wen-chart-raw-input { width: 100%; min-height: 200px; border: 1px solid var(--wen-border); border-radius: var(--wen-radius-sm); padding: 0.75rem; font-family: var(--wen-font-mono); font-size: 0.9rem; background: #1e1e1e; color: #d4d4d4; resize: vertical; outline: none; white-space: pre; }
+.wen-chart-error { color: var(--wen-danger); font-family: var(--wen-font-mono); font-size: 0.85rem; background: #fef2f2; padding: 1rem; border-radius: var(--wen-radius-sm); border-left: 4px solid var(--wen-danger); }