Changed files · Pixel HD component

<hf-tree>· loading

Tryuse the arrow keys, or “Changed only”.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-tree>

Props

pathsremounts

<HfTree
  paths="src/auth/session.ts:M,src/auth/token.ts:A,src/auth/legacy.ts:D,src/api/client.ts:M,src/api/routes.ts,src/ui/composer.tsx:M,src/ui/theme.ts,tests/auth.spec.ts:A,docs/README.md:M,package.json:M,tsconfig.json"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-tree

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-tree.json

Usage

import { HfTree } from "@/components/lumesec/hf-tree";

export function Example() {
  return (
    <HfTree />
  );
}

Behaviour

Builds a tree from a list of paths with M/A/D markers. Pixel icons take the status colour, folders count their changes and the selection springs between rows. Full tree keyboard support.

API reference

Attributes

pathsReact proppathsTypestringDefault

src/auth/session.ts:M,src/auth/token.ts:A,src/auth/legacy.ts:D,src/api/client.ts:M,src/api/routes.ts,src/ui/composer.tsx:M,src/ui/theme.ts,tests/auth.spec.ts:A,docs/README.md:M,package.json:M,tsconfig.json

Comma-separated file paths, each optionally followed by :M (modified), :A (added) or :D (deleted). Folders come from the / segments. Read once on connect.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

selectReact proponSelectDetail{ path: string, file: boolean }

Fires when the user selects a row by click or keyboard, including each arrow-key move. file is false for folders.

Properties

entries (read-only)Type{ path: string; st: string }[]

The parsed paths; st is M, A, D or an empty string.

Keyboard

Keys	Action
ArrowDown / ArrowUp	Move to and select the next or previous row.
ArrowRight	Expand a closed folder; otherwise move to the next row.
ArrowLeft	Collapse an open folder; otherwise move to the parent folder.
Enter / Space	Select the row; on a folder, also expand or collapse it.

Accessibility

Rows sit in a role="tree" container as role="treeitem" with aria-level, aria-selected and, on folders, aria-expanded. The tree has no accessible name.
Focus uses a roving tabindex: only the selected row is in the tab order.
Status letters have a title of Modified, Added or Deleted, and deleted files are struck through.
Changed only is a toggle button with aria-pressed.
Icons, guide lines and the selection highlight are drawn on an aria-hidden canvas.
Reduced motion: new rows appear without sliding in or the scan line, and the selection highlight jumps instead of springing.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --card, --destructive, --foreground, --lumesec, --lumesec-success, --lumesec-warning and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-danger, --ui-fg, --ui-mono, --ui-muted, --ui-ok, --ui-surface and --ui-warn.

Notes

Folders that contain changes start expanded, and the first changed file is selected without firing select.
Changed only hides unchanged files and folders without changes. The header shows the number of changed files.
Siblings sort folders first, then by name.

<hf-approve>

Permission prompthf-approve

<hf-diff>

Diff reviewhf-diff

<hf-graph>

Agent graphhf-graph

<hf-redact>

PII redactionhf-redact

Related