panelize 0.0.0-stage → 0.1.1

package/llms.txt

@@ -0,0 +1,51 @@
+# Panelize
+
+> A React layout kit. Named boxes and type are the map of the screen. `createPanelizeTheme` + `PanelizeProvider` + `usePanelizeTheme` standardize paint. Forms are bonus.
+
+This file is for agents **building apps and custom components with Panelize**. Maintainers of this repo: [CONTRIBUTING.md](CONTRIBUTING.md) and [AGENTS.md](AGENTS.md). After `npm install panelize`, read `node_modules/panelize/llms.txt` (or the package export `panelize/llms.txt`). One-file dump: [llms-full.txt](llms-full.txt).
+
+Import from `'panelize'`. Wrap the host once with `PanelizeProvider`. Do not take over the host’s styled-components `ThemeProvider`. Do not set `html` / `body` from the library. Host CSS must give the shell a height (`html`, `body`, `#root { height: 100% }` for a filled app).
+
+## How to compose (strict)
+
+Read [docs/composition.md](docs/composition.md) before writing JSX. Summary:
+
+- `Panels` is the **outer shell** of a view. Direct children are only `Panel` (one `Panel` is allowed).
+- `Panel` is a **section**. It may contain tracks, `Div`, type, controls, nested `Panels`, and custom components. It must not contain a stray `Row`, `Col`, or `Cell`.
+- Pairing is bidirectional. `Row` exists only as a direct child of `Rows`. `Col` only under `Cols`. `Cell` only under `Grid`. `Panel` only under `Panels`.
+- `Rows` / `Cols` / `Grid` need **two or more** of their item. One band → put it in the `Panel` or a `Div`.
+- The **wrapper** owns place (`alignX` / `alignY`, `flex`, `fill`, `gap`, size). Nested controls and custom components do not position themselves.
+- Visible copy goes in `Text` / `Heading` / `Span` / `TextLink` / `Label` so it inherits the nearest `Panel` text tokens.
+
+The library does not warn at runtime if a host ignores this. Follow it anyway — that is how the tree stays readable.
+
+## Core
+
+- [Composition](docs/composition.md): pairing, who positions, good and bad trees, which primitive to use
+- [Recipes](docs/recipes.md): copyable page, sidebar, centered card, form, dashboard grid, header/body/footer
+- [Components](docs/components.md): every export, element, parent, and value API on one page
+- Prop reference: `node_modules/panelize/dist/index.d.ts` (every prop is documented in JSDoc; read the type, not a guess)
+- [Shell (`Panels` / `Panel`)](docs/shell.md): page vs split, `fill`, `scroll`, `horizontal`, `stack`
+- [Layout vocabulary](docs/layout.md): `fill` vs `flex`, `gap`, `wrap`, `stack`, `Div`, `Grid`
+- [Controls](docs/controls.md): per-control behavior notes (chrome, defaults, edge cases)
+- [Accessibility](docs/accessibility.md): names, structure, keyboard, roles, focus
+- [Text](docs/text.md): `Text`, `Heading`, `Span`, `TextLink`, `Label`
+- [Theme and hooks](docs/theme.md): `createPanelizeTheme`, `PanelizeProvider`, `usePanelizeTheme`
+
+## Bonus
+
+- [Forms, buttons, chips](docs/forms.md): controls on top of the layout core, value ownership, `Select` / `MultiSelect`, validation
+
+## Full context
+
+- [llms-full.txt](llms-full.txt): this index, every `docs/` page, and the theme keys in one file
+
+## Host setup files
+
+- [examples/cursor-rule.mdc](examples/cursor-rule.mdc): drop into a host app’s `.cursor/rules/`
+- [examples/AGENTS.md](examples/AGENTS.md): drop into a host app’s `AGENTS.md`
+
+## Human docs
+
+- [README.md](README.md): install, quick start, fonts, goals, usage, vocabulary, caveats
+- [examples/panelize.theme.md](examples/panelize.theme.md): every key `createPanelizeTheme` accepts

package/package.json

@@ -1,6 +1,107 @@
 {
   "name": "panelize",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "A React layout kit: named panels, tracks, grid, and type, themed with createPanelizeTheme and PanelizeProvider.",
+  "keywords": [
+    "react",
+    "layout",
+    "styled-components",
+    "ui",
+    "design-system",
+    "theme",
+    "typescript"
+  ],
+  "homepage": "https://github.com/jayzizzle/panelize#readme",
+  "bugs": {
+    "url": "https://github.com/jayzizzle/panelize/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jayzizzle/panelize.git"
+  },
+  "license": "MIT",
+  "author": "Jon Zamora",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/panelize.cjs",
+  "module": "./dist/panelize.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/panelize.es.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/panelize.cjs"
+      }
+    },
+    "./llms.txt": "./llms.txt",
+    "./llms-full.txt": "./llms-full.txt",
+    "./docs/*": "./docs/*",
+    "./examples/*": "./examples/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "llms.txt",
+    "llms-full.txt",
+    "docs",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "examples"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "npm run clean && tsc -b && vite build && npm run build:types",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "format": "prettier --write .",
+    "llms-full": "node scripts/build-llms-full.mjs",
+    "prepublishOnly": "npm run llms-full && npm run check",
+    "typecheck": "tsc -b",
+    "test": "vitest run",
+    "test:dist": "node scripts/check-dist.mjs",
+    "check": "npm run lint && npx prettier --check . && npm run test && npm run build && npm run test:dist && npm run test:types",
+    "test:types": "attw --pack . --entrypoints .",
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
+    "build:types": "node scripts/build-types.mjs"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "dts-bundle-generator": "^9.5.1",
+    "eslint": "^10.12.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-no-relative-import-paths": "^1.7.3",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.6",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
+    "globals": "^17.13.0",
+    "jsdom": "^30.1.2",
+    "prettier": "^3.9.9",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "styled-components": "^6.5.3",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.71.1",
+    "vite": "^8.3.0",
+    "vitest": "^5.0.3"
+  }
+}