@lotics/ui 44.14.0 → 45.3.0

package/src/markdown_toolbar.web.tsx

@@ -0,0 +1,231 @@
+import { useCallback } from "react";
+import { View } from "react-native";
+import type { MarkdownEditorHandle } from "@lotics/markdown-editor/editor_view";
+import { markdownSchema } from "@lotics/markdown-editor/schema";
+import type { MarkType, NodeType } from "prosemirror-model";
+import {
+  applyLink,
+  canApplyLink,
+  clearLink,
+  insertHorizontalRule,
+  insertTable,
+  isBlockActive,
+  isMarkActive,
+  toggleBlockquote,
+  toggleBulletList,
+  toggleCode,
+  toggleCodeBlock,
+  toggleEm,
+  toggleHeading,
+  toggleOrderedList,
+  toggleStrong,
+} from "@lotics/markdown-editor/commands";
+import { colors } from "./colors";
+import { IconButton } from "./icon_button";
+import type { IconName } from "./icon";
+import { useLoticsLocale } from "./locale";
+
+type EditorCommand = typeof toggleStrong;
+
+interface ToolbarButton {
+  kind: "button";
+  icon: IconName;
+  tooltip: string;
+  active: boolean;
+  onPress: () => void;
+}
+
+type ToolbarItem = ToolbarButton | { kind: "divider" };
+
+/**
+ * The formatting band.
+ *
+ * It renders whether or not there is an editor behind it yet, and whether or not
+ * that editor is enabled — the buttons simply go inert. Presence belongs to the
+ * caller (`MarkdownEditor`'s `toolbar`), never to a state that changes while the
+ * reader is looking: a band that arrives when the view mounts, or when the field
+ * gains focus, moves everything under it at exactly the moment attention is
+ * there.
+ */
+export function MarkdownToolbar({
+  handle,
+  disabled,
+}: {
+  handle: MarkdownEditorHandle | null;
+  disabled?: boolean;
+}) {
+  const { markdownToolbar: t } = useLoticsLocale();
+  const view = handle?.view ?? null;
+  const inert = disabled === true || view === null;
+
+  const run = useCallback(
+    (command: EditorCommand) => {
+      if (!view) return;
+      command(view.state, view.dispatch, view);
+      view.focus();
+    },
+    [view],
+  );
+
+  const handleLink = useCallback(() => {
+    if (!view) return;
+    if (isMarkActive(view.state, markdownSchema.marks.link)) {
+      run(clearLink);
+      return;
+    }
+    if (!canApplyLink(view.state)) return;
+    const href = window.prompt(t.linkUrl)?.trim();
+    if (href) run(applyLink(href));
+  }, [view, run, t]);
+
+  const state = view?.state ?? null;
+
+  // With no document there is nothing to be active IN. Wrapping once beats
+  // guarding at each of the thirteen reads below, and keeps the button table a
+  // table rather than a column of ternaries.
+  const blockActive = (nodeType: NodeType, attrs?: Record<string, unknown>): boolean =>
+    state !== null && isBlockActive(state, nodeType, attrs);
+  const markActive = (markType: MarkType): boolean =>
+    state !== null && isMarkActive(state, markType);
+  const { nodes, marks } = markdownSchema;
+
+  const items: ToolbarItem[] = [
+    {
+      kind: "button",
+      icon: "heading-1",
+      tooltip: t.heading1,
+      active: blockActive(nodes.heading, { level: 1 }),
+      onPress: () => run(toggleHeading(1)),
+    },
+    {
+      kind: "button",
+      icon: "heading-2",
+      tooltip: t.heading2,
+      active: blockActive(nodes.heading, { level: 2 }),
+      onPress: () => run(toggleHeading(2)),
+    },
+    {
+      kind: "button",
+      icon: "heading-3",
+      tooltip: t.heading3,
+      active: blockActive(nodes.heading, { level: 3 }),
+      onPress: () => run(toggleHeading(3)),
+    },
+    { kind: "divider" },
+    {
+      kind: "button",
+      icon: "bold",
+      tooltip: t.bold,
+      active: markActive(marks.strong),
+      onPress: () => run(toggleStrong),
+    },
+    {
+      kind: "button",
+      icon: "italic",
+      tooltip: t.italic,
+      active: markActive(marks.em),
+      onPress: () => run(toggleEm),
+    },
+    {
+      kind: "button",
+      icon: "code",
+      tooltip: t.inlineCode,
+      active: markActive(marks.code),
+      onPress: () => run(toggleCode),
+    },
+    { kind: "divider" },
+    {
+      kind: "button",
+      icon: "list",
+      tooltip: t.bulletList,
+      active: blockActive(nodes.bullet_list),
+      onPress: () => run(toggleBulletList),
+    },
+    {
+      kind: "button",
+      icon: "list-ordered",
+      tooltip: t.numberedList,
+      active: blockActive(nodes.ordered_list),
+      onPress: () => run(toggleOrderedList),
+    },
+    {
+      kind: "button",
+      icon: "text-quote",
+      tooltip: t.quote,
+      active: blockActive(nodes.blockquote),
+      onPress: () => run(toggleBlockquote),
+    },
+    {
+      kind: "button",
+      icon: "code-xml",
+      tooltip: t.codeBlock,
+      active: blockActive(nodes.code_block),
+      onPress: () => run(toggleCodeBlock),
+    },
+    { kind: "divider" },
+    {
+      kind: "button",
+      icon: "link-2",
+      tooltip: t.link,
+      active: markActive(marks.link),
+      onPress: handleLink,
+    },
+    {
+      kind: "button",
+      icon: "table-2",
+      tooltip: t.insertTable,
+      active: false,
+      onPress: () => run(insertTable),
+    },
+    {
+      kind: "button",
+      icon: "minus",
+      tooltip: t.divider,
+      active: false,
+      onPress: () => run(insertHorizontalRule),
+    },
+  ];
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: 2,
+        // No rule beneath it. The toolbar sits ABOVE the field rather than
+        // inside its frame, so it needs no edge of its own — the field's own
+        // border is the boundary, and a second line 4px above it was two
+        // boundaries for one object.
+        paddingBottom: 6,
+      }}
+    >
+      {items.map((item, index) =>
+        item.kind === "divider" ? (
+          <View
+            key={`divider-${index}`}
+            style={{ width: 1, height: 22, marginHorizontal: 6, backgroundColor: colors.border }}
+          />
+        ) : (
+          <IconButton
+            key={item.icon}
+            // OUTSIDE the field, these are standalone controls rather than
+            // furniture inside one — and a standalone control is the band's
+            // height. Inside the frame `md` was right; on their own they read
+            // as undersized next to every other control on the page.
+            size="lg"
+            icon={item.icon}
+            tooltip={item.tooltip}
+            onPress={item.onPress}
+            disabled={inert}
+            iconColor={item.active ? colors.zinc[900] : colors.zinc[600]}
+            style={{
+              borderRadius: 8,
+              backgroundColor: item.active ? colors.zinc[200] : "transparent",
+            }}
+          />
+        ),
+      )}
+    </View>
+  );
+}

package/src/matrix.tsx

@@ -135,7 +135,7 @@ function MatrixHeader({ corner, totalLabel }: MatrixHeaderProps) {
     <View style={styles.headRow}>
       <View style={[styles.rowLabel, { width: rowLabelWidth }]}>
         {typeof corner === "string" ? (
-          <Text size="xs" color="muted" numberOfLines={1}>
+          <Text size="sm" color="muted" weight="medium" numberOfLines={1}>
             {corner}
           </Text>
         ) : (

package/src/modal.tsx

@@ -6,6 +6,7 @@ import { Text } from "@lotics/ui/text";
 import { PortalHost } from "@lotics/ui/portal";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
 import { useLoticsLocale } from "@lotics/ui/locale";
+import { HeadingAltitudeContext } from "./heading_altitude";
 
 export interface ModalProps {
   open: boolean;
@@ -100,7 +101,15 @@ export interface ModalBodyProps {
  */
 export function ModalBody(props: ModalBodyProps) {
   const { children } = props;
-  return <ScrollView contentContainerStyle={styles.bodyContent}>{children}</ScrollView>;
+  // A takeover is still a panel: `ModalHeader`'s title is `lg`, so a section
+  // heading inside the body takes the ramp's `####` rung. Same rule as the
+  // drawer and the dialog, published from the same kind of region — the one
+  // that owns the surface's padding. See `heading_altitude.ts`.
+  return (
+    <HeadingAltitudeContext.Provider value="panel">
+      <ScrollView contentContainerStyle={styles.bodyContent}>{children}</ScrollView>
+    </HeadingAltitudeContext.Provider>
+  );
 }
 
 export interface ModalFooterProps {

package/src/popover.tsx

@@ -23,6 +23,7 @@ import {
 } from "./popover_layers";
 import { PopoverNavContext, type PopoverNavContextValue } from "./popover_nav";
 import { useLoticsLocale } from "./locale";
+import { HeadingAltitudeContext } from "./heading_altitude";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
 export type PopoverAlign = "start" | "center" | "end";
@@ -607,155 +608,163 @@ export function PopoverContent(props: PopoverContentProps) {
   const contentZIndex = baseZIndex + nestingLevel * 2 + 1;
 
   return (
-    <Portal>
-      {/* Modal scrim — ONLY for the bottom-sheet (`small`) mode, which IS modal.
-          The anchored popover is NON-MODAL: no overlay, so the rest of the page
-          stays interactive; outside-dismiss is the click listener above. */}
-      {small && (
+    // A popover is dialog-scale — a few hundred px with its own chrome — so a
+    // heading inside it takes the ramp's `####` rung, exactly as one inside a
+    // dialog does. The provider covers ALL THREE BANDS, not just the scroller:
+    // `PopoverHeader` is a slot the CALLER composes (unlike a Drawer's title,
+    // which is chrome the container renders), and the identity line of a peek
+    // lives there. See `heading_altitude.ts`.
+    <HeadingAltitudeContext.Provider value="panel">
+      <Portal>
+        {/* Modal scrim — ONLY for the bottom-sheet (`small`) mode, which IS modal.
+            The anchored popover is NON-MODAL: no overlay, so the rest of the page
+            stays interactive; outside-dismiss is the click listener above. */}
+        {small && (
+          <div
+            style={{
+              position: "fixed",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              opacity: isBottomSheetShown ? 1 : 0,
+              transition: "opacity 0.3s ease",
+              zIndex: overlayZIndex,
+              pointerEvents: "auto",
+            }}
+            onClick={handleOverlayClick}
+            onMouseDown={(e) => e.stopPropagation()}
+          />
+        )}
+        {/* Popover */}
         <div
+          ref={popoverRef}
+          data-popover="true"
+          data-popover-level={nestingLevel}
+          data-testid={testID}
+          role="dialog"
+          aria-modal={small ? true : undefined}
+          tabIndex={small ? undefined : -1}
           style={{
             position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-            opacity: isBottomSheetShown ? 1 : 0,
-            transition: "opacity 0.3s ease",
-            zIndex: overlayZIndex,
-            pointerEvents: "auto",
-          }}
-          onClick={handleOverlayClick}
-          onMouseDown={(e) => e.stopPropagation()}
-        />
-      )}
-      {/* Popover */}
-      <div
-        ref={popoverRef}
-        data-popover="true"
-        data-popover-level={nestingLevel}
-        data-testid={testID}
-        role="dialog"
-        aria-modal={small ? true : undefined}
-        tabIndex={small ? undefined : -1}
-        style={{
-          position: "fixed",
-          padding: PANEL_INSET,
-          borderTopLeftRadius: 16,
-          borderTopRightRadius: 16,
-          borderBottomLeftRadius: small ? 0 : 16,
-          borderBottomRightRadius: small ? 0 : 16,
-          backgroundColor: colors.background,
-          boxShadow: colors.shadow,
-          boxSizing: "border-box",
-          zIndex: contentZIndex,
-          transition: small ? "transform 0.3s ease" : undefined,
-          ...(small
-            ? {
-                bottom: 0,
-                left: 0,
-                right: 0,
-                maxHeight: "90vh",
-                display: "flex",
-                flexDirection: "column",
-                paddingBottom: 32,
-                transform: isBottomSheetShown ? "translateY(0)" : "translateY(100%)",
-              }
-            : position
+            padding: PANEL_INSET,
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            borderBottomLeftRadius: small ? 0 : 16,
+            borderBottomRightRadius: small ? 0 : 16,
+            backgroundColor: colors.background,
+            boxShadow: colors.shadow,
+            boxSizing: "border-box",
+            zIndex: contentZIndex,
+            transition: small ? "transform 0.3s ease" : undefined,
+            ...(small
               ? {
-                  top: position.top,
-                  left: position.left,
-                  width: "max-content",
-                  maxWidth: 800,
-                  maxHeight: "80vh",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  maxHeight: "90vh",
                   display: "flex",
                   flexDirection: "column",
+                  paddingBottom: 32,
+                  transform: isBottomSheetShown ? "translateY(0)" : "translateY(100%)",
                 }
-              : {
-                  top: -9999,
-                  left: -9999,
-                  width: "max-content",
-                  maxWidth: 800,
-                  maxHeight: "80vh",
-                  display: "flex",
-                  flexDirection: "column",
-                }),
-          // INHERIT means inherit — the width, not just a floor under it. The
-          // flag is set only by a popover anchored to a FIELD (Select,
-          // InlineSelect, Combobox), and a field's own width is the right width
-          // for the list of values that field can hold: option text longer than
-          // the field belongs on a second line, not on a wider panel.
-          //
-          // As a floor alone this LOOKED right, because with short options
-          // max-content lands on the trigger width anyway. It broke the moment
-          // an option was a sentence: the panel grew to the `maxWidth: 800` cap
-          // and then slid sideways to stay on screen, so a 371px field opened an
-          // 800px list starting 421px to its left, outside the drawer that owns
-          // the field.
-          //
-          // Floored at MIN_CONTROL_WIDTH so a genuinely narrow trigger — a
-          // a select in a dense grid column — still opens a list
-          // wide enough to read, rather than inheriting a width nothing fits in.
-          ...(inheritTriggerWidth &&
-            !small &&
-            triggerWidth > 0 && {
-              width: Math.max(triggerWidth, MIN_CONTROL_WIDTH),
-              maxWidth: Math.max(triggerWidth, MIN_CONTROL_WIDTH),
-            }),
-          // Last, so it beats the `max-content` every branch above sets.
-          ...(width != null && !small ? { width, maxWidth: width } : null),
-        }}
-        onClick={(e) => e.stopPropagation()}
-        // React synthetic events bubble through portals via the REACT tree, so a
-        // keydown inside this popover — or inside a Modal/Alert opened from it,
-        // which is a React child even though it portals to document.body — would
-        // reach the TRIGGER's ancestors (e.g. a grid cell's Escape-cancels-edit
-        // onKeyDown) and let a lower layer act on a higher layer's keys, on
-        // keydown, before any keyup layering logic runs. Keyboard sibling of the
-        // click curtain above. Keyup deliberately keeps flowing: RN-web Modal
-        // closes on a document-level keyup listener, and this popover's own
-        // Escape handling is a document capture keyup — neither must be starved.
-        onKeyDown={(e) => e.stopPropagation()}
-      >
-        {small && (
-          <View
-            style={{
-              padding: 8,
-              flexDirection: "row",
-              justifyContent: "flex-end",
-            }}
-          >
-            <IconButton icon="x" tooltip={closeLabel} onPress={handleClose} />
-          </View>
-        )}
-        {header}
-        {disableBodyScroll ? (
-          <SizeBoundary style={style}>{bodyChildren}</SizeBoundary>
-        ) : (
-          // FULL-BLEED HORIZONTALLY, then re-inset by the same 12. The panel
-          // pads all four sides, so a scroller sitting inside that padding
-          // clips its content 12px short of the edge and parks the scrollbar
-          // there too — content slides under an invisible margin instead of
-          // under the panel's own edge. Pulling out and padding back keeps the
-          // text on the exact column the header and footer use while giving the
-          // scroll its real edges. `PopoverFooter` already does this dance for
-          // its divider; the body needed it for the same reason.
-          //
-          // Horizontal only: the vertical padding is the gap to the header and
-          // footer, which is a gap the reader wants.
-          <ScrollView
-            style={[SCROLL_BODY, style]}
-            contentContainerStyle={[SCROLL_BODY_CONTENT, contentContainerStyle]}
-          >
-            {/* A popover is a box of its own — a few hundred px — so its contents
-                size to the panel rather than to whatever region it was opened
-                from. Both body paths get it; one of them is not a boundary. */}
-            <SizeBoundary>{bodyChildren}</SizeBoundary>
-          </ScrollView>
-        )}
-        {footer}
-      </div>
-    </Portal>
+              : position
+                ? {
+                    top: position.top,
+                    left: position.left,
+                    width: "max-content",
+                    maxWidth: 800,
+                    maxHeight: "80vh",
+                    display: "flex",
+                    flexDirection: "column",
+                  }
+                : {
+                    top: -9999,
+                    left: -9999,
+                    width: "max-content",
+                    maxWidth: 800,
+                    maxHeight: "80vh",
+                    display: "flex",
+                    flexDirection: "column",
+                  }),
+            // INHERIT means inherit — the width, not just a floor under it. The
+            // flag is set only by a popover anchored to a FIELD (Select,
+            // InlineSelect, Combobox), and a field's own width is the right width
+            // for the list of values that field can hold: option text longer than
+            // the field belongs on a second line, not on a wider panel.
+            //
+            // As a floor alone this LOOKED right, because with short options
+            // max-content lands on the trigger width anyway. It broke the moment
+            // an option was a sentence: the panel grew to the `maxWidth: 800` cap
+            // and then slid sideways to stay on screen, so a 371px field opened an
+            // 800px list starting 421px to its left, outside the drawer that owns
+            // the field.
+            //
+            // Floored at MIN_CONTROL_WIDTH so a genuinely narrow trigger — a
+            // a select in a dense grid column — still opens a list
+            // wide enough to read, rather than inheriting a width nothing fits in.
+            ...(inheritTriggerWidth &&
+              !small &&
+              triggerWidth > 0 && {
+                width: Math.max(triggerWidth, MIN_CONTROL_WIDTH),
+                maxWidth: Math.max(triggerWidth, MIN_CONTROL_WIDTH),
+              }),
+            // Last, so it beats the `max-content` every branch above sets.
+            ...(width != null && !small ? { width, maxWidth: width } : null),
+          }}
+          onClick={(e) => e.stopPropagation()}
+          // React synthetic events bubble through portals via the REACT tree, so a
+          // keydown inside this popover — or inside a Modal/Alert opened from it,
+          // which is a React child even though it portals to document.body — would
+          // reach the TRIGGER's ancestors (e.g. a grid cell's Escape-cancels-edit
+          // onKeyDown) and let a lower layer act on a higher layer's keys, on
+          // keydown, before any keyup layering logic runs. Keyboard sibling of the
+          // click curtain above. Keyup deliberately keeps flowing: RN-web Modal
+          // closes on a document-level keyup listener, and this popover's own
+          // Escape handling is a document capture keyup — neither must be starved.
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          {small && (
+            <View
+              style={{
+                padding: 8,
+                flexDirection: "row",
+                justifyContent: "flex-end",
+              }}
+            >
+              <IconButton icon="x" tooltip={closeLabel} onPress={handleClose} />
+            </View>
+          )}
+          {header}
+          {disableBodyScroll ? (
+            <SizeBoundary style={style}>{bodyChildren}</SizeBoundary>
+          ) : (
+            // FULL-BLEED HORIZONTALLY, then re-inset by the same 12. The panel
+            // pads all four sides, so a scroller sitting inside that padding
+            // clips its content 12px short of the edge and parks the scrollbar
+            // there too — content slides under an invisible margin instead of
+            // under the panel's own edge. Pulling out and padding back keeps the
+            // text on the exact column the header and footer use while giving the
+            // scroll its real edges. `PopoverFooter` already does this dance for
+            // its divider; the body needed it for the same reason.
+            //
+            // Horizontal only: the vertical padding is the gap to the header and
+            // footer, which is a gap the reader wants.
+            <ScrollView
+              style={[SCROLL_BODY, style]}
+              contentContainerStyle={[SCROLL_BODY_CONTENT, contentContainerStyle]}
+            >
+              {/* A popover is a box of its own — a few hundred px — so its contents
+                  size to the panel rather than to whatever region it was opened
+                  from. Both body paths get it; one of them is not a boundary. */}
+              <SizeBoundary>{bodyChildren}</SizeBoundary>
+            </ScrollView>
+          )}
+          {footer}
+        </div>
+      </Portal>
+    </HeadingAltitudeContext.Provider>
   );
 }
 

package/src/pressable_row.tsx

@@ -8,9 +8,9 @@ export interface PressableRowProps {
   onPress: () => void;
   /** The open/selected record — paints the persistent highlight. */
   selected?: boolean;
-  /** Part of a multi-select set — paints a persistent blue tint, distinct from
-   *  `selected` (the open record). The hover / open / press wash overrides it, so
-   *  it's the resting state of a ticked row in a bulk-select register. */
+  /** Part of a multi-select set — paints the same resting ground `selected` does.
+   *  What tells a ticked row from an open one is the ticked checkbox, which is
+   *  unmissable; the press wash still overrides both. */
   marked?: boolean;
   /**
    * - "register" (THE record-list default): a rounded row whose hover/open/`marked`
@@ -89,18 +89,27 @@ export function PressableRow(props: PressableRowProps) {
           // FOUR states, and they must not collide. Selection and hover painted
           // the SAME wash, which made "the row whose record is open" and "the row
           // the pointer happens to be over" indistinguishable — the register's
-          // one piece of persistent state, erased by a transient one. Hover is
-          // now neutral and lighter, because it answers "you can press this",
-          // while selection carries the brand's WASH because it answers "you are
-          // here" — the state the accent exists for. `pressed` stays neutral and
-          // darkest: a momentary depth cue, not an identity.
-          // `marked` shares the wash rather than keeping its own literal blue-50:
-          // that hex was the same colour the wash now resolves to, minus the
-          // theming, so a branded app painted its ticked rows in a hue it had
-          // replaced everywhere else. What separates a ticked row from an open
-          // one is the ticked checkbox, which is unmissable; two washes for two
-          // orthogonal states could never render anyway on a row that is both.
-          backgroundColor: pressed ? colors.zinc[200] : selected || marked ? colors.accent_wash : hovered ? colors.zinc[50] : undefined,
+          // one piece of persistent state, erased by a transient one.
+          //
+          // ONE NEUTRAL STEP is what separates them: zinc-50 hovered, zinc-100
+          // selected, zinc-200 pressed. The fix was briefly to give selection a
+          // blue ground instead, which read as a brand nobody had chosen on the
+          // busiest surface in the product — and contradicted `accent`'s own rule
+          // that it does not paint interaction chrome, which is exactly what
+          // these four states are.
+          //
+          // THE LITERAL, not `accent_wash`. Reading a selection through the brand
+          // token is how the blue got here in the first place: a themed app would
+          // tint the row, so "selection is neutral" would be true of the kit and
+          // false of every app that set an accent. The token still exists and
+          // still means the brand's tint — it is spent on ATTENTION now (a drop
+          // target lighting up), never on which record is open.
+          //
+          // `marked` shares the ground rather than keeping its own blue-50: what
+          // separates a ticked row from an open one is the ticked checkbox, which
+          // is unmissable, and two grounds for two orthogonal states could never
+          // render anyway on a row that is both.
+          backgroundColor: pressed ? colors.zinc[200] : selected || marked ? colors.zinc[100] : hovered ? colors.zinc[50] : undefined,
         },
         style,
       ]}