alinea 2.0.0-preview.0 → 2.0.0-preview.2

package/dist/field/richtext/RichTextToolbar.d.ts

@@ -1,15 +1,18 @@
 import type { Editor } from '@tiptap/core';
-import type { PickTextLinkFunc } from './PickTextLink.js';
+import type { PickRichTextImageFunc, PickTextLinkFunc } from './PickTextLink.js';
 import { type ToolbarConfig } from './Toolbar.js';
 import type { PickTextAnchorFunc } from './PickTextAnchor.js';
 export interface RichTextToolbarProps {
     editor: Editor;
+    enableImages?: boolean;
     enableTables?: boolean;
     ownerId: string;
+    pickImage?: PickRichTextImageFunc;
     pickLink?: PickTextLinkFunc;
     pickAnchor?: PickTextAnchorFunc;
     getEntryAnchors: () => Array<string>;
     toolbar?: ToolbarConfig;
     onFocusChange: (focused: boolean, nextTarget?: EventTarget | null) => void;
 }
-export declare function RichTextToolbar({ editor, enableTables, ownerId, pickLink, pickAnchor, getEntryAnchors, toolbar, onFocusChange }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function RichTextToolbar({ editor, enableImages, enableTables, ownerId, pickImage, pickLink, pickAnchor, getEntryAnchors, toolbar, onFocusChange }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function createImageHandler(editor: Editor, pickImage: PickRichTextImageFunc | undefined, exec: () => ReturnType<Editor['chain']>): () => void;

package/dist/field/richtext/RichTextToolbar.js

@@ -34,8 +34,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var styles = dist_default(RichTextToolbar_default);
 function RichTextToolbar({
   editor,
+  enableImages,
   enableTables,
   ownerId,
+  pickImage,
   pickLink,
   pickAnchor,
   getEntryAnchors,
@@ -43,17 +45,20 @@ function RichTextToolbar({
   onFocusChange
 }) {
   const config = useMemo(
-    () => toolbar ?? defaultToolbar(Boolean(enableTables)),
-    [enableTables, toolbar]
+    () => toolbar ?? defaultToolbar({ enableImages, enableTables }),
+    [enableImages, enableTables, toolbar]
   );
   const context = useMemo(() => {
     const exec = () => editor.chain().focus(null, { scrollIntoView: false });
     return {
       editor,
+      enableImages,
       enableTables,
       exec,
       focusToggle: (target) => onFocusChange(Boolean(target)),
+      pickImage: pickImage ?? emptyPicker,
       pickLink: pickLink ?? emptyPicker,
+      handleImage: createImageHandler(editor, pickImage, exec),
       handleLink: createLinkHandler(editor, pickLink, exec),
       handleAnchor: pickAnchor ? createAnchorHandler(editor, pickAnchor, getEntryAnchors, exec) : () => void 0,
       toolbar: config
@@ -61,10 +66,12 @@ function RichTextToolbar({
   }, [
     config,
     editor,
+    enableImages,
     enableTables,
     getEntryAnchors,
     onFocusChange,
     pickAnchor,
+    pickImage,
     pickLink
   ]);
   return /* @__PURE__ */ jsx(
@@ -87,6 +94,33 @@ function RichTextToolbar({
     }
   );
 }
+function createImageHandler(editor, pickImage, exec) {
+  return function handleImage() {
+    if (!pickImage) return;
+    const existing = attributesToReference(editor.getAttributes("image"));
+    void pickImage({ link: existing }).then((picked) => {
+      if (picked === void 0) return;
+      if (!picked.link) {
+        if (editor.isActive("image")) exec().deleteSelection().run();
+        return;
+      }
+      const link = picked.link;
+      if (link._type !== "image" || !("_entry" in link)) return;
+      const attributes = {
+        alt: picked.alt ?? "",
+        height: null,
+        src: picked.src ?? "",
+        width: null,
+        _id: link._id,
+        _entry: link._entry,
+        _link: "image"
+      };
+      if (editor.isActive("image"))
+        exec().updateAttributes("image", attributes).run();
+      else exec().insertContent({ type: "image", attrs: attributes }).run();
+    }).catch(console.error);
+  };
+}
 function ToolbarItems({ config, context, menu, ownerId }) {
   return entries(config).flatMap(([name, entry], index) => {
     const separator = index === 0 ? [] : [
@@ -229,5 +263,6 @@ async function emptyPicker() {
   return void 0;
 }
 export {
-  RichTextToolbar
+  RichTextToolbar,
+  createImageHandler
 };

package/dist/field/richtext/Toolbar.d.ts

@@ -1,6 +1,7 @@
 import type { Editor } from '@tiptap/react';
 import type { ComponentType, ReactElement, ReactNode } from 'react';
 import type { PickTextLinkFunc } from './PickTextLink.js';
+import type { PickRichTextImageFunc } from './PickTextLink.js';
 export interface RichTextCommand {
     (): ReturnType<Editor['chain']>;
 }
@@ -27,9 +28,12 @@ export interface ToolbarConfig {
 export interface RichTextToolbarContext {
     editor: Editor;
     focusToggle: (target: EventTarget | null) => void;
+    pickImage: PickRichTextImageFunc;
     pickLink: PickTextLinkFunc;
+    enableImages?: boolean;
     enableTables?: boolean;
     exec: RichTextCommand;
+    handleImage: () => void;
     handleLink: () => void;
     handleAnchor: () => void;
     toolbar: ToolbarConfig;
@@ -179,6 +183,16 @@ export declare const links: {
         };
     };
 };
+export declare const images: {
+    group: {
+        image: {
+            icon: () => import("react").JSX.Element;
+            title: string;
+            active: ({ editor }: RichTextToolbarContext) => boolean;
+            onSelect: ({ handleImage }: RichTextToolbarContext) => void;
+        };
+    };
+};
 export declare const anchors: {
     group: {
         anchor: {
@@ -200,5 +214,9 @@ export declare const inserts: {
     title: string;
     onSelect: ({ exec }: RichTextToolbarContext) => boolean;
 };
-export declare function defaultToolbar(enableTables: boolean): ToolbarConfig;
+export interface DefaultToolbarOptions {
+    enableImages?: boolean;
+    enableTables?: boolean;
+}
+export declare function defaultToolbar({ enableImages, enableTables }?: DefaultToolbarOptions): ToolbarConfig;
 export {};

package/dist/field/richtext/Toolbar.js

@@ -13,6 +13,7 @@ import {
   IcRoundFormatListBulleted,
   IcRoundFormatListNumbered,
   IcRoundHorizontalRule,
+  IcRoundImage,
   IcRoundLink,
   IcRoundQuote,
   IcRoundSubscript,
@@ -285,6 +286,16 @@ var links = {
     }
   }
 };
+var images = {
+  group: {
+    image: {
+      icon: () => /* @__PURE__ */ jsx(IcRoundImage, {}),
+      title: "Image",
+      active: ({ editor }) => editor.isActive("image"),
+      onSelect: ({ handleImage }) => handleImage()
+    }
+  }
+};
 var anchors = {
   group: {
     anchor: {
@@ -306,26 +317,19 @@ var inserts = {
   title: "Horizontal rule",
   onSelect: ({ exec }) => exec().setHorizontalRule().run()
 };
-function defaultToolbar(enableTables) {
-  if (!enableTables)
-    return {
-      headings,
-      formatting,
-      alignment,
-      lists,
-      links,
-      anchors,
-      quotes,
-      inserts
-    };
+function defaultToolbar({
+  enableImages = false,
+  enableTables = false
+} = {}) {
   return {
     headings,
-    tables,
+    ...enableTables ? { tables } : {},
     formatting,
     alignment,
     lists,
     links,
     anchors,
+    ...enableImages ? { images } : {},
     quotes,
     inserts
   };
@@ -336,6 +340,7 @@ export {
   defaultToolbar,
   formatting,
   headings,
+  images,
   inserts,
   links,
   lists,

package/dist/field/richtext/extensions/Anchor.js

@@ -2,7 +2,7 @@ import {
   Mark,
   getMarkRange,
   mergeAttributes
-} from "../../../chunks/chunk-TL7ZW6BX.js";
+} from "../../../chunks/chunk-A3XXZBOQ.js";
 import "../../../chunks/chunk-CQ52GEHY.js";
 
 // src/field/richtext/extensions/Anchor.ts

package/dist/field/richtext/extensions/Link.js

@@ -1,7 +1,7 @@
 import {
   Mark,
   mergeAttributes
-} from "../../../chunks/chunk-TL7ZW6BX.js";
+} from "../../../chunks/chunk-A3XXZBOQ.js";
 import "../../../chunks/chunk-CQ52GEHY.js";
 
 // src/field/richtext/extensions/Link.ts

package/dist/field/richtext/extensions/Small.js

@@ -1,7 +1,7 @@
 import {
   Mark,
   mergeAttributes
-} from "../../../chunks/chunk-TL7ZW6BX.js";
+} from "../../../chunks/chunk-A3XXZBOQ.js";
 import "../../../chunks/chunk-CQ52GEHY.js";
 
 // src/field/richtext/extensions/Small.ts

package/dist/field/select/SelectField.view.js

@@ -1,9 +1,9 @@
 import "../../chunks/chunk-NUFRM6SI.js";
 import {
   $232f8dea1b0a4f2f$export$762f73dccccd255d
-} from "../../chunks/chunk-JFROOUG6.js";
-import "../../chunks/chunk-SJBZFMQ2.js";
+} from "../../chunks/chunk-NIVGVRDS.js";
 import "../../chunks/chunk-IYAQC63Y.js";
+import "../../chunks/chunk-SJBZFMQ2.js";
 import "../../chunks/chunk-AC4U3IMS.js";
 import "../../chunks/chunk-CQ52GEHY.js";
 
@@ -42,10 +42,11 @@ function SelectFieldView({ field }) {
       isDisabled: options.readOnly,
       isRequired: options.required,
       items,
-      label: options.label,
+      "aria-label": options.inline ? options.label : void 0,
+      label: options.inline ? void 0 : options.label,
       shared: options.shared,
       onSelectionChange: handleSelectionChange,
-      placeholder: options.placeholder,
+      placeholder: options.placeholder ?? (options.inline ? options.label : void 0),
       selectedKey: value,
       children: (item) => /* @__PURE__ */ jsx(SelectItem, { id: item.id, children: item.label })
     }
@@ -87,11 +88,12 @@ function MultipleSelectFieldView({
       isDisabled: options.readOnly,
       isRequired: options.required,
       items,
-      label: options.label,
+      "aria-label": options.inline ? options.label : void 0,
+      label: options.inline ? void 0 : options.label,
       shared: options.shared,
       onItemCleared: handleItemCleared,
       onItemInserted: handleItemInserted,
-      placeholder: options.placeholder,
+      placeholder: options.placeholder ?? (options.inline ? options.label : void 0),
       selectedKeys: value
     },
     value.join("\0")

package/dist/index.css

@@ -1310,9 +1310,11 @@
   display: flex;
 }
 .alinea-LabelTitle {
-  flex-shrink: 0;
+  flex-wrap: wrap;
   align-items: center;
   gap: 4px;
+  min-width: 0;
+  max-width: 100%;
   display: flex;
 }
 .alinea-LabelIcon {
@@ -1347,6 +1349,7 @@
   font-size: var(--alinea-font-size-base);
   white-space: normal;
   word-wrap: break-word;
+  overflow-wrap: anywhere;
   font-style: italic;
   font-weight: 400;
   line-height: 1.1;
@@ -2187,8 +2190,10 @@
     }
     & .alinea-NumberField-buttons {
       border-left: 1px solid var(--alinea-border);
+      border-radius: 0 7px 7px 0;
       flex-direction: column;
       display: flex;
+      overflow: hidden;
       & .alinea-NumberField-button {
         width: 22px;
         height: 16px;
@@ -2203,10 +2208,10 @@
         padding: 4px;
         display: flex;
         &[data-slot=increment] {
-          border-top-right-radius: 4px;
+          border-top-right-radius: 7px;
         }
         &[data-slot=decrement] {
-          border-bottom-right-radius: 4px;
+          border-bottom-right-radius: 7px;
         }
         &:hover {
           background-color: var(--alinea-muted-hover);
@@ -3968,11 +3973,6 @@
     margin: 0;
   }
 }
-@media (width <= 768px) {
-  .alinea-DashboardLayout-sidebar.alinea-DashboardLayout-sidebar {
-    display: none;
-  }
-}
 
 /* src/dashboard/app/editor/FileEditor.module.css */
 .alinea-FileEditor-surface {
@@ -4017,7 +4017,7 @@
   padding: 12px;
 }
 .alinea-FileEditor-metadata-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px 40px;
   margin: 0;
   display: grid;
@@ -4044,7 +4044,7 @@
   margin: 0;
   font-size: 13px;
   line-height: 1.35;
-  &:hover {
+  &.alinea-is-link:hover {
     text-decoration: underline;
   }
 }
@@ -6028,6 +6028,20 @@
   }
 }
 
+/* src/dashboard/app/SidebarLayout.module.css */
+.alinea-SidebarLayout {
+  --focus-border: var(--alinea-border-accent);
+  --separator-border: var(--alinea-border);
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+}
+.alinea-SidebarLayout-content {
+  min-width: 0;
+  height: 100%;
+  display: flex;
+}
+
 /* src/dashboard/app/SidebarTree.module.css */
 .alinea-SidebarTree-tree {
   flex-direction: column;
@@ -6356,7 +6370,7 @@
 .alinea-DashboardModalDialog {
   background: var(--alinea-bg);
   flex-direction: column;
-  gap: 16px;
+  gap: 24px;
   height: 100%;
   padding: 0;
   display: flex;
@@ -6381,10 +6395,11 @@
   color: #fff;
 }
 .alinea-DashboardModalDialog-header {
+  border-bottom: 1px solid var(--alinea-border);
   justify-content: space-between;
   align-items: center;
   gap: 16px;
-  padding: 8px 16px;
+  padding: 12px 16px;
   display: flex;
 }
 .alinea-DashboardModalCloseButton {
@@ -6392,10 +6407,11 @@
   margin-left: 12px;
 }
 .alinea-DashboardModalFooter {
+  border-top: 1px solid var(--alinea-border);
   justify-content: space-between;
   align-items: center;
   gap: 8px;
-  padding: 8px 16px;
+  padding: 12px 16px;
   display: flex;
 }
 .alinea-DashboardModalContent {
@@ -6493,7 +6509,7 @@
 /* src/dashboard/app/ui/Sidebar.module.css */
 .alinea-Sidebar {
   flex-shrink: 0;
-  width: 320px;
+  width: 100%;
   min-width: 0;
 }
 .alinea-SidebarBody {
@@ -6616,6 +6632,9 @@
   margin-top: auto;
   display: flex;
 }
+.alinea-WorkspaceRoots-rootButton[data-hovered] {
+  background: var(--alinea-button-hovered);
+}
 .alinea-WorkspaceRoots-profile-popover {
   min-width: 260px;
   margin: 0;
@@ -6715,6 +6734,164 @@
   }
 }
 
+/* node_modules/allotment/dist/style.css */
+:root {
+  --separator-border: rgba(128, 128, 128, 0.35);
+  --sash-hover-transition-duration: 0.1s;
+}
+.allotment-module_splitView__L-yRc {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.allotment-module_splitView__L-yRc > .allotment-module_sashContainer__fzwJF {
+  height: 100%;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+}
+.allotment-module_splitView__L-yRc > .allotment-module_sashContainer__fzwJF > .allotment-module_sash__QA-2t {
+  pointer-events: auto;
+}
+.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa {
+  height: 100%;
+  position: relative;
+  white-space: nowrap;
+  width: 100%;
+}
+.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
+  overflow: hidden;
+  position: absolute;
+  white-space: initial;
+}
+.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
+  width: 100%;
+}
+.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8 > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
+  height: 100%;
+}
+.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
+  background-color: var(--separator-border);
+  content: " ";
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  z-index: 5;
+}
+.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_vertical__WSwwa > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
+  height: 1px;
+  width: 100%;
+}
+.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_horizontal__7doS8 > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
+  height: 100%;
+  width: 1px;
+}
+:root {
+  --focus-border: #007fd4;
+  --sash-size: 8px;
+  --sash-hover-size: 4px;
+}
+.sash-module_sash__K-9lB {
+  position: absolute;
+  z-index: 35;
+  touch-action: none;
+  pointer-events: auto;
+  text-align: initial;
+}
+.sash-module_sash__K-9lB.sash-module_disabled__Hm-wx {
+  pointer-events: none;
+}
+.sash-module_sash__K-9lB.sash-module_mac__Jf6OJ.sash-module_vertical__pB-rs {
+  cursor: col-resize;
+}
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs.sash-module_minimum__-UKxp {
+  cursor: e-resize;
+}
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs.sash-module_maximum__TCWxD {
+  cursor: w-resize;
+}
+.sash-module_sash__K-9lB.sash-module_mac__Jf6OJ.sash-module_horizontal__kFbiw {
+  cursor: row-resize;
+}
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_minimum__-UKxp {
+  cursor: s-resize;
+}
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_maximum__TCWxD {
+  cursor: n-resize;
+}
+.sash-module_sash__K-9lB.sash-module_disabled__Hm-wx {
+  cursor: default !important;
+  pointer-events: none !important;
+}
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs {
+  cursor: ew-resize;
+  top: 0;
+  width: var(--sash-size);
+  height: 100%;
+}
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw {
+  cursor: ns-resize;
+  left: 0;
+  width: 100%;
+  height: var(--sash-size);
+}
+.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx) > .sash-module_orthogonal-drag-handle__Yii2- {
+  content: " ";
+  height: calc(var(--sash-size) * 2);
+  width: calc(var(--sash-size) * 2);
+  z-index: 100;
+  display: block;
+  cursor: all-scroll;
+  position: absolute;
+}
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx) > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk,
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx) > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
+  cursor: nwse-resize;
+}
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx) > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R,
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx) > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
+  cursor: nesw-resize;
+}
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
+  left: calc(var(--sash-size) * -0.5);
+  top: calc(var(--sash-size) * -1);
+}
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
+  left: calc(var(--sash-size) * -0.5);
+  bottom: calc(var(--sash-size) * -1);
+}
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
+  top: calc(var(--sash-size) * -0.5);
+  left: calc(var(--sash-size) * -1);
+}
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
+  top: calc(var(--sash-size) * -0.5);
+  right: calc(var(--sash-size) * -1);
+}
+.sash-module_sash__K-9lB:before {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transition: background-color var(--sash-hover-transition-duration) ease-out;
+  background: transparent;
+}
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs:before {
+  width: var(--sash-hover-size);
+  left: calc(50% - (var(--sash-hover-size) / 2));
+}
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw:before {
+  height: var(--sash-hover-size);
+  top: calc(50% - (var(--sash-hover-size) / 2));
+}
+.sash-module_sash__K-9lB.sash-module_hover__80W6I:before,
+.sash-module_sash__K-9lB.sash-module_active__bJspD:before {
+  background: var(--focus-border);
+}
+
 /* src/dashboard/global.css */
 html,
 body,
@@ -6979,6 +7156,9 @@ button {
 }
 
 /* src/field/link/LinkField.module.css */
+.alinea-LinkFieldView-inputHeader {
+  min-height: calc(1.5 * var(--alinea-font-size-base) + 16px);
+}
 .alinea-LinkFieldView-label {
   flex: 0 auto;
   align-self: stretch;
@@ -7128,6 +7308,12 @@ button {
 .alinea-LinkFieldView-createButton {
   flex-shrink: 0;
 }
+.alinea-LinkFieldView-rowAction {
+  flex: 1;
+  align-self: stretch;
+  min-width: 0;
+  padding: 0;
+}
 .alinea-LinkFieldView-rowDropTarget {
   display: grid;
 }
@@ -7260,6 +7446,10 @@ button {
 .alinea-ListFieldTypePicker-item[data-focus-visible] {
   outline: none;
 }
+.alinea-ListFieldTypePicker-item[data-hovered]:not([data-focus-visible]) {
+  background: var(--alinea-muted);
+  color: var(--alinea-fg);
+}
 .alinea-ListFieldTypePicker-item[data-selected] {
   background: var(--alinea-selected);
   color: var(--alinea-primary-subtle-fg);
@@ -7492,13 +7682,12 @@ button {
 .alinea-RichTextExtensions-link {
   cursor: text;
   color: inherit;
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--alinea-danger) 40%, transparent);
   text-underline-offset: .3em;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
+  text-decoration: underline;
 }
 .alinea-RichTextExtensions-anchor,
 .alinea-RichTextExtensions-heading[data-anchor] {
@@ -7572,6 +7761,21 @@ button {
   background: var(--alinea-primary);
   color: var(--alinea-primary-fg);
 }
+.alinea-RichTextExtensions-image {
+  max-width: 100%;
+  display: block;
+  height: auto !important;
+}
+.alinea-RichTextExtensions-image ~ [data-resize-handle] {
+  box-sizing: border-box;
+  border: 2px solid var(--alinea-bg);
+  background: var(--alinea-primary);
+  cursor: nwse-resize;
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  transform: translate(50%, 50%);
+}
 
 /* src/field/richtext/RichTextField.module.css */
 .alinea-RichTextFieldView {
@@ -7585,6 +7789,13 @@ button {
     outline-color,
     background-color;
 }
+.alinea-RichTextFieldView-empty:before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--alinea-fg-muted);
+  pointer-events: none;
+}
 .alinea-RichTextFieldView:hover {
   border-color: var(--alinea-border-hover);
   outline-color: var(--alinea-ring-subtle);