Fix counter increment logic and improve button styling

- Store currentValue in mutable variable to track state properly
- Counter now increments/decrements correctly beyond 1/-1
- Reduce button size from 24px to 16px
- Reduce font size and spacing for more compact appearance
- Improve vertical alignment with inline text
- Fix regex in updateSource to match new pattern

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

main.ts

@@ -85,13 +85,15 @@ export default class CounterPlugin extends Plugin {
 	}
 
 	createCounterElement(
-		value: number,
+		initialValue: number,
 		label: string,
 		context: MarkdownPostProcessorContext
 	): HTMLElement {
 		const container = document.createElement('div');
 		container.className = 'counter-container';
 
+		let currentValue = initialValue;
+
 		const minusButton = document.createElement('button');
 		minusButton.className = 'counter-button counter-minus';
 		minusButton.textContent = '−';
@@ -99,7 +101,7 @@ export default class CounterPlugin extends Plugin {
 
 		const counterDisplay = document.createElement('span');
 		counterDisplay.className = 'counter-display';
-		counterDisplay.textContent = value.toString();
+		counterDisplay.textContent = currentValue.toString();
 
 		const plusButton = document.createElement('button');
 		plusButton.className = 'counter-button counter-plus';
@@ -116,7 +118,7 @@ export default class CounterPlugin extends Plugin {
 
 			const editor = view.editor;
 			const content = editor.getValue();
-			const counterRegex = /^~\s*\(\s*\d*\s*\)\s*(.*)$/gm;
+			const counterRegex = /~\s*\(\s*\d*\s*\)\s*(.+)/gm;
 
 			let matchIndex = 0;
 			const newContent = content.replace(counterRegex, (match, capturedLabel) => {
@@ -134,15 +136,15 @@ export default class CounterPlugin extends Plugin {
 		};
 
 		minusButton.addEventListener('click', () => {
-			const newValue = value - 1;
-			counterDisplay.textContent = newValue.toString();
-			updateSource(newValue);
+			currentValue = currentValue - 1;
+			counterDisplay.textContent = currentValue.toString();
+			updateSource(currentValue);
 		});
 
 		plusButton.addEventListener('click', () => {
-			const newValue = value + 1;
-			counterDisplay.textContent = newValue.toString();
-			updateSource(newValue);
+			currentValue = currentValue + 1;
+			counterDisplay.textContent = currentValue.toString();
+			updateSource(currentValue);
 		});
 
 		container.appendChild(minusButton);

styles.css

@@ -1,29 +1,31 @@
 .counter-container {
 	display: inline-flex;
 	align-items: center;
-	gap: 8px;
-	padding: 4px 8px;
+	gap: 4px;
+	padding: 2px 6px;
 	background-color: var(--background-secondary);
-	border-radius: 6px;
-	margin: 4px 0;
+	border-radius: 4px;
+	margin: 2px 0;
 	font-family: var(--font-interface);
+	vertical-align: middle;
 }
 
 .counter-button {
-	width: 24px;
-	height: 24px;
+	width: 16px;
+	height: 16px;
 	padding: 0;
 	border: 1px solid var(--background-modifier-border);
 	background-color: var(--interactive-normal);
 	color: var(--text-normal);
-	border-radius: 4px;
+	border-radius: 3px;
 	cursor: pointer;
-	font-size: 16px;
+	font-size: 12px;
 	font-weight: bold;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	transition: all 0.2s ease;
+	transition: all 0.15s ease;
+	line-height: 1;
 }
 
 .counter-button:hover {
@@ -34,21 +36,21 @@
 .counter-button:active {
 	background-color: var(--interactive-accent);
 	color: var(--text-on-accent);
-	transform: scale(0.95);
+	transform: scale(0.9);
 }
 
 .counter-display {
-	min-width: 32px;
+	min-width: 20px;
 	text-align: center;
 	font-weight: 600;
-	font-size: 14px;
+	font-size: 13px;
 	color: var(--text-normal);
 	font-variant-numeric: tabular-nums;
 }
 
 .counter-label {
-	margin-left: 4px;
-	color: var(--text-muted);
+	margin-left: 2px;
+	color: var(--text-normal);
 	font-size: 14px;
 }