@revolist/ui 4.0.1-rc → 4.0.1

package/rich-text/style.scss

@@ -1,84 +1,252 @@
-.rv-markdown-editor {
-  width: min(560px, calc(100vw - 48px));
+@use '../styles/filter-controls';
+
+.rv-rich-text-editor {
+  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;
-  }
-  .rv-markdown-bold {
-    font-weight: 700;
-  }
-  .rv-markdown-italic {
-    font-style: italic;
-  }
-  .rv-markdown-strike {
-    text-decoration: line-through;
+  &__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;
+    }
   }
-  .rv-markdown-inline-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-markdown-cell {
+.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,
@@ -91,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,
@@ -99,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

@@ -1,2 +1,5 @@
-/** Keep import, export and keyboard shortcuts on the same deliberately small subset. */
-export declare const MARKDOWN_TRANSFORMERS: import('@lexical/markdown').Transformer[];
+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,9 +1,9 @@
-import { MarkdownEngine, MarkdownSelection } from './engine';
-import { MarkdownEditorText } from './translations';
-export declare function MarkdownToolbar({ engine, selection, text, showLink, onLink }: {
-    engine: () => MarkdownEngine | undefined;
-    selection: MarkdownSelection;
-    text: Required<MarkdownEditorText>;
+import { HtmlEngine, HtmlSelection } from './engine';
+import { HtmlEditorText } from './translations';
+export declare function HtmlToolbar({ engine, selection, text, showLink, onLink, }: {
+    engine: () => HtmlEngine | undefined;
+    selection: HtmlSelection;
+    text: Required<HtmlEditorText>;
     showLink: boolean;
     onLink: () => void;
-}): import("preact").JSX.Element;
+}): import("../_vendor/preact/src/index").JSX.Element;

package/rich-text/translations.d.ts

@@ -1,9 +1,10 @@
-/** All visible and accessible copy for the deliberately small Markdown editor. */
-export interface MarkdownEditorText {
+/** Visible and accessible labels for the shared HTML editor. */
+export interface HtmlEditorText {
+    keyboardHelp?: string;
+    codeHelp?: string;
     visual: string;
     source: string;
     label: string;
-    unsupported: string;
     unsafeLink: string;
     requiredValue?: string;
     tooLong?: string;
@@ -25,16 +26,5 @@ export interface MarkdownEditorText {
     numberedList?: string;
     quote?: string;
     codeBlock?: string;
-    images?: string;
-    tables?: string;
-    html?: string;
-    referenceLinks?: string;
-    taskLists?: string;
-    horizontalRules?: string;
-    alternateHeadings?: string;
-    highlight?: string;
-    extensions?: string;
-    indentedCode?: string;
 }
-export declare const defaultMarkdownEditorText: Required<MarkdownEditorText>;
-export declare function markdownIssueLabels(issues: string[], text: Required<MarkdownEditorText>): string;
+export declare const defaultHtmlEditorText: Required<HtmlEditorText>;

package/search-input/index.js

@@ -1,20 +1,20 @@
-import { n as e } from "../_chunks/native.view-8q_nwQ7x.js";
-import { h as t } from "preact";
-import { jsx as n, jsxs as r } from "preact/jsx-runtime";
+import { c as e } from "../_chunks/preact.module-BBM36DnO.js";
+import { t } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
+import { n } from "../_chunks/native-Blr3byjO.js";
 //#region src/search-input/index.tsx
-function i() {
-	return /* @__PURE__ */ r("svg", {
+function r() {
+	return /* @__PURE__ */ t("svg", {
 		width: "13",
 		height: "13",
 		viewBox: "0 0 24 24",
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-width": "2",
-		children: [/* @__PURE__ */ n("circle", {
+		children: [/* @__PURE__ */ t("circle", {
 			cx: "11",
 			cy: "11",
 			r: "8"
-		}), /* @__PURE__ */ n("line", {
+		}), /* @__PURE__ */ t("line", {
 			x1: "21",
 			y1: "21",
 			x2: "16.65",
@@ -22,17 +22,17 @@ function i() {
 		})]
 	});
 }
-function a({ value: r = "", inputRef: a, rootClassName: o = "", inputClassName: s = "", iconClassName: c = "", shortcutClassName: l = "", shortcut: u, icon: d, leading: f, hideIcon: p = !1, trailing: m, testId: h, onValueChange: g, onInput: _, type: v = "search", ...y }) {
+function i({ value: i = "", inputRef: a, rootClassName: o = "", inputClassName: s = "", iconClassName: c = "", shortcutClassName: l = "", shortcut: u, icon: d, leading: f, hideIcon: p = !1, trailing: m, testId: h, onValueChange: g, onInput: _, type: v = "search", ...y }) {
 	let b = (e) => {
 		_?.(e), g?.(e.currentTarget.value, e);
 	};
-	return e(t, {
+	return n(e, {
 		rootClassName: o,
 		inputClassName: s,
 		iconClassName: c,
 		shortcutClassName: l,
 		shortcut: u,
-		icon: d ?? /* @__PURE__ */ n(i, {}),
+		icon: d ?? /* @__PURE__ */ t(r, {}),
 		hideIcon: p,
 		leading: f,
 		trailing: m,
@@ -41,10 +41,10 @@ function a({ value: r = "", inputRef: a, rootClassName: o = "", inputClassName:
 			...y,
 			ref: a,
 			type: v,
-			value: r,
+			value: i,
 			onInput: b
 		}
 	});
 }
 //#endregion
-export { a as SearchInput };
+export { i as SearchInput };

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/segmented-switch/index.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from 'preact';
+import { JSX } from '../_vendor/preact/src/index';
 export type SegmentedSwitchRenderable = any;
 export type SegmentedSwitchValue = string | number;
 export type SegmentedSwitchOption<T extends SegmentedSwitchValue = SegmentedSwitchValue> = {

package/segmented-switch/index.js

@@ -1,4 +1,4 @@
-import { h as e } from "preact";
+import { c as e } from "../_chunks/preact.module-BBM36DnO.js";
 //#region src/segmented-switch/index.tsx
 function t(e) {
 	if (e === "tablist") return "tab";

package/select.d.ts

@@ -0,0 +1,22 @@
+import { ComponentChildren, JSX } from './_vendor/preact/src/index';
+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. */
+    optionPolicy?: (props: SelectOptionProps) => SelectOptionProps;
+} & ({
+    multiple?: false;
+    onValueChange?: (value: string) => void;
+} | {
+    multiple: true;
+    onValueChange?: (value: string[]) => void;
+});
+/** JSX options are data descriptors for Dropdown, never browser-native controls. */
+export declare function selectOptions(children: ComponentChildren, policy?: SelectProps['optionPolicy'], group?: string, disabled?: boolean): DropdownOption<string>[];
+export declare function Select(props: SelectProps): JSX.Element;
+export {};

package/select.js

@@ -0,0 +1 @@
+export { s as Select, c as selectOptions } from "./_chunks/native-control-B9MNibfa.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-BtWjpP6M.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,4 +1,4 @@
-import { showTopLayerPopup as e } 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

package/status-feedback/index.js

@@ -1,4 +1,4 @@
 import { renderStatusBadge as e } from "./badge.js";
-import { StatusBadge as t, StatusFeedbackPanel as n, renderStatusFeedbackPanel as r } from "./render.js";
+import { n as t, r as n, t as r } from "../_chunks/render-m5eMMwFR.js";
 import { StatusFeedbackPopoverController as i } from "./popover.js";
-export { t as StatusBadge, n as StatusFeedbackPanel, i as StatusFeedbackPopoverController, e as renderStatusBadge, r as renderStatusFeedbackPanel };
+export { r as StatusBadge, t as StatusFeedbackPanel, i as StatusFeedbackPopoverController, e as renderStatusBadge, n as renderStatusFeedbackPanel };

package/status-feedback/popover.js

@@ -1,5 +1,5 @@
 import { calculateAnchoredPopoverPosition as e } from "../core/anchored-popover.js";
-import { hideTopLayerPopup as t, showTopLayerPopup as n } 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";
@@ -46,34 +46,34 @@ var s = 0, c = class {
 		})));
 	};
 	hide(e = !1) {
-		(!e || this.mode) && (this.removeExit?.(), this.removeExit = void 0), e && this.panel?.isConnected && this.mode && (this.removeExit = o(this.panel)), this.animation?.cancel(), this.animation = void 0, this.releaseMotion?.(), this.releaseMotion = void 0, this.panel && this.mode && t(this.panel, this.mode), this.mode = void 0, this.stopWatching();
+		(!e || this.mode) && (this.removeExit?.(), this.removeExit = void 0), e && this.panel?.isConnected && this.mode && (this.removeExit = o(this.panel)), this.animation?.cancel(), this.animation = void 0, this.releaseMotion?.(), this.releaseMotion = void 0, this.panel && this.mode && n(this.panel, this.mode), this.mode = void 0, this.stopWatching();
 	}
 	destroy() {
 		this.hide(), this.disposed = !0, this.panel = null, this.anchor = null;
 	}
 	position() {
-		let t = this.panel, o = this.anchor, s = this.window;
-		if (!t?.isConnected || !o?.isConnected || !s || this.disposed) return;
+		let n = this.panel, o = this.anchor, s = this.window;
+		if (!n?.isConnected || !o?.isConnected || !s || this.disposed) return;
 		let c = this.options.boundary?.getBoundingClientRect(), l = i({
 			width: s.innerWidth,
 			height: s.innerHeight
 		}, c, this.collapsed, this.options), u = l.width;
-		t.style.width = `${u}px`, t.style.maxHeight = `${l.maxHeight}px`, this.releaseMotion ??= r(o, t);
+		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 = n(t));
+		d && (this.removeExit?.(), this.removeExit = void 0, this.mode = t(n));
 		let f = o.getBoundingClientRect(), p = e({
 			left: f.right - u,
 			right: f.right,
 			top: f.bottom,
 			bottom: f.bottom
 		}, {
-			width: t.offsetWidth,
-			height: t.offsetHeight
+			width: n.offsetWidth,
+			height: n.offsetHeight
 		}, {
 			width: s.innerWidth,
 			height: s.innerHeight
 		}, 0);
-		t.style.left = `${p.left}px`, t.style.top = `${p.top}px`, d && (this.animation?.cancel(), this.animation = a(t, [{ opacity: 0 }, { opacity: 1 }], "rv-status-enter"));
+		n.style.left = `${p.left}px`, n.style.top = `${p.top}px`, d && (this.animation?.cancel(), this.animation = a(n, [{ opacity: 0 }, { opacity: 1 }], "rv-status-enter"));
 	}
 	stopWatching() {
 		this.frame !== void 0 && this.window?.cancelAnimationFrame(this.frame), this.frame = void 0, this.observer?.disconnect(), this.observer = void 0, this.window?.removeEventListener("resize", this.refresh), this.window?.removeEventListener("scroll", this.refresh, !0), this.window = null;