laif-ds 0.2.78 → 0.2.80

package/dist/CHANGELOG.md

@@ -5,6 +5,31 @@ All notable technical changes to the laif-ds core will be documented in this fil
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [laif-ds@0.2.80]
+
+### 🚀 Added
+
+- **AppSelect**: Added `selectableAll` prop (multi-select only, default `true`) — renders a tri-state checkbox toggle to the left of the search bar with four icon states (`Square` / `SquareMinus` / `SquareCheck` / `SquareDot`). Both select-all and deselect-all are scoped to the current search filter, preserving out-of-view selections and `fixed: true` items
+- **DatePicker**: Added range dragging — in range mode, click and drag the `from` or `to` handle to extend or shrink the selected interval; the range automatically inverts when handles cross over
+
+### 🔧 Changed
+
+- **AppSelect**: Prevented automatic focus of the search input on popover open via `onOpenAutoFocus` — fixes the mobile soft-keyboard collapsing the visual viewport and pushing the dropdown off-screen
+- **DatePicker**: Reworked range click behavior — a third click on a completed range now starts a new range from that day instead of resetting to empty; clicking an end-date earlier than the current `from` resets the start anchor to that day
+
+## [laif-ds@0.2.79]
+
+### 🚀 Added
+
+- **MarkdownRenderer**: Added support for raw HTML rendering via `rehype-raw`, including native `<u>...</u>` underline tags
+- **Storybook**: Added dedicated `MarkdownRenderer` stories with underline and full-formatting examples
+
+### 🔧 Changed
+
+- **AppEditor**: Switched external underline markdown format from `++text++` to standard HTML `<u>text</u>` while keeping internal conversion compatibility
+- **AppEditor**: Improved editor layout flexibility with `wrpClassName` and updated content container sizing behavior
+- **Documentation and Stories**: Updated `AppEditor` docs and stories to reflect `<u>...</u>` underline usage
+
 ## [laif-ds@0.2.78]
 
 ### 🐛 Fixed

package/dist/_virtual/index3.js

@@ -1,8 +1,8 @@
 "use client";
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as e } from "../node_modules/style-to-js/cjs/index.js";
-var t = e();
-const a = /* @__PURE__ */ r(t);
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as t } from "../node_modules/eventemitter3/index2.js";
+var r = t();
+const m = /* @__PURE__ */ e(r);
 export {
-  a as default
+  m as default
 };

package/dist/_virtual/index4.js

@@ -1,8 +1,8 @@
 "use client";
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/extend/index.js";
-var t = r();
-const x = /* @__PURE__ */ e(t);
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as e } from "../node_modules/style-to-js/cjs/index.js";
+var t = e();
+const a = /* @__PURE__ */ r(t);
 export {
-  x as default
+  a as default
 };

package/dist/_virtual/index5.js

@@ -1,8 +1,8 @@
 "use client";
 import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as t } from "../node_modules/eventemitter3/index2.js";
-var r = t();
-const m = /* @__PURE__ */ e(r);
+import { __require as r } from "../node_modules/extend/index.js";
+var t = r();
+const x = /* @__PURE__ */ e(t);
 export {
-  m as default
+  x as default
 };

package/dist/agent-docs/adoption-report.json

@@ -1,12 +1,12 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-04-01T08:26:06.498Z",
+  "generatedAt": "2026-05-05T15:26:14.216Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.78"
+    "version": "0.2.80"
   },
   "summary": {
-    "scannedFiles": 393,
+    "scannedFiles": 394,
     "deprecatedComponentsCount": 2,
     "deprecatedComponentsUsedCount": 0,
     "componentsWithoutExamplesCount": 5,
@@ -528,6 +528,13 @@
           "src/components/ui/multiple-selector.tsx"
         ]
       },
+      {
+        "className": "bg-muted/50 rounded p-4 text-sm",
+        "occurrences": 7,
+        "files": [
+          "src/components/stories/app-select.stories.tsx"
+        ]
+      },
       {
         "className": "border-d-border border px-3 py-1 text-center text-sm font-light",
         "occurrences": 7,
@@ -565,13 +572,6 @@
           "src/components/stories/playground.stories.tsx"
         ]
       },
-      {
-        "className": "bg-muted/50 rounded p-4 text-sm",
-        "occurrences": 6,
-        "files": [
-          "src/components/stories/app-select.stories.tsx"
-        ]
-      },
       {
         "className": "mb-2 text-sm font-medium",
         "occurrences": 6,

package/dist/agent-docs/components/AppEditor.md

@@ -23,7 +23,7 @@ Rich text editor powered by Lexical with optional Markdown sync. Supports config
 ## Behavior
 
 - **Markdown sync**: When `onlyMarkdown=true`, initializes from Markdown and emits Markdown on every change.
-- **Extended Markdown**: Supports standard Markdown plus underline syntax using `++text++` (e.g., `++underlined text++`).
+- **Extended Markdown**: Supports standard Markdown plus underline syntax using `<u>text</u>` (e.g., `<u>underlined text</u>`).
 - **Toolbars**:
   - `history`: undo/redo toolbar.
   - `block-format`: heading levels (h1-h3), numbered/bulleted/check lists, blockquote.
@@ -71,7 +71,7 @@ import * as React from "react";
 import { AppEditor } from "laif-ds";
 
 export function MarkdownDefault() {
-  const initial = "**Titolo** con testo in ++markdown++ e *corsivo*";
+  const initial = "**Titolo** con testo in <u>markdown</u> e *corsivo*";
   const [md, setMd] = React.useState(initial);
   return (
     <AppEditor
@@ -90,7 +90,7 @@ import * as React from "react";
 import { AppEditor } from "laif-ds";
 
 export function UnderlineExample() {
-  const initial = "Testo normale ++testo sottolineato++ altro normale";
+  const initial = "Testo normale <u>testo sottolineato</u> altro normale";
   const [md, setMd] = React.useState(initial);
   return (
     <AppEditor
@@ -109,5 +109,5 @@ export function UnderlineExample() {
 - **Sizing**: Control height via `className` (e.g., `h-96`). Default height is `h-72`.
 - **Performance**: Prefer Markdown mode for content pipelines that store Markdown; use `onlyMarkdown=false` for plain text initialization.
 - **Accessibility**: Toolbar buttons and editor area follow Lexical best practices.
-- **Underline Syntax**: Uses `++text++` format which is not standard Markdown but supported in this component for rich text export/import.
+- **Underline Syntax**: Uses `<u>text</u>` HTML tags for underline, which is standard HTML and natively supported by both this component and `MarkdownRenderer` via `rehype-raw`.
 - **Theme**: Uses design system tokens for consistent styling with `border-d-border`, `bg-d-background`, etc.

package/dist/agent-docs/components/AppSelect.md

@@ -74,6 +74,7 @@ export type MultiSelectProps = BaseProps & {
   renderValue?: (option: AppSelectOption) => React.ReactNode; // Custom render for selected values
   maxSelected?: number; // Maximum number of selectable items
   showChipsInsteadOfCount?: boolean; // Display chips instead of count (default: false)
+  selectableAll?: boolean; // Shows tri-state select-all toggle next to the search bar (default: true)
 };
 ```
 
@@ -154,6 +155,19 @@ When options have a `group` property:
 - Options without a group value (empty string, undefined, or missing) appear under the `noGroupLabel` heading
 - Grouping is based on the `group` property of `AppSelectOption`
 
+### Select All / Deselect All
+
+In multiple mode with `selectableAll={true}` (default):
+
+- A single tri-state checkbox-style toggle appears at the left of the search bar — replacing the search icon (or in a slim header bar when `searchable` is off)
+- **`Square`** icon → no filtered options selected; click selects all matching the current filter (respects `maxSelected` cap)
+- **`SquareMinus`** icon → some filtered options selected; click completes the selection (within the cap)
+- **`SquareCheck`** icon → all filtered options selected (or `maxSelected` cap reached); click deselects only the currently-filtered items — **out-of-view selections and `fixed: true` items are preserved**
+- **`SquareDot`** icon (disabled) → search yields no matches; the button stays visible but inactive so the layout doesn't collapse
+- Both actions are scoped to the current search filter — symmetric, predictable, and prevents accidental data loss
+- Uses `role="checkbox"` with dynamic `aria-checked` (`true` / `false` / `"mixed"`) and a hardcoded English `aria-label` (no per-project i18n required)
+- Available only on multi-select; type-rejected on single-select. Opt out with `selectableAll={false}`
+
 ### Max Selection Limit
 
 In multiple mode with `maxSelected` set:
@@ -420,6 +434,37 @@ export function SelectWithDisabled() {
 }
 ```
 
+### Multiple with Select All / Deselect All
+
+```tsx
+import { AppSelect } from "laif-ds";
+import { useState } from "react";
+
+const options = [
+  { value: "react", label: "React" },
+  { value: "vue", label: "Vue" },
+  { value: "angular", label: "Angular" },
+  { value: "svelte", label: "Svelte" },
+];
+
+export function SelectAllExample() {
+  const [values, setValues] = useState<(string | number)[]>([]);
+
+  return (
+    <AppSelect
+      multiple
+      selectableAll
+      searchable
+      options={options}
+      value={values}
+      onValueChange={setValues}
+      placeholder="Select frameworks"
+      label="Frameworks"
+    />
+  );
+}
+```
+
 ### Custom Render Value
 
 ```tsx
@@ -462,3 +507,4 @@ export function CustomRenderSelect() {
 - **Performance**: Efficient rendering with useMemo for computed values
 - **Custom Rendering**: Use `renderValue` prop to customize how selected options appear in the trigger
 - **Controlled Component Detection**: Uses `props.hasOwnProperty('value')` to determine if component is controlled, ensuring stable behavior even when value is `undefined`
+- **Mobile Keyboard**: Popover prevents default auto-focus on open via `onOpenAutoFocus`, so the soft keyboard does not pop up automatically when `searchable` is enabled. This avoids the visual-viewport collapse that previously caused the dropdown to flip off-screen on mobile. Tap the search input to focus it explicitly when needed.

package/dist/agent-docs/manifest.json

@@ -1,9 +1,9 @@
 {
   "schemaVersion": "1.1.0",
-  "generatedAt": "2026-04-01T08:26:06.241Z",
+  "generatedAt": "2026-05-05T15:26:13.593Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.78"
+    "version": "0.2.80"
   },
   "stats": {
     "documentedComponentCount": 92,
@@ -847,6 +847,7 @@
           "Search Functionality",
           "Creatable Options",
           "Grouping",
+          "Select All / Deselect All",
           "Max Selection Limit",
           "Chips Display",
           "Disabled Options",
@@ -858,6 +859,7 @@
           "Custom JSX Labels",
           "Clearable Single Select",
           "With Disabled Options",
+          "Multiple with Select All / Deselect All",
           "Custom Render Value"
         ],
         "controlledPattern": "controlled-uncontrolled-documented",
@@ -6059,5 +6061,5 @@
       ]
     }
   ],
-  "checksum": "0b6344f7d2690a68a50014348017a8d4b0c42453fc08075f4e723fa0f2d7c19d"
+  "checksum": "5365e3750a199ac2ef62a230e7ec5a26fa46e3494a332e48d9f832d003ac6a1b"
 }

package/dist/components/editor/editor-ui/content-editable.js

@@ -1,20 +1,27 @@
 "use client";
 import { jsx as t } from "react/jsx-runtime";
-import { ContentEditable as l } from "../../../node_modules/@lexical/react/LexicalContentEditable.prod.js";
-function a({
+import { ContentEditable as r } from "../../../node_modules/@lexical/react/LexicalContentEditable.prod.js";
+import { cn as o } from "../../../lib/utils.js";
+function s({
   placeholder: e,
-  className: o,
-  placeholderClassName: n
+  className: n,
+  placeholderClassName: l
 }) {
   return /* @__PURE__ */ t(
-    l,
+    r,
     {
-      className: o ?? "ContentEditable__root relative block min-h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none",
+      className: o(
+        "ContentEditable__root relative block overflow-auto px-8 py-4 focus:outline-none",
+        n
+      ),
       "aria-placeholder": e,
       placeholder: /* @__PURE__ */ t(
         "div",
         {
-          className: n ?? "text-muted-foreground pointer-events-none absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis select-none",
+          className: o(
+            "text-muted-foreground pointer-events-none absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis select-none",
+            l
+          ),
           children: e
         }
       )
@@ -22,5 +29,5 @@ function a({
   );
 }
 export {
-  a as ContentEditable
+  s as ContentEditable
 };

package/dist/components/ui/app-editor.js

@@ -1,157 +1,169 @@
 "use client";
-import { jsx as r, jsxs as t, Fragment as s } from "react/jsx-runtime";
+import { jsx as r, jsxs as e, Fragment as s } from "react/jsx-runtime";
 import { ListNode as S, ListItemNode as T } from "../../node_modules/@lexical/list/LexicalList.prod.js";
-import { $convertToMarkdownString as k, $convertFromMarkdownString as w, TRANSFORMERS as L } from "../../node_modules/@lexical/markdown/LexicalMarkdown.prod.js";
-import { CheckListPlugin as A } from "../../node_modules/@lexical/react/LexicalCheckListPlugin.prod.js";
-import { ClearEditorPlugin as j } from "../../node_modules/@lexical/react/LexicalClearEditorPlugin.prod.js";
-import { LexicalComposer as O } from "../../node_modules/@lexical/react/LexicalComposer.prod.js";
+import { $convertToMarkdownString as L, $convertFromMarkdownString as k, TRANSFORMERS as A } from "../../node_modules/@lexical/markdown/LexicalMarkdown.prod.js";
+import { CheckListPlugin as j } from "../../node_modules/@lexical/react/LexicalCheckListPlugin.prod.js";
+import { ClearEditorPlugin as O } from "../../node_modules/@lexical/react/LexicalClearEditorPlugin.prod.js";
+import { LexicalComposer as $ } from "../../node_modules/@lexical/react/LexicalComposer.prod.js";
 import { useLexicalComposerContext as B } from "../../node_modules/@lexical/react/LexicalComposerContext.prod.js";
 import { LexicalErrorBoundary as D } from "../../node_modules/@lexical/react/LexicalErrorBoundary.prod.js";
 import { HistoryPlugin as H } from "../../node_modules/@lexical/react/LexicalHistoryPlugin.prod.js";
 import { ListPlugin as I } from "../../node_modules/@lexical/react/LexicalListPlugin.prod.js";
-import { OnChangePlugin as $ } from "../../node_modules/@lexical/react/LexicalOnChangePlugin.prod.js";
-import { RichTextPlugin as M } from "../../node_modules/@lexical/react/LexicalRichTextPlugin.prod.js";
-import { HeadingNode as _, QuoteNode as z } from "../../node_modules/@lexical/rich-text/LexicalRichText.prod.js";
-import { ParagraphNode as d, TextNode as p, $getRoot as f } from "../../node_modules/lexical/Lexical.prod.js";
-import { useState as Q, useEffect as U } from "react";
-import { ContentEditable as J } from "../editor/editor-ui/content-editable.js";
-import { ActionsPlugin as q } from "../editor/plugins/actions/actions-plugin.js";
-import { ClearEditorActionPlugin as G } from "../editor/plugins/actions/clear-editor-plugin.js";
-import { CounterCharacterPlugin as K } from "../editor/plugins/actions/counter-character-plugin.js";
-import { FormatBulletedList as W } from "../editor/plugins/toolbar/block-format/format-bulleted-list.js";
-import { FormatCheckList as X } from "../editor/plugins/toolbar/block-format/format-check-list.js";
-import { FormatHeading as Y } from "../editor/plugins/toolbar/block-format/format-heading.js";
-import { FormatNumberedList as Z } from "../editor/plugins/toolbar/block-format/format-numbered-list.js";
-import { FormatParagraph as V } from "../editor/plugins/toolbar/block-format/format-paragraph.js";
-import { FormatQuote as rr } from "../editor/plugins/toolbar/block-format/format-quote.js";
-import { BlockFormatDropDown as or } from "../editor/plugins/toolbar/block-format-toolbar-plugin.js";
+import { OnChangePlugin as M } from "../../node_modules/@lexical/react/LexicalOnChangePlugin.prod.js";
+import { RichTextPlugin as U } from "../../node_modules/@lexical/react/LexicalRichTextPlugin.prod.js";
+import { HeadingNode as z, QuoteNode as Q } from "../../node_modules/@lexical/rich-text/LexicalRichText.prod.js";
+import { ParagraphNode as d, TextNode as f, $getRoot as p } from "../../node_modules/lexical/Lexical.prod.js";
+import { useState as _, useEffect as J } from "react";
+import { ContentEditable as q } from "../editor/editor-ui/content-editable.js";
+import { ActionsPlugin as G } from "../editor/plugins/actions/actions-plugin.js";
+import { ClearEditorActionPlugin as K } from "../editor/plugins/actions/clear-editor-plugin.js";
+import { CounterCharacterPlugin as W } from "../editor/plugins/actions/counter-character-plugin.js";
+import { FormatBulletedList as X } from "../editor/plugins/toolbar/block-format/format-bulleted-list.js";
+import { FormatCheckList as Y } from "../editor/plugins/toolbar/block-format/format-check-list.js";
+import { FormatHeading as Z } from "../editor/plugins/toolbar/block-format/format-heading.js";
+import { FormatNumberedList as V } from "../editor/plugins/toolbar/block-format/format-numbered-list.js";
+import { FormatParagraph as rr } from "../editor/plugins/toolbar/block-format/format-paragraph.js";
+import { FormatQuote as or } from "../editor/plugins/toolbar/block-format/format-quote.js";
+import { BlockFormatDropDown as er } from "../editor/plugins/toolbar/block-format-toolbar-plugin.js";
 import { FontFormatToolbarPlugin as l } from "../editor/plugins/toolbar/font-format-toolbar-plugin.js";
 import { ToolbarPlugin as c } from "../editor/plugins/toolbar/toolbar-plugin.js";
 import { editorTheme as tr } from "../editor/themes/editor-theme.js";
-import { TooltipProvider as er } from "./tooltip.js";
-import { HistoryToolbarPlugin as ir } from "../editor/plugins/toolbar/history-toolbar-plugin.js";
-const nr = "Start typing...", ar = {
+import { TooltipProvider as ir } from "./tooltip.js";
+import { HistoryToolbarPlugin as nr } from "../editor/plugins/toolbar/history-toolbar-plugin.js";
+import { cn as ar } from "../../lib/utils.js";
+const lr = "Start typing...", mr = {
   format: ["underline"],
   tag: "++",
   type: "text-format"
-}, x = [
-  ...L,
-  ar
-];
-function lr({
+}, v = [
+  ...A,
+  mr
+], sr = (o) => o.replace(/<u>(.*?)<\/u>/g, "++$1++"), cr = (o) => o.replace(/\+\+(.+?)\+\+/g, "<u>$1</u>");
+function dr({
   defaultValue: o,
   onlyMarkdown: i
 }) {
   const [n] = B();
-  return U(() => {
+  return J(() => {
     o && n.update(() => {
-      i ? w(o, x) : f().append(
-        new d().append(new p(o))
+      i ? k(
+        sr(o),
+        v
+      ) : p().append(
+        new d().append(new f(o))
       );
-      const a = f();
+      const a = p();
       (a.getFirstChild() ?? a).selectStart();
     });
   }, [n, o, i]), null;
 }
-function $r({
+function _r({
   defaultValue: o,
   onMarkdownEdit: i,
   plugins: n = [],
   toolbars: a = [],
-  placeholder: F = nr,
+  placeholder: F = lr,
   onlyMarkdown: h = !0,
-  className: C = "overflow-hidden rounded-lg border border-d-border"
+  className: C = "rounded-lg border border-d-border",
+  wrpClassName: E = ""
 }) {
-  const [, E] = Q(null), P = {
+  const [, P] = _(null), w = {
     namespace: "AppEditor",
     theme: tr,
     nodes: [
-      _,
-      d,
-      p,
       z,
+      d,
+      f,
+      Q,
       S,
       T
     ],
-    onError: (e) => {
-      console.error(e);
+    onError: (t) => {
+      console.error(t);
     },
     ...o && !h ? {
       editorState: () => {
-        f().append(
-          new d().append(new p(o))
+        p().append(
+          new d().append(new f(o))
         );
       }
     } : {}
-  }, u = (e) => n.includes(e), m = (e) => a.includes(e), g = u("clear"), v = u("counter"), N = m("block-format"), y = m("font-format"), b = m("history");
-  return /* @__PURE__ */ r("div", { className: "bg-d-background", children: /* @__PURE__ */ r(O, { initialConfig: P, children: /* @__PURE__ */ t(er, { children: [
+  }, u = (t) => n.includes(t), m = (t) => a.includes(t), g = u("clear"), x = u("counter"), b = m("block-format"), y = m("font-format"), N = m("history");
+  return /* @__PURE__ */ r("div", { className: ar("bg-d-background flex h-96 flex-col", E), children: /* @__PURE__ */ r($, { initialConfig: w, children: /* @__PURE__ */ e(ir, { children: [
     o && /* @__PURE__ */ r(
-      lr,
+      dr,
       {
         defaultValue: o,
         onlyMarkdown: h
       }
     ),
-    /* @__PURE__ */ t("div", { className: "border-d-border flex items-center border-b", children: [
-      b && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ r(ir, {}) }) }),
-      N && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ t(or, { children: [
+    /* @__PURE__ */ e("div", { className: "border-d-border flex items-center border-b", children: [
+      N && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ r(nr, {}) }) }),
+      b && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ e(er, { children: [
+        /* @__PURE__ */ r(rr, {}),
+        /* @__PURE__ */ r(Z, { levels: ["h1", "h2", "h3"] }),
         /* @__PURE__ */ r(V, {}),
-        /* @__PURE__ */ r(Y, { levels: ["h1", "h2", "h3"] }),
-        /* @__PURE__ */ r(Z, {}),
-        /* @__PURE__ */ r(W, {}),
         /* @__PURE__ */ r(X, {}),
-        /* @__PURE__ */ r(rr, {})
+        /* @__PURE__ */ r(Y, {}),
+        /* @__PURE__ */ r(or, {})
       ] }) }) }) }),
-      y && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ t("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: [
+      y && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ e("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: [
         /* @__PURE__ */ r(l, { format: "bold" }),
         /* @__PURE__ */ r(l, { format: "italic" }),
         /* @__PURE__ */ r(l, { format: "underline" }),
         /* @__PURE__ */ r(l, { format: "strikethrough" })
       ] }) })
     ] }),
-    /* @__PURE__ */ t("div", { className: "relative", children: [
-      b && /* @__PURE__ */ r(H, {}),
+    /* @__PURE__ */ e("div", { className: "relative flex min-h-0 w-full flex-1 flex-col", children: [
+      N && /* @__PURE__ */ r(H, {}),
       /* @__PURE__ */ r(
-        M,
+        U,
         {
           ErrorBoundary: D,
-          contentEditable: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r("div", { ref: E, children: /* @__PURE__ */ r(
-            J,
+          contentEditable: /* @__PURE__ */ r(
+            "div",
             {
-              placeholder: F,
-              className: `ContentEditable__root relative block h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none ${C}`
+              ref: P,
+              className: "flex min-h-0 w-full flex-1 overflow-auto",
+              children: /* @__PURE__ */ r(
+                q,
+                {
+                  placeholder: F,
+                  className: `border-d-border w-full rounded-none border-b ${C}`
+                }
+              )
             }
-          ) }) })
+          )
         }
       ),
-      N && /* @__PURE__ */ t(s, { children: [
+      b && /* @__PURE__ */ e(s, { children: [
         /* @__PURE__ */ r(I, {}),
-        /* @__PURE__ */ r(A, {})
+        /* @__PURE__ */ r(j, {})
       ] }),
-      (g || v) && /* @__PURE__ */ r(q, { children: /* @__PURE__ */ t("div", { className: "clear-both flex items-center justify-between gap-2 p-1", children: [
+      (g || x) && /* @__PURE__ */ r(G, { children: /* @__PURE__ */ e("div", { className: "clear-both flex items-center justify-between gap-2 p-1", children: [
         /* @__PURE__ */ r("div", { className: "flex flex-1 justify-start" }),
-        /* @__PURE__ */ r("div", { children: v && /* @__PURE__ */ r(K, { charset: "UTF-16" }) }),
-        /* @__PURE__ */ r("div", { className: "flex flex-1 justify-end gap-2", children: g && /* @__PURE__ */ t(s, { children: [
-          /* @__PURE__ */ r(G, {}),
-          /* @__PURE__ */ r(j, {})
+        /* @__PURE__ */ r("div", { children: x && /* @__PURE__ */ r(W, { charset: "UTF-16" }) }),
+        /* @__PURE__ */ r("div", { className: "flex flex-1 justify-end gap-2", children: g && /* @__PURE__ */ e(s, { children: [
+          /* @__PURE__ */ r(K, {}),
+          /* @__PURE__ */ r(O, {})
         ] }) })
       ] }) })
     ] }),
     /* @__PURE__ */ r(
-      $,
+      M,
       {
         ignoreSelectionChange: !0,
-        onChange: (e) => {
+        onChange: (t) => {
           if (!i) return;
-          const R = e.read(
-            () => k(x)
+          const R = t.read(
+            () => L(v)
           );
-          i(R);
+          i(cr(R));
         }
       }
     )
   ] }) }) });
 }
 export {
-  $r as AppEditor
+  _r as AppEditor
 };