@adecore/ui 0.35.5 → 0.36.0

package/dist/button-class.js

@@ -0,0 +1,92 @@
+import clsx from 'clsx';
+const BASE = 'inline-flex shrink-0 items-center justify-center gap-1.5 font-medium disabled:opacity-50';
+const VARIANT = {
+  // A filled button darkens under the pointer. Its color is the meaning, so no token of its own for hover.
+  primary: 'bg-accent text-accent-text hover:brightness-90 disabled:hover:brightness-100',
+  // Drawn like a field, so it stands a step off any ground, a dialog's raised one included.
+  secondary: 'border border-field-border bg-field text-text hover:bg-surface-hover disabled:hover:bg-field',
+  ghost: 'text-text-muted hover:bg-surface-hover hover:text-text',
+  danger: 'bg-status-error text-accent-text hover:brightness-90 disabled:hover:brightness-100',
+  // A step that forgets something rather than destroys it: softer than the filled button of a deletion that cannot come back.
+  'danger-outline': 'border border-status-error/35 text-status-error hover:bg-status-error/10 disabled:hover:bg-transparent',
+  positive: 'bg-positive text-positive-text hover:brightness-90 disabled:hover:brightness-100',
+  // Dark on a light theme, light on a dark one, matching what Apple's and GitHub's sign-in buttons ask for.
+  inverse: 'bg-text text-bg hover:opacity-90 disabled:hover:opacity-100'
+};
+/* 28 and 32 pixels are the compact and the normal control; 24 fits a header of 32. */
+const SIZE = {
+  xs: 'h-6 px-2',
+  sm: 'h-7 px-2.5',
+  md: 'h-8 px-3'
+};
+/* A pill is one size of its own, for a control that sits in a round row, so it takes the place of `size`. */
+const SHAPE = {
+  default: 'rounded-md text-xs',
+  pill: 'h-9 rounded-full px-3.5 text-sm'
+};
+export function buttonClass(variant, size, shape) {
+  return clsx(BASE, SHAPE[shape], VARIANT[variant], shape === 'default' && SIZE[size]);
+}
+/*
+ * A split button is one shape: the frame draws the radius, the outline of an outlined variant and the
+ * height, and clips both halves, which carry the ground and its hover each on their own.
+ */
+const SPLIT_FRAME = {
+  primary: '',
+  secondary: 'border border-field-border',
+  ghost: '',
+  danger: '',
+  'danger-outline': 'border border-status-error/35',
+  positive: '',
+  inverse: ''
+};
+const SPLIT_HALF = {
+  primary: VARIANT.primary,
+  secondary: 'bg-field text-text hover:bg-surface-hover disabled:hover:bg-field',
+  ghost: VARIANT.ghost,
+  danger: VARIANT.danger,
+  'danger-outline': 'text-status-error hover:bg-status-error/10 disabled:hover:bg-transparent',
+  positive: VARIANT.positive,
+  inverse: VARIANT.inverse
+};
+/* The short line between the halves: a light alpha of the text over a filled ground, the border's alpha elsewhere. */
+const SPLIT_SEPARATOR = {
+  primary: 'before:bg-current/30',
+  secondary: 'before:bg-border-strong',
+  ghost: 'before:bg-border-strong',
+  danger: 'before:bg-current/30',
+  'danger-outline': 'before:bg-status-error/35',
+  positive: 'before:bg-current/30',
+  inverse: 'before:bg-current/30'
+};
+const SPLIT_HEIGHT = {
+  xs: 'h-6',
+  sm: 'h-7',
+  md: 'h-8'
+};
+/* Half the height of the button, centered by auto margins, which land on whole pixels in the bordered frames too. */
+const SPLIT_SEPARATOR_HEIGHT = {
+  xs: 'before:h-3',
+  sm: 'before:h-3.5',
+  md: 'before:h-4'
+};
+const SPLIT_PADDING = {
+  action: {
+    xs: 'px-2',
+    sm: 'px-2.5',
+    md: 'px-3'
+  },
+  // The chevron half is narrower than a half with a word in it.
+  menu: {
+    xs: 'px-1',
+    sm: 'px-1.5',
+    md: 'px-2'
+  }
+};
+export function splitFrameClass(variant, size) {
+  return clsx('inline-flex shrink-0 items-stretch overflow-clip rounded-md', SPLIT_HEIGHT[size], SPLIT_FRAME[variant]);
+}
+/* The frame clips the focus outline, so a half draws it inside its own edge. */
+export function splitHalfClass(variant, size, half) {
+  return clsx('inline-flex items-center justify-center gap-1.5 text-xs font-medium focus-visible:-outline-offset-2 disabled:opacity-50', SPLIT_HALF[variant], SPLIT_PADDING[half][size], half === 'menu' && clsx('relative before:absolute before:inset-y-0 before:left-0 before:my-auto before:w-px before:content-[""]', SPLIT_SEPARATOR_HEIGHT[size], SPLIT_SEPARATOR[variant]));
+}

package/dist/file-tree/empty-lines.d.ts

@@ -0,0 +1,11 @@
+import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+export type FileTreeEmptyLabel = (row: FileTreeVisibleRow) => string | undefined;
+export declare function emptyLineOf(directory: string): string;
+export declare function isEmptyLine(path: string): boolean;
+export declare function directoryOfEmptyLine(path: string): string;
+export declare function emptyLineChanges(rows: readonly FileTreeVisibleRow[], labelOf: FileTreeEmptyLabel, has: (path: string) => boolean, added: Iterable<string>): {
+    add: string[];
+    remove: string[];
+};
+export declare function pastEmptyLine(model: FileTree, key: string): string | null;
+export declare function skipEmptyLine(model: FileTree, key: string): boolean;

package/dist/file-tree/empty-lines.js

@@ -0,0 +1,89 @@
+import { pathOfRow } from './helpers.js';
+/*
+ * The engine draws only rows it holds, so the line under an open, empty directory is a child the
+ * wrapper adds and removes itself. U+FDD0 is a noncharacter, which no real file name carries.
+ */
+const EMPTY_LINE_NAME = '﷐empty';
+export function emptyLineOf(directory) {
+  return `${directory}${EMPTY_LINE_NAME}`;
+}
+export function isEmptyLine(path) {
+  return path.endsWith(`/${EMPTY_LINE_NAME}`);
+}
+export function directoryOfEmptyLine(path) {
+  return path.slice(0, -EMPTY_LINE_NAME.length);
+}
+/*
+ * The lines to add and the ones to take away: an open directory whose label is not undefined and
+ * that holds nothing besides its own line gets one, every other line the wrapper added goes.
+ */
+export function emptyLineChanges(rows, labelOf, has, added) {
+  const wanted = new Set();
+  rows.forEach((row, index) => {
+    if (row.kind !== 'directory' || !row.isExpanded) {
+      return;
+    }
+    const line = emptyLineOf(row.path);
+    for (let next = index + 1; next < rows.length && rows[next].depth > row.depth; next++) {
+      if (rows[next].path !== line) {
+        return;
+      }
+    }
+    if (labelOf(row) !== undefined) {
+      wanted.add(line);
+    }
+  });
+  return {
+    add: [...wanted].filter(line => !has(line)),
+    remove: [...added].filter(line => !wanted.has(line) && has(line))
+  };
+}
+/*
+ * Where an arrow, Home or End goes instead when the row it would land on is a line: past it, or
+ * nowhere (the focused path itself) where nothing lies past it. Null when no line is in the way.
+ */
+export function pastEmptyLine(model, key) {
+  const index = model.getFocusedIndex();
+  const focused = model.getFocusedPath();
+  if (index < 0 || focused === null) {
+    return null;
+  }
+  const count = model.getVisibleCount();
+  const at = position => position >= 0 && position < count ? model.getVisibleRows(position, position)[0] ?? null : null;
+  const lineAt = position => {
+    const row = at(position);
+    return row !== null && isEmptyLine(row.path);
+  };
+  const pathAt = position => {
+    const row = at(position);
+    return row === null ? focused : pathOfRow(row);
+  };
+  if ((key === 'ArrowDown' || key === 'ArrowRight') && lineAt(index + 1)) {
+    return key === 'ArrowDown' ? pathAt(index + 2) : focused;
+  }
+  if (key === 'ArrowUp' && lineAt(index - 1)) {
+    return pathAt(index - 2);
+  }
+  if (key === 'End' && lineAt(count - 1)) {
+    return pathAt(count - 2);
+  }
+  return null;
+}
+/* Focus that still lands on a line, through a key with a modifier or the engine giving focus back to the line's element, goes on the way the last key went. */
+export function skipEmptyLine(model, key) {
+  const path = model.getFocusedPath();
+  if (path === null || !isEmptyLine(path)) {
+    return false;
+  }
+  if (key === 'ArrowUp' || key === 'PageUp') {
+    model.focusPreviousItem();
+    return true;
+  }
+  if (key === 'ArrowDown' || key === 'PageDown' || key === 'End') {
+    model.focusNextItem();
+  }
+  if (model.getFocusedPath() === path) {
+    model.focusPath(directoryOfEmptyLine(path));
+  }
+  return true;
+}

package/dist/file-tree/highlight.d.ts

@@ -0,0 +1,4 @@
+export declare const MATCH_HIGHLIGHT = "adecore-tree-match";
+export declare function matchHighlight(): Highlight | null;
+export declare function matchRanges(text: string, query: string): [number, number][];
+export declare function rangesOfMatches(rows: readonly HTMLElement[], query: string): Range[];

package/dist/file-tree/highlight.js

@@ -0,0 +1,75 @@
+/* The name a tree's shadow stylesheet colors with `::highlight()`. One registry entry is shared by every tree on the page. */
+export const MATCH_HIGHLIGHT = 'adecore-tree-match';
+// The copies of a name the engine keeps for truncation, which the tree's stylesheet hides.
+const HIDDEN_PARTS = '[data-truncate-content="overflow"], [data-truncate-marker-cell], [data-truncate-fill]';
+let shared = null;
+/* Null where the browser has no CSS Custom Highlight API; the names are then drawn without a mark. */
+export function matchHighlight() {
+  if (typeof CSS === 'undefined' || !('highlights' in CSS) || typeof Highlight === 'undefined') {
+    return null;
+  }
+  if (shared === null) {
+    shared = new Highlight();
+  }
+  if (CSS.highlights.get(MATCH_HIGHLIGHT) !== shared) {
+    CSS.highlights.set(MATCH_HIGHLIGHT, shared);
+  }
+  return shared;
+}
+/* Every place `query` occurs in `text`, ignoring case, as `[start, end)` pairs that do not overlap. */
+export function matchRanges(text, query) {
+  const wanted = query.toLowerCase();
+  const haystack = text.toLowerCase();
+  // A letter that lowercases to more than one would shift every offset after it.
+  if (wanted === '' || haystack.length !== text.length) {
+    return [];
+  }
+  const found = [];
+  let at = haystack.indexOf(wanted);
+  while (at !== -1) {
+    found.push([at, at + wanted.length]);
+    at = haystack.indexOf(wanted, at + wanted.length);
+  }
+  return found;
+}
+/* The ranges over the visible text of each row's name where `query` occurs. */
+export function rangesOfMatches(rows, query) {
+  const ranges = [];
+  if (query === '') {
+    return ranges;
+  }
+  for (const row of rows) {
+    const content = row.querySelector('[data-item-section="content"]');
+    if (content === null) {
+      continue;
+    }
+    const nodes = [];
+    const walker = row.ownerDocument.createTreeWalker(content, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node !== null; node = walker.nextNode()) {
+      if (node.parentElement?.closest(HIDDEN_PARTS) === null) {
+        nodes.push(node);
+      }
+    }
+    const starts = [];
+    let text = '';
+    for (const node of nodes) {
+      starts.push(text.length);
+      text += node.data;
+    }
+    // The node an offset falls in, and the offset inside it; an end may sit at the end of a node.
+    const locate = (offset, end) => {
+      let index = nodes.length - 1;
+      while (index > 0 && (end ? starts[index] >= offset : starts[index] > offset)) {
+        index--;
+      }
+      return [nodes[index], offset - starts[index]];
+    };
+    for (const [start, end] of matchRanges(text, query)) {
+      const range = row.ownerDocument.createRange();
+      range.setStart(...locate(start, false));
+      range.setEnd(...locate(end, true));
+      ranges.push(range);
+    }
+  }
+  return ranges;
+}

package/dist/file-tree/parts.d.ts

@@ -2,6 +2,9 @@ import { type ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+import type { LucideIcon } from 'lucide-react';
+import type { FileTreeEmptyLabel } from './empty-lines.ts';
+import { type FileTreeDecorationOrder } from './use-slots.ts';
 export type FileTreeRootProps = useRender.ComponentProps<'div'> & {
     model: FileTree;
     label?: string;
@@ -15,6 +18,11 @@ export type FileTreeRootProps = useRender.ComponentProps<'div'> & {
     onExpandedPathsChange?(paths: readonly string[]): void;
     renderControl?(row: FileTreeVisibleRow): ReactNode;
     renderDecoration?(row: FileTreeVisibleRow): ReactNode;
+    decorationOrder?: FileTreeDecorationOrder;
+    rowIcon?(row: FileTreeVisibleRow): LucideIcon | undefined;
+    fitContent?: boolean;
+    highlight?: string;
+    emptyLabel?: FileTreeEmptyLabel;
     treeProps?: Omit<PierreProps, 'model'>;
 };
-export declare function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus, onActivate, onFocusMove, onLoadChildren, onExpandedPathsChange, onRowContextMenu, onRowDragStart, renderControl, renderDecoration, treeProps, render, className, ref, children, onClick, onKeyDownCapture, ...props }: FileTreeRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function FileTreeRoot({ model, label, resetKey, selectionFollowsFocus, onActivate, onFocusMove, onLoadChildren, onExpandedPathsChange, onRowContextMenu, onRowDragStart, renderControl, renderDecoration, decorationOrder, rowIcon, fitContent, highlight, emptyLabel, treeProps, render, className, ref, children, onClick, onKeyDownCapture, style, ...props }: FileTreeRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;