tweak

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
+<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,

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