mnfst 0.5.194 → 0.5.196

package/lib/manifest.resize.css

@@ -1,4 +1,7 @@
-/* Manifest Resize Handles */
+/* Manifest Resize Handles
+
+   Superseded by x-edit.size (manifest.edit.css) — kept for existing projects.
+   Self-contained: handle geometry lives here, not in a shared snippet. */
 
 @layer base, components, utilities;
 
@@ -7,7 +10,7 @@
     :where([x-resize]) {
         position: relative;
 
-        /* Resize handle area (geometry: styles/snippets/manifest.handles.css) */
+        /* Resize handle area */
         .resize-handle {
             position: absolute;
             display: block;
@@ -39,7 +42,81 @@
             }
         }
 
-        /* Corner cursors (geometry is shared; edit handles use nwse/nesw) */
+        /* Handle geometry — edges span their axis, corners stay square */
+        .resize-handle-top,
+        .resize-handle-bottom {
+            left: 0;
+            width: 100%;
+            height: var(--h);
+            cursor: ns-resize;
+
+            &::before {
+                width: 100%
+            }
+        }
+
+        .resize-handle-left,
+        .resize-handle-right,
+        .resize-handle-start,
+        .resize-handle-end {
+            top: 0;
+            width: var(--h);
+            height: 100%;
+            cursor: ew-resize;
+
+            &::before {
+                height: 100%
+            }
+        }
+
+        .resize-handle-top {
+            top: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-bottom {
+            bottom: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-left,
+        .resize-handle-top-left,
+        .resize-handle-bottom-left {
+            left: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-right,
+        .resize-handle-top-right,
+        .resize-handle-bottom-right {
+            right: calc(var(--h) * -0.5)
+        }
+
+        /* Logical edges — inset-inline-* auto-flips for RTL */
+        .resize-handle-start,
+        .resize-handle-top-start,
+        .resize-handle-bottom-start {
+            inset-inline-start: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-end,
+        .resize-handle-top-end,
+        .resize-handle-bottom-end {
+            inset-inline-end: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-top-left,
+        .resize-handle-top-right,
+        .resize-handle-top-start,
+        .resize-handle-top-end {
+            top: calc(var(--h) * -0.5)
+        }
+
+        .resize-handle-bottom-left,
+        .resize-handle-bottom-right,
+        .resize-handle-bottom-start,
+        .resize-handle-bottom-end {
+            bottom: calc(var(--h) * -0.5)
+        }
+
+        /* Corner cursors */
         .resize-handle-top-left,
         .resize-handle-top-start {
             cursor: nw-resize;
@@ -114,120 +191,4 @@
     [dir=rtl] :where([x-resize]) .resize-handle-bottom-end {
         cursor: sw-resize;
     }
-}
-/* Drag-handle geometry — single source for x-resize and x-edit handles.
-   The build appends this to standalone copies and adds it once to the bundle.
-   Hosts set --h (handle thickness) and keep their own chrome: hairline colour,
-   transition, and corner cursors (resize uses nw/ne/sw/se, edit nwse/nesw). */
-
-@layer base, components, utilities;
-
-@layer utilities {
-
-    /* Horizontal edges */
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top, .resize-handle-bottom, .edit-handle-top, .edit-handle-bottom) {
-        left: 0;
-        width: 100%;
-        height: var(--h);
-        cursor: ns-resize;
-
-        &::before {
-            width: 100%
-        }
-    }
-
-    /* Vertical edges */
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-left, .resize-handle-right, .resize-handle-start, .resize-handle-end, .edit-handle-left, .edit-handle-right, .edit-handle-start, .edit-handle-end) {
-        top: 0;
-        width: var(--h);
-        height: 100%;
-        cursor: ew-resize;
-
-        &::before {
-            height: 100%
-        }
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top, .edit-handle-top) {
-        top: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom, .edit-handle-bottom) {
-        bottom: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-left, .edit-handle-left) {
-        left: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-right, .edit-handle-right) {
-        right: calc(var(--h) * -0.5)
-    }
-
-    /* Logical edges — inset-inline-* auto-flips for RTL */
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-start, .edit-handle-start) {
-        inset-inline-start: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-end, .edit-handle-end) {
-        inset-inline-end: calc(var(--h) * -0.5)
-    }
-
-    /* Corners — square and inset; cursors stay with each host */
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-left, .edit-handle-top-left) {
-        width: var(--h);
-        height: var(--h);
-        top: calc(var(--h) * -0.5);
-        left: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-right, .edit-handle-top-right) {
-        width: var(--h);
-        height: var(--h);
-        top: calc(var(--h) * -0.5);
-        right: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-left, .edit-handle-bottom-left) {
-        width: var(--h);
-        height: var(--h);
-        bottom: calc(var(--h) * -0.5);
-        left: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-right, .edit-handle-bottom-right) {
-        width: var(--h);
-        height: var(--h);
-        bottom: calc(var(--h) * -0.5);
-        right: calc(var(--h) * -0.5)
-    }
-
-    /* Logical corners — inset-inline-* auto-flips for RTL */
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-start, .edit-handle-top-start) {
-        width: var(--h);
-        height: var(--h);
-        top: calc(var(--h) * -0.5);
-        inset-inline-start: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-end, .edit-handle-top-end) {
-        width: var(--h);
-        height: var(--h);
-        top: calc(var(--h) * -0.5);
-        inset-inline-end: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-start, .edit-handle-bottom-start) {
-        width: var(--h);
-        height: var(--h);
-        bottom: calc(var(--h) * -0.5);
-        inset-inline-start: calc(var(--h) * -0.5)
-    }
-
-    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-end, .edit-handle-bottom-end) {
-        width: var(--h);
-        height: var(--h);
-        bottom: calc(var(--h) * -0.5);
-        inset-inline-end: calc(var(--h) * -0.5)
-    }
-}
+}

package/lib/manifest.sidebar.css

@@ -10,13 +10,18 @@
 
 @layer base {
 
+    /* Animates `scale`, not `transform`. With fill mode `both` a transform
+       animation keeps its final value forever, which silently overrides any
+       transform an author put on a popover — so a menu positioned with
+       translate(-50%) simply would not move. The standalone property leaves
+       transform free. */
     @keyframes mnfst-popover-in {
         from {
-            transform: scale(.9)
+            scale: .9
         }
 
         to {
-            transform: none
+            scale: 1
         }
     }
 

package/lib/manifest.text.edit.css

@@ -0,0 +1,204 @@
+/* Manifest Text Edit */
+
+@layer base, components, utilities;
+
+/* Self-contained. The editable area is a field first — it borrows the tokens inputs
+   and textareas use, so it sits in a form without looking bolted on. Controls are
+   styled where they are, not by where they sit, because they can be anywhere. */
+
+@layer components {
+
+    :where([data-text-edit]) {
+        min-height: var(--text-edit-min-height, 8rem);
+        max-height: var(--text-edit-max-height, none);
+        overflow-y: auto;
+        padding: var(--text-edit-padding, 0.75rem);
+        background: var(--text-edit-background, var(--color-surface-1));
+        border: 1px solid var(--color-line);
+        border-radius: var(--radius);
+        outline: none;
+
+        /* Page-level styling — set by .page controls, read back by $text.page.
+           Presentation, so it lives here rather than inside the stored markup. */
+        font-family: var(--text-edit-font, inherit);
+        font-size: var(--text-edit-size, inherit);
+        line-height: var(--text-edit-leading, inherit);
+        text-align: var(--text-edit-align, start);
+        color: var(--text-edit-color, inherit);
+
+        &:focus {
+            border-color: var(--color-content-subtle);
+        }
+
+        /* Flagged from script: :empty never matches the <br> a contenteditable
+           keeps, and the tag holding it is not predictable after a wipe. */
+        &[data-text-edit-empty]::before {
+            content: attr(placeholder);
+            color: var(--color-content-subtle);
+            pointer-events: none;
+        }
+    }
+
+    /* ---- Controls ----
+       A control is marked wherever it lives, so a toolbar is optional markup and
+       never a requirement. The reset already dims [aria-disabled=true]. */
+    :where([data-text-edit-control]) {
+        &[data-text-edit-active] {
+            background: color-mix(in oklch, var(--color-content-stark) 10%, transparent);
+            color: var(--color-content-stark);
+        }
+
+        & > svg {
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+
+    :where(button[data-text-edit-control]) {
+        padding: 0.35rem;
+        line-height: 0;
+    }
+
+    /* ---- Editable content ----
+       The editor authors real block elements, so style them as elements. Deliberately
+       lighter than the .prose class, which sets a reading measure this field can't use. */
+    :where([data-text-edit]) {
+
+        & > * + * {
+            margin-block-start: 0.75em;
+        }
+
+        & :where(h1, h2, h3, h4, h5, h6) {
+            font-weight: 600;
+            line-height: 1.25;
+        }
+
+        & h1 { font-size: 1.6em }
+        & h2 { font-size: 1.35em }
+        & h3 { font-size: 1.15em }
+
+        & :where(ul, ol) {
+            padding-inline-start: 1.5em;
+        }
+
+        & li {
+            list-style: revert;
+        }
+
+        & blockquote {
+            padding-inline-start: 0.85em;
+            border-inline-start: 2px solid var(--color-line);
+            color: var(--color-content-neutral);
+        }
+
+        & code {
+            padding: 0.1em 0.3em;
+            border-radius: 4px;
+            font-size: 0.9em;
+            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);
+        }
+
+        & pre {
+            padding: 0.75em;
+            border-radius: var(--radius);
+            overflow-x: auto;
+            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);
+
+            & code {
+                padding: 0;
+                background: none;
+            }
+        }
+
+        & a {
+            color: var(--color-brand-content);
+            text-decoration: underline;
+        }
+
+        & hr {
+            margin-block: 1em;
+        }
+
+        & img {
+            max-width: 100%;
+        }
+
+        & table {
+            width: 100%;
+            table-layout: fixed;
+
+            & :where(td, th) {
+                padding: 0.35em 0.5em;
+                border: 1px solid var(--color-line);
+                vertical-align: top;
+            }
+
+            & th {
+                font-weight: 600;
+                text-align: start;
+                background: var(--color-surface-2);
+            }
+        }
+
+        /* A block selection across cells. The browser can only highlight text, so an
+           empty cell shows nothing — this is what makes a spreadsheet-style
+           selection visible. */
+        & :where(td, th)[data-text-edit-cell] {
+            background: color-mix(in oklch, var(--color-brand-content) 18%, transparent);
+        }
+
+        /* Borders read as grabbable only when the pointer is on one */
+        &[data-text-edit-border="x"] { cursor: col-resize }
+        &[data-text-edit-border="y"] { cursor: row-resize }
+        &[data-text-edit-resizing] { user-select: none }
+        &[data-text-edit-resizing="x"] { cursor: col-resize }
+        &[data-text-edit-resizing="y"] { cursor: row-resize }
+
+        /* Task lists — the checkbox replaces the marker */
+        & :where(ul[data-checklist]) {
+            padding-inline-start: 0.25em;
+            list-style: none;
+
+            & li {
+                display: flex;
+                align-items: baseline;
+                gap: 0.5em;
+                list-style: none;
+            }
+        }
+
+        & :where(dt) {
+            font-weight: 600;
+        }
+
+        & :where(dd) {
+            margin-inline-start: 1.5em;
+        }
+
+        & :where(kbd) {
+            padding: 0.1em 0.35em;
+            border: 1px solid var(--color-line);
+            border-radius: 4px;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            font-size: 0.85em;
+        }
+
+        & :where(mark) {
+            background: color-mix(in oklch, var(--color-brand-content) 25%, transparent);
+            color: inherit;
+        }
+
+        & :where(small) {
+            font-size: 0.8em;
+        }
+
+        & :where(figcaption) {
+            font-size: 0.8em;
+            color: var(--color-content-neutral);
+        }
+
+        & :where(abbr, dfn) {
+            text-decoration: underline dotted;
+        }
+    }
+}