@revolist/ui 4.0.3-rc → 4.0.3

package/rich-text/style.scss

@@ -1,75 +1,252 @@
+@use '../styles/filter-controls';
+
 .rv-rich-text-editor {
-  width: min(560px, calc(100vw - 48px));
+  box-sizing: border-box;
+  width: min(560px, 100%);
+  max-width: calc(100vw - 48px);
+  min-width: 0;
   &__toolbar {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 6px;
-    padding-block: 8px;
-    margin-block: 8px;
-    border-block: 1px solid var(--rv-ui-border);
-    .rv-toolbar-group { gap: 2px; padding: 0; }
-    .rv-toolbar-separator { align-self: stretch; height: auto; }
-  }
-  &__command {
-    display: inline-flex;
+    gap: 8px;
+    margin-block: 10px;
+    .rv-icon-toolbar {
+      flex: 0 0 auto;
+    }
+  }
+  .rv-editor-actions {
+    display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
-    gap: 2px;
-    min-width: 30px;
-    min-height: 30px;
-    padding: 6px;
-    border-color: transparent;
-  }
-  &__level { --rv-icon-size: 9px; }
+    gap: 8px;
+    margin-block-start: 12px;
+  }
   &__link {
     display: flex;
+    flex-wrap: wrap;
     gap: 8px;
+    margin-block-end: 8px;
+    input {
+      flex: 1;
+      min-width: 0;
+    }
   }
   &__visual,
   &__source {
     box-sizing: border-box;
     width: 100%;
-    min-height: 200px;
+    min-height: 220px;
     max-height: 50vh;
     overflow: auto;
-    padding: 10px;
+    padding: 16px;
     border: 1px solid var(--rv-ui-border);
     border-radius: 6px;
     background: var(--rv-ui-surface);
     color: var(--rv-ui-text);
-    font: inherit;
-    white-space: pre-wrap;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.6;
+    text-align: start;
+    overflow-wrap: anywhere;
+    &:focus-visible {
+      outline: 2px solid var(--rv-ui-accent);
+      outline-offset: 2px;
+    }
   }
   &__source {
-    font-family: ui-monospace, monospace;
+    margin-block-start: 12px;
+    min-height: 0;
+    max-height: none;
+    padding: 0;
+    overflow: hidden;
+    &:focus-within {
+      outline: 2px solid var(--rv-ui-accent);
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+    .rv-highlighted-input__highlight,
+    textarea.rv-highlighted-input__input {
+      padding: 16px;
+      font:
+        14px/1.6 ui-monospace,
+        SFMono-Regular,
+        Consolas,
+        monospace;
+      letter-spacing: normal;
+      white-space: pre;
+      overflow-wrap: normal;
+      tab-size: 2;
+      text-align: start;
+    }
+    .rv-highlighted-input__highlight {
+      position: absolute;
+      inset: 0;
+      height: 100%;
+      min-height: 0;
+      overflow: hidden;
+    }
+    textarea.rv-highlighted-input__input {
+      position: relative;
+      inset: auto;
+      display: block;
+      height: 220px;
+      min-height: 220px;
+      max-height: 50vh;
+      resize: vertical;
+      overflow: auto;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      caret-color: var(--rv-ui-text);
+    }
   }
   &__visual[hidden] {
     display: none;
   }
-  &__visual a {
-    color: var(--rv-ui-accent-text);
-    text-decoration: underline;
-  }
-  &__visual pre {
-    background: var(--rv-ui-surface-sunken);
-    padding: 8px;
-  }
-  &__visual blockquote {
-    border-inline-start: 3px solid var(--rv-ui-border);
-    padding-inline-start: 12px;
-    margin-inline: 0;
+  &__visual {
+    white-space: pre-wrap;
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    pre,
+    blockquote,
+    ul,
+    ol {
+      margin: 0 0 0.75em;
+    }
+    > :first-child {
+      margin-block-start: 0;
+    }
+    > :last-child {
+      margin-block-end: 0;
+    }
+    p {
+      font: inherit;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-block-start: 1em;
+      font-family: inherit;
+      font-weight: 650;
+      line-height: 1.3;
+      letter-spacing: normal;
+      color: inherit;
+    }
+    h1 {
+      font-size: 1.65em;
+    }
+    h2 {
+      font-size: 1.3em;
+    }
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 1.1em;
+    }
+    strong {
+      font-weight: 700;
+    }
+    em {
+      font-style: italic;
+    }
+    s {
+      text-decoration: line-through;
+    }
+    ul,
+    ol {
+      padding-inline-start: 1.75em;
+      list-style-position: outside;
+    }
+    ul {
+      list-style-type: disc;
+    }
+    ol {
+      list-style-type: decimal;
+    }
+    li {
+      margin-block: 0.25em;
+      padding-inline-start: 0.15em;
+    }
+    li > p {
+      margin-block: 0;
+    }
+    li > ul,
+    li > ol {
+      margin-block: 0.25em 0;
+    }
+    blockquote {
+      border-inline-start: 3px solid var(--rv-ui-border);
+      padding-inline-start: 14px;
+      margin-inline: 0;
+      color: var(--rv-ui-text-muted, var(--rv-ui-text));
+      > :last-child {
+        margin-block-end: 0;
+      }
+    }
+    code,
+    pre {
+      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    }
+    code {
+      background: var(--rv-ui-surface-sunken);
+      padding: 0.12em 0.3em;
+      border-radius: 3px;
+      font-size: 0.92em;
+    }
+    pre {
+      background: var(--rv-ui-surface-sunken);
+      border: 1px solid var(--rv-ui-border);
+      border-radius: 6px;
+      padding: 12px 14px;
+      font-size: 0.92em;
+      font-weight: 400;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      tab-size: 2;
+      code {
+        padding: 0;
+        background: none;
+        border-radius: 0;
+        font: inherit;
+      }
+    }
+    a {
+      color: var(--rv-ui-accent-text);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
   }
-  &__visual code {
-    font-family: ui-monospace, monospace;
-    background: var(--rv-ui-surface-sunken);
+  &__help {
+    margin: 8px 0 12px;
+    color: var(--rv-ui-text-muted, var(--rv-ui-text));
+    font-size: 12px;
+    line-height: 1.5;
   }
 }
 
 .rv-rich-text-cell {
+  box-sizing: border-box;
+  max-height: 100%;
   color: inherit;
   font: inherit;
+  // Core uses row height as line-height to center plain cells. Rich blocks need
+  // text-sized lines so paragraphs, quotes and lists fit inside taller rows.
+  line-height: 1.5;
+  padding-block: min(
+    8px,
+    max(0px, calc((var(--rg-theme-row-size, 27px) - 1.5em) / 2))
+  );
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
   overflow: hidden;
   p,
   h1,
@@ -82,7 +259,13 @@
   blockquote,
   ul,
   ol {
-    margin-block: 0;
+    margin: 0 0 0.35em;
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+  p {
+    font: inherit;
   }
   h1,
   h2,
@@ -90,28 +273,94 @@
   h4,
   h5,
   h6 {
+    font-family: inherit;
     font-size: inherit;
     font-weight: 600;
+    line-height: inherit;
+    color: inherit;
+  }
+  strong {
+    font-weight: 700;
+  }
+  em {
+    font-style: italic;
+  }
+  s {
+    text-decoration: line-through;
   }
   ul,
   ol {
     padding-inline-start: 1.5em;
+    list-style-position: outside;
+  }
+  ul {
+    list-style-type: disc;
+  }
+  ol {
+    list-style-type: decimal;
+  }
+  li > p {
+    margin-block: 0;
+  }
+  li > ul,
+  li > ol {
+    margin-block: 0.15em 0;
   }
   blockquote {
-    border-inline-start: 2px solid currentColor;
-    padding-inline-start: 8px;
+    border-inline-start: 2px solid var(--rv-ui-border, GrayText);
+    padding-inline-start: 10px;
     margin-inline: 0;
+    color: var(--rv-ui-text-muted, inherit);
   }
   a {
-    color: inherit;
+    color: var(--rv-ui-accent-text, LinkText);
     text-decoration: underline;
     text-underline-offset: 2px;
+    text-decoration-thickness: 1px;
+    &:focus-visible {
+      outline: 2px solid var(--rv-ui-accent, Highlight);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
   }
-  code {
-    font-family: ui-monospace, monospace;
+  code,
+  pre {
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
     font-size: 0.9em;
   }
+  code {
+    background: var(--rv-ui-surface-sunken);
+    padding-inline: 0.2em;
+    border-radius: 3px;
+  }
   pre {
     white-space: pre-wrap;
+    background: var(--rv-ui-surface-sunken);
+    padding: 3px 6px;
+    border-radius: 3px;
+    line-height: 1.5;
+    tab-size: 2;
+    code {
+      font: inherit;
+      background: none;
+      padding: 0;
+    }
+  }
+}
+
+.rv-html-syntax {
+  font: inherit;
+  color: var(--rv-ui-text);
+  &__tag {
+    color: var(--rv-ui-accent-text);
+  }
+  &__attribute {
+    color: var(--rv-ui-warning, var(--rv-ui-accent-text));
+  }
+  &__string {
+    color: var(--rv-ui-success);
+  }
+  &__comment {
+    color: var(--rv-ui-text-muted);
   }
 }

package/rich-text/syntax.d.ts

@@ -0,0 +1,5 @@
+import { h } from '../_vendor/preact/src/index';
+/** Paint HTML source as escaped text; source is never interpreted as markup. */
+export declare function HtmlSyntax({ code }: {
+    code: string;
+}): h.JSX.Element;

package/rich-text/toolbar.d.ts

@@ -1,6 +1,6 @@
 import { HtmlEngine, HtmlSelection } from './engine';
 import { HtmlEditorText } from './translations';
-export declare function HtmlToolbar({ engine, selection, text, showLink, onLink }: {
+export declare function HtmlToolbar({ engine, selection, text, showLink, onLink, }: {
     engine: () => HtmlEngine | undefined;
     selection: HtmlSelection;
     text: Required<HtmlEditorText>;

package/rich-text/translations.d.ts

@@ -1,5 +1,7 @@
 /** Visible and accessible labels for the shared HTML editor. */
 export interface HtmlEditorText {
+    keyboardHelp?: string;
+    codeHelp?: string;
     visual: string;
     source: string;
     label: string;

package/search-input/index.js

@@ -1,6 +1,6 @@
 import { c as e } from "../_chunks/preact.module-BBM36DnO.js";
 import { t } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { n } from "../_chunks/native.view-ByyZ1CT5.js";
+import { n } from "../_chunks/native-Blr3byjO.js";
 //#region src/search-input/index.tsx
 function r() {
 	return /* @__PURE__ */ t("svg", {

package/search-input/native.d.ts

@@ -1,2 +1,21 @@
-/** Compatibility entry; markup is owned by the Preact TSX implementation. */
-export * from './native.view';
+export interface SearchPresentation {
+    rootClassName?: string;
+    inputClassName?: string;
+    iconClassName?: string;
+    shortcutClassName?: string;
+    hideIcon?: boolean;
+    icon?: any;
+    shortcut?: any;
+    leading?: any;
+    trailing?: any;
+    testId?: string;
+    inputAttributes?: Record<string, any>;
+}
+/** One search composition for native, grid and Preact rendering. */
+export declare function renderSearchInput<H extends (...args: any[]) => any>(h: H, options: SearchPresentation): ReturnType<H>;
+export declare function createSearchInput(document: Document, options: Omit<SearchPresentation, 'icon'> & {
+    iconSvg: string;
+}): {
+    root: HTMLElement;
+    input: HTMLInputElement;
+};

package/select.d.ts

@@ -1,8 +1,10 @@
 import { ComponentChildren, JSX } from './_vendor/preact/src/index';
-import { DropdownOption } from './dropdown/dropdown.types';
+import { DropdownEnvironment, DropdownOption } from './dropdown/dropdown.types';
 export type SelectOptionProps = JSX.IntrinsicElements['option'];
 type Attributes = Omit<JSX.IntrinsicElements['select'], 'value' | 'defaultValue' | 'onChange' | 'onInput' | 'multiple' | 'ref'>;
 export type SelectProps = Attributes & {
+    /** Optional host integration for portalled popup lifecycle and pointer releases. */
+    environment?: DropdownEnvironment;
     value?: string | number | readonly string[];
     defaultValue?: string | number | readonly string[];
     /** Optional domain policy for option descriptors; no native option nodes are mounted. */

package/select.js

@@ -1 +1 @@
-export { s as Select, c as selectOptions } from "./_chunks/native-control-C_yok8_-.js";
+export { s as Select, c as selectOptions } from "./_chunks/native-control-B_fVA5bL.js";

package/selection-list.d.ts

@@ -1,2 +1,3 @@
 /** General-purpose selection lists; formatting editors reuse the same owner. */
 export { EditorList as Listbox, EditorListItem as ListboxOption, EditorListGroup as ListboxGroup, EditorListItemContent as ListboxOptionContent, type EditorListProps as ListboxProps, type EditorListItemProps as ListboxOptionProps, type EditorListItemContentProps as ListboxOptionContentProps, } from './editor-layout';
+export { useSelectionListTooltips } from './core/selection-list-tooltips';

package/selection-list.js

@@ -1 +1,3 @@
-export { EditorList as Listbox, EditorListGroup as ListboxGroup, EditorListItem as ListboxOption, EditorListItemContent as ListboxOptionContent } from "./editor-layout/index.js";
+import { t as e } from "./_chunks/selection-list-tooltips-C5oMJe26.js";
+import { EditorList as t, EditorListGroup as n, EditorListItem as r, EditorListItemContent as i } from "./editor-layout/index.js";
+export { t as Listbox, n as ListboxGroup, r as ListboxOption, i as ListboxOptionContent, e as useSelectionListTooltips };

package/status-feedback/exit-snapshot.js

@@ -1,10 +1,10 @@
-import { isUiMotionEnabled as e } from "../core/motion.js";
-import { showTopLayerPopup as t } from "../core/top-layer-popup.js";
+import { r as e } from "../_chunks/top-layer-popup-CNSDdfJV.js";
+import { isUiMotionEnabled as t } from "../core/motion.js";
 import { animateStatusFeedback as n } from "./motion.js";
 //#region src/status-feedback/exit-snapshot.ts
 function r(r) {
 	let i = r.ownerDocument.defaultView;
-	if (!i || typeof r.animate != "function" || !e(r)) return;
+	if (!i || typeof r.animate != "function" || !t(r)) return;
 	let a = r.getBoundingClientRect(), o = r.cloneNode(!0), s = [r, ...r.querySelectorAll("*")], c = [o, ...o.querySelectorAll("*")];
 	o.removeAttribute("popover"), o.removeAttribute("id"), o.querySelectorAll("[id]").forEach((e) => e.removeAttribute("id")), o.querySelectorAll("[role], [aria-live]").forEach((e) => {
 		e.removeAttribute("role"), e.removeAttribute("aria-live");
@@ -24,7 +24,7 @@ function r(r) {
 		borderColor: l.borderColor,
 		fontFamily: l.fontFamily,
 		boxShadow: l.boxShadow
-	}), r.ownerDocument.body.append(o), t(o), s.forEach((e, t) => {
+	}), r.ownerDocument.body.append(o), e(o), s.forEach((e, t) => {
 		e.scrollTop && (c[t].scrollTop = e.scrollTop), e.scrollLeft && (c[t].scrollLeft = e.scrollLeft);
 	});
 	let u = () => {

package/status-feedback/popover.js

@@ -1,6 +1,6 @@
 import { calculateAnchoredPopoverPosition as e } from "../core/anchored-popover.js";
-import { inheritUiMotion as t } from "../core/motion.js";
-import { hideTopLayerPopup as n, showTopLayerPopup as r } from "../core/top-layer-popup.js";
+import { r as t, t as n } from "../_chunks/top-layer-popup-CNSDdfJV.js";
+import { inheritUiMotion as r } from "../core/motion.js";
 import { statusFeedbackSize as i } from "./placement.js";
 import { animateStatusFeedback as a } from "./motion.js";
 import { statusFeedbackExit as o } from "./exit-snapshot.js";
@@ -58,9 +58,9 @@ var s = 0, c = class {
 			width: s.innerWidth,
 			height: s.innerHeight
 		}, c, this.collapsed, this.options), u = l.width;
-		n.style.width = `${u}px`, n.style.maxHeight = `${l.maxHeight}px`, this.releaseMotion ??= t(o, n);
+		n.style.width = `${u}px`, n.style.maxHeight = `${l.maxHeight}px`, this.releaseMotion ??= r(o, n);
 		let d = !this.mode;
-		d && (this.removeExit?.(), this.removeExit = void 0, this.mode = r(n));
+		d && (this.removeExit?.(), this.removeExit = void 0, this.mode = t(n));
 		let f = o.getBoundingClientRect(), p = e({
 			left: f.right - u,
 			right: f.right,