@singapore-editor/gutters 0.1.1

package/README.md

@@ -0,0 +1,48 @@
+# @singapore-editor/gutters
+
+Line-number and fold-gutter plugins for `@singapore-editor/core`.
+
+## Install
+
+```sh
+npm install @singapore-editor/core @singapore-editor/gutters
+```
+
+## Usage
+
+```ts
+import { Editor } from '@singapore-editor/core/editor'
+import { createFoldGutterPlugin, createLineGutterPlugin } from '@singapore-editor/gutters'
+import '@singapore-editor/core/style.css'
+import '@singapore-editor/gutters/style.css'
+
+const editor = new Editor(document.querySelector('#editor')!, {
+  plugins: [createLineGutterPlugin(), createFoldGutterPlugin()],
+})
+```
+
+Fold icons accept strings, DOM factories, or a `FoldGutterSvgIcon` descriptor through `icon`,
+`expandedIcon`, and `collapsedIcon`:
+
+```ts
+createFoldGutterPlugin({
+  icon: { kind: 'svg', viewBox: '0 0 16 16', path: 'M2 5L8 11L14 5Z' },
+  iconClassName: 'fold-icon',
+})
+```
+
+SVG icons use `currentColor` and fill their wrapper. Set its dimensions through `iconClassName`;
+the parent button's `data-editor-fold-state` is `expanded` or `collapsed` for state styling.
+Strings and SVG descriptors support provisional paint snapshots. DOM factories disable fold-gutter
+snapshots because restoring them would require the source fold marker.
+
+## Exports
+
+- `createLineGutterPlugin` adds a line-number gutter.
+- `createFoldGutterPlugin` adds fold controls for syntax fold markers.
+- `createLineGutterContribution` and `createFoldGutterContribution` expose the lower-level gutter
+  contributions.
+- The gutter passes presses through to the text. A contribution whose cell handles them sets
+  `interactive: true`, as the fold gutter does; its cell then takes pointer events, and a press it
+  does not claim still places the caret.
+- `@singapore-editor/gutters/style.css` imports both gutter styles.

package/dist/foldGutter.css

@@ -0,0 +1,35 @@
+.editor-virtualized-fold-toggle {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: #a1a1aa;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  height: 14px;
+  justify-self: center;
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+}
+
+.editor-virtualized-fold-toggle[hidden] {
+  display: inline-flex;
+  visibility: hidden;
+}
+
+.editor-virtualized-fold-icon {
+  align-items: center;
+  color: inherit;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 9px;
+  justify-content: center;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.editor-virtualized-fold-toggle:hover {
+  color: #e4e4e7;
+}

package/dist/foldGutter.d.ts

@@ -0,0 +1,27 @@
+import type { EditorGutterContribution, EditorPlugin } from '@singapore-editor/core/extensions';
+import type { VirtualizedFoldMarker } from '@singapore-editor/core/rendering';
+import './foldGutter.css';
+export type FoldGutterIconContext = {
+    readonly document: Document;
+    readonly state: 'expanded' | 'collapsed';
+    readonly marker: VirtualizedFoldMarker;
+};
+export type FoldGutterSvgIcon = {
+    readonly kind: 'svg';
+    readonly viewBox: string;
+    readonly path: string;
+};
+export type FoldGutterIcon = string | FoldGutterSvgIcon | ((context: FoldGutterIconContext) => string | Node);
+export type FoldGutterPluginOptions = {
+    readonly width?: number;
+    readonly expandedIndicator?: string;
+    readonly collapsedIndicator?: string;
+    readonly icon?: FoldGutterIcon;
+    readonly expandedIcon?: FoldGutterIcon;
+    readonly collapsedIcon?: FoldGutterIcon;
+    readonly buttonClassName?: string;
+    readonly iconClassName?: string;
+};
+export declare function createFoldGutterPlugin(options?: FoldGutterPluginOptions): EditorPlugin;
+export declare function createFoldGutterContribution(options?: FoldGutterPluginOptions): EditorGutterContribution;
+//# sourceMappingURL=foldGutter.d.ts.map

package/dist/foldGutter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foldGutter.d.ts","sourceRoot":"","sources":["../src/foldGutter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EAExB,YAAY,EACb,MAAM,mCAAmC,CAAA;AAC1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAA;AAE7E,OAAO,kBAAkB,CAAA;AAEzB,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,WAAW,CAAA;IACxC,QAAQ,CAAC,MAAM,EAAE,qBAAqB,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAA;IACpB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,iBAAiB,GACjB,CAAC,CAAC,OAAO,EAAE,qBAAqB,KAAK,MAAM,GAAG,IAAI,CAAC,CAAA;AAEvD,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IACnC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IACpC,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAA;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,cAAc,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,cAAc,CAAA;IACvC,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;CAChC,CAAA;AAyBD,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,uBAA4B,GAAG,YAAY,CAS1F;AAED,wBAAgB,4BAA4B,CAC1C,OAAO,GAAE,uBAA4B,GACpC,wBAAwB,CAoC1B"}

package/dist/foldGutter.js

@@ -0,0 +1,257 @@
+import { addClassName, normalizeNonNegativeNumber, setElementHidden } from "./utils.js";
+import "./foldGutter.css";
+//#region src/foldGutter.ts
+var DEFAULT_FOLD_GUTTER_WIDTH = 10;
+var DEFAULT_EXPANDED_INDICATOR = "v";
+var DEFAULT_COLLAPSED_INDICATOR = ">";
+var FOLD_GUTTER_CELL_CLASS = "editor-virtualized-fold-gutter-cell";
+function createFoldGutterPlugin(options = {}) {
+	const contribution = createFoldGutterContribution(options);
+	return {
+		name: "fold-gutter",
+		activate(context) {
+			return context.registerGutterContribution(contribution);
+		}
+	};
+}
+function createFoldGutterContribution(options = {}) {
+	const width = normalizeNonNegativeNumber(options.width, DEFAULT_FOLD_GUTTER_WIDTH);
+	const renderOptions = {
+		expandedIndicator: options.expandedIndicator ?? DEFAULT_EXPANDED_INDICATOR,
+		collapsedIndicator: options.collapsedIndicator ?? DEFAULT_COLLAPSED_INDICATOR,
+		icon: options.icon,
+		expandedIcon: options.expandedIcon,
+		collapsedIcon: options.collapsedIcon,
+		iconClassName: options.iconClassName
+	};
+	return {
+		id: "fold-gutter",
+		interactive: true,
+		snapshotRenderer: createFoldSnapshotRenderer(options, renderOptions, width),
+		createCell(document) {
+			const cell = document.createElement("span");
+			const button = createFoldButton(document, options.buttonClassName);
+			cell.className = FOLD_GUTTER_CELL_CLASS;
+			cell.appendChild(button);
+			return cell;
+		},
+		width() {
+			return width;
+		},
+		updateCell(element, row) {
+			const button = foldButtonFromCell(element);
+			if (!button) return;
+			updateFoldGutterButton(button, row, renderOptions);
+		},
+		disposeCell(element) {
+			const button = foldButtonFromCell(element);
+			if (!button) return;
+			disposeFoldButton(button);
+		}
+	};
+}
+function createFoldSnapshotRenderer(options, renderOptions, width) {
+	if ([
+		options.icon,
+		options.expandedIcon,
+		options.collapsedIcon
+	].some((icon) => typeof icon === "function")) return void 0;
+	return {
+		key: JSON.stringify([
+			"fold-gutter",
+			1,
+			width,
+			options.buttonClassName,
+			renderOptions
+		]),
+		capture: captureFoldPaint,
+		restore: (element, paint) => restoreFoldPaint(element, paint, renderOptions)
+	};
+}
+function captureFoldPaint(element) {
+	const button = foldButtonFromCell(element);
+	if (!button) return null;
+	if (button.hidden) return "hidden";
+	const state = button.dataset.editorFoldState;
+	return isFoldGutterState(state) ? state : null;
+}
+function restoreFoldPaint(element, paint, options) {
+	const button = foldButtonFromCell(element);
+	if (!button || paint !== "hidden" && !isFoldGutterState(paint)) return false;
+	hideFoldButton(button);
+	if (paint === "hidden") return true;
+	const source = resolveFoldIconSource(options, paint);
+	if (typeof source.icon === "function") return false;
+	const content = createStaticFoldIconContent(button.ownerDocument, source.icon);
+	const icon = createFoldIconElement(button.ownerDocument, options.iconClassName);
+	appendFoldIconContent(icon, content);
+	button.replaceChildren(icon);
+	button.dataset.editorFoldState = paint;
+	syncFoldIndicatorDataset(button, content);
+	setElementHidden(button, false);
+	return true;
+}
+function createFoldButton(document, className) {
+	const button = document.createElement("button");
+	button.className = "editor-virtualized-fold-toggle";
+	addClassName(button, className);
+	button.type = "button";
+	button.hidden = true;
+	button.disabled = true;
+	button.tabIndex = -1;
+	button.addEventListener("mousedown", preventFoldButtonMouseDown);
+	button.addEventListener("animationend", clearFoldTransition);
+	button.addEventListener("animationcancel", clearFoldTransition);
+	return button;
+}
+function foldButtonFromCell(element) {
+	return element.querySelector(".editor-virtualized-fold-toggle");
+}
+function disposeFoldButton(button) {
+	button.onclick = null;
+	button.removeEventListener("mousedown", preventFoldButtonMouseDown);
+	button.removeEventListener("animationend", clearFoldTransition);
+	button.removeEventListener("animationcancel", clearFoldTransition);
+}
+function updateFoldGutterButton(button, row, options) {
+	const marker = row.foldMarker;
+	if (!marker) {
+		hideFoldButton(button);
+		return;
+	}
+	const state = marker.collapsed ? "collapsed" : "expanded";
+	const previousKey = button.dataset.editorFoldKey;
+	const previousState = button.dataset.editorFoldState;
+	showFoldButton(button, marker.key, state);
+	updateFoldTransition(button, previousKey, previousState, marker.key, state);
+	renderFoldIconIfNeeded(button, marker, state, options);
+	button.onclick = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		row.toggleFold(marker);
+	};
+}
+function hideFoldButton(button) {
+	setElementHidden(button, true);
+	if (!button.disabled) button.disabled = true;
+	if (button.tabIndex !== -1) button.tabIndex = -1;
+	button.onclick = null;
+	delete button.dataset.editorFoldKey;
+	delete button.dataset.editorFoldState;
+	delete button.dataset.editorFoldIndicator;
+	delete button.dataset.editorFoldIconSignature;
+	delete button.dataset.editorFoldTransition;
+	if (button.childNodes.length > 0) button.replaceChildren();
+	button.removeAttribute("aria-label");
+}
+function showFoldButton(button, key, state) {
+	const label = state === "collapsed" ? "Expand folded region" : "Collapse foldable region";
+	setElementHidden(button, false);
+	if (button.disabled) button.disabled = false;
+	if (button.tabIndex !== 0) button.tabIndex = 0;
+	button.dataset.editorFoldKey = key;
+	button.dataset.editorFoldState = state;
+	button.setAttribute("aria-label", label);
+}
+function renderFoldIconIfNeeded(button, marker, state, options) {
+	const source = resolveFoldIconSource(options, state);
+	const signature = foldIconSignature(marker, state, source);
+	if (button.dataset.editorFoldIconSignature === signature) return;
+	const content = createFoldIconContent(button.ownerDocument, marker, state, source.icon);
+	const icon = createFoldIconElement(button.ownerDocument, options.iconClassName);
+	appendFoldIconContent(icon, content);
+	button.replaceChildren(icon);
+	button.dataset.editorFoldIconSignature = signature;
+	syncFoldIndicatorDataset(button, content);
+}
+function resolveFoldIconSource(options, state) {
+	const stateIcon = state === "collapsed" ? options.collapsedIcon : options.expandedIcon;
+	if (stateIcon !== void 0) return {
+		icon: stateIcon,
+		stateSpecific: true
+	};
+	if (options.icon !== void 0) return {
+		icon: options.icon,
+		stateSpecific: false
+	};
+	return {
+		icon: state === "collapsed" ? options.collapsedIndicator : options.expandedIndicator,
+		stateSpecific: true
+	};
+}
+function foldIconSignature(marker, state, source) {
+	const stateKey = source.stateSpecific ? state : "shared";
+	return `${marker.key}:${stateKey}`;
+}
+function createFoldIconContent(document, marker, state, icon) {
+	if (typeof icon === "function") return icon({
+		document,
+		state,
+		marker
+	});
+	return createStaticFoldIconContent(document, icon);
+}
+function createStaticFoldIconContent(document, icon) {
+	if (typeof icon === "string") return icon;
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("viewBox", icon.viewBox);
+	svg.setAttribute("width", "100%");
+	svg.setAttribute("height", "100%");
+	svg.setAttribute("fill", "currentColor");
+	svg.setAttribute("focusable", "false");
+	const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	path.setAttribute("d", icon.path);
+	svg.appendChild(path);
+	return svg;
+}
+function createFoldIconElement(document, className) {
+	const icon = document.createElement("span");
+	icon.className = "editor-virtualized-fold-icon";
+	icon.setAttribute("aria-hidden", "true");
+	addClassName(icon, className);
+	return icon;
+}
+function appendFoldIconContent(icon, content) {
+	if (typeof content === "string") {
+		icon.textContent = content;
+		return;
+	}
+	icon.appendChild(content);
+}
+function syncFoldIndicatorDataset(button, content) {
+	if (typeof content === "string") {
+		button.dataset.editorFoldIndicator = content;
+		return;
+	}
+	delete button.dataset.editorFoldIndicator;
+}
+function updateFoldTransition(button, previousKey, previousState, nextKey, nextState) {
+	if (previousKey !== nextKey) {
+		delete button.dataset.editorFoldTransition;
+		return;
+	}
+	if (!isFoldGutterState(previousState)) {
+		delete button.dataset.editorFoldTransition;
+		return;
+	}
+	if (previousState === nextState) return;
+	button.dataset.editorFoldTransition = foldTransitionForState(nextState);
+}
+function foldTransitionForState(state) {
+	return state === "collapsed" ? "collapse" : "expand";
+}
+function isFoldGutterState(state) {
+	return state === "collapsed" || state === "expanded";
+}
+function preventFoldButtonMouseDown(event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+function clearFoldTransition(event) {
+	if (!(event.currentTarget instanceof HTMLButtonElement)) return;
+	delete event.currentTarget.dataset.editorFoldTransition;
+}
+//#endregion
+export { createFoldGutterContribution, createFoldGutterPlugin };
+
+//# sourceMappingURL=foldGutter.js.map

package/dist/foldGutter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foldGutter.js","names":[],"sources":["../src/foldGutter.ts"],"sourcesContent":["import type {\n  EditorGutterContribution,\n  EditorGutterRowContext,\n  EditorPlugin,\n} from '@singapore-editor/core/extensions'\nimport type { VirtualizedFoldMarker } from '@singapore-editor/core/rendering'\nimport { addClassName, normalizeNonNegativeNumber, setElementHidden } from './utils'\nimport './foldGutter.css'\n\nexport type FoldGutterIconContext = {\n  readonly document: Document\n  readonly state: 'expanded' | 'collapsed'\n  readonly marker: VirtualizedFoldMarker\n}\n\nexport type FoldGutterSvgIcon = {\n  readonly kind: 'svg'\n  readonly viewBox: string\n  readonly path: string\n}\n\nexport type FoldGutterIcon =\n  | string\n  | FoldGutterSvgIcon\n  | ((context: FoldGutterIconContext) => string | Node)\n\nexport type FoldGutterPluginOptions = {\n  readonly width?: number\n  readonly expandedIndicator?: string\n  readonly collapsedIndicator?: string\n  readonly icon?: FoldGutterIcon\n  readonly expandedIcon?: FoldGutterIcon\n  readonly collapsedIcon?: FoldGutterIcon\n  readonly buttonClassName?: string\n  readonly iconClassName?: string\n}\n\ntype FoldGutterState = FoldGutterIconContext['state']\n\ntype FoldGutterTransition = 'expand' | 'collapse'\n\ntype FoldGutterIconSource = {\n  readonly icon: FoldGutterIcon\n  readonly stateSpecific: boolean\n}\n\ntype FoldGutterRenderOptions = {\n  readonly expandedIndicator: string\n  readonly collapsedIndicator: string\n  readonly icon?: FoldGutterIcon\n  readonly expandedIcon?: FoldGutterIcon\n  readonly collapsedIcon?: FoldGutterIcon\n  readonly iconClassName?: string\n}\n\nconst DEFAULT_FOLD_GUTTER_WIDTH = 10\nconst DEFAULT_EXPANDED_INDICATOR = 'v'\nconst DEFAULT_COLLAPSED_INDICATOR = '>'\nconst FOLD_GUTTER_CELL_CLASS = 'editor-virtualized-fold-gutter-cell'\n\nexport function createFoldGutterPlugin(options: FoldGutterPluginOptions = {}): EditorPlugin {\n  const contribution = createFoldGutterContribution(options)\n\n  return {\n    name: 'fold-gutter',\n    activate(context) {\n      return context.registerGutterContribution(contribution)\n    },\n  }\n}\n\nexport function createFoldGutterContribution(\n  options: FoldGutterPluginOptions = {},\n): EditorGutterContribution {\n  const width = normalizeNonNegativeNumber(options.width, DEFAULT_FOLD_GUTTER_WIDTH)\n  const renderOptions: FoldGutterRenderOptions = {\n    expandedIndicator: options.expandedIndicator ?? DEFAULT_EXPANDED_INDICATOR,\n    collapsedIndicator: options.collapsedIndicator ?? DEFAULT_COLLAPSED_INDICATOR,\n    icon: options.icon,\n    expandedIcon: options.expandedIcon,\n    collapsedIcon: options.collapsedIcon,\n    iconClassName: options.iconClassName,\n  }\n\n  return {\n    id: 'fold-gutter',\n    interactive: true,\n    snapshotRenderer: createFoldSnapshotRenderer(options, renderOptions, width),\n    createCell(document) {\n      const cell = document.createElement('span')\n      const button = createFoldButton(document, options.buttonClassName)\n      cell.className = FOLD_GUTTER_CELL_CLASS\n      cell.appendChild(button)\n      return cell\n    },\n    width() {\n      return width\n    },\n    updateCell(element, row) {\n      const button = foldButtonFromCell(element)\n      if (!button) return\n      updateFoldGutterButton(button, row, renderOptions)\n    },\n    disposeCell(element) {\n      const button = foldButtonFromCell(element)\n      if (!button) return\n      disposeFoldButton(button)\n    },\n  }\n}\n\nfunction createFoldSnapshotRenderer(\n  options: FoldGutterPluginOptions,\n  renderOptions: FoldGutterRenderOptions,\n  width: number,\n): EditorGutterContribution['snapshotRenderer'] {\n  if (\n    [options.icon, options.expandedIcon, options.collapsedIcon].some(\n      (icon) => typeof icon === 'function',\n    )\n  )\n    return undefined\n  return {\n    key: JSON.stringify(['fold-gutter', 1, width, options.buttonClassName, renderOptions]),\n    capture: captureFoldPaint,\n    restore: (element, paint) => restoreFoldPaint(element, paint, renderOptions),\n  }\n}\n\nfunction captureFoldPaint(element: HTMLElement): string | null {\n  const button = foldButtonFromCell(element)\n  if (!button) return null\n  if (button.hidden) return 'hidden'\n  const state = button.dataset.editorFoldState\n  return isFoldGutterState(state) ? state : null\n}\n\nfunction restoreFoldPaint(\n  element: HTMLElement,\n  paint: string,\n  options: FoldGutterRenderOptions,\n): boolean {\n  const button = foldButtonFromCell(element)\n  if (!button || (paint !== 'hidden' && !isFoldGutterState(paint))) return false\n  hideFoldButton(button)\n  if (paint === 'hidden') return true\n  const source = resolveFoldIconSource(options, paint)\n  if (typeof source.icon === 'function') return false\n  const content = createStaticFoldIconContent(button.ownerDocument, source.icon)\n  const icon = createFoldIconElement(button.ownerDocument, options.iconClassName)\n  appendFoldIconContent(icon, content)\n  button.replaceChildren(icon)\n  button.dataset.editorFoldState = paint\n  syncFoldIndicatorDataset(button, content)\n  setElementHidden(button, false)\n  return true\n}\n\nfunction createFoldButton(document: Document, className: string | undefined): HTMLButtonElement {\n  const button = document.createElement('button')\n  button.className = 'editor-virtualized-fold-toggle'\n  addClassName(button, className)\n  button.type = 'button'\n  button.hidden = true\n  button.disabled = true\n  button.tabIndex = -1\n  button.addEventListener('mousedown', preventFoldButtonMouseDown)\n  button.addEventListener('animationend', clearFoldTransition)\n  button.addEventListener('animationcancel', clearFoldTransition)\n  return button\n}\n\nfunction foldButtonFromCell(element: HTMLElement): HTMLButtonElement | null {\n  return element.querySelector<HTMLButtonElement>('.editor-virtualized-fold-toggle')\n}\n\nfunction disposeFoldButton(button: HTMLButtonElement): void {\n  button.onclick = null\n  button.removeEventListener('mousedown', preventFoldButtonMouseDown)\n  button.removeEventListener('animationend', clearFoldTransition)\n  button.removeEventListener('animationcancel', clearFoldTransition)\n}\n\nfunction updateFoldGutterButton(\n  button: HTMLButtonElement,\n  row: EditorGutterRowContext,\n  options: FoldGutterRenderOptions,\n): void {\n  const marker = row.foldMarker\n  if (!marker) {\n    hideFoldButton(button)\n    return\n  }\n\n  const state = marker.collapsed ? 'collapsed' : 'expanded'\n  const previousKey = button.dataset.editorFoldKey\n  const previousState = button.dataset.editorFoldState\n  showFoldButton(button, marker.key, state)\n  updateFoldTransition(button, previousKey, previousState, marker.key, state)\n  renderFoldIconIfNeeded(button, marker, state, options)\n  button.onclick = (event) => {\n    event.preventDefault()\n    event.stopPropagation()\n    row.toggleFold(marker)\n  }\n}\n\nfunction hideFoldButton(button: HTMLButtonElement): void {\n  setElementHidden(button, true)\n  if (!button.disabled) button.disabled = true\n  if (button.tabIndex !== -1) button.tabIndex = -1\n  button.onclick = null\n  delete button.dataset.editorFoldKey\n  delete button.dataset.editorFoldState\n  delete button.dataset.editorFoldIndicator\n  delete button.dataset.editorFoldIconSignature\n  delete button.dataset.editorFoldTransition\n  if (button.childNodes.length > 0) button.replaceChildren()\n  button.removeAttribute('aria-label')\n}\n\nfunction showFoldButton(button: HTMLButtonElement, key: string, state: FoldGutterState): void {\n  const label = state === 'collapsed' ? 'Expand folded region' : 'Collapse foldable region'\n  setElementHidden(button, false)\n  if (button.disabled) button.disabled = false\n  if (button.tabIndex !== 0) button.tabIndex = 0\n  button.dataset.editorFoldKey = key\n  button.dataset.editorFoldState = state\n  button.setAttribute('aria-label', label)\n}\n\nfunction renderFoldIconIfNeeded(\n  button: HTMLButtonElement,\n  marker: VirtualizedFoldMarker,\n  state: FoldGutterState,\n  options: FoldGutterRenderOptions,\n): void {\n  const source = resolveFoldIconSource(options, state)\n  const signature = foldIconSignature(marker, state, source)\n  if (button.dataset.editorFoldIconSignature === signature) return\n\n  const content = createFoldIconContent(button.ownerDocument, marker, state, source.icon)\n  const icon = createFoldIconElement(button.ownerDocument, options.iconClassName)\n  appendFoldIconContent(icon, content)\n  button.replaceChildren(icon)\n  button.dataset.editorFoldIconSignature = signature\n  syncFoldIndicatorDataset(button, content)\n}\n\nfunction resolveFoldIconSource(\n  options: FoldGutterRenderOptions,\n  state: FoldGutterState,\n): FoldGutterIconSource {\n  const stateIcon = state === 'collapsed' ? options.collapsedIcon : options.expandedIcon\n  if (stateIcon !== undefined) return { icon: stateIcon, stateSpecific: true }\n  if (options.icon !== undefined) return { icon: options.icon, stateSpecific: false }\n\n  const icon = state === 'collapsed' ? options.collapsedIndicator : options.expandedIndicator\n  return { icon, stateSpecific: true }\n}\n\nfunction foldIconSignature(\n  marker: VirtualizedFoldMarker,\n  state: FoldGutterState,\n  source: FoldGutterIconSource,\n): string {\n  const stateKey = source.stateSpecific ? state : 'shared'\n  return `${marker.key}:${stateKey}`\n}\n\nfunction createFoldIconContent(\n  document: Document,\n  marker: VirtualizedFoldMarker,\n  state: FoldGutterState,\n  icon: FoldGutterIcon,\n): string | Node {\n  if (typeof icon === 'function') return icon({ document, state, marker })\n  return createStaticFoldIconContent(document, icon)\n}\n\nfunction createStaticFoldIconContent(\n  document: Document,\n  icon: string | FoldGutterSvgIcon,\n): string | SVGSVGElement {\n  if (typeof icon === 'string') return icon\n  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n  svg.setAttribute('viewBox', icon.viewBox)\n  svg.setAttribute('width', '100%')\n  svg.setAttribute('height', '100%')\n  svg.setAttribute('fill', 'currentColor')\n  svg.setAttribute('focusable', 'false')\n  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n  path.setAttribute('d', icon.path)\n  svg.appendChild(path)\n  return svg\n}\n\nfunction createFoldIconElement(document: Document, className: string | undefined): HTMLSpanElement {\n  const icon = document.createElement('span')\n  icon.className = 'editor-virtualized-fold-icon'\n  icon.setAttribute('aria-hidden', 'true')\n  addClassName(icon, className)\n  return icon\n}\n\nfunction appendFoldIconContent(icon: HTMLSpanElement, content: string | Node): void {\n  if (typeof content === 'string') {\n    icon.textContent = content\n    return\n  }\n\n  icon.appendChild(content)\n}\n\nfunction syncFoldIndicatorDataset(button: HTMLButtonElement, content: string | Node): void {\n  if (typeof content === 'string') {\n    button.dataset.editorFoldIndicator = content\n    return\n  }\n\n  delete button.dataset.editorFoldIndicator\n}\n\nfunction updateFoldTransition(\n  button: HTMLButtonElement,\n  previousKey: string | undefined,\n  previousState: string | undefined,\n  nextKey: string,\n  nextState: FoldGutterState,\n): void {\n  if (previousKey !== nextKey) {\n    delete button.dataset.editorFoldTransition\n    return\n  }\n  if (!isFoldGutterState(previousState)) {\n    delete button.dataset.editorFoldTransition\n    return\n  }\n  if (previousState === nextState) return\n\n  button.dataset.editorFoldTransition = foldTransitionForState(nextState)\n}\n\nfunction foldTransitionForState(state: FoldGutterState): FoldGutterTransition {\n  return state === 'collapsed' ? 'collapse' : 'expand'\n}\n\nfunction isFoldGutterState(state: string | undefined): state is FoldGutterState {\n  return state === 'collapsed' || state === 'expanded'\n}\n\nfunction preventFoldButtonMouseDown(event: MouseEvent): void {\n  event.preventDefault()\n  event.stopPropagation()\n}\n\nfunction clearFoldTransition(event: Event): void {\n  if (!(event.currentTarget instanceof HTMLButtonElement)) return\n  delete event.currentTarget.dataset.editorFoldTransition\n}\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { createLineGutterContribution, createLineGutterPlugin, type LineGutterPluginOptions, } from './lineGutter';
+export { createFoldGutterContribution, createFoldGutterPlugin, type FoldGutterIcon, type FoldGutterIconContext, type FoldGutterPluginOptions, type FoldGutterSvgIcon, } from './foldGutter';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,EACtB,KAAK,uBAAuB,GAC7B,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,GACvB,MAAM,cAAc,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+import { createLineGutterContribution, createLineGutterPlugin } from "./lineGutter.js";
+import { createFoldGutterContribution, createFoldGutterPlugin } from "./foldGutter.js";
+export { createFoldGutterContribution, createFoldGutterPlugin, createLineGutterContribution, createLineGutterPlugin };

package/dist/lineGutter.css

@@ -0,0 +1,18 @@
+.editor-virtualized-gutter-label {
+  color: var(--editor-gutter-foreground);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  justify-content: flex-end;
+  line-height: inherit;
+  padding-left: 2px;
+  padding-right: 4px;
+  tab-size: var(--editor-tab-size, 4);
+}
+
+.editor-virtualized-line-number::before {
+  content: counter(editor-line, var(--editor-line-gutter-counter-style, decimal));
+}
+
+.editor-virtualized-line-number-active {
+  color: var(--editor-gutter-active-foreground);
+}

package/dist/lineGutter.d.ts

@@ -0,0 +1,14 @@
+import type { EditorGutterContribution, EditorGutterRowContext, EditorPlugin } from '@singapore-editor/core/extensions';
+import './lineGutter.css';
+export type LineGutterPluginOptions = {
+    readonly counterStyle?: string;
+    readonly labelForRow?: (row: EditorGutterRowContext) => LineGutterLabel;
+    readonly minLabelColumns?: number;
+    readonly minDigits?: number;
+    readonly minWidth?: number;
+    readonly startLine?: number;
+};
+export type LineGutterLabel = number | string | null | undefined;
+export declare function createLineGutterPlugin(options?: LineGutterPluginOptions): EditorPlugin;
+export declare function createLineGutterContribution(options?: LineGutterPluginOptions): EditorGutterContribution;
+//# sourceMappingURL=lineGutter.d.ts.map

package/dist/lineGutter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineGutter.d.ts","sourceRoot":"","sources":["../src/lineGutter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,sBAAsB,EACtB,YAAY,EACb,MAAM,mCAAmC,CAAA;AAE1C,OAAO,kBAAkB,CAAA;AAEzB,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,sBAAsB,KAAK,eAAe,CAAA;IACvE,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;AAQhE,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,uBAA4B,GAAG,YAAY,CAS1F;AAED,wBAAgB,4BAA4B,CAC1C,OAAO,GAAE,uBAA4B,GACpC,wBAAwB,CAmD1B"}

package/dist/lineGutter.js

@@ -0,0 +1,124 @@
+import { normalizeNonNegativeNumber, normalizePositiveInteger, setElementHidden } from "./utils.js";
+import "./lineGutter.css";
+//#region src/lineGutter.ts
+var DEFAULT_COUNTER_STYLE = "decimal";
+var DEFAULT_LINE_GUTTER_MIN_COLUMNS = 3;
+var DEFAULT_LINE_GUTTER_MIN_WIDTH = 26;
+var DEFAULT_START_LINE = 1;
+var LINE_GUTTER_PADDING_PX = 8;
+function createLineGutterPlugin(options = {}) {
+	const contribution = createLineGutterContribution(options);
+	return {
+		name: "line-gutter",
+		activate(context) {
+			return context.registerGutterContribution(contribution);
+		}
+	};
+}
+function createLineGutterContribution(options = {}) {
+	const counterStyle = options.counterStyle ?? DEFAULT_COUNTER_STYLE;
+	const minLabelColumns = Math.max(normalizePositiveInteger(options.minLabelColumns, DEFAULT_LINE_GUTTER_MIN_COLUMNS), normalizePositiveInteger(options.minDigits, DEFAULT_LINE_GUTTER_MIN_COLUMNS));
+	const minWidth = normalizeNonNegativeNumber(options.minWidth, DEFAULT_LINE_GUTTER_MIN_WIDTH);
+	const startLine = normalizePositiveInteger(options.startLine, DEFAULT_START_LINE);
+	const labelForRow = options.labelForRow ?? null;
+	return {
+		id: "line-gutter",
+		snapshotRenderer: labelForRow ? void 0 : {
+			key: JSON.stringify([
+				"line-gutter",
+				1,
+				counterStyle,
+				minLabelColumns,
+				minWidth,
+				startLine
+			]),
+			capture: captureLineGutterPaint,
+			restore: restoreLineGutterPaint
+		},
+		createCell(document) {
+			const element = document.createElement("span");
+			element.className = labelForRow ? "editor-virtualized-gutter-label editor-virtualized-line-label" : "editor-virtualized-gutter-label editor-virtualized-line-number";
+			element.setAttribute("aria-hidden", "true");
+			if (!labelForRow) element.style.setProperty("--editor-line-gutter-counter-style", counterStyle);
+			return element;
+		},
+		width(context) {
+			const endLine = startLine + context.lineCount - 1;
+			const columns = labelForRow ? minLabelColumns : Math.max(minLabelColumns, decimalDigitCount(endLine));
+			return Math.max(minWidth, Math.ceil(columns * context.metrics.characterWidth + LINE_GUTTER_PADDING_PX));
+		},
+		updateCell(element, row) {
+			updateLineGutterCell(element, row, startLine, labelForRow);
+		}
+	};
+}
+function captureLineGutterPaint(element) {
+	const counter = element.hidden ? "" : element.style.counterSet;
+	if (counter && !/^editor-line [0-9]+$/.test(counter)) return null;
+	return JSON.stringify({
+		counter,
+		hidden: element.hidden,
+		active: element.classList.contains("editor-virtualized-line-number-active")
+	});
+}
+function restoreLineGutterPaint(element, paint) {
+	const parsed = parseLineGutterPaint(paint);
+	if (!parsed) return false;
+	setElementHidden(element, parsed.hidden);
+	setCounterSet(element, parsed.counter);
+	element.classList.toggle("editor-virtualized-line-number-active", parsed.active);
+	return true;
+}
+function parseLineGutterPaint(paint) {
+	if (paint.length > 256) return null;
+	try {
+		const value = JSON.parse(paint);
+		if (value === null || typeof value !== "object") return null;
+		if (!("counter" in value) || typeof value.counter !== "string") return null;
+		if (!("hidden" in value) || typeof value.hidden !== "boolean") return null;
+		if (!("active" in value) || typeof value.active !== "boolean") return null;
+		if (!value.hidden && !/^editor-line [0-9]+$/.test(value.counter)) return null;
+		if (value.hidden && value.counter !== "") return null;
+		return {
+			counter: value.counter,
+			hidden: value.hidden,
+			active: value.active
+		};
+	} catch {
+		return null;
+	}
+}
+function updateLineGutterCell(element, row, startLine, labelForRow) {
+	const label = row.primaryText && labelForRow ? labelForRow(row) : null;
+	const hidden = !row.primaryText || labelForRow !== null && !hasLineGutterLabel(label);
+	setElementHidden(element, hidden);
+	element.classList.toggle("editor-virtualized-line-number-active", !hidden && row.cursorLine && row.cursorLineHighlight.gutterNumber);
+	if (hidden) {
+		if (labelForRow) setTextContent(element, "");
+		return;
+	}
+	if (labelForRow) {
+		setTextContent(element, String(label));
+		return;
+	}
+	setCounterSet(element, `editor-line ${startLine + row.bufferRow}`);
+}
+function hasLineGutterLabel(label) {
+	if (label === null || label === void 0) return false;
+	return String(label).length > 0;
+}
+function setCounterSet(element, value) {
+	if (element.style.counterSet === value) return;
+	element.style.counterSet = value;
+}
+function setTextContent(element, value) {
+	if (element.textContent === value) return;
+	element.textContent = value;
+}
+function decimalDigitCount(value) {
+	return String(Math.max(1, Math.floor(value))).length;
+}
+//#endregion
+export { createLineGutterContribution, createLineGutterPlugin };
+
+//# sourceMappingURL=lineGutter.js.map

package/dist/lineGutter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineGutter.js","names":[],"sources":["../src/lineGutter.ts"],"sourcesContent":["import type {\n  EditorGutterContribution,\n  EditorGutterRowContext,\n  EditorPlugin,\n} from '@singapore-editor/core/extensions'\nimport { normalizeNonNegativeNumber, normalizePositiveInteger, setElementHidden } from './utils'\nimport './lineGutter.css'\n\nexport type LineGutterPluginOptions = {\n  readonly counterStyle?: string\n  readonly labelForRow?: (row: EditorGutterRowContext) => LineGutterLabel\n  readonly minLabelColumns?: number\n  readonly minDigits?: number\n  readonly minWidth?: number\n  readonly startLine?: number\n}\n\nexport type LineGutterLabel = number | string | null | undefined\n\nconst DEFAULT_COUNTER_STYLE = 'decimal'\nconst DEFAULT_LINE_GUTTER_MIN_COLUMNS = 3\nconst DEFAULT_LINE_GUTTER_MIN_WIDTH = 26\nconst DEFAULT_START_LINE = 1\nconst LINE_GUTTER_PADDING_PX = 8\n\nexport function createLineGutterPlugin(options: LineGutterPluginOptions = {}): EditorPlugin {\n  const contribution = createLineGutterContribution(options)\n\n  return {\n    name: 'line-gutter',\n    activate(context) {\n      return context.registerGutterContribution(contribution)\n    },\n  }\n}\n\nexport function createLineGutterContribution(\n  options: LineGutterPluginOptions = {},\n): EditorGutterContribution {\n  const counterStyle = options.counterStyle ?? DEFAULT_COUNTER_STYLE\n  const minLabelColumns = Math.max(\n    normalizePositiveInteger(options.minLabelColumns, DEFAULT_LINE_GUTTER_MIN_COLUMNS),\n    normalizePositiveInteger(options.minDigits, DEFAULT_LINE_GUTTER_MIN_COLUMNS),\n  )\n  const minWidth = normalizeNonNegativeNumber(options.minWidth, DEFAULT_LINE_GUTTER_MIN_WIDTH)\n  const startLine = normalizePositiveInteger(options.startLine, DEFAULT_START_LINE)\n  const labelForRow = options.labelForRow ?? null\n\n  return {\n    id: 'line-gutter',\n    snapshotRenderer: labelForRow\n      ? undefined\n      : {\n          key: JSON.stringify([\n            'line-gutter',\n            1,\n            counterStyle,\n            minLabelColumns,\n            minWidth,\n            startLine,\n          ]),\n          capture: captureLineGutterPaint,\n          restore: restoreLineGutterPaint,\n        },\n    createCell(document) {\n      const element = document.createElement('span')\n      element.className = labelForRow\n        ? 'editor-virtualized-gutter-label editor-virtualized-line-label'\n        : 'editor-virtualized-gutter-label editor-virtualized-line-number'\n      element.setAttribute('aria-hidden', 'true')\n      if (!labelForRow) {\n        element.style.setProperty('--editor-line-gutter-counter-style', counterStyle)\n      }\n      return element\n    },\n    width(context) {\n      const endLine = startLine + context.lineCount - 1\n      const columns = labelForRow\n        ? minLabelColumns\n        : Math.max(minLabelColumns, decimalDigitCount(endLine))\n      return Math.max(\n        minWidth,\n        Math.ceil(columns * context.metrics.characterWidth + LINE_GUTTER_PADDING_PX),\n      )\n    },\n    updateCell(element, row) {\n      updateLineGutterCell(element, row, startLine, labelForRow)\n    },\n  }\n}\n\nfunction captureLineGutterPaint(element: HTMLElement): string | null {\n  const counter = element.hidden ? '' : element.style.counterSet\n  if (counter && !/^editor-line [0-9]+$/.test(counter)) return null\n  return JSON.stringify({\n    counter,\n    hidden: element.hidden,\n    active: element.classList.contains('editor-virtualized-line-number-active'),\n  })\n}\n\nfunction restoreLineGutterPaint(element: HTMLElement, paint: string): boolean {\n  const parsed = parseLineGutterPaint(paint)\n  if (!parsed) return false\n  setElementHidden(element, parsed.hidden)\n  setCounterSet(element, parsed.counter)\n  element.classList.toggle('editor-virtualized-line-number-active', parsed.active)\n  return true\n}\n\nfunction parseLineGutterPaint(paint: string) {\n  if (paint.length > 256) return null\n  try {\n    const value: unknown = JSON.parse(paint)\n    if (value === null || typeof value !== 'object') return null\n    if (!('counter' in value) || typeof value.counter !== 'string') return null\n    if (!('hidden' in value) || typeof value.hidden !== 'boolean') return null\n    if (!('active' in value) || typeof value.active !== 'boolean') return null\n    if (!value.hidden && !/^editor-line [0-9]+$/.test(value.counter)) return null\n    if (value.hidden && value.counter !== '') return null\n    return { counter: value.counter, hidden: value.hidden, active: value.active }\n  } catch {\n    return null\n  }\n}\n\nfunction updateLineGutterCell(\n  element: HTMLElement,\n  row: EditorGutterRowContext,\n  startLine: number,\n  labelForRow: ((row: EditorGutterRowContext) => LineGutterLabel) | null,\n): void {\n  const label = row.primaryText && labelForRow ? labelForRow(row) : null\n  const hidden = !row.primaryText || (labelForRow !== null && !hasLineGutterLabel(label))\n  setElementHidden(element, hidden)\n  element.classList.toggle(\n    'editor-virtualized-line-number-active',\n    !hidden && row.cursorLine && row.cursorLineHighlight.gutterNumber,\n  )\n  if (hidden) {\n    if (labelForRow) setTextContent(element, '')\n    return\n  }\n\n  if (labelForRow) {\n    setTextContent(element, String(label))\n    return\n  }\n\n  setCounterSet(element, `editor-line ${startLine + row.bufferRow}`)\n}\n\nfunction hasLineGutterLabel(label: LineGutterLabel): boolean {\n  if (label === null || label === undefined) return false\n  return String(label).length > 0\n}\n\nfunction setCounterSet(element: HTMLElement, value: string): void {\n  if (element.style.counterSet === value) return\n  element.style.counterSet = value\n}\n\nfunction setTextContent(element: HTMLElement, value: string): void {\n  if (element.textContent === value) return\n  element.textContent = value\n}\n\nfunction decimalDigitCount(value: number): number {\n  return String(Math.max(1, Math.floor(value))).length\n}\n"],"mappings":"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"}

package/dist/style.css

@@ -0,0 +1,2 @@
+@import './lineGutter.css';
+@import './foldGutter.css';

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function setElementHidden(element: HTMLElement, hidden: boolean): void;
+export declare function addClassName(element: HTMLElement, className: string | undefined): void;
+export declare function normalizePositiveInteger(value: number | undefined, fallback: number): number;
+export declare function normalizeNonNegativeNumber(value: number | undefined, fallback: number): number;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,CAG5E;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAItF;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAG5F;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAG9F"}

package/dist/utils.js

@@ -0,0 +1,22 @@
+//#region src/utils.ts
+function setElementHidden(element, hidden) {
+	if (element.hidden === hidden) return;
+	element.hidden = hidden;
+}
+function addClassName(element, className) {
+	const classNames = className?.split(/\s+/).filter(Boolean) ?? [];
+	if (classNames.length === 0) return;
+	element.classList.add(...classNames);
+}
+function normalizePositiveInteger(value, fallback) {
+	if (!Number.isFinite(value) || value === void 0 || value <= 0) return fallback;
+	return Math.floor(value);
+}
+function normalizeNonNegativeNumber(value, fallback) {
+	if (!Number.isFinite(value) || value === void 0 || value < 0) return fallback;
+	return value;
+}
+//#endregion
+export { addClassName, normalizeNonNegativeNumber, normalizePositiveInteger, setElementHidden };
+
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../src/utils.ts"],"sourcesContent":["export function setElementHidden(element: HTMLElement, hidden: boolean): void {\n  if (element.hidden === hidden) return\n  element.hidden = hidden\n}\n\nexport function addClassName(element: HTMLElement, className: string | undefined): void {\n  const classNames = className?.split(/\\s+/).filter(Boolean) ?? []\n  if (classNames.length === 0) return\n  element.classList.add(...classNames)\n}\n\nexport function normalizePositiveInteger(value: number | undefined, fallback: number): number {\n  if (!Number.isFinite(value) || value === undefined || value <= 0) return fallback\n  return Math.floor(value)\n}\n\nexport function normalizeNonNegativeNumber(value: number | undefined, fallback: number): number {\n  if (!Number.isFinite(value) || value === undefined || value < 0) return fallback\n  return value\n}\n"],"mappings":";AAAA,SAAgB,iBAAiB,SAAsB,QAAuB;CAC5E,IAAI,QAAQ,WAAW,QAAQ;CAC/B,QAAQ,SAAS;AACnB;AAEA,SAAgB,aAAa,SAAsB,WAAqC;CACtF,MAAM,aAAa,WAAW,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO,KAAK,CAAC;CAC/D,IAAI,WAAW,WAAW,GAAG;CAC7B,QAAQ,UAAU,IAAI,GAAG,UAAU;AACrC;AAEA,SAAgB,yBAAyB,OAA2B,UAA0B;CAC5F,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,UAAU,KAAA,KAAa,SAAS,GAAG,OAAO;CACzE,OAAO,KAAK,MAAM,KAAK;AACzB;AAEA,SAAgB,2BAA2B,OAA2B,UAA0B;CAC9F,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,UAAU,KAAA,KAAa,QAAQ,GAAG,OAAO;CACxE,OAAO;AACT"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@singapore-editor/gutters",
+  "version": "0.1.1",
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./src/lineGutter.css",
+    "./src/foldGutter.css",
+    "./src/style.css",
+    "./dist/lineGutter.css",
+    "./dist/foldGutter.css",
+    "./dist/style.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./line-gutter": {
+      "types": "./dist/lineGutter.d.ts",
+      "import": "./dist/lineGutter.js",
+      "default": "./dist/lineGutter.js"
+    },
+    "./fold-gutter": {
+      "types": "./dist/foldGutter.d.ts",
+      "import": "./dist/foldGutter.js",
+      "default": "./dist/foldGutter.js"
+    },
+    "./line-gutter.css": "./dist/lineGutter.css",
+    "./fold-gutter.css": "./dist/foldGutter.css",
+    "./style.css": "./dist/style.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "bun ../../scripts/build-package.ts",
+    "test": "vitest run",
+    "typecheck": "tsgo --noEmit",
+    "lint": "oxlint .",
+    "format": "oxfmt --write .",
+    "format:check": "oxfmt --check ."
+  },
+  "dependencies": {
+    "@singapore-editor/core": "0.1.2"
+  },
+  "devDependencies": {
+    "@typescript/native-preview": "7.0.0-dev.20260707.2",
+    "happy-dom": "^20.14.5",
+    "oxfmt": "0.70.0",
+    "oxlint": "1.85.0",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.2"
+  }
+}