From 85844c9b44f536efe65321e1f836d93fa215e1ad Mon Sep 17 00:00:00 2001
From: Chris Wanstrath <2+defunkt@users.noreply.github.com>
Date: Mon, 29 Dec 2025 15:14:40 -0800
Subject: [PATCH] tweak

---
 README.md     | 17 ++++++++++++-----
 src/index.tsx |  2 +-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 9ff85a1..e367455 100644
--- a/README.md
+++ b/README.md
@@ -15,13 +15,13 @@ self-contained TSX components out of discrete parts.
 
 - Styles are global and open - anything can override anything anywhere.
 - No IDE-friendly link between the class name in markup and its definition.
-- All techniques are patterns a human must know and follow, not APIs.
+- Organizational techniques are patterns a human must know and follow, not APIs.
 - Errors happen silently.
 
 ## forge solutions
 
 - All styles are local to your TSX components.
-- Styles defined using TS typing.
+- Styles are defined using TS typing.
 - Component styles are made up of independently styled "Parts".
 - "Variants" replace inline styles with typed, declarative parameters.
 - Style composition is deterministic.
@@ -35,7 +35,12 @@ self-contained TSX components out of discrete parts.
 ```tsx
 import { define } from "forge"
 
-export const Button = define("button", {
+export const Container = define("Container", {
+  width: 600,
+  margin: '0 auto',
+})
+
+export const Button = define({
   base: "button",
 
   padding: 20,
@@ -43,7 +48,9 @@ export const Button = define("button", {
 })
 
 // Usage
-<Button>Click me</Button>
+<Container>
+  <Button>Click me</Button>
+</Container>
 ```
 
 ### variants
@@ -51,7 +58,7 @@ export const Button = define("button", {
 ```tsx
 import { define } from "forge"
 
-export const Button = define("button", {
+export const Button = define({
   base: "button",
 
   padding: 20,
diff --git a/src/index.tsx b/src/index.tsx
index db2c583..20aa512 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -308,7 +308,7 @@ function anonName(def: TagDef): string {
   const base = (def.base ?? 'div')
   const count = (anonComponents[base] ??= 1)
   anonComponents[base] += 1
-  return tagName(base) + String(count)
+  return tagName(base) + (count === 1 ? '' : String(count))
 }
 
 // a => Anchor, nav => Nav