mnfst 0.5.166 → 0.5.167

package/lib/manifest.css

@@ -945,6 +945,217 @@
     }
 }
 
+/* Manifest Chat */
+
+@layer utilities {
+
+    :where(.chat-wrapper) {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        width: 100%;
+        height: 100%;
+        box-shadow: var(--shadow);
+        overflow: hidden;
+
+        /* Chat log scroll container. column-reverse pins the view to the
+           bottom natively: new messages and a growing composer never hide
+           the latest message, and reading history isn't yanked on updates. */
+        :where([role="log"]) {
+            display: flex;
+            flex-direction: column-reverse;
+            flex: 1;
+            font-size: 0.875rem;
+            overflow-y: auto;
+
+            /* Message column */
+            > :where(div) {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-end;
+                gap: 2rem;
+                min-height: 100%;
+                width: calc(var(--spacing-content-width, 74rem) - 4rem);
+                max-width: 100%;
+                margin-inline-start: auto;
+                margin-inline-end: auto;
+                padding-inline-start: 1rem;
+                padding-inline-end: 1rem;
+                padding-block-start: 1.5rem;
+                padding-block-end: 5rem;
+            }
+
+            /* Messages */
+            :where(div div) {
+
+                /* Markdown spacing */
+                :where(p) {
+                    margin-block: 0.5rem;
+                }
+
+                :where(p:first-child) {
+                    margin-block-start: 0;
+                }
+
+                :where(p:last-child) {
+                    margin-block-end: 0;
+                }
+            }
+
+            /* Own messages */
+            :where([data-own]) {
+                width: fit-content;
+                max-width: calc(var(--spacing-content-width, 74rem) - 10rem);
+                margin-inline-start: auto;
+                padding-block: 0.5rem;
+                padding-inline: 0.75rem;
+                background: color-mix(in oklch, var(--color-surface-2) 50%, transparent);
+                border-radius: var(--radius);
+            }
+
+            /* Attachments */
+            :where(img, video) {
+                display: block;
+                max-width: 20rem;
+                max-height: 15rem;
+                margin-block: 0.5rem;
+                border-radius: var(--radius);
+            }
+
+            :where(audio) {
+                display: block;
+                width: 18rem;
+                max-width: 100%;
+                margin-block: 0.5rem;
+            }
+
+            :where(a[download]) {
+                display: inline-flex;
+                align-items: center;
+                gap: 0.4rem;
+                margin-block: 0.5rem;
+                padding-block: 0.35rem;
+                padding-inline: 0.6rem;
+                background: var(--color-surface-2);
+                border-radius: var(--radius);
+            }
+        }
+
+        /* Chat input */
+        :where(form) {
+            position: relative;
+            width: var(--spacing-content-width, 74rem);
+            max-width: 100%;
+            margin-inline-start: auto;
+            margin-inline-end: auto;
+
+            :where(textarea) {
+                padding-inline-end: 2.5rem;
+                field-sizing: content;
+                resize: none;
+            }
+
+            &:has(button[data-action="attach"]) :where(textarea) {
+                padding-inline-start: 2.5rem;
+            }
+
+            /* Submit button */
+            :where(button[type="submit"]) {
+                position: absolute;
+                bottom: var(--spacing-field-padding, 0.625rem);
+                inset-inline-end: calc(var(--spacing-field-padding, 0.625rem) * 1.3);
+            }
+
+            /* Toolbar buttons (data-action) — attach, formatting, voice, … */
+            :where(button[data-action="attach"]) {
+                position: absolute;
+                bottom: var(--spacing-field-padding, 0.625rem);
+                inset-inline-start: calc(var(--spacing-field-padding, 0.625rem) * 1.3);
+            }
+
+            /* Composer variant — the form itself is the field (.textarea):
+               [ attachment thumbnails               ]
+               [ attach | growing textarea |    send ] */
+            &:where(.textarea) {
+                display: grid;
+                grid-template-columns: auto 1fr auto;
+                align-items: end;
+                gap: 0.25rem;
+                padding: 0.375rem;
+
+                /* Buttons sit in-flow at the row's bottom corners */
+                :where(button[type="submit"], button[data-action]) {
+                    position: static;
+                }
+
+                /* The inner textarea is a bare well inside the field */
+                :where(textarea) {
+                    padding-inline: 0.25rem;
+                    padding-block: 0.45rem;
+
+                    &,
+                    &:hover,
+                    &:active,
+                    &:focus-visible {
+                        background: transparent;
+                    }
+                }
+
+                /* Attachment thumbnails — removable, X-scrollable */
+                :where(menu) {
+                    grid-column: 1 / -1;
+                    display: flex;
+                    gap: 0.5rem;
+                    margin: 0;
+                    padding: 0.375rem 0.25rem 0.125rem;
+                    list-style: none;
+                    overflow-x: auto;
+
+                    :where(li) {
+                        position: relative;
+                        flex: 0 0 auto;
+                    }
+
+                    :where(img) {
+                        display: block;
+                        width: 3.5rem;
+                        height: 3.5rem;
+                        object-fit: cover;
+                        border-radius: calc(var(--radius, 0.5rem) * 0.75);
+                    }
+
+                    /* Non-image attachments — file chip */
+                    :where(li > span) {
+                        display: flex;
+                        align-items: center;
+                        gap: 0.3rem;
+                        height: 3.5rem;
+                        padding-inline: 0.6rem;
+                        font-size: 0.75rem;
+                        white-space: nowrap;
+                        background: var(--color-surface-2);
+                        border-radius: calc(var(--radius, 0.5rem) * 0.75);
+                    }
+
+                    /* Remove button — revealed on hover/focus */
+                    :where(button) {
+                        position: absolute;
+                        inset-block-start: -0.35rem;
+                        inset-inline-end: -0.35rem;
+                        opacity: 0;
+                        transition: var(--transition, all .05s ease-in-out);
+                    }
+
+                    :where(li:hover, li:focus-within) :where(button) {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+
+}
+
 /* Manifest Checkboxes */
 
 @layer components {
@@ -1582,16 +1793,25 @@
         gap: var(--spacing, 0.25rem);
         max-width: 100%;
         height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
+        margin: 0;
+        padding: 0;
         padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
         font-size: 0.875rem;
+        line-height: normal;
         color: var(--color-content-stark, oklch(43.9% 0 0));
         background-color: var(--color-popover-surface, oklch(100% 0 0));
+        border: 0;
         border-radius: calc(var(--radius, 0.5rem) * 0.7);
         overflow: hidden;
         user-select: none;
 
         /* Label */
         &>span {
+            min-width: 0;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font: inherit;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap
@@ -1602,15 +1822,23 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
+            box-sizing: border-box;
+            flex: none;
+            width: auto !important;
             min-width: 0;
+            max-width: none;
             height: 100%;
+            min-height: 0;
             aspect-ratio: 1 / 1;
+            margin: 0;
             padding: 0;
+            border: 0;
+            border-radius: 0;
             font-size: 1em;
             line-height: 1;
             color: var(--color-content-neutral, oklch(43.9% 0 0));
             background: transparent;
-            border-radius: 0;
+            box-shadow: none;
             cursor: pointer;
 
             &:hover {
@@ -3107,7 +3335,7 @@
 
 @layer components {
 
-    :where(input:not([type=range], [type=color]), textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
+    :where(input:not([type=range], [type=color]), textarea, .textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
         width: 100%;
         max-width: 100%;
         color: var(--color-field-inverse, oklch(43.9% 0 0));
@@ -3226,7 +3454,7 @@
     }
 
     /* Textarea-specific styles */
-    :where(textarea):not(.unstyle) {
+    :where(textarea, .textarea):not(.unstyle) {
         display: block;
         height: auto;
         padding: var(--spacing-field-padding, 0.625rem) calc(var(--spacing-field-padding, 0.625rem) * 1.3)

package/lib/manifest.input.css

@@ -2,7 +2,7 @@
 
 @layer components {
 
-    :where(input:not([type=range], [type=color]), textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
+    :where(input:not([type=range], [type=color]), textarea, .textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
         width: 100%;
         max-width: 100%;
         color: var(--color-field-inverse, oklch(43.9% 0 0));
@@ -121,7 +121,7 @@
     }
 
     /* Textarea-specific styles */
-    :where(textarea):not(.unstyle) {
+    :where(textarea, .textarea):not(.unstyle) {
         display: block;
         height: auto;
         padding: var(--spacing-field-padding, 0.625rem) calc(var(--spacing-field-padding, 0.625rem) * 1.3)

package/lib/manifest.integrity.json

@@ -1,9 +1,9 @@
 {
-  "manifest.appwrite.auth.js": "sha384-+4T3vdzf2NsDrSpatkIqg7cO2HUnY3tNNwSgfyXCCU0NZ7K9eqX2dzhDJIlochlz",
+  "manifest.appwrite.auth.js": "sha384-IFEn8+AMicdf5DkS+ytkPls8CpW2kDelRWrL3M61cu1HqaTJvHmABQUPgIMJC/tc",
   "manifest.appwrite.data.js": "sha384-KFKVo5TQESLJB7wgk+C8Zb/sAl43QAMdioWW3tQRWYq5umfdpGCZ5Hld9y9f6/Np",
   "manifest.appwrite.presences.js": "sha384-JyVDWFT69b7Svq8J8p9tNWe2v9PZNQBY5UyhtOl1vnuHFAX0CRQ3MA9SiKq5wzNh",
   "manifest.charts.js": "sha384-wTQlB3hJ9V9lmisCgm8l6YkpJV+nA4+Vci3dI0x1nBtWnS9TFr+eXaJelP7AusyD",
-  "manifest.chat.js": "sha384-lBsqJdnSC4Gclt+te4Yh5V1LXZSGn3CCeCKPwtOk5gp6UlCROigBepvaAY3NKNZp",
+  "manifest.chat.js": "sha384-3+eva9YYz5DrdS3DeRGw9oXH/CreuYX+ZHHtYP25vmnYDHiEpFf9nEGLvwSHBXjz",
   "manifest.code.js": "sha384-G3MNfvQRWWY+gm4SGGrSsgQbDeil9MP+ON2DTk6Rcq9Nsex8woHMDt5EJHrFH0Nj",
   "manifest.color.js": "sha384-6Rv3LxyTcZNjrhtayQfqRdCx0uSZ4BiEbgEI98I62eTvp8Aw7LBIoNJ0Je1oktwL",
   "manifest.colorpicker.js": "sha384-N5ezEwgKrDodV4YdURxhdyZKmg1n/QhqvmAC4SEG03mw1pEAZAA8Gphp+NLAOxts",