iron-cms 0.16.2 → 0.17.0

data/app/assets/builds/iron.css

@@ -49,6 +49,7 @@
     --color-sky-400: oklch(74.6% 0.16 232.661);
     --color-sky-500: oklch(68.5% 0.169 237.323);
     --color-sky-600: oklch(58.8% 0.158 241.966);
+    --color-sky-700: oklch(50% 0.134 242.749);
     --color-sky-800: oklch(44.3% 0.11 240.79);
     --color-sky-900: oklch(39.1% 0.09 240.876);
     --color-blue-400: oklch(70.7% 0.165 254.624);
@@ -3407,9 +3408,6 @@
       color: color-mix(in oklab, var(--color-white) 70%, transparent);
     }
   }
-  .capitalize {
-    text-transform: capitalize;
-  }
   .lowercase {
     text-transform: lowercase;
   }
@@ -3419,9 +3417,6 @@
   .italic {
     font-style: italic;
   }
-  .line-through {
-    text-decoration-line: line-through;
-  }
   .underline {
     text-decoration-line: underline;
   }
@@ -3438,10 +3433,6 @@
   .opacity-50 {
     opacity: 50%;
   }
-  .shadow {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -7235,9 +7226,10 @@ dialog.modal {
 }
 @layer components {
   lexxy-editor {
+    position: relative;
     display: block;
     width: 100%;
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-xl);
     background-color: var(--color-white);
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, #fff 5%, transparent);
@@ -7295,8 +7287,8 @@ dialog.modal {
         background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
       }
     }
-    border-top-left-radius: var(--radius-md);
-    border-top-right-radius: var(--radius-md);
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
   }
   lexxy-toolbar [data-toolbar-group] {
     display: flex;
@@ -7377,7 +7369,7 @@ dialog.modal {
     color: inherit;
     fill: currentColor;
   }
-  lexxy-editor [contenteditable] {
+  lexxy-editor [contenteditable="true"] {
     display: block;
     min-height: calc(var(--spacing) * 48);
     width: 100%;
@@ -7395,7 +7387,7 @@ dialog.modal {
       line-height: calc(var(--spacing) * 6);
     }
   }
-  lexxy-editor [contenteditable]:empty::before {
+  lexxy-editor [contenteditable="true"]:empty::before {
     content: attr(data-placeholder);
     color: var(--color-stone-400);
     @media (prefers-color-scheme: dark) {
@@ -7450,7 +7442,7 @@ dialog.modal {
     max-width: 40ch;
     border-start-start-radius: 0;
   }
-  .lexxy-editor__toolbar-dropdown:is([open]) .lexxy-editor__toolbar-button {
+  .lexxy-editor__toolbar-dropdown:is([open]) > summary.lexxy-editor__toolbar-button {
     background-color: var(--color-sky-100);
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
@@ -7461,7 +7453,7 @@ dialog.modal {
     border-end-end-radius: 0;
     border-end-start-radius: 0;
   }
-  .lexxy-editor__toolbar-dropdown:is([open]) .lexxy-editor__toolbar-button:hover {
+  .lexxy-editor__toolbar-dropdown:is([open]) > summary.lexxy-editor__toolbar-button:hover {
     background-color: var(--color-sky-100);
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
@@ -7478,22 +7470,115 @@ dialog.modal {
     inset-inline-start: var(--dropdown-padding);
     inset-inline-end: var(--dropdown-padding);
   }
-  lexxy-link-dropdown {
-    flex: 1;
-  }
-  lexxy-link-dropdown > * {
-    flex: 1;
+  .lexxy-editor__toolbar-dropdown-list {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--spacing) * 1);
+    background-color: var(--color-white);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-800);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: var(--color-sky-200);
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
+      }
+    }
+    border-radius: var(--radius-md);
+    border-start-start-radius: 0;
+    color: var(--color-stone-900);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+    inset-inline-start: calc(var(--spacing) * 0);
+    top: calc(var(--spacing) * 8);
+    min-width: 12rem;
   }
-  lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions {
-    margin-top: calc(var(--spacing) * 2);
+  .lexxy-editor__toolbar-dropdown-list button {
+    height: auto;
+    width: auto;
+    justify-content: flex-start;
     display: flex;
-    flex: 1;
+    align-items: center;
     gap: calc(var(--spacing) * 2);
+    border-radius: 0.25rem;
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1.5);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-stone-700);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-200);
+    }
+    text-align: start;
+    white-space: nowrap;
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-stone-100);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, #fff 10%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+          }
+        }
+      }
+    }
   }
-  lexxy-link-dropdown input[type="url"] {
+  .lexxy-editor__toolbar-dropdown-list button[aria-pressed="true"] {
+    background-color: var(--color-sky-100);
+    color: var(--color-sky-900);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-sky-100);
+    }
+  }
+  .lexxy-editor__toolbar-dropdown-list button svg {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    flex: none;
+    fill: currentColor;
+  }
+  .lexxy-editor__toolbar-dropdown-list .lexxy-editor__toolbar-separator {
+    margin-block: calc(var(--spacing) * 1);
+    height: 1px;
     width: 100%;
+    background-color: var(--color-stone-200);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+  }
+  lexxy-link-dropdown {
+    min-width: 22rem;
+    gap: calc(var(--spacing) * 2);
+  }
+  [overflowing] lexxy-link-dropdown {
+    min-width: calc(var(--spacing) * 0);
+    flex-direction: column;
+  }
+  [overflowing] lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  lexxy-link-dropdown input[type="url"] {
+    min-width: calc(var(--spacing) * 0);
+    flex: 1;
+    height: calc(var(--spacing) * 8);
     border-radius: var(--radius-md);
     padding-inline: calc(var(--spacing) * 2);
     border-style: var(--tw-border-style);
@@ -7509,6 +7594,10 @@ dialog.modal {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-stone-900);
     }
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: 1;
+    line-height: 1;
     color: var(--color-stone-900);
     @media (prefers-color-scheme: dark) {
       color: var(--color-white);
@@ -7521,10 +7610,18 @@ dialog.modal {
         color: var(--color-stone-500);
       }
     }
+    --tw-outline-style: none;
+    outline-style: none;
+    &:focus-visible {
+      border-color: transparent;
+    }
     &:focus-visible {
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
     }
+    &:focus-visible {
+      outline-offset: 1px;
+    }
     &:focus-visible {
       outline-color: var(--color-sky-600);
     }
@@ -7533,17 +7630,140 @@ dialog.modal {
         outline-color: var(--color-sky-500);
       }
     }
-    box-sizing: border-box;
-    min-width: 40ch;
-    --tw-leading: calc(var(--spacing) * 6);
-    line-height: calc(var(--spacing) * 6);
   }
-  [overflowing] lexxy-link-dropdown input[type="url"] {
-    min-width: calc(var(--spacing) * 0);
+  lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
   }
   lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions button {
-    width: 100%;
+    height: calc(var(--spacing) * 8);
+    width: auto;
+    padding-inline: calc(var(--spacing) * 3);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    border-radius: var(--radius-md);
+  }
+  lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions button[value="link"] {
+    background-color: var(--color-sky-600);
+    color: var(--color-white);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-sky-700);
+      }
+    }
+  }
+  lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions button[value="unlink"] {
+    background-color: var(--color-white);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    color: var(--color-stone-700);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-200);
+    }
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-stone-300);
+    --tw-ring-inset: inset;
+    @media (prefers-color-scheme: dark) {
+      --tw-ring-color: color-mix(in srgb, #fff 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-stone-50);
+      }
+    }
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, #fff 15%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+          }
+        }
+      }
+    }
+  }
+  lexxy-highlight-dropdown {
+    --button-size: calc(var(--spacing) * 8);
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 2);
+  }
+  lexxy-highlight-dropdown .lexxy-highlight-colors {
+    display: grid;
+    grid-template-columns: repeat(var(--max-colors, 9), var(--button-size));
+    grid-template-rows: repeat(2, var(--button-size));
+    grid-auto-flow: column;
+    gap: calc(var(--spacing) * 1);
+  }
+  lexxy-highlight-dropdown .lexxy-highlight-button {
+    position: relative;
+    aspect-ratio: 1 / 1;
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    border-radius: var(--radius-md);
+    padding: calc(var(--spacing) * 0);
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-stone-300);
+    --tw-ring-inset: inset;
+    @media (prefers-color-scheme: dark) {
+      --tw-ring-color: color-mix(in srgb, #fff 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        opacity: 80%;
+      }
+    }
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+  lexxy-highlight-dropdown .lexxy-highlight-button::after {
+    content: "Aa";
+    position: absolute;
+    inset: calc(var(--spacing) * 0);
+    display: flex;
+    align-items: center;
     justify-content: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  lexxy-highlight-dropdown .lexxy-highlight-button[data-style="background-color"]::after {
+    color: var(--color-stone-900);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+  }
+  lexxy-highlight-dropdown .lexxy-highlight-button[aria-pressed="true"] {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 2px currentColor;
+  }
+  lexxy-highlight-dropdown .lexxy-highlight-button[aria-pressed="true"]::after {
+    content: "✓";
+  }
+  lexxy-highlight-dropdown .lexxy-editor__toolbar-dropdown-reset {
+    margin-top: calc(var(--spacing) * 2);
+    width: 100%;
+    white-space: nowrap;
     @layer components {
       @layer components {
         --tw-font-weight: var(--font-weight-semibold);
@@ -7694,363 +7914,467 @@ dialog.modal {
       }
     }
   }
-  lexxy-highlight-dropdown {
-    display: flex;
-    flex-direction: column;
-  }
-  lexxy-highlight-dropdown [data-button-group] {
-    display: flex;
-    flex-direction: row;
-    gap: var(--dropdown-gap);
-    justify-content: flex-start;
+  lexxy-highlight-dropdown .lexxy-editor__toolbar-dropdown-reset[disabled] {
+    display: none;
   }
-  lexxy-highlight-dropdown [data-button-group] button {
-    --button-size: calc(var(--spacing) * 8);
-    aspect-ratio: 1 / 1;
-    width: var(--button-size);
-    max-width: var(--button-size);
-    min-width: var(--button-size);
+  [overflowing] lexxy-highlight-dropdown {
+    width: fit-content;
   }
-  lexxy-highlight-dropdown [data-button-group] button::after {
-    content: "Aa";
+  lexxy-editor .attachment__progress {
     position: absolute;
-    inset: calc(var(--spacing) * 0);
-    align-self: center;
-    display: inline-block;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    z-index: 10;
+    top: calc(1/2 * 100%);
+    left: 5%;
+    height: calc(var(--spacing) * 1);
+    width: 90%;
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    overflow: hidden;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--color-stone-200);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-700);
+    }
   }
-  lexxy-highlight-dropdown button {
-    --button-size: calc(var(--spacing) * 8);
-    position: relative;
-    flex: 1;
-    color: var(--color-stone-900);
+  lexxy-editor .attachment__progress::-webkit-progress-bar {
+    background-color: var(--color-stone-200);
     @media (prefers-color-scheme: dark) {
-      color: var(--color-white);
+      background-color: var(--color-stone-700);
     }
-    min-height: var(--button-size);
   }
-  lexxy-highlight-dropdown button:hover {
-    opacity: 80%;
+  lexxy-editor .attachment__progress::-webkit-progress-value {
+    background-color: var(--color-sky-600);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
   }
-  lexxy-highlight-dropdown button[aria-pressed="true"] {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-ring-color: currentcolor;
-    --tw-ring-inset: inset;
+  lexxy-editor .attachment__progress::-moz-progress-bar {
+    background-color: var(--color-sky-600);
   }
-  lexxy-highlight-dropdown button[aria-pressed="true"]::after {
-    content: "✓";
+  lexxy-editor .attachment__progress[value="100"] {
+    opacity: 0%;
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
   }
-  lexxy-highlight-dropdown .lexxy-editor__toolbar-dropdown-reset {
-    margin-top: calc(var(--spacing) * 2);
+  lexxy-editor .attachment {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+  }
+  lexxy-editor .attachment--preview {
     width: 100%;
-    @layer components {
-      @layer components {
-        --tw-font-weight: var(--font-weight-semibold);
-        font-weight: var(--font-weight-semibold);
-        --tw-outline-style: none;
-        outline-style: none;
-        transition-property: all;
-        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-        transition-duration: var(--tw-duration, var(--default-transition-duration));
-        --tw-duration: 100ms;
-        transition-duration: 100ms;
-        &:focus-visible {
-          outline-style: var(--tw-outline-style);
-          outline-width: 2px;
-        }
-        &:focus-visible {
-          outline-offset: 2px;
-        }
-        &:disabled {
-          pointer-events: none;
-        }
-        &:disabled {
-          --tw-scale-x: 100%;
-          --tw-scale-y: 100%;
-          --tw-scale-z: 100%;
-          scale: var(--tw-scale-x) var(--tw-scale-y);
-        }
-        &:disabled {
-          opacity: 50%;
-        }
-        &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
-          @layer components {
-            display: inline-flex;
-            align-items: center;
-            column-gap: calc(var(--spacing) * 1.5);
-            border-radius: var(--radius-md);
-            padding-inline: calc(var(--spacing) * 2.5);
-            padding-block: calc(var(--spacing) * 1.5);
-            font-size: var(--text-sm);
-            line-height: var(--tw-leading, var(--text-sm--line-height));
-            & > svg {
-              width: calc(var(--spacing) * 5);
-              height: calc(var(--spacing) * 5);
-              &:first-child {
-                margin-left: calc(var(--spacing) * -0.5);
-              }
-              &:last-child {
-                margin-right: calc(var(--spacing) * -0.5);
-              }
-            }
-          }
-        }
+    text-align: center;
+  }
+  lexxy-editor .attachment--preview img {
+    max-width: 100%;
+    border-radius: 0.25rem;
+  }
+  lexxy-editor .attachment--file {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    margin-block: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    background-color: var(--color-stone-100);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
       }
-      background-color: var(--color-white);
-      color: var(--color-stone-700);
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      --tw-ring-color: var(--color-stone-200);
-      &:hover {
-        @media (hover: hover) {
-          scale: 1.02;
-        }
+    }
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-200);
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
       }
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-stone-50);
-        }
+    }
+    border-radius: var(--radius-lg);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-stone-700);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-300);
+    }
+  }
+  lexxy-editor .attachment__caption {
+    text-align: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-stone-500);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-400);
+    }
+    margin-top: calc(var(--spacing) * 1);
+  }
+  lexxy-editor .attachment__toolbar {
+    position: absolute;
+    top: calc(var(--spacing) * 2);
+    right: calc(var(--spacing) * 2);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+  }
+  lexxy-editor .attachment__toolbar button {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+    border-radius: calc(infinity * 1px);
+    background-color: color-mix(in srgb, #fff 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 90%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-stone-800) 90%, transparent);
+      }
+    }
+    color: var(--color-stone-600);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-400);
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-white);
       }
+    }
+    @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          --tw-ring-color: var(--color-stone-300);
-        }
-      }
-      &:active {
-        --tw-scale-x: 100%;
-        --tw-scale-y: 100%;
-        --tw-scale-z: 100%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
-      }
-      &:active {
-        background-color: var(--color-stone-100);
-      }
-      &:focus-visible {
-        outline-color: var(--color-stone-600);
-      }
-      @media (prefers-color-scheme: dark) {
-        background-color: color-mix(in srgb, #fff 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+          background-color: var(--color-stone-800);
         }
       }
-      @media (prefers-color-scheme: dark) {
-        color: var(--color-white);
-      }
-      @media (prefers-color-scheme: dark) {
-        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
+    }
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  lexxy-editor [data-trix-mutable] img, lexxy-editor .attachment.selected img {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-sky-500);
+  }
+  lexxy-editor .node--selected {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: var(--color-sky-500);
+    border-radius: 0.25rem;
+  }
+  .lexxy-floating-controls {
+    position: absolute;
+    z-index: 10;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    color: var(--color-white);
+  }
+  .lexxy-floating-controls .lexxy-floating-controls__group {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 0.5);
+    border-radius: var(--radius-md);
+    padding: calc(var(--spacing) * 0.5);
+    background-color: color-mix(in srgb, oklch(21.6% 0.006 56.043) 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-stone-900) 90%, transparent);
+    }
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-700);
+    }
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .lexxy-floating-controls button, .lexxy-floating-controls summary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--spacing) * 7);
+    min-width: calc(var(--spacing) * 7);
+    border-radius: 0.25rem;
+    padding-inline: calc(var(--spacing) * 1);
+    color: var(--color-white);
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 15%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-        }
-      }
-      @media (prefers-color-scheme: dark) {
-        &:hover {
-          @media (hover: hover) {
-            background-color: color-mix(in srgb, #fff 15%, transparent);
-            @supports (color: color-mix(in lab, red, red)) {
-              background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
-            }
-          }
+          background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
         }
       }
-      @media (prefers-color-scheme: dark) {
-        &:hover {
-          @media (hover: hover) {
-            --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
-            @supports (color: color-mix(in lab, red, red)) {
-              --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-            }
-          }
-        }
-      }
-      @media (prefers-color-scheme: dark) {
-        &:active {
-          background-color: color-mix(in srgb, #fff 5%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-          }
-        }
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-sky-400);
+    }
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .lexxy-floating-controls svg {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    fill: currentColor;
+  }
+  lexxy-node-delete-button .lexxy-node-delete:hover {
+    background-color: var(--color-red-600);
+  }
+  lexxy-editor table {
+    margin-block: calc(var(--spacing) * 0) !important;
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  lexxy-editor th, lexxy-editor td {
+    position: relative;
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-300);
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-stone-600);
+    }
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    text-align: start;
+    vertical-align: top;
+    min-width: 5ch;
+    transition: all 0.1s ease-in-out;
+  }
+  lexxy-editor th::after, lexxy-editor td::after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    display: block;
+    inset: -1px;
+    z-index: 2;
+    box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent inset;
+    transition: box-shadow 0.1s ease-in-out;
+  }
+  lexxy-editor th, lexxy-editor .lexxy-content__table-cell--header {
+    background-color: var(--color-stone-100);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
       }
     }
-    @layer components {
-      display: inline-flex;
-      align-items: center;
-      column-gap: calc(var(--spacing) * 1);
-      border-radius: var(--radius-sm);
-      padding-inline: calc(var(--spacing) * 2);
-      padding-block: calc(var(--spacing) * 1);
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-      & > svg {
-        width: calc(var(--spacing) * 5);
-        height: calc(var(--spacing) * 5);
-        &:first-child {
-          margin-left: calc(var(--spacing) * -0.5);
-        }
-        &:last-child {
-          margin-right: calc(var(--spacing) * -0.5);
-        }
+    color: var(--color-stone-950);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+  }
+  lexxy-editor td.lexxy-content__table-cell--selected, lexxy-editor th.lexxy-content__table-cell--selected {
+    background-color: color-mix(in srgb, oklch(95.1% 0.026 236.824) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-sky-100) 60%, transparent);
+    }
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-sky-500) 15%, transparent);
       }
     }
   }
-  lexxy-highlight-dropdown .lexxy-editor__toolbar-dropdown-reset[disabled] {
-    display: none;
+  lexxy-editor td.lexxy-content__table-cell--focus::after, lexxy-editor th.lexxy-content__table-cell--focus::after {
+    box-shadow: 0 0 0 0 transparent, 0 0 0 2px var(--color-sky-500) inset;
   }
-  [overflowing] lexxy-highlight-dropdown {
-    width: fit-content;
+  lexxy-editor table {
+    --lexxy-cell-add-size: 2px;
+    --lexxy-cell-add-color: var(--color-sky-500);
   }
-  [overflowing] lexxy-highlight-dropdown [data-button-group] {
-    flex-wrap: wrap;
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="row"][data-direction="after"]::after, lexxy-editor th.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="row"][data-direction="after"]::after {
+    box-shadow: 0 var(--lexxy-cell-add-size) 0 0 var(--lexxy-cell-add-color), 0 calc(-1 * var(--lexxy-cell-add-size) - 1px) 0 0 var(--lexxy-cell-add-color) inset;
+  }
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="row"][data-direction="before"]::after, lexxy-editor th.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="row"][data-direction="before"]::after {
+    box-shadow: 0 calc(-1 * var(--lexxy-cell-add-size) - 1px) 0 0 var(--lexxy-cell-add-color), 0 var(--lexxy-cell-add-size) 0 0 var(--lexxy-cell-add-color) inset;
+  }
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="column"][data-direction="after"]::after, lexxy-editor th.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="column"][data-direction="after"]::after {
+    box-shadow: var(--lexxy-cell-add-size) 0 0 0 var(--lexxy-cell-add-color), calc(-1 * var(--lexxy-cell-add-size) - 1px) 0 0 0 var(--lexxy-cell-add-color) inset;
+  }
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="column"][data-direction="before"]::after, lexxy-editor th.lexxy-content__table-cell--highlight[data-action="insert"][data-child-type="column"][data-direction="before"]::after {
+    box-shadow: calc(-1 * var(--lexxy-cell-add-size) - 1px) 0 0 0 var(--lexxy-cell-add-color), var(--lexxy-cell-add-size) 0 0 0 var(--lexxy-cell-add-color) inset;
+  }
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="toggle"], lexxy-editor th.lexxy-content__table-cell--highlight[data-action="toggle"], lexxy-editor tr.lexxy-content__table-cell--highlight[data-action="toggle"] th, lexxy-editor tr.lexxy-content__table-cell--highlight[data-action="toggle"] td {
+    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
+    }
+  }
+  lexxy-editor td.lexxy-content__table-cell--highlight[data-action="delete"], lexxy-editor th.lexxy-content__table-cell--highlight[data-action="delete"], lexxy-editor tr.lexxy-content__table-cell--highlight[data-action="delete"] th, lexxy-editor tr.lexxy-content__table-cell--highlight[data-action="delete"] td {
+    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
+    }
+    color: var(--color-red-600);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-red-400);
+    }
   }
-  [overflowing] lexxy-highlight-dropdown [data-button-group] button {
-    --button-size: calc(var(--spacing) * 6);
+  .lexxy-content__table-wrapper {
+    margin-block: calc(var(--spacing) * 4);
+    overflow-x: auto;
   }
-  [overflowing] lexxy-highlight-dropdown [data-button-group] button::after {
+  lexxy-table-tools {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: calc(var(--spacing) * 1);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    color: var(--color-white);
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-y: calc(calc(100% + 4px) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  lexxy-editor .attachment__progress {
+  lexxy-table-tools .lexxy-table-control > .lexxy-table-control__button {
+    width: calc(var(--spacing) * 7);
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  lexxy-table-tools .lexxy-table-control__button > span {
+    display: none;
+  }
+  lexxy-table-tools summary {
+    list-style: none;
+    cursor: pointer;
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    white-space: nowrap;
+  }
+  lexxy-table-tools summary::-webkit-details-marker {
+    display: none;
+  }
+  lexxy-table-tools summary::marker {
+    content: "";
+  }
+  lexxy-table-tools .lexxy-table-control__more-menu {
+    position: relative;
+  }
+  lexxy-table-tools .lexxy-table-control__more-menu-details {
     position: absolute;
+    inset-inline-start: calc(1/2 * 100%);
+    top: 100%;
     z-index: 10;
-    top: calc(1/2 * 100%);
-    left: 5%;
-    height: calc(var(--spacing) * 1);
-    width: 90%;
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    margin-top: calc(var(--spacing) * 1);
+    min-width: max-content;
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
-    overflow: hidden;
-    border-radius: calc(infinity * 1px);
-    background-color: var(--color-stone-200);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 0.5);
+    border-radius: var(--radius-md);
+    padding: calc(var(--spacing) * 1);
+    background-color: var(--color-stone-900);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-stone-700);
     }
   }
-  lexxy-editor .attachment__progress::-webkit-progress-bar {
-    background-color: var(--color-stone-200);
+  lexxy-table-tools .lexxy-table-control__more-menu-details .lexxy-table-control__button {
+    height: auto;
+    width: 100%;
+    justify-content: flex-start;
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1.5);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    white-space: nowrap;
+  }
+  lexxy-table-tools .lexxy-table-control__more-menu-details .lexxy-table-control__button > span {
+    display: inline-block;
+  }
+  lexxy-table-tools .lexxy-table-control__button--delete-table {
+    position: relative;
+  }
+  lexxy-table-tools .lexxy-table-control__button--delete-table:hover {
+    background-color: var(--color-red-600);
+  }
+  lexxy-table-tools .lexxy-table-control__button--delete-table > span {
+    position: absolute;
+    bottom: 100%;
+    left: calc(1/2 * 100%);
+    z-index: 20;
+    margin-bottom: calc(var(--spacing) * 1);
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    display: inline-flex;
+    height: calc(var(--spacing) * 7);
+    align-items: center;
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 2);
+    background-color: var(--color-stone-900);
+    white-space: nowrap;
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-stone-700);
     }
-  }
-  lexxy-editor .attachment__progress::-webkit-progress-value {
-    background-color: var(--color-sky-600);
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  lexxy-editor .attachment__progress::-moz-progress-bar {
-    background-color: var(--color-sky-600);
-  }
-  lexxy-editor .attachment__progress[value="100"] {
+    pointer-events: none;
     opacity: 0%;
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  lexxy-editor .attachment {
-    position: relative;
-    display: inline-block;
-    max-width: 100%;
   }
-  lexxy-editor .attachment--preview {
-    width: 100%;
-    text-align: center;
+  lexxy-table-tools .lexxy-table-control__button--delete-table:hover > span {
+    opacity: 100%;
   }
-  lexxy-editor .attachment--preview img {
-    max-width: 100%;
-    border-radius: 0.25rem;
+  [class*="lexxy-drop-target--"] {
+    position: relative;
   }
-  lexxy-editor .attachment--file {
-    display: inline-flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 2);
-    margin-block: calc(var(--spacing) * 1);
-    padding-inline: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 2);
-    background-color: var(--color-stone-100);
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, #fff 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-      }
-    }
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-stone-200);
-    @media (prefers-color-scheme: dark) {
-      border-color: color-mix(in srgb, #fff 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-      }
-    }
-    border-radius: var(--radius-lg);
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-stone-700);
+  .lexxy-drop-target--gallery-before::before, .lexxy-drop-target--gallery-after::after {
+    content: "";
+    position: absolute;
+    inset-block: calc(var(--spacing) * 0);
+    width: 3px;
+    border-radius: var(--radius-sm);
+    background-color: var(--color-sky-600);
     @media (prefers-color-scheme: dark) {
-      color: var(--color-stone-300);
+      background-color: var(--color-sky-500);
     }
+    pointer-events: none;
   }
-  lexxy-editor .attachment__caption {
-    text-align: center;
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-stone-500);
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-stone-400);
-    }
-    margin-top: calc(var(--spacing) * 1);
+  .lexxy-drop-target--gallery-before::before {
+    inset-inline-start: -4px;
   }
-  lexxy-editor .attachment__toolbar {
-    position: absolute;
-    top: calc(var(--spacing) * 2);
-    right: calc(var(--spacing) * 2);
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 1);
+  .lexxy-drop-target--gallery-after::after {
+    inset-inline-end: -4px;
   }
-  lexxy-editor .attachment__toolbar button {
-    width: calc(var(--spacing) * 6);
-    height: calc(var(--spacing) * 6);
-    border-radius: calc(infinity * 1px);
-    background-color: color-mix(in srgb, #fff 90%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
-    }
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 90%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-stone-800) 90%, transparent);
-      }
-    }
-    color: var(--color-stone-600);
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-stone-400);
-    }
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-white);
-      }
-    }
+  .lexxy-drop-target--block-before::before, .lexxy-drop-target--block-after::after, .lexxy-drop-target--list-before::before, .lexxy-drop-target--list-after::after {
+    content: "";
+    position: absolute;
+    inset-inline: calc(var(--spacing) * 0);
+    height: 3px;
+    border-radius: var(--radius-sm);
+    background-color: var(--color-sky-600);
     @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-stone-800);
-        }
-      }
+      background-color: var(--color-sky-500);
     }
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    pointer-events: none;
   }
-  lexxy-editor [data-trix-mutable] img, lexxy-editor .attachment.selected img {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-ring-color: var(--color-sky-500);
+  .lexxy-drop-target--block-before::before, .lexxy-drop-target--list-before::before {
+    inset-block-start: -2px;
+  }
+  .lexxy-drop-target--block-after::after, .lexxy-drop-target--list-after::after {
+    inset-block-end: -2px;
   }
 }
 @layer components {
@@ -8227,6 +8551,47 @@ dialog.modal {
     border-radius: var(--radius-lg);
     margin-block: calc(var(--spacing) * 4);
   }
+  .lexxy-content .lexxy-content__table-wrapper {
+    margin-block: calc(var(--spacing) * 4);
+    overflow-x: auto;
+  }
+  .lexxy-content table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .lexxy-content th, .lexxy-content td {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-300);
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-stone-600);
+    }
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    text-align: start;
+    vertical-align: top;
+  }
+  .lexxy-content th, .lexxy-content .lexxy-content__table-cell--header {
+    background-color: var(--color-stone-100);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    color: var(--color-stone-950);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+  }
+  .lexxy-content th *:last-child, .lexxy-content td *:last-child {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
   .lexxy-content .attachment {
     margin-block: calc(var(--spacing) * 4);
     display: inline-block;
@@ -8329,6 +8694,135 @@ dialog.modal {
     padding: calc(var(--spacing) * 0);
   }
 }
+@layer utilities {
+  lexxy-editor figure.horizontal-divider {
+    position: relative;
+    margin: calc(var(--spacing) * 0);
+    padding-inline: calc(var(--spacing) * 0);
+    padding-block: calc(var(--spacing) * 3);
+    text-align: center;
+  }
+  lexxy-editor figure.horizontal-divider hr {
+    margin: calc(var(--spacing) * 0);
+    display: inline-block;
+    height: 1px;
+    width: calc(1/5 * 100%);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    padding: calc(var(--spacing) * 0);
+    background-color: var(--color-stone-300);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-600);
+    }
+  }
+  lexxy-node-delete-button {
+    pointer-events: none;
+    position: absolute;
+    z-index: 10;
+    opacity: 0%;
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    inset-block-start: 0.25rem;
+    inset-inline-end: 0.25rem;
+    inset-inline-start: auto;
+  }
+  lexxy-editor figure:hover > lexxy-node-delete-button, lexxy-editor .attachment:hover > lexxy-node-delete-button, lexxy-editor .node--selected > lexxy-node-delete-button, lexxy-editor .node--selected lexxy-node-delete-button {
+    pointer-events: auto;
+    opacity: 100%;
+  }
+  lexxy-editor.prose code::before, lexxy-editor.prose code::after, .lexxy-content code::before, .lexxy-content code::after {
+    content: none;
+  }
+  lexxy-editor code:not([data-language]) {
+    border-radius: 0.25rem;
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+    background-color: var(--color-stone-100);
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in srgb, #fff 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+      }
+    }
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-pink-600);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-pink-400);
+    }
+  }
+  lexxy-editor code[data-language] {
+    position: relative;
+    margin-block: calc(var(--spacing) * 4);
+    display: block;
+    overflow-x: auto;
+    border-radius: var(--radius-lg);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-top: calc(var(--spacing) * 10);
+    padding-bottom: calc(var(--spacing) * 4);
+    background-color: var(--color-stone-100);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-900);
+    }
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+    color: var(--color-stone-900);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-100);
+    }
+    white-space: pre;
+  }
+  lexxy-code-language-picker select {
+    cursor: pointer;
+    appearance: none;
+    background-color: var(--color-white);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-stone-800);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-stone-300);
+    @media (prefers-color-scheme: dark) {
+      border-color: color-mix(in srgb, #fff 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+      }
+    }
+    border-radius: var(--radius-md);
+    color: var(--color-stone-700);
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-stone-200);
+    }
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    padding-block: calc(var(--spacing) * 1);
+    padding-right: calc(var(--spacing) * 6);
+    padding-left: calc(var(--spacing) * 2);
+    margin-top: calc(var(--spacing) * 2);
+    margin-right: calc(var(--spacing) * 2);
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    background-size: 0.7rem;
+  }
+  lexxy-code-language-picker select:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-color: var(--color-sky-600);
+    @media (prefers-color-scheme: dark) {
+      outline-color: var(--color-sky-500);
+    }
+  }
+}
 @layer base {
   *, ::after, ::before, ::backdrop, ::file-selector-button {
     border-color: var(--color-stone-200, currentColor);