Skip to content

Commit 8918161

Browse files
2wheehclaude
2wheeh
and
claude
authored
chore: rename package to kaskaid (#62)
Rename `react-virtual-masonry` to `kaskaid` across the package, docs, demo, and examples. The component and hook API is unchanged; only the package specifier and the emitted data attributes move. Breaking: `data-rvm-{grid,lanes,item}` become `data-kaskaid-{grid,lanes,item}`. Docs-internal CSS identifiers (`rvmsk`, `rvmdot`, `rvm-stage`) are renamed to their `ksk*` equivalents, and the favicon becomes a K wordmark. Twoslash caches were regenerated by a local docs build. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 777e7d5 commit 8918161

41 files changed

Lines changed: 207 additions & 149 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
3-
"changelog": ["@changesets/changelog-github", { "repo": "2wheeh/react-virtual-masonry" }],
3+
"changelog": ["@changesets/changelog-github", { "repo": "2wheeh/kaskaid" }],
44
"commit": false,
55
"fixed": [],
66
"linked": [],

‎.changeset/rename-to-kaskaid.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
'kaskaid': minor
3+
---
4+
5+
Rename the package from `react-virtual-masonry` to `kaskaid`.
6+
7+
The component and hook API is unchanged — `<Masonry />`, `useMasonry`, and `useEndReached` keep their names. Only the package specifier and the emitted data attributes change.
8+
9+
```diff
10+
-import { Masonry } from 'react-virtual-masonry';
11+
+import { Masonry } from 'kaskaid';
12+
```
13+
14+
**Breaking:** the data attributes emitted on the grid and its items are renamed. Update any CSS or test selectors that target them.
15+
16+
```diff
17+
-[data-rvm-grid] [data-rvm-lanes] [data-rvm-item]
18+
+[data-kaskaid-grid] [data-kaskaid-lanes] [data-kaskaid-item]
19+
```

‎.github/workflows/release.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ jobs:
99
release:
1010
environment: production
1111
name: Release
12-
if: github.repository == '2wheeh/react-virtual-masonry'
12+
if: github.repository == '2wheeh/kaskaid'
1313
runs-on: ubuntu-latest
1414
timeout-minutes: 20
1515
permissions:

‎README.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,25 @@
1-
## React Virtual Masonry
1+
## kaskaid
2+
3+
Virtualized masonry layout for React, powered by [`@tanstack/virtual`](https://tanstack.com/virtual).
4+
5+
Only the items in and around the viewport are rendered, so masonry grids with thousands of items stay fast. SSR-ready, and works with either window scrolling or a custom scroll container.
6+
7+
```sh
8+
pnpm add kaskaid @tanstack/react-virtual
9+
```
10+
11+
```tsx
12+
import { Masonry } from 'kaskaid';
13+
14+
<Masonry
15+
data={items}
16+
estimateSize={(i) => items[i].height}
17+
renderItem={({ item, index }) => <Card item={item} index={index} />}
18+
/>;
19+
```
20+
21+
[Documentation](https://kaskaid.vercel.app)
22+
23+
## License
24+
25+
MIT

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>React Virtual Masonry Demo</title>
7+
<title>kaskaid Demo</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎demo/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"dependencies": {
1616
"react": "catalog:",
1717
"react-dom": "catalog:",
18-
"react-virtual-masonry": "workspace:*"
18+
"kaskaid": "workspace:*"
1919
},
2020
"devDependencies": {
2121
"@types/react": "catalog:",

‎demo/src/App.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Masonry } from 'react-virtual-masonry';
1+
import { Masonry } from 'kaskaid';
22

33
const DATA = [
44
200, 600, 200, 400, 100, 600, 200, 400, 100, 600, 200, 400, 100, 600, 200, 400, 100, 200, 600,
@@ -27,9 +27,9 @@ function App() {
2727

2828
{/* Responsive lane count via CSS — library reads `--lanes` from the grid root. */}
2929
<style>{`
30-
[data-rvm-grid] { --lanes: 1; }
31-
@media (min-width: 750px) { [data-rvm-grid] { --lanes: 2; } }
32-
@media (min-width: 900px) { [data-rvm-grid] { --lanes: 3; } }
30+
[data-kaskaid-grid] { --lanes: 1; }
31+
@media (min-width: 750px) { [data-kaskaid-grid] { --lanes: 2; } }
32+
@media (min-width: 900px) { [data-kaskaid-grid] { --lanes: 3; } }
3333
`}</style>
3434
<Masonry data={DATA} renderItem={Cell} estimateSize={() => 400} />
3535
</>

‎docs/.design/BASELINE.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ L1 `#3DA35D` (green), L2 `#B983FF` (purple).
9797
- Top-right `--lanes: 3` readout (mono, coral text, `readoutBg`, `border`).
9898
- Right-edge 10px drag handle (ew-resize; 3 dots).
9999
- Footer (fades in over `page`): AUTO → coral code chip
100-
`useEndReached → fetchNextPage()` + (loading) 3 pulsing coral dots (`rvmdot`) +
100+
`useEndReached → fetchNextPage()` + (loading) 3 pulsing coral dots (`kskdot`) +
101101
`mounting 12 skeletons`; MANUAL → `↓ Load more` button + `endReachedDisabled: true`.
102102
- **x-ray per card**: content dimmed (opacity .14 dark / .20 light); coral overlay
103103
border + glow; 3px lane-accent stripe (L0 blue / L1 green / L2 purple by
@@ -107,8 +107,8 @@ L1 `#3DA35D` (green), L2 `#B983FF` (purple).
107107
- Below the card: mono `t4` note `// heights are measured post-layout, never equalized · the feed only grows`.
108108

109109
## Keyframes
110-
- `rvmdot` — pulsing loading dots (opacity .25→1→.25).
111-
- `rvmsk` — skeleton shimmer (opacity .5→1→.5).
110+
- `kskdot` — pulsing loading dots (opacity .25→1→.25).
111+
- `kskshimmer` — skeleton shimmer (opacity .5→1→.5).
112112
Both must be disabled under `prefers-reduced-motion`.
113113

114114
## 8 target catalog states (from `Instrument Panel Demo.dc.html`)

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"dependencies": {
1313
"react": "catalog:",
1414
"react-dom": "catalog:",
15-
"react-virtual-masonry": "workspace:*",
15+
"kaskaid": "workspace:*",
1616
"vocs": "^2.3.3",
1717
"waku": "^1.0.0-beta.6"
1818
},

‎docs/panda.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ export default defineConfig({
2121
keyframes: {
2222
// Pulsing loading dots + skeleton shimmer. Consumers gate these on
2323
// `prefers-reduced-motion` at the call site (animation set to none).
24-
rvmdot: {
24+
kskdot: {
2525
'0%, 100%': { opacity: '0.25' },
2626
'50%': { opacity: '1' },
2727
},
28-
rvmsk: {
28+
kskshimmer: {
2929
'0%, 100%': { opacity: '0.5' },
3030
'50%': { opacity: '1' },
3131
},

0 commit comments

Comments
 (0)