Block-based editing: selection, drag-and-drop, and actions menu

.gitignore

@@ -25,3 +25,4 @@
 /docs/.jekyll-cache/
 /docs/.jekyll-metadata
 /docs/Gemfile.lock
+.yarn/install-state.gz

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

app/assets/stylesheets/lexxy-content.css

@@ -101,15 +101,15 @@
 
   code, pre {
     background-color: var(--lexxy-color-ink-lightest);
-    border-radius: var(--lexxy-radius);
+    border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
     color: var(--lexxy-color-ink);
     font-family: var(--lexxy-font-mono);
     font-size: 0.9em;
     padding: 0.25ch 0.5ch;
 
     &:is(pre),
     &[data-language] {
-      border-radius: var(--lexxy-radius);
+      border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
       display: block;
       hyphens: none;
       margin-block: 0 var(--lexxy-content-margin);
@@ -123,21 +123,84 @@
   }
 
   ol, ul:not(.lexxy-prompt-menu) {
-    margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
-    padding: 0;
+    margin-inline-start: 0;
+    padding-inline-start: 2em;
+    counter-reset: mixed-list;
+    list-style-type: none;
   }
 
-  ul {
+  li[data-list-item-type="number"],
+  li[data-list-item-type="bullet"] {
+    position: relative;
+    line-height: 1.75;
+
+    &::marker {
+      content: none;
+    }
+
+    &::before {
+      position: absolute;
+      right: 100%;
+      width: 2em;
+      display: inline-block;
+      text-align: center;
+    }
+  }
+
+  li[data-list-item-type="number"]:not(.lexxy-nested-listitem) {
+    counter-increment: mixed-list;
+
+    &::before {
+      content: counter(mixed-list) ".";
+    }
+  }
+
+  li[data-list-item-type="bullet"] {
+    &::before {
+      content: "";
+      transform: none;
+      height: 1lh;
+    }
+  }
+
+  li[data-bullet-depth="1"]::before {
+    background: radial-gradient(circle, currentColor 3px, transparent 3px) center / 6px 6px no-repeat;
+  }
+
+  li[data-bullet-depth="2"]::before {
+    background: radial-gradient(circle, transparent 1.5px, currentColor 1.5px, currentColor 3px, transparent 3px) center / 6px 6px no-repeat;
+  }
+
+  li[data-bullet-depth="3"]::before {
+    background: linear-gradient(currentColor, currentColor) center / 6px 6px no-repeat;
+  }
+
+  /* Fallback for lists without data-list-item-type (e.g. external content) */
+  ul:not(:has([data-list-item-type])) {
     list-style-type: disc;
   }
 
-  ol {
+  ol:not(:has([data-list-item-type])) {
     list-style-type: decimal;
   }
 
+  /* Tighter indent for nested lists */
+  .lexxy-nested-listitem ol,
+  .lexxy-nested-listitem ul:not(.lexxy-prompt-menu) {
+    padding-inline-start: 2em;
+  }
+
   li.lexxy-nested-listitem {
     list-style-type: none;
 
+    &::marker {
+      content: none;
+    }
+
+    &::before {
+      content: none;
+    }
+
     ol, ul {
       margin-block-end: 0;
     }
@@ -294,7 +357,7 @@
 
     block-size: auto;
     box-sizing: border-box;
-    border-radius: var(--lexxy-radius);
+    border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
     display: block;
     inline-size: fit-content;
     margin-inline: auto;
@@ -313,27 +376,27 @@
   }
 
   .attachment__icon {
-    aspect-ratio: 4/5;
-    background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
-    block-size: 3lh;
-    border: 1px solid var(--lexxy-attachment-icon-color);
-    border-block-start-width: 1.5ch;
-    border-radius: var(--lexxy-radius);
+    background-color: var(--lexxy-attachment-icon-bg, var(--lexxy-color-ink-lightest, #f3f4f6));
+    block-size: 2.5rem;
+    inline-size: 2.5rem;
+    border: 2px solid var(--lexxy-attachment-icon-border, var(--lexxy-color-ink-lighter, #d1d5db));
+    border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
     box-sizing: border-box;
-    color: var(--lexxy-attachment-icon-color);
+    color: var(--lexxy-attachment-icon-text, var(--lexxy-color-ink-medium, #6b7280));
     display: grid;
-    font-size: var(--lexxy-text-small);
-    font-weight: bold;
-    inline-size: auto;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
     overflow: hidden;
     place-content: center;
     text-transform: uppercase;
     white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .attachment--preview {
     img, video {
-      border-radius: var(--lexxy-radius);
+      border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
       block-size: auto;
       display: block;
       margin-inline: auto;
@@ -348,25 +411,76 @@
     .attachment__caption {
       padding-block-end: 0.5ch;
     }
+
+    .attachment__card-view {
+      display: none;
+    }
+
+    &.attachment--collapsed {
+      .attachment__preview-view {
+        display: none;
+      }
+
+      .attachment__card-view {
+        align-items: center;
+        border: 1px solid var(--lexxy-color-ink-lighter, #e5e7eb);
+        border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
+        display: flex;
+        gap: 0.75rem;
+        inline-size: 100%;
+        padding: 0.75rem;
+      }
+    }
   }
 
   .attachment--file {
-    --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);
-
     align-items: center;
+    border: 1px solid var(--lexxy-color-ink-lighter, #e5e7eb);
+    border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
     display: flex;
-    flex-wrap: wrap;
-    inline-size: auto;
+    gap: 0.75rem;
+    inline-size: 100%;
+    padding: 0.75rem;
 
     .attachment__caption {
-      display: grid;
+      display: flex;
+      flex-direction: column;
       flex: 1;
+      gap: 0.125rem;
+      min-width: 0;
       text-align: start;
     }
 
     .attachment__name {
       color: var(--lexxy-color-ink);
-      font-weight: bold;
+      font-size: 0.875rem;
+      font-weight: 600;
+      line-height: 1.3;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .attachment__meta {
+      display: flex;
+      align-items: baseline;
+      gap: 0.5rem;
+    }
+
+    .attachment__caption-text {
+      color: var(--lexxy-color-text-subtle, #9ca3af);
+      font-size: 0.8125rem;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .attachment__subtitle {
+      color: var(--lexxy-color-text-subtle, #9ca3af);
+      font-size: 0.75rem;
+      flex-shrink: 0;
     }
   }
 
@@ -453,7 +567,7 @@
 
     align-items: center;
     background: var(--lexxy-attachment-bg-color);
-    border-radius: var(--lexxy-radius);
+    border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap, 2px));
     color: var(--lexxy-attachment-text-color);
     display: inline-flex;
     gap: 0.25ch;