@miliastry/quasar 1.0.4 → 1.0.6

package/dist/Visuals/lyne.css

@@ -249,8 +249,8 @@
  * del autor ([boxw=Title:#hex]) si lo hay; si no, el hairline del tema. */
 .bbcode-preview-lyne details.boxw,
 .bbcode-preview.theme-lyne details.boxw {
-  background: rgba(11, 16, 36, 0.5) !important;
-  border: 1px solid var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12))))) !important;
+  background: var(--box-bg, rgba(11, 16, 36, 0.5)) !important;
+  border: 1px solid var(--box-border, var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))))) !important;
   border-radius: 0 !important;
   clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
   padding: 0 !important;
@@ -331,8 +331,8 @@
   width: 7px !important;
   height: 7px !important;
   flex: 0 0 7px !important;
-  border-right: 1.5px solid currentColor !important;
-  border-bottom: 1.5px solid currentColor !important;
+  border-right: 1px solid currentColor !important;
+  border-bottom: 1px solid currentColor !important;
   transform: rotate(-45deg) !important;
   transition: transform 0.15s ease !important;
 }
@@ -360,7 +360,7 @@
 
 .bbcode-preview-lyne details.boxw[open] > summary,
 .bbcode-preview.theme-lyne details.boxw[open] > summary {
-  border-bottom: 1px solid var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12))))) !important;
+  border-bottom: 1px solid var(--box-border, var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))))) !important;
 }
 
 .bbcode-preview-lyne details[open] > summary::before,
@@ -370,7 +370,8 @@
 
 .bbcode-preview-lyne details > summary:hover,
 .bbcode-preview.theme-lyne details > summary:hover {
-  color: var(--color-accent-bright, #68FFF8) !important;
+  color: var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-accent-bright, #68FFF8)))) !important;
+  filter: brightness(1.25) !important;
 }
 
 /* ─── Lists & Markers ───────────────────────────────────────────────────── */
@@ -469,6 +470,7 @@
 .bb-table {
   width: 100% !important;
   min-width: 380px !important;
+  table-layout: fixed !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
   margin: 0 !important;
@@ -518,6 +520,64 @@
   line-height: 1.3 !important;
   text-transform: uppercase !important;
   padding: 8px 10px !important;
+  text-align: left !important;
+}
+
+.bb-table .bb-th.bb-th-full {
+  width: 100% !important;
+}
+
+/* Table header alignments */
+.bb-table .bb-th.bb-th-left,
+.bb-table .bb-th:has(.bb-left),
+.bb-table .bb-th:has([style*="text-align:left"]),
+.bb-table .bb-th:has([style*="text-align: left"]),
+.bb-left .bb-table .bb-th {
+  text-align: left !important;
+}
+
+.bb-table .bb-th.bb-th-left .bb-table-badge,
+.bb-table .bb-th:has(.bb-left) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:left"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: left"]) .bb-table-badge,
+.bb-left .bb-table .bb-th .bb-table-badge {
+  margin-right: auto !important;
+  margin-left: 0 !important;
+}
+
+.bb-table .bb-th.bb-th-centered,
+.bb-table .bb-th.bb-th-center,
+.bb-table .bb-th:has(.bb-centre),
+.bb-table .bb-th:has([style*="text-align:center"]),
+.bb-table .bb-th:has([style*="text-align: center"]),
+.bb-centre .bb-table .bb-th {
+  text-align: center !important;
+}
+
+.bb-table .bb-th.bb-th-centered .bb-table-badge,
+.bb-table .bb-th.bb-th-center .bb-table-badge,
+.bb-table .bb-th:has(.bb-centre) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:center"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: center"]) .bb-table-badge,
+.bb-centre .bb-table .bb-th .bb-table-badge {
+  margin: 0 auto !important;
+}
+
+.bb-table .bb-th.bb-th-right,
+.bb-table .bb-th:has(.bb-right),
+.bb-table .bb-th:has([style*="text-align:right"]),
+.bb-table .bb-th:has([style*="text-align: right"]),
+.bb-right .bb-table .bb-th {
+  text-align: right !important;
+}
+
+.bb-table .bb-th.bb-th-right .bb-table-badge,
+.bb-table .bb-th:has(.bb-right) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:right"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: right"]) .bb-table-badge,
+.bb-right .bb-table .bb-th .bb-table-badge {
+  margin-left: auto !important;
+  margin-right: 0 !important;
 }
 
 .bb-table-badge {
@@ -610,7 +670,7 @@
   border: 0 !important;
   height: 1px !important;
   background: linear-gradient(90deg, transparent, var(--color-accent, #2EE6E2), transparent) !important;
-  margin: 0 !important;
+  margin: 12px 0 !important;
   text-align: center !important;
   color: var(--color-accent, #2EE6E2) !important;
   font-family: var(--font-numeric, monospace) !important;
@@ -733,7 +793,7 @@
 .bb-neon-box {
   padding: 16px !important;
   margin: 0 !important;
-  border: 2px solid var(--neon-color, var(--color-accent, #2EE6E2)) !important;
+  border: 1px solid var(--neon-color, var(--color-accent, #2EE6E2)) !important;
   background: color-mix(in srgb, var(--neon-color, var(--color-accent, #2EE6E2)) 4%, rgba(7, 10, 23, 0.55)) !important;
   border-radius: 0 !important;
   box-shadow: none !important;
@@ -758,20 +818,26 @@
   align-items: center !important;
 }
 
-/* Circle: replica el .bbCircle original de Lyne (Main Bridge/line/web/
- * components/bbcode.module.css). aspect-ratio:1 + centrado convierten el div
- * en un círculo real con el contenido al centro; fondo y borde lo pintan como
- * badge. clip-path:none evita que herede los cortes de esquina de los paneles. */
+/* Square: cuadradito badge con las muescas angulares características de Lyne.
+ * aspect-ratio: 1/1, centrado, borde hairline y corte angular de esquina. */
+.bb-square,
 .bb-circle {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  aspect-ratio: 1 !important;
-  border-radius: 50% !important;
+  aspect-ratio: 1 / 1 !important;
+  min-width: 1.85em !important;
+  min-height: 1.85em !important;
+  padding: 0.2em 0.35em !important;
+  box-sizing: border-box !important;
+  border-radius: 0 !important;
   overflow: hidden !important;
-  background: rgb(11 16 36 / 0.5) !important;
-  border: 1px solid var(--color-hairline, rgba(255, 255, 255, 0.12)) !important;
-  clip-path: none !important;
+  background: var(--square-bg, rgb(11 16 36 / 0.5)) !important;
+  border: 1px solid var(--square-border, var(--square-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))) !important;
+  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px) !important;
+  text-align: center !important;
+  line-height: 1 !important;
+  vertical-align: middle !important;
 }
 
 /* Stack: replica el .bbStack original de Lyne (columna flex con gap).

package/dist/index.d.mts

@@ -2458,6 +2458,8 @@ declare class HTMLRenderer extends Visitor<string> {
     private static readonly CSS_FONT_RE;
     /** Characters `escapeHtml` has to rewrite. Non-global on purpose: `test` must not carry `lastIndex`. */
     private static readonly HTML_ESCAPE_RE;
+    private static readonly BARE_HEX_RE;
+    private static readonly NAMED_COLORS;
     private sanitizeColor;
     private sanitizeFontSize;
     private sanitizeFontFamily;
@@ -2487,6 +2489,7 @@ declare class HTMLRenderer extends Visitor<string> {
     private hexToRgba;
     private renderNotice;
     private renderTables;
+    private getTableContext;
     private renderGallery;
     private renderColumns;
     private renderSeparator;

package/dist/index.d.ts

@@ -2458,6 +2458,8 @@ declare class HTMLRenderer extends Visitor<string> {
     private static readonly CSS_FONT_RE;
     /** Characters `escapeHtml` has to rewrite. Non-global on purpose: `test` must not carry `lastIndex`. */
     private static readonly HTML_ESCAPE_RE;
+    private static readonly BARE_HEX_RE;
+    private static readonly NAMED_COLORS;
     private sanitizeColor;
     private sanitizeFontSize;
     private sanitizeFontFamily;
@@ -2487,6 +2489,7 @@ declare class HTMLRenderer extends Visitor<string> {
     private hexToRgba;
     private renderNotice;
     private renderTables;
+    private getTableContext;
     private renderGallery;
     private renderColumns;
     private renderSeparator;

package/dist/index.js

@@ -1548,6 +1548,7 @@ var LYNE_LEGACY_ALIASES = {
   "flex": "container",
   "grid": "container",
   "middle": "container",
+  "square": "container",
   "circle": "container",
   "card": "container",
   "glass": "container",
@@ -1711,6 +1712,22 @@ function extractGreenNodeMetadata(green) {
     case "gradient":
       const gradientColors = value.split(",").map((c) => c.trim()).filter((c) => c.startsWith("#"));
       return gradientColors.length > 0 ? { colors: gradientColors } : {};
+    case "table_th":
+    case "table_col": {
+      if (!value) return {};
+      const parts = value.split(/[:,\s]+/).filter(Boolean);
+      const res = {};
+      for (const p of parts) {
+        if (/^\d+$/.test(p)) {
+          res.colspan = parseInt(p, 10);
+        } else if (/^(center|centre|left|right|justify)$/i.test(p)) {
+          res.align = p.toLowerCase() === "centre" ? "center" : p.toLowerCase();
+        } else if (/^#[0-9a-fA-F]{3,8}$/.test(p)) {
+          res.color = p;
+        }
+      }
+      return res;
+    }
     case "notice":
     case "wnotice":
       return value ? { color: value } : {};
@@ -3635,6 +3652,9 @@ var TagRegistry = class {
       { name: "left", kind: "left", label: "Left", category: "layout", isInline: false, isSelfClosing: false, canHaveChildren: true },
       { name: "heading", kind: "heading", label: "Heading", category: "layout", isInline: false, isSelfClosing: false, canHaveChildren: true },
       { name: "notice", kind: "notice", label: "Notice", category: "layout", isInline: false, isSelfClosing: false, canHaveChildren: true },
+      { name: "wnotice", kind: "wnotice", label: "Warning Notice", category: "layout", isInline: false, isSelfClosing: false, canHaveChildren: true },
+      { name: "square", kind: "container", label: "Square Badge", category: "layout", isInline: true, isSelfClosing: false, canHaveChildren: true },
+      { name: "circle", kind: "container", label: "Square Badge", category: "layout", isInline: true, isSelfClosing: false, canHaveChildren: true, isDeprecated: true, deprecatedReplacement: "square" },
       { name: "spacing", kind: "spacing", label: "Spacing", category: "layout", isInline: false, isSelfClosing: true, canHaveChildren: false },
       { name: "empty_line", kind: "empty_line", label: "Empty Line", category: "layout", isInline: false, isSelfClosing: true, canHaveChildren: false },
       // ── Media ──
@@ -5133,11 +5153,39 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
         return this.renderTables(node);
       case "table_row":
         return this.tableDepth > 0 ? this.wrapBlock("tr", node) : this.wrapInline("span", node);
-      case "table_col":
-        return this.tableDepth > 0 ? this.wrapInline("td", node) : this.wrapInline("span", node);
+      case "table_col": {
+        if (this.tableDepth <= 0) return this.wrapInline("span", node);
+        const { cellCount, maxCols, isDirect } = this.getTableContext(node);
+        let colspanAttr = "";
+        if (node.metadata?.colspan) {
+          colspanAttr = ` colspan="${node.metadata.colspan}"`;
+        } else if (cellCount === 1 && maxCols > 1) {
+          colspanAttr = ` colspan="${maxCols}"`;
+        } else if (cellCount < maxCols && maxCols % cellCount === 0) {
+          colspanAttr = ` colspan="${maxCols / cellCount}"`;
+        }
+        const align = node.metadata?.align ? ` style="text-align:${node.metadata.align};"` : "";
+        const td = `<td${this.idAttr(node)}${colspanAttr}${align}>${this.renderChildren(node)}</td>`;
+        return isDirect ? `<tr>${td}</tr>` : td;
+      }
       case "table_th": {
         const content = this.renderChildren(node);
-        return this.tableDepth > 0 ? `<th${this.idAttr(node)} class="bb-th"><span class="bb-table-badge">${content}</span></th>` : this.wrapInline("span", node);
+        if (this.tableDepth <= 0) return this.wrapInline("span", node);
+        const { cellCount, maxCols, isDirect } = this.getTableContext(node);
+        let colspanAttr = "";
+        let fullCls = "";
+        if (node.metadata?.colspan) {
+          colspanAttr = ` colspan="${node.metadata.colspan}"`;
+        } else if (cellCount === 1) {
+          colspanAttr = maxCols > 1 ? ` colspan="${maxCols}"` : ' colspan="100"';
+          fullCls = " bb-th-full";
+        } else if (cellCount < maxCols && maxCols % cellCount === 0) {
+          colspanAttr = ` colspan="${maxCols / cellCount}"`;
+        }
+        const alignCls = node.metadata?.align ? ` bb-th-${node.metadata.align}` : "";
+        const alignStyle = node.metadata?.align ? ` style="text-align:${node.metadata.align};"` : "";
+        const th = `<th${this.idAttr(node)}${colspanAttr} class="bb-th${fullCls}${alignCls}"${alignStyle}><span class="bb-table-badge">${content}</span></th>`;
+        return isDirect ? `<tr>${th}</tr>` : th;
       }
       case "gallery":
         return this.renderGallery(node);
@@ -5311,8 +5359,33 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
   static CSS_FONT_RE = /^[A-Za-z0-9 ,_-]{1,120}$/;
   /** Characters `escapeHtml` has to rewrite. Non-global on purpose: `test` must not carry `lastIndex`. */
   static HTML_ESCAPE_RE = /[&<>"']/;
+  static BARE_HEX_RE = /^[0-9a-f]{3,8}$/i;
+  static NAMED_COLORS = {
+    black: "#000000",
+    white: "#FFFFFF",
+    red: "#FF4C4C",
+    green: "#2ECC71",
+    blue: "#3498DB",
+    yellow: "#F1C40F",
+    cyan: "#2EE6E2",
+    magenta: "#E056FD",
+    pink: "#FF94C4",
+    purple: "#A972FF",
+    orange: "#FF9F43",
+    amber: "#FFC34D",
+    gray: "#8395A7",
+    grey: "#8395A7",
+    lime: "#10AC84",
+    teal: "#01CBC6",
+    violet: "#5F27CD",
+    gold: "#FFD700"
+  };
   sanitizeColor(raw) {
-    const v = raw.trim();
+    let v = raw.trim();
+    if (!v) return null;
+    if (_HTMLRenderer.BARE_HEX_RE.test(v) && (v.length === 3 || v.length === 4 || v.length === 6 || v.length === 8)) {
+      v = "#" + v;
+    }
     return _HTMLRenderer.CSS_COLOR_RE.test(v) ? v : null;
   }
   sanitizeFontSize(raw) {
@@ -5448,8 +5521,12 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
     return `<audio${this.idAttr(node)} controls src="${this.escapeHtml(src)}" class="bb-audio"></audio>`;
   }
   hexToRgba(hex, alpha) {
-    if (!hex.startsWith("#")) return hex;
-    const t = hex.replace("#", "");
+    let clean = hex.trim().toLowerCase();
+    if (_HTMLRenderer.NAMED_COLORS[clean]) {
+      clean = _HTMLRenderer.NAMED_COLORS[clean];
+    }
+    if (!clean.startsWith("#")) return clean;
+    const t = clean.replace("#", "");
     const full = t.length <= 4 ? t.split("").map((c) => c + c).join("") : t;
     const r = parseInt(full.slice(0, 2), 16) || 0;
     const g = parseInt(full.slice(2, 4), 16) || 0;
@@ -5482,6 +5559,22 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
     const accent = this.boxAccentStyle(node, "table");
     return `<div${this.idAttr(node)} class="bb-table-frame"${accent}><table class="${tableClasses}"><tbody>${content}</tbody></table></div>`;
   }
+  getTableContext(node) {
+    const parent = node.parent;
+    const isDirect = parent?.kind === "tables";
+    const tableNode = isDirect ? parent : parent?.parent?.kind === "tables" ? parent.parent : void 0;
+    const cellCount = parent?.children ? parent.children.filter((c) => c.kind === "table_th" || c.kind === "table_col").length : 1;
+    let maxCols = cellCount;
+    if (tableNode) {
+      for (const row of tableNode.children) {
+        if (row.kind === "table_row") {
+          const count = row.children.filter((c) => c.kind === "table_th" || c.kind === "table_col").length;
+          if (count > maxCols) maxCols = count;
+        }
+      }
+    }
+    return { cellCount, maxCols, isDirect };
+  }
   renderGallery(node) {
     const content = this.renderChildren(node);
     return `<div${this.idAttr(node)} class="bb-gallery">${content}</div>`;
@@ -5627,8 +5720,14 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       }
       case "middle":
         return `<div${idAttr} class="bb-middle">${content}</div>`;
-      case "circle":
-        return `<div${idAttr} class="bb-circle">${content}</div>`;
+      case "square":
+      case "circle": {
+        const accent = this.sanitizeColor(param);
+        const border = accent ? this.hexToRgba(accent, 0.35) : "";
+        const bg = accent ? this.hexToRgba(accent, 0.08) : "";
+        const style = accent ? ` style="--square-accent:${accent};--square-border:${border};--square-bg:${bg};"` : "";
+        return `<div${idAttr} class="bb-square bb-cut-panel"${style}>${content}</div>`;
+      }
       case "card":
       case "glass": {
         const accent = this.sanitizeColor(param);
@@ -5740,7 +5839,10 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
    */
   boxAccentStyle(node, suffix = "box") {
     const color = this.sanitizeColor(String(node.metadata?.color ?? ""));
-    return color ? ` style="--${suffix}-accent:${color};"` : "";
+    if (!color) return "";
+    const border = this.hexToRgba(color, 0.35);
+    const bg = this.hexToRgba(color, 0.08);
+    return ` style="--${suffix}-accent:${color};--${suffix}-border:${border};--${suffix}-bg:${bg};"`;
   }
   renderList(node) {
     const attrs = this.extractValue(node);

package/dist/index.mjs

@@ -1546,6 +1546,7 @@ var LYNE_LEGACY_ALIASES = {
   "flex": "container",
   "grid": "container",
   "middle": "container",
+  "square": "container",
   "circle": "container",
   "card": "container",
   "glass": "container",
@@ -1709,6 +1710,22 @@ function extractGreenNodeMetadata(green) {
     case "gradient":
       const gradientColors = value.split(",").map((c) => c.trim()).filter((c) => c.startsWith("#"));
       return gradientColors.length > 0 ? { colors: gradientColors } : {};
+    case "table_th":
+    case "table_col": {
+      if (!value) return {};
+      const parts = value.split(/[:,\s]+/).filter(Boolean);
+      const res = {};
+      for (const p of parts) {
+        if (/^\d+$/.test(p)) {
+          res.colspan = parseInt(p, 10);
+        } else if (/^(center|centre|left|right|justify)$/i.test(p)) {
+          res.align = p.toLowerCase() === "centre" ? "center" : p.toLowerCase();
+        } else if (/^#[0-9a-fA-F]{3,8}$/.test(p)) {
+          res.color = p;
+        }
+      }
+      return res;
+    }
     case "notice":
     case "wnotice":
       return value ? { color: value } : {};
@@ -3633,6 +3650,9 @@ var TagRegistry = class {
       { name: "left", kind: "left", label: "Left", category: "layout", isInline: false, isSelfClosing: false, canHaveChildren: true },
       { name: "heading", kind: "heading", label: "Heading", category: "layout", isInline: false, isSelfClosing: false, canHaveChildren: true },
       { name: "notice", kind: "notice", label: "Notice", category: "layout", isInline: false, isSelfClosing: false, canHaveChildren: true },
+      { name: "wnotice", kind: "wnotice", label: "Warning Notice", category: "layout", isInline: false, isSelfClosing: false, canHaveChildren: true },
+      { name: "square", kind: "container", label: "Square Badge", category: "layout", isInline: true, isSelfClosing: false, canHaveChildren: true },
+      { name: "circle", kind: "container", label: "Square Badge", category: "layout", isInline: true, isSelfClosing: false, canHaveChildren: true, isDeprecated: true, deprecatedReplacement: "square" },
       { name: "spacing", kind: "spacing", label: "Spacing", category: "layout", isInline: false, isSelfClosing: true, canHaveChildren: false },
       { name: "empty_line", kind: "empty_line", label: "Empty Line", category: "layout", isInline: false, isSelfClosing: true, canHaveChildren: false },
       // ── Media ──
@@ -5131,11 +5151,39 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
         return this.renderTables(node);
       case "table_row":
         return this.tableDepth > 0 ? this.wrapBlock("tr", node) : this.wrapInline("span", node);
-      case "table_col":
-        return this.tableDepth > 0 ? this.wrapInline("td", node) : this.wrapInline("span", node);
+      case "table_col": {
+        if (this.tableDepth <= 0) return this.wrapInline("span", node);
+        const { cellCount, maxCols, isDirect } = this.getTableContext(node);
+        let colspanAttr = "";
+        if (node.metadata?.colspan) {
+          colspanAttr = ` colspan="${node.metadata.colspan}"`;
+        } else if (cellCount === 1 && maxCols > 1) {
+          colspanAttr = ` colspan="${maxCols}"`;
+        } else if (cellCount < maxCols && maxCols % cellCount === 0) {
+          colspanAttr = ` colspan="${maxCols / cellCount}"`;
+        }
+        const align = node.metadata?.align ? ` style="text-align:${node.metadata.align};"` : "";
+        const td = `<td${this.idAttr(node)}${colspanAttr}${align}>${this.renderChildren(node)}</td>`;
+        return isDirect ? `<tr>${td}</tr>` : td;
+      }
       case "table_th": {
         const content = this.renderChildren(node);
-        return this.tableDepth > 0 ? `<th${this.idAttr(node)} class="bb-th"><span class="bb-table-badge">${content}</span></th>` : this.wrapInline("span", node);
+        if (this.tableDepth <= 0) return this.wrapInline("span", node);
+        const { cellCount, maxCols, isDirect } = this.getTableContext(node);
+        let colspanAttr = "";
+        let fullCls = "";
+        if (node.metadata?.colspan) {
+          colspanAttr = ` colspan="${node.metadata.colspan}"`;
+        } else if (cellCount === 1) {
+          colspanAttr = maxCols > 1 ? ` colspan="${maxCols}"` : ' colspan="100"';
+          fullCls = " bb-th-full";
+        } else if (cellCount < maxCols && maxCols % cellCount === 0) {
+          colspanAttr = ` colspan="${maxCols / cellCount}"`;
+        }
+        const alignCls = node.metadata?.align ? ` bb-th-${node.metadata.align}` : "";
+        const alignStyle = node.metadata?.align ? ` style="text-align:${node.metadata.align};"` : "";
+        const th = `<th${this.idAttr(node)}${colspanAttr} class="bb-th${fullCls}${alignCls}"${alignStyle}><span class="bb-table-badge">${content}</span></th>`;
+        return isDirect ? `<tr>${th}</tr>` : th;
       }
       case "gallery":
         return this.renderGallery(node);
@@ -5309,8 +5357,33 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
   static CSS_FONT_RE = /^[A-Za-z0-9 ,_-]{1,120}$/;
   /** Characters `escapeHtml` has to rewrite. Non-global on purpose: `test` must not carry `lastIndex`. */
   static HTML_ESCAPE_RE = /[&<>"']/;
+  static BARE_HEX_RE = /^[0-9a-f]{3,8}$/i;
+  static NAMED_COLORS = {
+    black: "#000000",
+    white: "#FFFFFF",
+    red: "#FF4C4C",
+    green: "#2ECC71",
+    blue: "#3498DB",
+    yellow: "#F1C40F",
+    cyan: "#2EE6E2",
+    magenta: "#E056FD",
+    pink: "#FF94C4",
+    purple: "#A972FF",
+    orange: "#FF9F43",
+    amber: "#FFC34D",
+    gray: "#8395A7",
+    grey: "#8395A7",
+    lime: "#10AC84",
+    teal: "#01CBC6",
+    violet: "#5F27CD",
+    gold: "#FFD700"
+  };
   sanitizeColor(raw) {
-    const v = raw.trim();
+    let v = raw.trim();
+    if (!v) return null;
+    if (_HTMLRenderer.BARE_HEX_RE.test(v) && (v.length === 3 || v.length === 4 || v.length === 6 || v.length === 8)) {
+      v = "#" + v;
+    }
     return _HTMLRenderer.CSS_COLOR_RE.test(v) ? v : null;
   }
   sanitizeFontSize(raw) {
@@ -5446,8 +5519,12 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
     return `<audio${this.idAttr(node)} controls src="${this.escapeHtml(src)}" class="bb-audio"></audio>`;
   }
   hexToRgba(hex, alpha) {
-    if (!hex.startsWith("#")) return hex;
-    const t = hex.replace("#", "");
+    let clean = hex.trim().toLowerCase();
+    if (_HTMLRenderer.NAMED_COLORS[clean]) {
+      clean = _HTMLRenderer.NAMED_COLORS[clean];
+    }
+    if (!clean.startsWith("#")) return clean;
+    const t = clean.replace("#", "");
     const full = t.length <= 4 ? t.split("").map((c) => c + c).join("") : t;
     const r = parseInt(full.slice(0, 2), 16) || 0;
     const g = parseInt(full.slice(2, 4), 16) || 0;
@@ -5480,6 +5557,22 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
     const accent = this.boxAccentStyle(node, "table");
     return `<div${this.idAttr(node)} class="bb-table-frame"${accent}><table class="${tableClasses}"><tbody>${content}</tbody></table></div>`;
   }
+  getTableContext(node) {
+    const parent = node.parent;
+    const isDirect = parent?.kind === "tables";
+    const tableNode = isDirect ? parent : parent?.parent?.kind === "tables" ? parent.parent : void 0;
+    const cellCount = parent?.children ? parent.children.filter((c) => c.kind === "table_th" || c.kind === "table_col").length : 1;
+    let maxCols = cellCount;
+    if (tableNode) {
+      for (const row of tableNode.children) {
+        if (row.kind === "table_row") {
+          const count = row.children.filter((c) => c.kind === "table_th" || c.kind === "table_col").length;
+          if (count > maxCols) maxCols = count;
+        }
+      }
+    }
+    return { cellCount, maxCols, isDirect };
+  }
   renderGallery(node) {
     const content = this.renderChildren(node);
     return `<div${this.idAttr(node)} class="bb-gallery">${content}</div>`;
@@ -5625,8 +5718,14 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       }
       case "middle":
         return `<div${idAttr} class="bb-middle">${content}</div>`;
-      case "circle":
-        return `<div${idAttr} class="bb-circle">${content}</div>`;
+      case "square":
+      case "circle": {
+        const accent = this.sanitizeColor(param);
+        const border = accent ? this.hexToRgba(accent, 0.35) : "";
+        const bg = accent ? this.hexToRgba(accent, 0.08) : "";
+        const style = accent ? ` style="--square-accent:${accent};--square-border:${border};--square-bg:${bg};"` : "";
+        return `<div${idAttr} class="bb-square bb-cut-panel"${style}>${content}</div>`;
+      }
       case "card":
       case "glass": {
         const accent = this.sanitizeColor(param);
@@ -5738,7 +5837,10 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
    */
   boxAccentStyle(node, suffix = "box") {
     const color = this.sanitizeColor(String(node.metadata?.color ?? ""));
-    return color ? ` style="--${suffix}-accent:${color};"` : "";
+    if (!color) return "";
+    const border = this.hexToRgba(color, 0.35);
+    const bg = this.hexToRgba(color, 0.08);
+    return ` style="--${suffix}-accent:${color};--${suffix}-border:${border};--${suffix}-bg:${bg};"`;
   }
   renderList(node) {
     const attrs = this.extractValue(node);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miliastry/quasar",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Quasar Document Engine - Advanced BBCode/Markdown/HTML AST Engine",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/BBCode/BBCodeToGreenNode.ts

@@ -188,6 +188,7 @@ const LYNE_LEGACY_ALIASES: Record<string, NodeKind> = {
   'flex': 'container',
   'grid': 'container',
   'middle': 'container',
+  'square': 'container',
   'circle': 'container',
   'card': 'container',
   'glass': 'container',
@@ -441,6 +442,22 @@ export function extractGreenNodeMetadata(green: GreenNode): Record<string, unkno
       // Parse "=#ff0000,#00ff00" → { colors: ['#FF0000', '#00FF00'] }
       const gradientColors = value.split(',').map(c => c.trim()).filter(c => c.startsWith('#'))
       return gradientColors.length > 0 ? { colors: gradientColors } : {}
+    case 'table_th':
+    case 'table_col': {
+      if (!value) return {}
+      const parts = value.split(/[:,\s]+/).filter(Boolean)
+      const res: Record<string, any> = {}
+      for (const p of parts) {
+        if (/^\d+$/.test(p)) {
+          res.colspan = parseInt(p, 10)
+        } else if (/^(center|centre|left|right|justify)$/i.test(p)) {
+          res.align = p.toLowerCase() === 'centre' ? 'center' : p.toLowerCase()
+        } else if (/^#[0-9a-fA-F]{3,8}$/.test(p)) {
+          res.color = p
+        }
+      }
+      return res
+    }
     case 'notice':
     case 'wnotice':  return value ? { color: value } : {}
     case 'tables':

package/src/Model/TagRegistry.ts

@@ -464,6 +464,9 @@ export class TagRegistry {
       { name: 'left', kind: 'left', label: 'Left', category: 'layout', isInline: false, isSelfClosing: false, canHaveChildren: true },
       { name: 'heading', kind: 'heading', label: 'Heading', category: 'layout', isInline: false, isSelfClosing: false, canHaveChildren: true },
       { name: 'notice', kind: 'notice', label: 'Notice', category: 'layout', isInline: false, isSelfClosing: false, canHaveChildren: true },
+      { name: 'wnotice', kind: 'wnotice', label: 'Warning Notice', category: 'layout', isInline: false, isSelfClosing: false, canHaveChildren: true },
+      { name: 'square', kind: 'container', label: 'Square Badge', category: 'layout', isInline: true, isSelfClosing: false, canHaveChildren: true },
+      { name: 'circle', kind: 'container', label: 'Square Badge', category: 'layout', isInline: true, isSelfClosing: false, canHaveChildren: true, isDeprecated: true, deprecatedReplacement: 'square' },
       { name: 'spacing', kind: 'spacing', label: 'Spacing', category: 'layout', isInline: false, isSelfClosing: true, canHaveChildren: false },
       { name: 'empty_line', kind: 'empty_line', label: 'Empty Line', category: 'layout', isInline: false, isSelfClosing: true, canHaveChildren: false },
 

package/src/Tests/LyneMode.test.ts

@@ -110,7 +110,7 @@ describe('Lyne Mode & Dialect Isolation', () => {
 
       const html = doc.toHTML()
       expect(html).toContain('class="bb-table bb-table-striped bb-table-borders"')
-      expect(html).toContain('class="bb-th"')
+      expect(html).toContain('bb-th')
       expect(html).toContain('class="bb-columns" style="column-count:3;"')
       expect(html).toContain('class="bb-gallery"')
       expect(html).toContain('✦ ✦ ✦')

package/src/Visitors/HTMLRenderer.ts

@@ -304,12 +304,39 @@ export class HTMLRenderer extends Visitor<string> {
       case 'align': return this.renderAlign(node)
       case 'tables': return this.renderTables(node)
       case 'table_row': return this.tableDepth > 0 ? this.wrapBlock('tr', node) : this.wrapInline('span', node)
-      case 'table_col': return this.tableDepth > 0 ? this.wrapInline('td', node) : this.wrapInline('span', node)
+      case 'table_col': {
+        if (this.tableDepth <= 0) return this.wrapInline('span', node)
+        const { cellCount, maxCols, isDirect } = this.getTableContext(node)
+        let colspanAttr = ''
+        if (node.metadata?.colspan) {
+          colspanAttr = ` colspan="${node.metadata.colspan}"`
+        } else if (cellCount === 1 && maxCols > 1) {
+          colspanAttr = ` colspan="${maxCols}"`
+        } else if (cellCount < maxCols && maxCols % cellCount === 0) {
+          colspanAttr = ` colspan="${maxCols / cellCount}"`
+        }
+        const align = node.metadata?.align ? ` style="text-align:${node.metadata.align};"` : ''
+        const td = `<td${this.idAttr(node)}${colspanAttr}${align}>${this.renderChildren(node)}</td>`
+        return isDirect ? `<tr>${td}</tr>` : td
+      }
       case 'table_th': {
         const content = this.renderChildren(node)
-        return this.tableDepth > 0
-          ? `<th${this.idAttr(node)} class="bb-th"><span class="bb-table-badge">${content}</span></th>`
-          : this.wrapInline('span', node)
+        if (this.tableDepth <= 0) return this.wrapInline('span', node)
+        const { cellCount, maxCols, isDirect } = this.getTableContext(node)
+        let colspanAttr = ''
+        let fullCls = ''
+        if (node.metadata?.colspan) {
+          colspanAttr = ` colspan="${node.metadata.colspan}"`
+        } else if (cellCount === 1) {
+          colspanAttr = maxCols > 1 ? ` colspan="${maxCols}"` : ' colspan="100"'
+          fullCls = ' bb-th-full'
+        } else if (cellCount < maxCols && maxCols % cellCount === 0) {
+          colspanAttr = ` colspan="${maxCols / cellCount}"`
+        }
+        const alignCls = node.metadata?.align ? ` bb-th-${node.metadata.align}` : ''
+        const alignStyle = node.metadata?.align ? ` style="text-align:${node.metadata.align};"` : ''
+        const th = `<th${this.idAttr(node)}${colspanAttr} class="bb-th${fullCls}${alignCls}"${alignStyle}><span class="bb-table-badge">${content}</span></th>`
+        return isDirect ? `<tr>${th}</tr>` : th
       }
       case 'gallery': return this.renderGallery(node)
       case 'columns': return this.renderColumns(node)
@@ -475,8 +502,35 @@ export class HTMLRenderer extends Visitor<string> {
   /** Characters `escapeHtml` has to rewrite. Non-global on purpose: `test` must not carry `lastIndex`. */
   private static readonly HTML_ESCAPE_RE = /[&<>"']/
 
+  private static readonly BARE_HEX_RE = /^[0-9a-f]{3,8}$/i
+
+  private static readonly NAMED_COLORS: Record<string, string> = {
+    black: '#000000',
+    white: '#FFFFFF',
+    red: '#FF4C4C',
+    green: '#2ECC71',
+    blue: '#3498DB',
+    yellow: '#F1C40F',
+    cyan: '#2EE6E2',
+    magenta: '#E056FD',
+    pink: '#FF94C4',
+    purple: '#A972FF',
+    orange: '#FF9F43',
+    amber: '#FFC34D',
+    gray: '#8395A7',
+    grey: '#8395A7',
+    lime: '#10AC84',
+    teal: '#01CBC6',
+    violet: '#5F27CD',
+    gold: '#FFD700',
+  }
+
   private sanitizeColor(raw: string): string | null {
-    const v = raw.trim()
+    let v = raw.trim()
+    if (!v) return null
+    if (HTMLRenderer.BARE_HEX_RE.test(v) && (v.length === 3 || v.length === 4 || v.length === 6 || v.length === 8)) {
+      v = '#' + v
+    }
     return HTMLRenderer.CSS_COLOR_RE.test(v) ? v : null
   }
 
@@ -637,8 +691,12 @@ export class HTMLRenderer extends Visitor<string> {
   }
 
   private hexToRgba(hex: string, alpha: number): string {
-    if (!hex.startsWith('#')) return hex
-    const t = hex.replace('#', '')
+    let clean = hex.trim().toLowerCase()
+    if (HTMLRenderer.NAMED_COLORS[clean]) {
+      clean = HTMLRenderer.NAMED_COLORS[clean]
+    }
+    if (!clean.startsWith('#')) return clean
+    const t = clean.replace('#', '')
     const full = t.length <= 4 ? t.split('').map(c => c + c).join('') : t
     const r = parseInt(full.slice(0, 2), 16) || 0
     const g = parseInt(full.slice(2, 4), 16) || 0
@@ -679,6 +737,26 @@ export class HTMLRenderer extends Visitor<string> {
     return `<div${this.idAttr(node)} class="bb-table-frame"${accent}><table class="${tableClasses}"><tbody>${content}</tbody></table></div>`
   }
 
+  private getTableContext(node: RedNode): { cellCount: number; maxCols: number; isDirect: boolean } {
+    const parent = node.parent
+    const isDirect = parent?.kind === 'tables'
+    const tableNode = isDirect ? parent : (parent?.parent?.kind === 'tables' ? parent.parent : undefined)
+    const cellCount = parent?.children
+      ? parent.children.filter(c => c.kind === 'table_th' || c.kind === 'table_col').length
+      : 1
+
+    let maxCols = cellCount
+    if (tableNode) {
+      for (const row of tableNode.children) {
+        if (row.kind === 'table_row') {
+          const count = row.children.filter(c => c.kind === 'table_th' || c.kind === 'table_col').length
+          if (count > maxCols) maxCols = count
+        }
+      }
+    }
+    return { cellCount, maxCols, isDirect }
+  }
+
   private renderGallery(node: RedNode): string {
     const content = this.renderChildren(node)
     return `<div${this.idAttr(node)} class="bb-gallery">${content}</div>`
@@ -824,8 +902,14 @@ export class HTMLRenderer extends Visitor<string> {
       }
       case 'middle':
         return `<div${idAttr} class="bb-middle">${content}</div>`
-      case 'circle':
-        return `<div${idAttr} class="bb-circle">${content}</div>`
+      case 'square':
+      case 'circle': {
+        const accent = this.sanitizeColor(param)
+        const border = accent ? this.hexToRgba(accent, 0.35) : ''
+        const bg = accent ? this.hexToRgba(accent, 0.08) : ''
+        const style = accent ? ` style="--square-accent:${accent};--square-border:${border};--square-bg:${bg};"` : ''
+        return `<div${idAttr} class="bb-square bb-cut-panel"${style}>${content}</div>`
+      }
       case 'card':
       case 'glass': {
         // `[card=#hex]` / `[container=glass:#hex]`: el color se pasa como
@@ -942,7 +1026,10 @@ export class HTMLRenderer extends Visitor<string> {
    */
   private boxAccentStyle(node: RedNode, suffix: 'box' | 'table' | 'columns' = 'box'): string {
     const color = this.sanitizeColor(String(node.metadata?.color ?? ''))
-    return color ? ` style="--${suffix}-accent:${color};"` : ''
+    if (!color) return ''
+    const border = this.hexToRgba(color, 0.35)
+    const bg = this.hexToRgba(color, 0.08)
+    return ` style="--${suffix}-accent:${color};--${suffix}-border:${border};--${suffix}-bg:${bg};"`
   }
 
   private renderList(node: RedNode): string {

package/src/Visuals/lyne.css

@@ -249,8 +249,8 @@
  * del autor ([boxw=Title:#hex]) si lo hay; si no, el hairline del tema. */
 .bbcode-preview-lyne details.boxw,
 .bbcode-preview.theme-lyne details.boxw {
-  background: rgba(11, 16, 36, 0.5) !important;
-  border: 1px solid var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12))))) !important;
+  background: var(--box-bg, rgba(11, 16, 36, 0.5)) !important;
+  border: 1px solid var(--box-border, var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))))) !important;
   border-radius: 0 !important;
   clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
   padding: 0 !important;
@@ -331,8 +331,8 @@
   width: 7px !important;
   height: 7px !important;
   flex: 0 0 7px !important;
-  border-right: 1.5px solid currentColor !important;
-  border-bottom: 1.5px solid currentColor !important;
+  border-right: 1px solid currentColor !important;
+  border-bottom: 1px solid currentColor !important;
   transform: rotate(-45deg) !important;
   transition: transform 0.15s ease !important;
 }
@@ -360,7 +360,7 @@
 
 .bbcode-preview-lyne details.boxw[open] > summary,
 .bbcode-preview.theme-lyne details.boxw[open] > summary {
-  border-bottom: 1px solid var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12))))) !important;
+  border-bottom: 1px solid var(--box-border, var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))))) !important;
 }
 
 .bbcode-preview-lyne details[open] > summary::before,
@@ -370,7 +370,8 @@
 
 .bbcode-preview-lyne details > summary:hover,
 .bbcode-preview.theme-lyne details > summary:hover {
-  color: var(--color-accent-bright, #68FFF8) !important;
+  color: var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-accent-bright, #68FFF8)))) !important;
+  filter: brightness(1.25) !important;
 }
 
 /* ─── Lists & Markers ───────────────────────────────────────────────────── */
@@ -469,6 +470,7 @@
 .bb-table {
   width: 100% !important;
   min-width: 380px !important;
+  table-layout: fixed !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
   margin: 0 !important;
@@ -518,6 +520,64 @@
   line-height: 1.3 !important;
   text-transform: uppercase !important;
   padding: 8px 10px !important;
+  text-align: left !important;
+}
+
+.bb-table .bb-th.bb-th-full {
+  width: 100% !important;
+}
+
+/* Table header alignments */
+.bb-table .bb-th.bb-th-left,
+.bb-table .bb-th:has(.bb-left),
+.bb-table .bb-th:has([style*="text-align:left"]),
+.bb-table .bb-th:has([style*="text-align: left"]),
+.bb-left .bb-table .bb-th {
+  text-align: left !important;
+}
+
+.bb-table .bb-th.bb-th-left .bb-table-badge,
+.bb-table .bb-th:has(.bb-left) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:left"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: left"]) .bb-table-badge,
+.bb-left .bb-table .bb-th .bb-table-badge {
+  margin-right: auto !important;
+  margin-left: 0 !important;
+}
+
+.bb-table .bb-th.bb-th-centered,
+.bb-table .bb-th.bb-th-center,
+.bb-table .bb-th:has(.bb-centre),
+.bb-table .bb-th:has([style*="text-align:center"]),
+.bb-table .bb-th:has([style*="text-align: center"]),
+.bb-centre .bb-table .bb-th {
+  text-align: center !important;
+}
+
+.bb-table .bb-th.bb-th-centered .bb-table-badge,
+.bb-table .bb-th.bb-th-center .bb-table-badge,
+.bb-table .bb-th:has(.bb-centre) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:center"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: center"]) .bb-table-badge,
+.bb-centre .bb-table .bb-th .bb-table-badge {
+  margin: 0 auto !important;
+}
+
+.bb-table .bb-th.bb-th-right,
+.bb-table .bb-th:has(.bb-right),
+.bb-table .bb-th:has([style*="text-align:right"]),
+.bb-table .bb-th:has([style*="text-align: right"]),
+.bb-right .bb-table .bb-th {
+  text-align: right !important;
+}
+
+.bb-table .bb-th.bb-th-right .bb-table-badge,
+.bb-table .bb-th:has(.bb-right) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:right"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: right"]) .bb-table-badge,
+.bb-right .bb-table .bb-th .bb-table-badge {
+  margin-left: auto !important;
+  margin-right: 0 !important;
 }
 
 .bb-table-badge {
@@ -610,7 +670,7 @@
   border: 0 !important;
   height: 1px !important;
   background: linear-gradient(90deg, transparent, var(--color-accent, #2EE6E2), transparent) !important;
-  margin: 0 !important;
+  margin: 12px 0 !important;
   text-align: center !important;
   color: var(--color-accent, #2EE6E2) !important;
   font-family: var(--font-numeric, monospace) !important;
@@ -733,7 +793,7 @@
 .bb-neon-box {
   padding: 16px !important;
   margin: 0 !important;
-  border: 2px solid var(--neon-color, var(--color-accent, #2EE6E2)) !important;
+  border: 1px solid var(--neon-color, var(--color-accent, #2EE6E2)) !important;
   background: color-mix(in srgb, var(--neon-color, var(--color-accent, #2EE6E2)) 4%, rgba(7, 10, 23, 0.55)) !important;
   border-radius: 0 !important;
   box-shadow: none !important;
@@ -758,20 +818,26 @@
   align-items: center !important;
 }
 
-/* Circle: replica el .bbCircle original de Lyne (Main Bridge/line/web/
- * components/bbcode.module.css). aspect-ratio:1 + centrado convierten el div
- * en un círculo real con el contenido al centro; fondo y borde lo pintan como
- * badge. clip-path:none evita que herede los cortes de esquina de los paneles. */
+/* Square: cuadradito badge con las muescas angulares características de Lyne.
+ * aspect-ratio: 1/1, centrado, borde hairline y corte angular de esquina. */
+.bb-square,
 .bb-circle {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  aspect-ratio: 1 !important;
-  border-radius: 50% !important;
+  aspect-ratio: 1 / 1 !important;
+  min-width: 1.85em !important;
+  min-height: 1.85em !important;
+  padding: 0.2em 0.35em !important;
+  box-sizing: border-box !important;
+  border-radius: 0 !important;
   overflow: hidden !important;
-  background: rgb(11 16 36 / 0.5) !important;
-  border: 1px solid var(--color-hairline, rgba(255, 255, 255, 0.12)) !important;
-  clip-path: none !important;
+  background: var(--square-bg, rgb(11 16 36 / 0.5)) !important;
+  border: 1px solid var(--square-border, var(--square-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))) !important;
+  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px) !important;
+  text-align: center !important;
+  line-height: 1 !important;
+  vertical-align: middle !important;
 }
 
 /* Stack: replica el .bbStack original de Lyne (columna flex con gap).