@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/content-compass/ContentCompass.styles.js

@@ -0,0 +1,32 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+//#region src/components/erd/content-compass/ContentCompass.styles.ts
+var compass = css`
+  position: absolute;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 12px;
+  box-sizing: border-box;
+  border: 1px solid var(--toast-border);
+  border-radius: 14px;
+  background-color: var(--toast-background);
+  color: var(--foreground);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    color: var(--active);
+    border-color: var(--active);
+  }
+`;
+var distance = css`
+  ${typography.paragraph};
+  font-variant-numeric: tabular-nums;
+`;
+//#endregion
+export { compass, distance };

package/dist/components/erd/content-compass/compassGeometry.js

@@ -0,0 +1,71 @@
+import { getContentRects } from "../../../konva/scene/contentBounds.js";
+import { hasViewport, sceneScrollToAction } from "../../../engine/modules/settings/atom.actions.js";
+import { getScrollToCenter, getViewTransform, getVisibleCanvasRect } from "../minimap/minimapGeometry.js";
+//#region src/components/erd/content-compass/compassGeometry.ts
+var DEGREES = 180 / Math.PI;
+function gapBetween(rect, other) {
+	return {
+		x: Math.max(rect.x - (other.x + other.width), other.x - (rect.x + rect.width), 0),
+		y: Math.max(rect.y - (other.y + other.height), other.y - (rect.y + rect.height), 0)
+	};
+}
+var middleOf = (rect) => ({
+	x: rect.x + rect.width / 2,
+	y: rect.y + rect.height / 2
+});
+function nearestContent(rects, screen) {
+	let nearest = null;
+	let distance = Infinity;
+	for (const rect of rects) {
+		const gap = gapBetween(screen, rect);
+		if (gap.x === 0 && gap.y === 0) return null;
+		const away = Math.hypot(gap.x, gap.y);
+		if (away < distance) {
+			distance = away;
+			nearest = rect;
+		}
+	}
+	if (!nearest) return null;
+	const target = middleOf(nearest);
+	const from = middleOf(screen);
+	return {
+		angle: Math.atan2(target.y - from.y, target.x - from.x) * DEGREES,
+		distance,
+		target
+	};
+}
+function getContentCompass(state, source = "document") {
+	if (!hasViewport(state.editor.viewport)) return null;
+	return nearestContent(getContentRects(state, [], source), getVisibleCanvasRect(getViewTransform(state, source)));
+}
+function scrollToNearestContent(store, source = "document") {
+	const compass = getContentCompass(store.state, source);
+	if (!compass) return;
+	const origin = getScrollToCenter(getViewTransform(store.state, source), compass.target);
+	store.dispatch(sceneScrollToAction(source, {
+		originX: origin.x,
+		originY: origin.y
+	}));
+}
+var UNITS = [
+	"",
+	"k",
+	"M",
+	"B"
+];
+var STEP = 1e3;
+var DECIMAL_UNDER = 9.95;
+function formatDistance(distance) {
+	let value = Math.round(Math.max(distance, 0));
+	let label = String(value);
+	let unit = 0;
+	while (value >= STEP && unit < UNITS.length - 1) {
+		const scaled = value / STEP;
+		unit += 1;
+		label = scaled < DECIMAL_UNDER ? scaled.toFixed(1) : String(Math.round(scaled));
+		value = Number(label);
+	}
+	return `${label}${UNITS[unit]}`;
+}
+//#endregion
+export { formatDistance, getContentCompass, nearestContent, scrollToNearestContent };

package/dist/components/erd/diff-viewer/DiffViewer.js

@@ -0,0 +1,75 @@
+import { KeyBindingName } from "../../../utils/keyboard-shortcut/index.js";
+import { toJson } from "../../../erd-editor-schema/dist/parser.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../../r-html/dist/observable/index.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { changeViewportAction } from "../../../engine/modules/editor/atom.actions.js";
+import { initialLoadJsonAction$ } from "../../../engine/modules/editor/generator.actions.js";
+import { openToastAction } from "../../../utils/emitter.js";
+import { appDestroy, createAppContext } from "../../appContext.js";
+import { localized } from "../../localized/Localized.js";
+import Toast from "../../primitives/toast/Toast.js";
+import { closePromise } from "../../../utils/promise.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { Diff } from "../../../utils/diff/diff.js";
+import { dropRelationshipHighlight } from "../relationshipHighlight.js";
+import { readerNameViewAction } from "../readerNameView.js";
+import Button from "../../primitives/button/Button.js";
+import DiffErdViewer from "./diff-erd-viewer/DiffErdViewer.js";
+import { diffDocuments } from "../../../utils/diff/diffDocuments.js";
+import DiffTree from "./diff-tree/DiffTree.js";
+import { container, root, viewport } from "./DiffViewer.styles.js";
+//#region src/components/erd/diff-viewer/DiffViewer.tsx
+var BORDER = 1;
+var DiffViewer = (props, ctx) => {
+	const originApp = props.app.value;
+	const getReadonly = () => true;
+	const prevApp = createAppContext({ toWidth: originApp.toWidth }, { getReadonly });
+	const app = createAppContext({ toWidth: originApp.toWidth }, { getReadonly });
+	const { addUnsubscribe } = useUnmounted();
+	const tree = observable({ width: 260 });
+	const getViewport = () => {
+		const { store } = originApp;
+		const { editor: { viewport } } = store.state;
+		return {
+			width: (viewport.width - tree.width) / 2 - BORDER,
+			height: viewport.height
+		};
+	};
+	const applyViewport = () => {
+		const viewport = getViewport();
+		prevApp.store.dispatch(changeViewportAction(viewport));
+		app.store.dispatch(changeViewportAction(viewport));
+	};
+	const handleResize = (width) => {
+		const next = Math.round(Math.min(480, Math.max(200, width)));
+		if (tree.width === next) return;
+		tree.width = next;
+		applyViewport();
+	};
+	prevApp.store.dispatchSync(changeViewportAction(getViewport()), initialLoadJsonAction$(props.initialValue), readerNameViewAction(prevApp.store.state, originApp.store.state));
+	app.store.dispatchSync(changeViewportAction(getViewport()), initialLoadJsonAction$(toJson(originApp.store.state)), readerNameViewAction(app.store.state, originApp.store.state));
+	const { entries, prev: prevDiffMap, next: diffMap } = diffDocuments(prevApp.store.state, app.store.state);
+	const [close, onClose] = closePromise();
+	const handleClose = () => {
+		onClose();
+		props.onClose();
+	};
+	originApp.emitter.emit(openToastAction({
+		close,
+		message: html`<${Toast} .title=${localized("feedback.diffViewer")} .action=${html`<${Button} .size="1" .text=${localized("common.close")} .onClick=${handleClose} />`} />`
+	}));
+	onMounted(() => {
+		addUnsubscribe(originApp.shortcut$.subscribe(({ type }) => {
+			type === KeyBindingName.stop && handleClose();
+		}), watch(originApp.store.state.editor.viewport).subscribe(applyViewport), () => {
+			dropRelationshipHighlight(prevApp.store.state.editor.id);
+			dropRelationshipHighlight(app.store.state.editor.id);
+			appDestroy(prevApp);
+			appDestroy(app);
+		});
+	});
+	return () => html`<div class=${root} .dir="ltr"><div class=${container}><${DiffTree} .prevApp=${prevApp} .app=${app} .entries=${entries} .width=${tree.width} .onResize=${handleResize} /><div class=${viewport}><${DiffErdViewer} .app=${prevApp} .diff=${Diff.delete} .diffMap=${prevDiffMap} /></div><div class=${viewport}><${DiffErdViewer} .app=${app} .diff=${Diff.insert} .diffMap=${diffMap} /></div></div></div>`;
+};
+//#endregion
+export { DiffViewer as default };

package/dist/components/erd/diff-viewer/DiffViewer.styles.js

@@ -0,0 +1,28 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/erd/diff-viewer/DiffViewer.styles.ts
+var root = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--canvas-boundary-background);
+`;
+var container = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+`;
+var viewport = css`
+  display: flex;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  border-left: 1px solid var(--context-menu-border);
+`;
+//#endregion
+export { container, root, viewport };

package/dist/components/erd/diff-viewer/diff-erd-viewer/DiffErdViewer.d.ts

@@ -0,0 +1,11 @@
+import { FC } from '@dineug/r-html';
+import { AppContext } from '../../../appContext';
+import { DiffMap } from '../../../../utils/diff/diff';
+export type DiffErdViewerProps = {
+    app: AppContext;
+    diff: number;
+    diffMap: DiffMap;
+};
+declare const DiffErdViewer: FC<DiffErdViewerProps>;
+export default DiffErdViewer;
+//# sourceMappingURL=DiffErdViewer.d.ts.map

package/dist/components/erd/diff-viewer/diff-erd-viewer/DiffErdViewer.js

@@ -0,0 +1,105 @@
+import { isMod } from "../../../../utils/keyboard-shortcut/index.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { useProvider } from "../../../../r-html/dist/context/useProvider.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../../r-html/dist/render/directives/attribute/ref.js";
+import { hasContent } from "../../../../konva/scene/contentBounds.js";
+import { streamScrollToAction } from "../../../../engine/modules/settings/atom.actions.js";
+import { unselectAllAction$ } from "../../../../engine/modules/editor/generator.actions.js";
+import { streamZoomLevelAction$ } from "../../../../engine/modules/settings/generator.actions.js";
+import { closeColorPickerAction } from "../../../../utils/emitter.js";
+import { appContext } from "../../../appContext.js";
+import { isMiddleButtonPress, onPrevent } from "../../../../utils/domEvent.js";
+import { ownsPress, sceneHit } from "../../hitTest.js";
+import { diffContext } from "../../../diffContext.js";
+import { drag$ } from "../../../../utils/globalEventObservable.js";
+import { sceneInteractionContext } from "../../../sceneInteractionContext.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import { sceneSourceContext } from "../../../sceneSourceContext.js";
+import { Diff } from "../../../../utils/diff/diff.js";
+import { clearRelationshipHighlight } from "../../relationshipHighlight.js";
+import Canvas from "../../canvas/Canvas.js";
+import Minimap from "../../minimap/Minimap.js";
+import ContentCompass from "../../content-compass/ContentCompass.js";
+import VirtualScroll from "../../virtual-scroll/VirtualScroll.js";
+import { usePinchZoom } from "../../../../hooks/usePinchZoom.js";
+import { root } from "./DiffErdViewer.styles.js";
+//#region src/components/erd/diff-viewer/diff-erd-viewer/DiffErdViewer.tsx
+var DiffErdViewer = (props, ctx) => {
+	const root$1 = createRef();
+	const canvas = createRef();
+	const app = props.app;
+	const provider = useProvider(ctx, appContext, app);
+	const sceneSource = useProvider(ctx, sceneSourceContext, "document");
+	const sceneInteraction = useProvider(ctx, sceneInteractionContext, "edit");
+	const diffMap = useProvider(ctx, diffContext, props.diffMap);
+	const state = observable({ grabCursor: "grab" });
+	const { addUnsubscribe } = useUnmounted();
+	const pinch = usePinchZoom({
+		app: () => props.app,
+		root: root$1
+	});
+	addUnsubscribe(() => {
+		diffMap.destroy();
+		sceneInteraction.destroy();
+		sceneSource.destroy();
+		provider.destroy();
+	});
+	const resetScroll = () => {
+		if (root$1.value.scrollTop === 0 && root$1.value.scrollLeft === 0) return;
+		root$1.value.scrollTop = 0;
+		root$1.value.scrollLeft = 0;
+	};
+	const handleWheel = (event) => {
+		event.preventDefault();
+		if (pinch.handleWheel(event)) return;
+		const $mod = isMod(event);
+		const { store } = app;
+		store.dispatch($mod ? streamZoomLevelAction$(event.deltaY < 0 ? .1 : -.1) : streamScrollToAction({
+			movementX: event.deltaX * -1,
+			movementY: event.deltaY * -1
+		}));
+	};
+	const handleMove = ({ event, movementX, movementY }) => {
+		const { store } = app;
+		event.type === "mousemove" && event.preventDefault();
+		if (movementX === 0 && movementY === 0) return;
+		store.dispatch(streamScrollToAction({
+			movementX,
+			movementY
+		}));
+		resetScroll();
+	};
+	const handleDragSelect = (event) => {
+		const el = event.target;
+		if (!el || pinch.handleTouchstart(event)) return;
+		const canHideColorPicker = !el.closest(".color-picker");
+		const onEntity = ownsPress(sceneHit(canvas.value, event), event);
+		const canUnselectAll = !onEntity && !el.closest(".edit-overlay") && !el.closest(".edit-input") && !el.closest(".context-menu-content") && canHideColorPicker;
+		const canDrag = canUnselectAll && canHideColorPicker && !el.closest(".content-compass") && !el.closest(".minimap") && !el.closest(".minimap-viewport") && !el.closest(".virtual-scroll");
+		const middlePan = canDrag && isMiddleButtonPress(event);
+		if (canUnselectAll && !middlePan) {
+			const { store } = app;
+			store.dispatch(unselectAllAction$());
+		}
+		if (canUnselectAll && !middlePan || onEntity && !isMiddleButtonPress(event)) clearRelationshipHighlight(app.store.state.editor.id);
+		if (canHideColorPicker) {
+			const { emitter } = app;
+			emitter.emit(closeColorPickerAction());
+		}
+		if (!canDrag) return;
+		state.grabCursor = "grabbing";
+		drag$.subscribe({
+			next: handleMove,
+			complete: () => {
+				state.grabCursor = "grab";
+			}
+		});
+	};
+	return () => {
+		const showMinimap = hasContent(app.store.state);
+		return html`<div class=${[root, props.diff === Diff.insert ? "diff-viewer-insert" : "diff-viewer-delete"]} style=${{ cursor: state.grabCursor }} ${ref(root$1)} @contextmenu=${onPrevent} @mousedown=${handleDragSelect} @touchstart=${handleDragSelect} @wheel=${handleWheel}><${Canvas} .root=${root$1} .canvas=${canvas} .grabMove=${true} /><${VirtualScroll} />${showMinimap ? html`<${Minimap} />` : null}<${ContentCompass} /></div>`;
+	};
+};
+//#endregion
+export { DiffErdViewer as default };

package/dist/components/erd/diff-viewer/{erd-viewer/ErdViewer.styles.d.ts → diff-erd-viewer/DiffErdViewer.styles.d.ts}

@@ -1,2 +1,2 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
-//# sourceMappingURL=ErdViewer.styles.d.ts.map
+//# sourceMappingURL=DiffErdViewer.styles.d.ts.map

package/dist/components/erd/diff-viewer/diff-erd-viewer/DiffErdViewer.styles.js

@@ -0,0 +1,12 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+//#region src/components/erd/diff-viewer/diff-erd-viewer/DiffErdViewer.styles.ts
+var root = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  touch-action: none;
+`;
+//#endregion
+export { root };

package/dist/components/erd/diff-viewer/diff-tree/DiffTree.js

@@ -0,0 +1,130 @@
+import { KeyBindingName, PANEL_PASSING_BINDINGS, stopsAtPanel } from "../../../../utils/keyboard-shortcut/index.js";
+import { onBeforeMount } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, observer } from "../../../../r-html/dist/observable/index.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../../r-html/dist/render/directives/attribute/ref.js";
+import { toNameLabel } from "../../../../engine/modules/editor/utils/nameView.js";
+import { useAppContext } from "../../../appContext.js";
+import { useI18n } from "../../../localeContext.js";
+import Icon from "../../../primitives/icon/Icon.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import { clearRelationshipHighlight, setRelationshipHighlight } from "../../relationshipHighlight.js";
+import { showErdTargetAction$ } from "../../goToErdTarget.js";
+import TextInput from "../../../primitives/text-input/TextInput.js";
+import Sash, { SashType } from "../../../primitives/sash/Sash.js";
+import { flattenTree } from "../../../primitives/tree/treeModel.js";
+import Tree from "../../../primitives/tree/Tree.js";
+import { DiffKind } from "../../../../utils/diff/types.js";
+import { after, body, count, empty, filter, header, name, root, rowIcon, sash, status, visuallyHidden } from "./DiffTree.styles.js";
+import { buildDiffTree, describeEntry, diffTargets, statusLabel, statusLetter } from "./diffTreeModel.js";
+//#region src/components/erd/diff-viewer/diff-tree/DiffTree.tsx
+var FOLDER_LABEL = {
+	tables: "explorer.folder.tables",
+	tableGroups: "explorer.folder.tableGroups",
+	memos: "explorer.folder.memos",
+	columns: "explorer.folder.columns",
+	indexes: "explorer.folder.indexes",
+	foreignKeys: "explorer.folder.foreignKeys"
+};
+var PASSING = [...PANEL_PASSING_BINDINGS, KeyBindingName.stop];
+var DiffTree = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const root$1 = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	const scroll = { top: 0 };
+	const model = observable({
+		filter: "",
+		roots: [],
+		branchIds: [],
+		rows: [],
+		collapsed: {},
+		activeId: null
+	}, { shallow: true });
+	onBeforeMount(() => {
+		addUnsubscribe(observer(() => {
+			const tree = buildDiffTree(props.entries, model.filter);
+			model.roots = tree.roots;
+			model.branchIds = tree.branchIds;
+		}), observer(() => {
+			const expanded = {};
+			for (const id of model.branchIds) if (!model.collapsed[id]) expanded[id] = true;
+			model.rows = flattenTree(model.roots, expanded);
+		}));
+	});
+	const setExpanded = (id, expanded) => {
+		const next = { ...model.collapsed };
+		expanded ? Reflect.deleteProperty(next, id) : next[id] = true;
+		model.collapsed = next;
+	};
+	const show = (pane, target) => {
+		if (!target) return;
+		const { store } = pane;
+		const editorId = store.state.editor.id;
+		clearRelationshipHighlight(editorId);
+		store.dispatchSync(showErdTargetAction$(target));
+		if (target.kind === "relationship") setRelationshipHighlight(editorId, target.relationshipId);
+	};
+	const handleActivate = (row) => {
+		const item = row.node.data;
+		if (item.kind === "folder") {
+			setExpanded(row.node.id, !row.expanded);
+			return;
+		}
+		const targets = diffTargets(item);
+		show(props.prevApp, targets.prev);
+		show(props.app, targets.next);
+	};
+	const handleKeydown = (event) => {
+		stopsAtPanel(event, app.value.keyBindingMap, PASSING) && event.stopPropagation();
+	};
+	const handleFilter = (event) => {
+		model.filter = event.target.value;
+	};
+	const handleMove = ({ x }) => {
+		const $root = root$1.value;
+		$root && props.onResize(x - $root.getBoundingClientRect().left);
+	};
+	const icon = (item, expanded) => {
+		if (item.kind === "folder") return expanded ? html`<${Icon} .name="folder-open" .size=${14} />` : html`<${Icon} .name="folder" .size=${14} />`;
+		switch (item.entry.kind) {
+			case DiffKind.table: return html`<${Icon} .name="table-2" .size=${14} />`;
+			case DiffKind.column: return html`<${Icon} .name="list" .size=${14} />`;
+			case DiffKind.index: return html`<${Icon} .name="logs" .size=${14} />`;
+			case DiffKind.foreignKey: return html`<${Icon} .name="key-round" .size=${14} />`;
+			case DiffKind.memo: return html`<${Icon} .name="sticky-note" .size=${14} />`;
+			case DiffKind.tableGroup: return html`<${Icon} .name="group" .size=${14} />`;
+		}
+	};
+	const namesOf = (entry) => entry.kind === DiffKind.table || entry.kind === DiffKind.column ? toNameLabel(props.app.store.state.settings, entry) : {
+		text: entry.name,
+		after: "",
+		standIn: false
+	};
+	const renderRow = (row) => {
+		const { t } = i18n.value;
+		const item = row.node.data;
+		const letter = statusLetter(item);
+		if (item.kind === "folder") return html`<span class=${rowIcon}>${icon(item, row.expanded)}</span><span class=${name}>${t(FOLDER_LABEL[item.folder])}</span><span class=${count}>${item.count}</span><span class=${status} title=${statusLabel(null, i18n.value)} aria-hidden="true">${letter}</span><span class=${["diff-tree-status-text", visuallyHidden]}>${statusLabel(null, i18n.value)}</span>`;
+		const { entry } = item;
+		const names = namesOf(entry);
+		const blank = !names.text.trim();
+		const status$1 = entry.status ?? "";
+		return html`<span class=${rowIcon}>${icon(item, row.expanded)}</span><span class=${[
+			name,
+			status$1,
+			{ unnamed: blank }
+		]} title=${describeEntry(entry, i18n.value)} .dir="auto">${blank ? t("common.unnamed") : names.text}</span>${names.after ? html`<span class=${[after, status$1]} .dir="auto">${names.after}</span>` : null}<span class=${[status, status$1]} aria-hidden="true">${letter}</span><span class=${["diff-tree-status-text", visuallyHidden]}>${statusLabel(entry.status, i18n.value)}</span>`;
+	};
+	return () => {
+		const { t, dir } = i18n.value;
+		const empty$1 = !props.entries.tables.length && !props.entries.tableGroups.length && !props.entries.memos.length;
+		return html`<div class=${["diff-viewer-tree", root]} ${ref(root$1)} .dir=${dir} style=${{ width: `${props.width}px` }} @keydown=${handleKeydown}><div class=${header}><${TextInput} .class=${["diff-tree-filter", filter]} .placeholder=${t("explorer.diff.filter")} .title=${t("explorer.diff.filter")} .dir="auto" .value=${model.filter} .onInput=${handleFilter} /></div><div class=${body}>${empty$1 ? html`<div class=${["diff-tree-empty", empty]}>${t("explorer.diff.noChanges")}</div>` : html`<${Tree} .rows=${model.rows} .activeId=${model.activeId} .label=${t("feedback.diffViewer")} .dir=${dir} .getScrollTop=${() => scroll.top} .onScroll=${(top) => {
+			scroll.top = top;
+		}} .onToggle=${setExpanded} .onActivate=${handleActivate} .onActiveChange=${(id) => {
+			model.activeId = id;
+		}} .renderRow=${renderRow} />`}</div><div class=${["diff-tree-sash", sash]}><${Sash} .type=${SashType.vertical} .onMove=${handleMove} .onDblclick=${() => props.onResize(260)} /></div></div>`;
+	};
+};
+//#endregion
+export { DiffTree as default };

package/dist/components/erd/diff-viewer/diff-tree/DiffTree.styles.js

@@ -0,0 +1,139 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../styles/typography.styles.js";
+//#region src/components/erd/diff-viewer/diff-tree/DiffTree.styles.ts
+var root = css`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  height: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+  border-right: 1px solid var(--explorer-border);
+  background-color: var(--tree-background);
+  color: var(--foreground);
+`;
+var header = css`
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--explorer-border);
+`;
+var filter = css`
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 26px;
+  padding: 0 6px;
+  box-sizing: border-box;
+  border: 1px solid var(--explorer-border);
+  border-radius: 4px;
+  outline: none;
+  background: transparent;
+  color: var(--foreground);
+  ${typography.normal};
+
+  &:focus {
+    border-color: var(--focus);
+  }
+`;
+var body = css`
+  flex: 1 1 auto;
+  min-height: 0;
+`;
+var empty = css`
+  padding: 12px;
+  color: var(--tree-muted);
+  ${typography.paragraph};
+`;
+var sash = css`
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 5px;
+  z-index: 1;
+`;
+var rowIcon = css`
+  display: inline-flex;
+  flex: 0 0 auto;
+  margin-inline-end: 6px;
+  color: var(--tree-muted);
+`;
+var name = css`
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.added {
+    color: var(--diff-insert-foreground);
+  }
+
+  &.modified {
+    color: var(--diff-modify-foreground);
+  }
+
+  &.deleted {
+    color: var(--diff-delete-foreground);
+    text-decoration: line-through;
+  }
+
+  &.renamed {
+    color: var(--diff-rename-foreground);
+  }
+
+  &.unnamed {
+    font-style: italic;
+  }
+`;
+var after = css`
+  flex: 0 1000 auto;
+  min-width: 0;
+  margin-inline-start: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--tree-muted);
+
+  &.deleted {
+    text-decoration: line-through;
+  }
+`;
+var count = css`
+  flex: 0 0 auto;
+  margin-inline-start: 6px;
+  font-size: 11px;
+  color: var(--tree-muted);
+`;
+var status = css`
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  padding-inline: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--diff-modify-foreground);
+
+  &.added {
+    color: var(--diff-insert-foreground);
+  }
+
+  &.deleted {
+    color: var(--diff-delete-foreground);
+  }
+
+  &.renamed {
+    color: var(--diff-rename-foreground);
+  }
+`;
+var visuallyHidden = css`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+`;
+//#endregion
+export { after, body, count, empty, filter, header, name, root, rowIcon, sash, status, visuallyHidden };