From a68564fff4cb5fee3f99d4f1ace0eb1184214f59 Mon Sep 17 00:00:00 2001 From: lucasfelixc Date: Thu, 1 Oct 2026 10:01:51 -0300 Subject: [PATCH] chore: update npm scope --- .changeset/add-interactive-resize.md | 12 +++---- .changeset/add-snap-to-grid.md | 12 +++---- .changeset/support-react-19.md | 2 +- .claude/skills/issue.md | 6 ++-- .claude/skills/spatial-expert.md | 6 ++-- .github/ISSUE_TEMPLATE/bug_report.yml | 6 ++-- .github/ISSUE_TEMPLATE/feature_request.yml | 6 ++-- .github/workflows/deploy-examples.yml | 4 +-- CLAUDE.md | 14 ++++---- CONTRIBUTING.md | 10 +++--- README.md | 36 +++++++++---------- SECURITY.md | 6 ++-- packages/adapters/react/CHANGELOG.md | 6 ++-- packages/adapters/react/README.md | 16 ++++----- packages/adapters/react/package.json | 8 ++--- packages/adapters/react/src/SpatialCanvas.tsx | 2 +- .../src/__tests__/SpatialCanvas.test.tsx | 4 +-- .../react/src/__tests__/hooks.test.ts | 4 +-- .../adapters/react/src/hooks/useCoreEvent.ts | 2 +- .../adapters/react/src/hooks/useSelection.ts | 2 +- .../react/src/hooks/useSpatialCore.ts | 4 +-- .../adapters/react/src/hooks/useViewport.ts | 2 +- .../adapters/react/src/internal/GridLayer.tsx | 2 +- .../react/src/internal/ResizeHandles.tsx | 2 +- .../react/src/internal/SelectionOverlay.tsx | 2 +- .../react/src/internal/attachHandlers.ts | 4 +-- .../react/src/internal/useEntities.ts | 2 +- .../src/internal/useViewportTransform.ts | 2 +- packages/adapters/react/vitest.config.ts | 2 +- packages/core/CHANGELOG.md | 4 +-- packages/core/CLAUDE.md | 4 +-- packages/core/README.md | 16 ++++----- packages/core/package.json | 2 +- packages/examples/js-vanilla/CHANGELOG.md | 6 ++-- packages/examples/js-vanilla/package.json | 6 ++-- packages/examples/js-vanilla/src/main.ts | 8 ++--- packages/examples/js-vanilla/vite.config.ts | 4 +-- packages/examples/react/CHANGELOG.md | 6 ++-- packages/examples/react/package.json | 6 ++-- packages/examples/react/src/App.tsx | 6 ++-- packages/examples/react/vite.config.ts | 4 +-- packages/svg/CHANGELOG.md | 6 ++-- packages/svg/CLAUDE.md | 8 ++--- packages/svg/README.md | 18 +++++----- packages/svg/package.json | 8 ++--- packages/svg/src/__tests__/destroy.test.ts | 2 +- packages/svg/src/__tests__/grid.test.ts | 2 +- packages/svg/src/__tests__/handlers.test.ts | 2 +- packages/svg/src/__tests__/pinch.test.ts | 2 +- packages/svg/src/__tests__/renderer.test.ts | 2 +- .../svg/src/__tests__/resize-handles.test.ts | 2 +- .../src/__tests__/selection-overlay.test.ts | 2 +- packages/svg/src/__tests__/wheel.test.ts | 2 +- packages/svg/src/grid.ts | 2 +- packages/svg/src/handlers.ts | 4 +-- packages/svg/src/index.ts | 2 +- packages/svg/src/renderer.ts | 2 +- packages/svg/src/resize-handles.ts | 2 +- packages/svg/src/selection-overlay.ts | 2 +- pnpm-lock.yaml | 12 +++---- tsconfig.json | 6 ++-- vitest.config.ts | 6 ++-- 62 files changed, 176 insertions(+), 176 deletions(-) diff --git a/.changeset/add-interactive-resize.md b/.changeset/add-interactive-resize.md index 01b03fc..b7c1f94 100644 --- a/.changeset/add-interactive-resize.md +++ b/.changeset/add-interactive-resize.md @@ -1,11 +1,11 @@ --- -"@spatialkit/core": minor -"@spatialkit/svg": minor -"@spatialkit/react": minor +"@spatial-kit/core": minor +"@spatial-kit/svg": minor +"@spatial-kit/react": minor --- Add interactive entity resizing via drag handles. -- `@spatialkit/core` exports a new `ResizeDirection` type (`'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'`), `hitTestResizeHandles` to detect which handle is under the cursor in screen space, and `applyResizeDelta` to compute new bounds from a world-space drag delta (with optional snap-to-grid on the edge position) -- `@spatialkit/svg` adds `paintResizeHandles` painter that draws 8 handles around each selected entity at a consistent pixel size regardless of zoom, and wires resize drag into `attachHandlers` with a priority-over-entity-drag rule -- `@spatialkit/react` adds a `ResizeHandles` internal component that renders the same 8 handles declaratively, and wires resize drag into `attachHandlers` with the same state machine (`idle → pending → resize → idle`) +- `@spatial-kit/core` exports a new `ResizeDirection` type (`'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'`), `hitTestResizeHandles` to detect which handle is under the cursor in screen space, and `applyResizeDelta` to compute new bounds from a world-space drag delta (with optional snap-to-grid on the edge position) +- `@spatial-kit/svg` adds `paintResizeHandles` painter that draws 8 handles around each selected entity at a consistent pixel size regardless of zoom, and wires resize drag into `attachHandlers` with a priority-over-entity-drag rule +- `@spatial-kit/react` adds a `ResizeHandles` internal component that renders the same 8 handles declaratively, and wires resize drag into `attachHandlers` with the same state machine (`idle → pending → resize → idle`) diff --git a/.changeset/add-snap-to-grid.md b/.changeset/add-snap-to-grid.md index e0ca254..827215e 100644 --- a/.changeset/add-snap-to-grid.md +++ b/.changeset/add-snap-to-grid.md @@ -1,11 +1,11 @@ --- -"@spatialkit/core": minor -"@spatialkit/svg": minor -"@spatialkit/react": minor +"@spatial-kit/core": minor +"@spatial-kit/svg": minor +"@spatial-kit/react": minor --- Add snap-to-grid support for entity drag. -- `@spatialkit/core` exports a new `snapToGrid(value, gridSize)` utility that rounds a world-space coordinate to the nearest grid multiple -- `@spatialkit/svg` accepts a `snapToGrid?: number` option on `mountSvgRenderer`; when set, entity positions are snapped on every drag frame -- `@spatialkit/react` accepts a `snapToGrid?: number` prop on `SpatialCanvas` with the same behavior +- `@spatial-kit/core` exports a new `snapToGrid(value, gridSize)` utility that rounds a world-space coordinate to the nearest grid multiple +- `@spatial-kit/svg` accepts a `snapToGrid?: number` option on `mountSvgRenderer`; when set, entity positions are snapped on every drag frame +- `@spatial-kit/react` accepts a `snapToGrid?: number` prop on `SpatialCanvas` with the same behavior diff --git a/.changeset/support-react-19.md b/.changeset/support-react-19.md index eab7252..6a31f6b 100644 --- a/.changeset/support-react-19.md +++ b/.changeset/support-react-19.md @@ -1,5 +1,5 @@ --- -'@spatialkit/react': minor +'@spatial-kit/react': minor --- Support React 19. The `react` peer dependency now accepts `^18.0.0 || ^19.0.0`. diff --git a/.claude/skills/issue.md b/.claude/skills/issue.md index f86123b..e72aea0 100644 --- a/.claude/skills/issue.md +++ b/.claude/skills/issue.md @@ -11,7 +11,7 @@ You are a GitHub issue creator and editor for the **spatialkit/spatial** reposit **Repo:** `spatialkit/spatial` **Owner:** `spatialkit` -**Packages:** `@spatialkit/core` · `@spatialkit/svg` · `@spatialkit/react` · cross-cutting +**Packages:** `@spatial-kit/core` · `@spatial-kit/svg` · `@spatial-kit/react` · cross-cutting **Milestones:** | # | Title | Scope | |---|-------|-------| @@ -53,7 +53,7 @@ Questions to ask in round 1: 2. "What type of issue is this?" (header: "Type") Options: Feature | Bug | Chore 3. "Which package does this affect?" (header: "Package") - Options: @spatialkit/core | @spatialkit/svg | @spatialkit/react | cross-cutting + Options: @spatial-kit/core | @spatial-kit/svg | @spatial-kit/react | cross-cutting 4. "Which milestone does this belong to?" (header: "Milestone") Options: M1 — Functional editor | M2 — Undo/Redo & Persistence | M3 — Extend & Optimize | M4 — Ecosystem | None ``` @@ -165,5 +165,5 @@ These fields can't be set via the API — open the issue in the project board to - Never skip the question rounds — always ask before writing the body. - Never invent code or file paths not derivable from the project context. -- Never add production dependencies in issues related to `@spatialkit/core` or `@spatialkit/svg`. +- Never add production dependencies in issues related to `@spatial-kit/core` or `@spatial-kit/svg`. - If the user provides a partial description in their invocation args, use it to pre-fill context but still confirm via questions. diff --git a/.claude/skills/spatial-expert.md b/.claude/skills/spatial-expert.md index ef4d53e..9286bfb 100644 --- a/.claude/skills/spatial-expert.md +++ b/.claude/skills/spatial-expert.md @@ -9,7 +9,7 @@ You are an expert on the **Spatial** codebase. Apply this context whenever worki ## What Spatial is -A zero-dependency TypeScript toolkit for building interactive 2D editors (floor plans, seat maps, office layouts). It provides scene management, pan/zoom/selection/picking primitives, and pluggable renderers. It is a monorepo with two publishable packages: `@spatialkit/core` and `@spatialkit/svg`. +A zero-dependency TypeScript toolkit for building interactive 2D editors (floor plans, seat maps, office layouts). It provides scene management, pan/zoom/selection/picking primitives, and pluggable renderers. It is a monorepo with two publishable packages: `@spatial-kit/core` and `@spatial-kit/svg`. --- @@ -33,7 +33,7 @@ A zero-dependency TypeScript toolkit for building interactive 2D editors (floor ## Architecture rules to enforce -1. **No production deps** — `@spatialkit/core` and `@spatialkit/svg` must stay dependency-free. +1. **No production deps** — `@spatial-kit/core` and `@spatial-kit/svg` must stay dependency-free. 2. **Core is framework-agnostic** — no DOM, no React, no browser APIs in `packages/core/src/`. 3. **Branded types everywhere** — `EntityId` and `LayerId` are branded strings; never substitute with `string`. 4. **Immutable selection** — `applySelection` returns a new `Set`, never mutates the input. @@ -106,5 +106,5 @@ Test environment: **Node** for core, **jsdom** for svg. Tests live in `src/__tes - Forgetting `selectable: true` on entities → `hitTestPoint` returns null - Using `string` instead of `EntityId` / `LayerId` → type errors downstream - Mutating the `Set` from `applySelection` → breaks immutability contract -- Adding DOM code to `@spatialkit/core` → breaks the agnostic renderer model +- Adding DOM code to `@spatial-kit/core` → breaks the agnostic renderer model - Not updating `index.ts` after adding exports → new symbols invisible to consumers diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 37f4414..4dd6830 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -12,9 +12,9 @@ body: label: Package multiple: true options: - - '@spatialkit/core' - - '@spatialkit/svg' - - '@spatialkit/react' + - '@spatial-kit/core' + - '@spatial-kit/svg' + - '@spatial-kit/react' - Not sure validations: required: true diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml index e181643..1ab2e16 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -8,9 +8,9 @@ body: label: Package multiple: true options: - - '@spatialkit/core' - - '@spatialkit/svg' - - '@spatialkit/react' + - '@spatial-kit/core' + - '@spatial-kit/svg' + - '@spatial-kit/react' - New package - Not sure validations: diff --git a/.github/workflows/deploy-examples.yml b/.github/workflows/deploy-examples.yml index d83d339..a8ee666 100644 --- a/.github/workflows/deploy-examples.yml +++ b/.github/workflows/deploy-examples.yml @@ -62,11 +62,11 @@ jobs:

Interactive 2D editor toolkit — live examples

Vanilla JS - @spatialkit/core + @spatialkit/svg + @spatial-kit/core + @spatial-kit/svg React - @spatialkit/core + @spatialkit/react + @spatial-kit/core + @spatial-kit/react diff --git a/CLAUDE.md b/CLAUDE.md index f34474e..d724b27 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -15,10 +15,10 @@ Spatial is a zero-dependency TypeScript toolkit for building interactive 2D edit ``` packages/ - core/ @spatialkit/core — scene engine, viewport, selection, events, picking - svg/ @spatialkit/svg — SVG renderer + DOM event handlers + core/ @spatial-kit/core — scene engine, viewport, selection, events, picking + svg/ @spatial-kit/svg — SVG renderer + DOM event handlers adapters/ - react/ @spatialkit/react — React adapter (hooks + SpatialCanvas component) + react/ @spatial-kit/react — React adapter (hooks + SpatialCanvas component) examples/ js-vanilla/ vanilla JS example react/ React example @@ -47,7 +47,7 @@ Run from repo root. Per-package commands work inside each `packages/*` directory ## Architecture -### @spatialkit/core +### @spatial-kit/core | Module | Responsibility | |--------|---------------| @@ -71,7 +71,7 @@ Run from repo root. Per-package commands work inside each `packages/*` directory - `zoomAt` delta is multiplicative: `0.1` = +10%, `−0.1` = −10% - `panBy` takes screen-space delta; positive `x` shifts content left (pan moves right in world) -### @spatialkit/svg +### @spatial-kit/svg | Module | Responsibility | |--------|---------------| @@ -142,8 +142,8 @@ Run from repo root. Per-package commands work inside each `packages/*` directory ## What NOT to do -- Do not add production dependencies to `@spatialkit/core` or `@spatialkit/svg`. +- Do not add production dependencies to `@spatial-kit/core` or `@spatial-kit/svg`. - Do not bypass branded types with plain strings. - Do not mutate `Set` objects returned by `applySelection`. -- Do not add framework-specific code to `@spatialkit/core` (keep it agnostic). +- Do not add framework-specific code to `@spatial-kit/core` (keep it agnostic). - Do not skip typecheck — the build uses project references. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b6f14d1..29c1870 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -38,10 +38,10 @@ pnpm test ``` packages/ - core/ @spatialkit/core — scene engine, viewport, selection, events, picking - svg/ @spatialkit/svg — SVG renderer + DOM event handlers + core/ @spatial-kit/core — scene engine, viewport, selection, events, picking + svg/ @spatial-kit/svg — SVG renderer + DOM event handlers adapters/ - react/ @spatialkit/react — React adapter (hooks + SpatialCanvas) + react/ @spatial-kit/react — React adapter (hooks + SpatialCanvas) examples/ js-vanilla/ vanilla JS example (not published) react/ React example (not published) @@ -51,8 +51,8 @@ Each package README documents its public API. ## Code conventions -- **No production dependencies** in `@spatialkit/core`, `@spatialkit/svg` or `@spatialkit/react`. Peer dependencies on other `@spatialkit/*` packages and on React are the only exceptions. -- **`@spatialkit/core` stays framework-agnostic**: no DOM, no browser APIs. +- **No production dependencies** in `@spatial-kit/core`, `@spatial-kit/svg` or `@spatial-kit/react`. Peer dependencies on other `@spatial-kit/*` packages and on React are the only exceptions. +- **`@spatial-kit/core` stays framework-agnostic**: no DOM, no browser APIs. - **TypeScript strict**: no `any`, no unused variables (prefix intentionally unused arguments with `_`). - **Branded ids**: use `EntityId` and `LayerId`, never plain `string`. - **Immutable selection**: never mutate the `Set` returned by `applySelection`. diff --git a/README.md b/README.md index 5caeb88..722f7e7 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@

CI - npm @spatialkit/core + npm @spatial-kit/core MIT license

@@ -28,9 +28,9 @@ Spatial provides the low-level engine for pan/zoom, selection, hit testing, and | Package | Version | Description | |---------|---------|-------------| -| [`@spatialkit/core`](packages/core) | [![npm](https://img.shields.io/npm/v/@spatialkit/core)](https://www.npmjs.com/package/@spatialkit/core) | Scene engine, viewport, event bus, picking, selection | -| [`@spatialkit/svg`](packages/svg) | [![npm](https://img.shields.io/npm/v/@spatialkit/svg)](https://www.npmjs.com/package/@spatialkit/svg) | SVG renderer + DOM event handlers | -| [`@spatialkit/react`](packages/adapters/react) | [![npm](https://img.shields.io/npm/v/@spatialkit/react)](https://www.npmjs.com/package/@spatialkit/react) | React adapter — hooks and `SpatialCanvas` component | +| [`@spatial-kit/core`](packages/core) | [![npm](https://img.shields.io/npm/v/@spatial-kit/core)](https://www.npmjs.com/package/@spatial-kit/core) | Scene engine, viewport, event bus, picking, selection | +| [`@spatial-kit/svg`](packages/svg) | [![npm](https://img.shields.io/npm/v/@spatial-kit/svg)](https://www.npmjs.com/package/@spatial-kit/svg) | SVG renderer + DOM event handlers | +| [`@spatial-kit/react`](packages/adapters/react) | [![npm](https://img.shields.io/npm/v/@spatial-kit/react)](https://www.npmjs.com/package/@spatial-kit/react) | React adapter — hooks and `SpatialCanvas` component | --- @@ -39,13 +39,13 @@ Spatial provides the low-level engine for pan/zoom, selection, hit testing, and **Vanilla JS / framework-agnostic:** ```bash -npm install @spatialkit/core @spatialkit/svg +npm install @spatial-kit/core @spatial-kit/svg ``` **React:** ```bash -npm install @spatialkit/core @spatialkit/react +npm install @spatial-kit/core @spatial-kit/react ``` All packages ship dual **ESM + CJS** builds with full TypeScript declarations. @@ -56,14 +56,14 @@ All packages ship dual **ESM + CJS** builds with full TypeScript declarations. ```tsx import { useCallback, useEffect } from 'react'; -import { createEmptyScene, addEntity } from '@spatialkit/core'; -import type { Entity, EntityId, LayerId } from '@spatialkit/core'; +import { createEmptyScene, addEntity } from '@spatial-kit/core'; +import type { Entity, EntityId, LayerId } from '@spatial-kit/core'; import { SpatialCanvas, useSpatialCore, useSelection, useViewport, -} from '@spatialkit/react'; +} from '@spatial-kit/react'; const LAYER = 'main' as LayerId; @@ -222,9 +222,9 @@ useCoreEvent(core, 'entities:changed', ({ type, ids }) => { ## Quick start — Vanilla JS ```ts -import { createCore, createEmptyScene } from '@spatialkit/core'; -import { mountSvgRenderer } from '@spatialkit/svg'; -import type { EntityId, LayerId } from '@spatialkit/core'; +import { createCore, createEmptyScene } from '@spatial-kit/core'; +import { mountSvgRenderer } from '@spatial-kit/svg'; +import type { EntityId, LayerId } from '@spatial-kit/core'; // 1. Define layers (bottom → top z-order) const LAYERS = { @@ -304,7 +304,7 @@ renderer.destroy(); - `fitToBounds`, `fitToScene`, `centerOn` for programmatic camera control - Precise coordinate transforms: `worldToScreen` / `screenToWorld` -**Interaction** (via `@spatialkit/svg` or `@spatialkit/react`) +**Interaction** (via `@spatial-kit/svg` or `@spatial-kit/react`) - Mouse wheel zoom (configurable sensitivity) - Pointer drag-to-pan - Pinch-to-zoom on touch and pen devices @@ -314,13 +314,13 @@ renderer.destroy(); - Drag handles to resize the selected entity - Optional snap-to-grid for drag and resize -**Rendering** (via `@spatialkit/svg` or `@spatialkit/react`) +**Rendering** (via `@spatial-kit/svg` or `@spatial-kit/react`) - Bring-your-own-drawEntity callback — full SVG freedom - World-aligned background grid that stays crisp at any zoom - Built-in selection highlight overlay with customisable style - Automatic repaints on viewport, entity, and selection changes -**React adapter** (`@spatialkit/react`) +**React adapter** (`@spatial-kit/react`) - `SpatialCanvas` component — drop in an SVG canvas with zero boilerplate - `useSpatialCore` — lazy engine initialisation, stable across re-renders - `useSelection` / `useViewport` — fine-grained reactive subscriptions via `useSyncExternalStore` @@ -343,14 +343,14 @@ renderer.destroy(); └────────────────┬────────────────────────┘ │ SpatialCore API ┌───────────▼────────────┐ - │ @spatialkit/core │ + │ @spatial-kit/core │ │ scene · viewport │ │ events · picking │ │ selection · store │ └─────────┬──────────────┘ │ subscribes to events ┌─────────┴──────────────┬──────────────────────┐ - │ @spatialkit/svg │ @spatialkit/react │ + │ @spatial-kit/svg │ @spatial-kit/react │ │ DOM setup · renderer │ SpatialCanvas │ │ handlers · grid │ useSpatialCore │ │ selection overlay │ useSelection │ @@ -359,7 +359,7 @@ renderer.destroy(); └──────────────────────┘ ``` -`@spatialkit/core` is fully framework-agnostic — no DOM, no browser APIs. `@spatialkit/svg` and `@spatialkit/react` are independent renderer/adapter layers that connect core to the browser. Use whichever fits your stack. +`@spatial-kit/core` is fully framework-agnostic — no DOM, no browser APIs. `@spatial-kit/svg` and `@spatial-kit/react` are independent renderer/adapter layers that connect core to the browser. Use whichever fits your stack. --- diff --git a/SECURITY.md b/SECURITY.md index 53f81dc..55e6e74 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -6,9 +6,9 @@ Spatial is in `0.x`. Security fixes are released for the latest published minor | Package | Supported | |---------|-----------| -| `@spatialkit/core` | latest `0.x` minor | -| `@spatialkit/svg` | latest `0.x` minor | -| `@spatialkit/react` | latest `0.x` minor | +| `@spatial-kit/core` | latest `0.x` minor | +| `@spatial-kit/svg` | latest `0.x` minor | +| `@spatial-kit/react` | latest `0.x` minor | ## Reporting a vulnerability diff --git a/packages/adapters/react/CHANGELOG.md b/packages/adapters/react/CHANGELOG.md index b8e7280..517e883 100644 --- a/packages/adapters/react/CHANGELOG.md +++ b/packages/adapters/react/CHANGELOG.md @@ -1,12 +1,12 @@ -# @spatialkit/react +# @spatial-kit/react ## 0.1.0 ### Minor Changes -- Initial release of @spatialkit/core, @spatialkit/svg, and @spatialkit/react. +- Initial release of @spatial-kit/core, @spatial-kit/svg, and @spatial-kit/react. ### Patch Changes - Updated dependencies - - @spatialkit/core@0.1.0 + - @spatial-kit/core@0.1.0 diff --git a/packages/adapters/react/README.md b/packages/adapters/react/README.md index 4f0d436..9bd5c54 100644 --- a/packages/adapters/react/README.md +++ b/packages/adapters/react/README.md @@ -1,13 +1,13 @@ -# @spatialkit/react +# @spatial-kit/react -React adapter for [`@spatialkit/core`](https://github.com/spatialkit/spatial/tree/main/packages/core). Provides a drop-in `` component and hooks for building interactive 2D editors — floor plans, seat maps, office layouts — with zero boilerplate. +React adapter for [`@spatial-kit/core`](https://github.com/spatialkit/spatial/tree/main/packages/core). Provides a drop-in `` component and hooks for building interactive 2D editors — floor plans, seat maps, office layouts — with zero boilerplate. ## Installation ```bash -npm install @spatialkit/core @spatialkit/react +npm install @spatial-kit/core @spatial-kit/react # or -pnpm add @spatialkit/core @spatialkit/react +pnpm add @spatial-kit/core @spatial-kit/react ``` React 18 or 19 is required as a peer dependency. @@ -16,15 +16,15 @@ React 18 or 19 is required as a peer dependency. ```tsx import { useCallback, useEffect } from 'react'; -import { createEmptyScene } from '@spatialkit/core'; -import type { Entity, EntityId, LayerId } from '@spatialkit/core'; -import { SpatialCanvas, useSpatialCore, useSelection, useViewport } from '@spatialkit/react'; +import { createEmptyScene } from '@spatial-kit/core'; +import type { Entity, EntityId, LayerId } from '@spatial-kit/core'; +import { SpatialCanvas, useSpatialCore, useSelection, useViewport } from '@spatial-kit/react'; const LAYER = 'main' as LayerId; const initialScene = (() => { const scene = createEmptyScene({ width: 1200, height: 800 }, [LAYER]); - // addEntity is a store helper — import from @spatialkit/core if needed, + // addEntity is a store helper — import from @spatial-kit/core if needed, // or use core.add() after the core is created. return scene; })(); diff --git a/packages/adapters/react/package.json b/packages/adapters/react/package.json index 7cad4e7..c88c266 100644 --- a/packages/adapters/react/package.json +++ b/packages/adapters/react/package.json @@ -1,7 +1,7 @@ { - "name": "@spatialkit/react", + "name": "@spatial-kit/react", "version": "0.1.0", - "description": "React adapter for @spatialkit/core: SpatialCanvas component and hooks for interactive 2D editors.", + "description": "React adapter for @spatial-kit/core: SpatialCanvas component and hooks for interactive 2D editors.", "keywords": [ "2d", "editor", @@ -49,7 +49,7 @@ "test:watch": "vitest" }, "devDependencies": { - "@spatialkit/core": "workspace:*", + "@spatial-kit/core": "workspace:*", "@testing-library/react": "^16.3.3", "@types/react": "^19.3.0", "@types/react-dom": "^19.3.0", @@ -59,7 +59,7 @@ "vitest": "^5.0.3" }, "peerDependencies": { - "@spatialkit/core": "0.x", + "@spatial-kit/core": "0.x", "react": "^18.0.0 || ^19.0.0" }, "publishConfig": { diff --git a/packages/adapters/react/src/SpatialCanvas.tsx b/packages/adapters/react/src/SpatialCanvas.tsx index ff23d7a..41db196 100644 --- a/packages/adapters/react/src/SpatialCanvas.tsx +++ b/packages/adapters/react/src/SpatialCanvas.tsx @@ -6,7 +6,7 @@ import { type CSSProperties, type ReactNode, } from 'react'; -import type { Entity, EntityId, SpatialCore, LayerId } from '@spatialkit/core'; +import type { Entity, EntityId, SpatialCore, LayerId } from '@spatial-kit/core'; import { attachHandlers } from './internal/attachHandlers'; import { useEntities } from './internal/useEntities'; import { useViewportTransform } from './internal/useViewportTransform'; diff --git a/packages/adapters/react/src/__tests__/SpatialCanvas.test.tsx b/packages/adapters/react/src/__tests__/SpatialCanvas.test.tsx index 8237f00..b828e15 100644 --- a/packages/adapters/react/src/__tests__/SpatialCanvas.test.tsx +++ b/packages/adapters/react/src/__tests__/SpatialCanvas.test.tsx @@ -1,8 +1,8 @@ // @vitest-environment jsdom import { describe, it, expect, vi, beforeAll } from 'vitest'; import { render, act } from '@testing-library/react'; -import { createCore, createEmptyScene } from '@spatialkit/core'; -import type { Entity, EntityId, LayerId } from '@spatialkit/core'; +import { createCore, createEmptyScene } from '@spatial-kit/core'; +import type { Entity, EntityId, LayerId } from '@spatial-kit/core'; import { SpatialCanvas } from '../SpatialCanvas'; beforeAll(() => { diff --git a/packages/adapters/react/src/__tests__/hooks.test.ts b/packages/adapters/react/src/__tests__/hooks.test.ts index e489474..675d457 100644 --- a/packages/adapters/react/src/__tests__/hooks.test.ts +++ b/packages/adapters/react/src/__tests__/hooks.test.ts @@ -1,8 +1,8 @@ // @vitest-environment jsdom import { describe, it, expect } from 'vitest'; import { renderHook, act } from '@testing-library/react'; -import { createCore, createEmptyScene } from '@spatialkit/core'; -import type { EntityId, LayerId } from '@spatialkit/core'; +import { createCore, createEmptyScene } from '@spatial-kit/core'; +import type { EntityId, LayerId } from '@spatial-kit/core'; import { useSpatialCore, useSelection, useViewport } from '../index'; function makeCore() { diff --git a/packages/adapters/react/src/hooks/useCoreEvent.ts b/packages/adapters/react/src/hooks/useCoreEvent.ts index b86a8ae..1c5582f 100644 --- a/packages/adapters/react/src/hooks/useCoreEvent.ts +++ b/packages/adapters/react/src/hooks/useCoreEvent.ts @@ -1,5 +1,5 @@ import { useEffect, useRef } from 'react'; -import type { SpatialCore } from '@spatialkit/core'; +import type { SpatialCore } from '@spatial-kit/core'; export function useCoreEvent( core: SpatialCore, diff --git a/packages/adapters/react/src/hooks/useSelection.ts b/packages/adapters/react/src/hooks/useSelection.ts index 52a488a..9b40825 100644 --- a/packages/adapters/react/src/hooks/useSelection.ts +++ b/packages/adapters/react/src/hooks/useSelection.ts @@ -1,5 +1,5 @@ import { useCallback, useRef, useSyncExternalStore } from 'react'; -import type { EntityId, SpatialCore } from '@spatialkit/core'; +import type { EntityId, SpatialCore } from '@spatial-kit/core'; export function useSelection(core: SpatialCore): ReadonlySet { const snapshotRef = useRef>(new Set(core.selection)); diff --git a/packages/adapters/react/src/hooks/useSpatialCore.ts b/packages/adapters/react/src/hooks/useSpatialCore.ts index 674f66b..918f004 100644 --- a/packages/adapters/react/src/hooks/useSpatialCore.ts +++ b/packages/adapters/react/src/hooks/useSpatialCore.ts @@ -1,6 +1,6 @@ import { useRef } from 'react'; -import { createCore } from '@spatialkit/core'; -import type { SpatialCore, Scene, Viewport } from '@spatialkit/core'; +import { createCore } from '@spatial-kit/core'; +import type { SpatialCore, Scene, Viewport } from '@spatial-kit/core'; export interface SpatialCoreOptions { scene: Scene; diff --git a/packages/adapters/react/src/hooks/useViewport.ts b/packages/adapters/react/src/hooks/useViewport.ts index 33c9f48..c6613aa 100644 --- a/packages/adapters/react/src/hooks/useViewport.ts +++ b/packages/adapters/react/src/hooks/useViewport.ts @@ -1,5 +1,5 @@ import { useCallback, useRef, useSyncExternalStore } from 'react'; -import type { SpatialCore, Viewport } from '@spatialkit/core'; +import type { SpatialCore, Viewport } from '@spatial-kit/core'; export function useViewport(core: SpatialCore): Viewport { const snapshotRef = useRef({ ...core.viewport, pan: { ...core.viewport.pan } }); diff --git a/packages/adapters/react/src/internal/GridLayer.tsx b/packages/adapters/react/src/internal/GridLayer.tsx index 1d31d69..b69ee23 100644 --- a/packages/adapters/react/src/internal/GridLayer.tsx +++ b/packages/adapters/react/src/internal/GridLayer.tsx @@ -1,5 +1,5 @@ import { memo, useEffect, useRef } from 'react'; -import type { SpatialCore, Viewport } from '@spatialkit/core'; +import type { SpatialCore, Viewport } from '@spatial-kit/core'; import type { GridOptions } from '../types'; interface GridLayerProps { diff --git a/packages/adapters/react/src/internal/ResizeHandles.tsx b/packages/adapters/react/src/internal/ResizeHandles.tsx index 971458d..8946dcf 100644 --- a/packages/adapters/react/src/internal/ResizeHandles.tsx +++ b/packages/adapters/react/src/internal/ResizeHandles.tsx @@ -1,5 +1,5 @@ import { memo } from 'react'; -import type { Entity, EntityId } from '@spatialkit/core'; +import type { Entity, EntityId } from '@spatial-kit/core'; export type ResizeHandleStyle = { size?: number; diff --git a/packages/adapters/react/src/internal/SelectionOverlay.tsx b/packages/adapters/react/src/internal/SelectionOverlay.tsx index adaabdb..003ebdf 100644 --- a/packages/adapters/react/src/internal/SelectionOverlay.tsx +++ b/packages/adapters/react/src/internal/SelectionOverlay.tsx @@ -1,5 +1,5 @@ import { memo } from 'react'; -import type { Entity, EntityId } from '@spatialkit/core'; +import type { Entity, EntityId } from '@spatial-kit/core'; import type { SelectionOverlayStyle } from '../types'; interface SelectionOverlayProps { diff --git a/packages/adapters/react/src/internal/attachHandlers.ts b/packages/adapters/react/src/internal/attachHandlers.ts index 8f8a643..03afa9d 100644 --- a/packages/adapters/react/src/internal/attachHandlers.ts +++ b/packages/adapters/react/src/internal/attachHandlers.ts @@ -1,5 +1,5 @@ -import { snapToGrid, hitTestResizeHandles, applyResizeDelta } from '@spatialkit/core'; -import type { SpatialCore, EntityId, Bounds, ResizeDirection } from '@spatialkit/core'; +import { snapToGrid, hitTestResizeHandles, applyResizeDelta } from '@spatial-kit/core'; +import type { SpatialCore, EntityId, Bounds, ResizeDirection } from '@spatial-kit/core'; export type AttachHandlersOptions = { enableWheel: boolean; diff --git a/packages/adapters/react/src/internal/useEntities.ts b/packages/adapters/react/src/internal/useEntities.ts index d8e8e14..73c4070 100644 --- a/packages/adapters/react/src/internal/useEntities.ts +++ b/packages/adapters/react/src/internal/useEntities.ts @@ -1,5 +1,5 @@ import { useCallback, useRef, useSyncExternalStore } from 'react'; -import type { Entity, SpatialCore } from '@spatialkit/core'; +import type { Entity, SpatialCore } from '@spatial-kit/core'; export function useEntities(core: SpatialCore): Entity[] { const snapshotRef = useRef([...core.scene.entities.values()]); diff --git a/packages/adapters/react/src/internal/useViewportTransform.ts b/packages/adapters/react/src/internal/useViewportTransform.ts index c886d71..ea4c317 100644 --- a/packages/adapters/react/src/internal/useViewportTransform.ts +++ b/packages/adapters/react/src/internal/useViewportTransform.ts @@ -1,5 +1,5 @@ import { type RefObject, useEffect } from 'react'; -import type { SpatialCore } from '@spatialkit/core'; +import type { SpatialCore } from '@spatial-kit/core'; export function useViewportTransform( core: SpatialCore, diff --git a/packages/adapters/react/vitest.config.ts b/packages/adapters/react/vitest.config.ts index 6bb8ea9..dbf2e55 100644 --- a/packages/adapters/react/vitest.config.ts +++ b/packages/adapters/react/vitest.config.ts @@ -7,7 +7,7 @@ const __dirname = fileURLToPath(new URL('.', import.meta.url)); export default defineConfig({ resolve: { alias: { - '@spatialkit/core': resolve(__dirname, '../../core/src/index.ts'), + '@spatial-kit/core': resolve(__dirname, '../../core/src/index.ts'), }, }, test: { diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 3248d38..00c2358 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,7 +1,7 @@ -# @spatialkit/core +# @spatial-kit/core ## 0.1.0 ### Minor Changes -- Initial release of @spatialkit/core, @spatialkit/svg, and @spatialkit/react. +- Initial release of @spatial-kit/core, @spatial-kit/svg, and @spatial-kit/react. diff --git a/packages/core/CLAUDE.md b/packages/core/CLAUDE.md index 3aa5e4c..85397a6 100644 --- a/packages/core/CLAUDE.md +++ b/packages/core/CLAUDE.md @@ -1,4 +1,4 @@ -# @spatialkit/core — Claude Code Guide +# @spatial-kit/core — Claude Code Guide Zero-dependency scene engine for 2D interactive editors. Manages entities, viewport transforms, event pub/sub, hit testing, and selection. Framework-agnostic — no DOM, no browser APIs anywhere in this package. @@ -9,7 +9,7 @@ Zero-dependency scene engine for 2D interactive editors. Manages entities, viewp Everything flows through `SpatialCore`, the object returned by `createCore()`. Renderers and adapters receive this object and subscribe to its events. ```ts -import { createCore, createEmptyScene } from '@spatialkit/core'; +import { createCore, createEmptyScene } from '@spatial-kit/core'; const scene = createEmptyScene({ width: 2000, height: 1500 }, ['floor' as LayerId, 'furniture' as LayerId]); const core = createCore({ diff --git a/packages/core/README.md b/packages/core/README.md index b450bbe..ec2d14b 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -1,20 +1,20 @@ -# @spatialkit/core +# @spatial-kit/core Scene engine for interactive 2D editors. Manages entities, viewport transforms, event pub/sub, hit testing, and selection. Framework-agnostic — no DOM, no browser APIs. ## Installation ```bash -npm install @spatialkit/core +npm install @spatial-kit/core # or -pnpm add @spatialkit/core +pnpm add @spatial-kit/core ``` ## Quick start ```ts -import { createCore, createEmptyScene } from '@spatialkit/core'; -import type { EntityId, LayerId } from '@spatialkit/core'; +import { createCore, createEmptyScene } from '@spatial-kit/core'; +import type { EntityId, LayerId } from '@spatial-kit/core'; const scene = createEmptyScene( { width: 2000, height: 1500 }, @@ -291,7 +291,7 @@ import { snapToGrid, hitTestResizeHandles, applyResizeDelta, -} from '@spatialkit/core'; +} from '@spatial-kit/core'; clamp(value, min, max) // numeric clamp containsPointAABB(bounds, point) // true if point is inside bounds (inclusive) @@ -305,7 +305,7 @@ snapToGrid(value, gridSize) // rounds value to the nearest multiple Renderers use these to implement resize handles. They are exported so custom renderers can reuse the same behavior. ```ts -import type { ResizeDirection } from '@spatialkit/core'; +import type { ResizeDirection } from '@spatial-kit/core'; // 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' hitTestResizeHandles(selectedEntities, worldToScreen, screenPoint, handleSizePx = 8) @@ -341,7 +341,7 @@ if (handle) { ### Creating branded ids ```ts -import type { EntityId, LayerId } from '@spatialkit/core'; +import type { EntityId, LayerId } from '@spatial-kit/core'; // Option 1: cast at point of use core.add({ id: 'table-1' as EntityId, layer: 'furniture' as LayerId, ... }); diff --git a/packages/core/package.json b/packages/core/package.json index dfbfe4d..9b07805 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,5 +1,5 @@ { - "name": "@spatialkit/core", + "name": "@spatial-kit/core", "version": "0.1.0", "description": "Framework-agnostic scene engine for interactive 2D editors: entities, viewport, events, hit testing and selection.", "keywords": [ diff --git a/packages/examples/js-vanilla/CHANGELOG.md b/packages/examples/js-vanilla/CHANGELOG.md index 3827f69..725c951 100644 --- a/packages/examples/js-vanilla/CHANGELOG.md +++ b/packages/examples/js-vanilla/CHANGELOG.md @@ -1,9 +1,9 @@ -# @spatialkit/example-js-vanilla +# @spatial-kit/example-js-vanilla ## 0.0.1 ### Patch Changes - Updated dependencies - - @spatialkit/core@0.1.0 - - @spatialkit/svg@1.0.0 + - @spatial-kit/core@0.1.0 + - @spatial-kit/svg@1.0.0 diff --git a/packages/examples/js-vanilla/package.json b/packages/examples/js-vanilla/package.json index 59cc031..8f1ee28 100644 --- a/packages/examples/js-vanilla/package.json +++ b/packages/examples/js-vanilla/package.json @@ -1,5 +1,5 @@ { - "name": "@spatialkit/example-js-vanilla", + "name": "@spatial-kit/example-js-vanilla", "version": "0.0.1", "private": true, "scripts": { @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@spatialkit/core": "workspace:*", - "@spatialkit/svg": "workspace:*" + "@spatial-kit/core": "workspace:*", + "@spatial-kit/svg": "workspace:*" }, "devDependencies": { "vite": "^8.3.1" diff --git a/packages/examples/js-vanilla/src/main.ts b/packages/examples/js-vanilla/src/main.ts index 9f12b0f..965e001 100644 --- a/packages/examples/js-vanilla/src/main.ts +++ b/packages/examples/js-vanilla/src/main.ts @@ -1,9 +1,9 @@ -import { createCore, createEmptyScene, hitTestResizeHandles } from '@spatialkit/core'; +import { createCore, createEmptyScene, hitTestResizeHandles } from '@spatial-kit/core'; document.addEventListener('gesturestart', (e) => e.preventDefault(), { passive: false }); document.addEventListener('gesturechange', (e) => e.preventDefault(), { passive: false }); -import { mountSvgRenderer } from '@spatialkit/svg'; -import type { EntityId, LayerId } from '@spatialkit/core'; +import { mountSvgRenderer } from '@spatial-kit/svg'; +import type { EntityId, LayerId } from '@spatial-kit/core'; // ── Types ───────────────────────────────────────────────────────────────────── @@ -79,7 +79,7 @@ for (let row = 0; row < DESK_GRID.rows; row++) { const NS = 'http://www.w3.org/2000/svg'; -import type { Entity } from '@spatialkit/core'; +import type { Entity } from '@spatial-kit/core'; function drawEntity(entity: Entity, { g, selected }: { g: SVGGElement; selected: boolean }) { const data = entity.data as EntityData; diff --git a/packages/examples/js-vanilla/vite.config.ts b/packages/examples/js-vanilla/vite.config.ts index 2885f4b..1de8182 100644 --- a/packages/examples/js-vanilla/vite.config.ts +++ b/packages/examples/js-vanilla/vite.config.ts @@ -8,8 +8,8 @@ export default defineConfig(({ command }) => ({ base: command === 'build' ? '/vanilla/' : '/', resolve: { alias: { - '@spatialkit/core': resolve(__dirname, '../../core/src/index.ts'), - '@spatialkit/svg': resolve(__dirname, '../../svg/src/index.ts'), + '@spatial-kit/core': resolve(__dirname, '../../core/src/index.ts'), + '@spatial-kit/svg': resolve(__dirname, '../../svg/src/index.ts'), }, }, })); diff --git a/packages/examples/react/CHANGELOG.md b/packages/examples/react/CHANGELOG.md index 6a922bd..175d927 100644 --- a/packages/examples/react/CHANGELOG.md +++ b/packages/examples/react/CHANGELOG.md @@ -1,9 +1,9 @@ -# @spatialkit/example-react +# @spatial-kit/example-react ## 0.0.1 ### Patch Changes - Updated dependencies - - @spatialkit/core@0.1.0 - - @spatialkit/react@1.0.0 + - @spatial-kit/core@0.1.0 + - @spatial-kit/react@1.0.0 diff --git a/packages/examples/react/package.json b/packages/examples/react/package.json index fbb0f97..af65f20 100644 --- a/packages/examples/react/package.json +++ b/packages/examples/react/package.json @@ -1,5 +1,5 @@ { - "name": "@spatialkit/example-react", + "name": "@spatial-kit/example-react", "version": "0.0.1", "private": true, "scripts": { @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@spatialkit/core": "workspace:*", - "@spatialkit/react": "workspace:*", + "@spatial-kit/core": "workspace:*", + "@spatial-kit/react": "workspace:*", "react": "^19.3.0", "react-dom": "^19.3.0" }, diff --git a/packages/examples/react/src/App.tsx b/packages/examples/react/src/App.tsx index e7b2196..bd9bef0 100644 --- a/packages/examples/react/src/App.tsx +++ b/packages/examples/react/src/App.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'; -import { SpatialCanvas, useSpatialCore, useSelection, useViewport } from '@spatialkit/react'; -import { addEntity, createEmptyScene, hitTestResizeHandles } from '@spatialkit/core'; -import type { Entity, EntityId, LayerId } from '@spatialkit/core'; +import { SpatialCanvas, useSpatialCore, useSelection, useViewport } from '@spatial-kit/react'; +import { addEntity, createEmptyScene, hitTestResizeHandles } from '@spatial-kit/core'; +import type { Entity, EntityId, LayerId } from '@spatial-kit/core'; // ── Types ────────────────────────────────────────────────────────────────────── diff --git a/packages/examples/react/vite.config.ts b/packages/examples/react/vite.config.ts index 5b8186f..1342436 100644 --- a/packages/examples/react/vite.config.ts +++ b/packages/examples/react/vite.config.ts @@ -10,8 +10,8 @@ export default defineConfig(({ command }) => ({ base: command === 'build' ? '/react/' : '/', resolve: { alias: { - '@spatialkit/core': resolve(__dirname, '../../core/src/index.ts'), - '@spatialkit/react': resolve(__dirname, '../../adapters/react/src/index.ts'), + '@spatial-kit/core': resolve(__dirname, '../../core/src/index.ts'), + '@spatial-kit/react': resolve(__dirname, '../../adapters/react/src/index.ts'), }, }, })); diff --git a/packages/svg/CHANGELOG.md b/packages/svg/CHANGELOG.md index b0c30bb..6a5f507 100644 --- a/packages/svg/CHANGELOG.md +++ b/packages/svg/CHANGELOG.md @@ -1,12 +1,12 @@ -# @spatialkit/svg +# @spatial-kit/svg ## 0.1.0 ### Minor Changes -- Initial release of @spatialkit/core, @spatialkit/svg, and @spatialkit/react. +- Initial release of @spatial-kit/core, @spatial-kit/svg, and @spatial-kit/react. ### Patch Changes - Updated dependencies - - @spatialkit/core@0.1.0 + - @spatial-kit/core@0.1.0 diff --git a/packages/svg/CLAUDE.md b/packages/svg/CLAUDE.md index 73deb29..ceefaa6 100644 --- a/packages/svg/CLAUDE.md +++ b/packages/svg/CLAUDE.md @@ -1,13 +1,13 @@ -# @spatialkit/svg — Claude Code Guide +# @spatial-kit/svg — Claude Code Guide -SVG renderer and DOM event handlers for `@spatialkit/core`. Subscribes to core events and paints the scene into an `` element. No production dependencies. +SVG renderer and DOM event handlers for `@spatial-kit/core`. Subscribes to core events and paints the scene into an `` element. No production dependencies. --- ## Entry point ```ts -import { mountSvgRenderer } from '@spatialkit/svg'; +import { mountSvgRenderer } from '@spatial-kit/svg'; const renderer = mountSvgRenderer(core, { mount: svgElement, @@ -190,7 +190,7 @@ All SVG tests require jsdom. Use the `// @vitest-environment jsdom` pragma at th // @vitest-environment jsdom import { describe, it, expect, vi, beforeEach } from 'vitest'; import { mountSvgRenderer } from '../renderer'; -import { createCore } from '@spatialkit/core'; +import { createCore } from '@spatial-kit/core'; ``` **Required stubs** (jsdom doesn't implement these): diff --git a/packages/svg/README.md b/packages/svg/README.md index 6b99118..b87e6d6 100644 --- a/packages/svg/README.md +++ b/packages/svg/README.md @@ -1,21 +1,21 @@ -# @spatialkit/svg +# @spatial-kit/svg -SVG renderer and DOM event handlers for [`@spatialkit/core`](https://github.com/spatialkit/spatial/tree/main/packages/core). Mounts into any `` element, subscribes to core events, and paints the scene automatically. Includes wheel zoom, drag-to-pan, pinch-to-zoom, click-to-select, a background grid, a selection highlight overlay, drag-to-move, resize handles, and optional snap-to-grid. +SVG renderer and DOM event handlers for [`@spatial-kit/core`](https://github.com/spatialkit/spatial/tree/main/packages/core). Mounts into any `` element, subscribes to core events, and paints the scene automatically. Includes wheel zoom, drag-to-pan, pinch-to-zoom, click-to-select, a background grid, a selection highlight overlay, drag-to-move, resize handles, and optional snap-to-grid. ## Installation ```bash -npm install @spatialkit/core @spatialkit/svg +npm install @spatial-kit/core @spatial-kit/svg # or -pnpm add @spatialkit/core @spatialkit/svg +pnpm add @spatial-kit/core @spatial-kit/svg ``` ## Quick start ```ts -import { createCore, createEmptyScene } from '@spatialkit/core'; -import { mountSvgRenderer } from '@spatialkit/svg'; -import type { EntityId, LayerId } from '@spatialkit/core'; +import { createCore, createEmptyScene } from '@spatial-kit/core'; +import { mountSvgRenderer } from '@spatial-kit/svg'; +import type { EntityId, LayerId } from '@spatial-kit/core'; const core = createCore({ scene: createEmptyScene({ width: 2000, height: 1500 }, ['layer' as LayerId]), @@ -100,8 +100,8 @@ Resize handles are always drawn in the `overlays` group around each selected ent To draw handles yourself, for example in a custom renderer, use `paintResizeHandles`: ```ts -import { paintResizeHandles } from '@spatialkit/svg'; -import type { ResizeHandleStyle } from '@spatialkit/svg'; +import { paintResizeHandles } from '@spatial-kit/svg'; +import type { ResizeHandleStyle } from '@spatial-kit/svg'; const style: ResizeHandleStyle = { size: 8, fill: '#fff', stroke: '#2563eb', strokeWidth: 1.5 }; paintResizeHandles(core, overlaysGroup, style); // values shown are the defaults diff --git a/packages/svg/package.json b/packages/svg/package.json index bf709e4..5c24502 100644 --- a/packages/svg/package.json +++ b/packages/svg/package.json @@ -1,7 +1,7 @@ { - "name": "@spatialkit/svg", + "name": "@spatial-kit/svg", "version": "0.1.0", - "description": "SVG renderer and pointer handlers for @spatialkit/core: pan, zoom, pinch, selection, drag, resize and grid.", + "description": "SVG renderer and pointer handlers for @spatial-kit/core: pan, zoom, pinch, selection, drag, resize and grid.", "keywords": [ "2d", "editor", @@ -49,12 +49,12 @@ "test:watch": "vitest" }, "devDependencies": { - "@spatialkit/core": "workspace:*", + "@spatial-kit/core": "workspace:*", "jsdom": "^30.1.1", "vitest": "^5.0.3" }, "peerDependencies": { - "@spatialkit/core": "0.x" + "@spatial-kit/core": "0.x" }, "publishConfig": { "access": "public" diff --git a/packages/svg/src/__tests__/destroy.test.ts b/packages/svg/src/__tests__/destroy.test.ts index af1d116..b4619a8 100644 --- a/packages/svg/src/__tests__/destroy.test.ts +++ b/packages/svg/src/__tests__/destroy.test.ts @@ -1,7 +1,7 @@ // @vitest-environment jsdom import { describe, it, expect, beforeEach } from 'vitest'; import { mountSvgRenderer } from '../renderer'; -import { createCore } from '@spatialkit/core'; +import { createCore } from '@spatial-kit/core'; function makeSetup() { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as SVGSVGElement; diff --git a/packages/svg/src/__tests__/grid.test.ts b/packages/svg/src/__tests__/grid.test.ts index c40947b..ab87d38 100644 --- a/packages/svg/src/__tests__/grid.test.ts +++ b/packages/svg/src/__tests__/grid.test.ts @@ -1,7 +1,7 @@ // @vitest-environment jsdom import { describe, it, expect, beforeEach } from 'vitest'; import { mountSvgRenderer } from '../renderer'; -import { createCore } from '@spatialkit/core'; +import { createCore } from '@spatial-kit/core'; function makeSetup() { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as SVGSVGElement; diff --git a/packages/svg/src/__tests__/handlers.test.ts b/packages/svg/src/__tests__/handlers.test.ts index 6366829..0b32eea 100644 --- a/packages/svg/src/__tests__/handlers.test.ts +++ b/packages/svg/src/__tests__/handlers.test.ts @@ -1,7 +1,7 @@ // @vitest-environment jsdom import { describe, it, expect, beforeEach } from 'vitest'; import { mountSvgRenderer } from '../renderer'; -import { createCore } from '@spatialkit/core'; +import { createCore } from '@spatial-kit/core'; function makesvg() { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as SVGSVGElement; diff --git a/packages/svg/src/__tests__/pinch.test.ts b/packages/svg/src/__tests__/pinch.test.ts index 24ac316..c75dd03 100644 --- a/packages/svg/src/__tests__/pinch.test.ts +++ b/packages/svg/src/__tests__/pinch.test.ts @@ -1,7 +1,7 @@ // @vitest-environment jsdom import { describe, it, expect, beforeEach } from 'vitest'; import { mountSvgRenderer } from '../renderer'; -import { createCore } from '@spatialkit/core'; +import { createCore } from '@spatial-kit/core'; function makeSetup() { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as SVGSVGElement; diff --git a/packages/svg/src/__tests__/renderer.test.ts b/packages/svg/src/__tests__/renderer.test.ts index 009e01f..03a718e 100644 --- a/packages/svg/src/__tests__/renderer.test.ts +++ b/packages/svg/src/__tests__/renderer.test.ts @@ -1,7 +1,7 @@ // @vitest-environment jsdom import { describe, it, expect, vi, beforeEach } from 'vitest'; import { mountSvgRenderer } from '../renderer'; -import { createCore } from '@spatialkit/core'; +import { createCore } from '@spatial-kit/core'; function stubRect(svg: SVGSVGElement) { (svg as any).getBoundingClientRect = () => ({ diff --git a/packages/svg/src/__tests__/resize-handles.test.ts b/packages/svg/src/__tests__/resize-handles.test.ts index 3d311c1..e086423 100644 --- a/packages/svg/src/__tests__/resize-handles.test.ts +++ b/packages/svg/src/__tests__/resize-handles.test.ts @@ -1,7 +1,7 @@ // @vitest-environment jsdom import { describe, it, expect, beforeEach } from 'vitest'; import { mountSvgRenderer } from '../renderer'; -import { createCore } from '@spatialkit/core'; +import { createCore } from '@spatial-kit/core'; function makeSetup() { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as SVGSVGElement; diff --git a/packages/svg/src/__tests__/selection-overlay.test.ts b/packages/svg/src/__tests__/selection-overlay.test.ts index c55e468..5f67e9c 100644 --- a/packages/svg/src/__tests__/selection-overlay.test.ts +++ b/packages/svg/src/__tests__/selection-overlay.test.ts @@ -1,7 +1,7 @@ // @vitest-environment jsdom import { describe, it, expect, beforeEach } from 'vitest'; import { mountSvgRenderer } from '../renderer'; -import { createCore } from '@spatialkit/core'; +import { createCore } from '@spatial-kit/core'; function makeSetup() { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as SVGSVGElement; diff --git a/packages/svg/src/__tests__/wheel.test.ts b/packages/svg/src/__tests__/wheel.test.ts index 84134b0..b8e8049 100644 --- a/packages/svg/src/__tests__/wheel.test.ts +++ b/packages/svg/src/__tests__/wheel.test.ts @@ -1,7 +1,7 @@ // @vitest-environment jsdom import { describe, it, expect, beforeEach } from 'vitest'; import { mountSvgRenderer } from '../renderer'; -import { createCore } from '@spatialkit/core'; +import { createCore } from '@spatial-kit/core'; function stubRect(svg: SVGSVGElement) { (svg as any).getBoundingClientRect = () => ({ diff --git a/packages/svg/src/grid.ts b/packages/svg/src/grid.ts index ef21a33..4442bab 100644 --- a/packages/svg/src/grid.ts +++ b/packages/svg/src/grid.ts @@ -1,4 +1,4 @@ -import type { SpatialCore } from '@spatialkit/core'; +import type { SpatialCore } from '@spatial-kit/core'; import { clearChildren } from './dom'; export type GridOptions = { diff --git a/packages/svg/src/handlers.ts b/packages/svg/src/handlers.ts index 240b9f6..d790100 100644 --- a/packages/svg/src/handlers.ts +++ b/packages/svg/src/handlers.ts @@ -1,5 +1,5 @@ -import { SpatialCore, EntityId, snapToGrid, hitTestResizeHandles, applyResizeDelta } from '@spatialkit/core'; -import type { Bounds, ResizeDirection } from '@spatialkit/core'; +import { SpatialCore, EntityId, snapToGrid, hitTestResizeHandles, applyResizeDelta } from '@spatial-kit/core'; +import type { Bounds, ResizeDirection } from '@spatial-kit/core'; type AttachHandlersOptions = { enableWheel: boolean; diff --git a/packages/svg/src/index.ts b/packages/svg/src/index.ts index 1d318c2..345451b 100644 --- a/packages/svg/src/index.ts +++ b/packages/svg/src/index.ts @@ -1,4 +1,4 @@ -import type { Entity, EntityId } from '@spatialkit/core'; +import type { Entity, EntityId } from '@spatial-kit/core'; import type { SelectionOverlayStyle } from './selection-overlay'; import type { GridOptions } from './grid'; diff --git a/packages/svg/src/renderer.ts b/packages/svg/src/renderer.ts index 3bc50dd..6a9a057 100644 --- a/packages/svg/src/renderer.ts +++ b/packages/svg/src/renderer.ts @@ -1,4 +1,4 @@ -import type { SpatialCore, Entity, LayerId } from '@spatialkit/core'; +import type { SpatialCore, Entity, LayerId } from '@spatial-kit/core'; import type { SvgRenderer, SvgRendererOptions } from './index'; import { setupSvgRoot, getGroups, clearChildren } from './dom'; import { attachHandlers } from './handlers'; diff --git a/packages/svg/src/resize-handles.ts b/packages/svg/src/resize-handles.ts index 096447c..78fef7b 100644 --- a/packages/svg/src/resize-handles.ts +++ b/packages/svg/src/resize-handles.ts @@ -1,4 +1,4 @@ -import type { SpatialCore } from '@spatialkit/core'; +import type { SpatialCore } from '@spatial-kit/core'; import { clearChildren } from './dom'; export type ResizeHandleStyle = { diff --git a/packages/svg/src/selection-overlay.ts b/packages/svg/src/selection-overlay.ts index 62a0cc4..e86d752 100644 --- a/packages/svg/src/selection-overlay.ts +++ b/packages/svg/src/selection-overlay.ts @@ -1,4 +1,4 @@ -import type { SpatialCore } from '@spatialkit/core'; +import type { SpatialCore } from '@spatial-kit/core'; import { clearChildren } from './dom'; export type SelectionOverlayStyle = { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c0b9119..e9b65fa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,7 +44,7 @@ importers: packages/adapters/react: devDependencies: - '@spatialkit/core': + '@spatial-kit/core': specifier: workspace:* version: link:../../core '@testing-library/react': @@ -77,10 +77,10 @@ importers: packages/examples/js-vanilla: dependencies: - '@spatialkit/core': + '@spatial-kit/core': specifier: workspace:* version: link:../../core - '@spatialkit/svg': + '@spatial-kit/svg': specifier: workspace:* version: link:../../svg devDependencies: @@ -90,10 +90,10 @@ importers: packages/examples/react: dependencies: - '@spatialkit/core': + '@spatial-kit/core': specifier: workspace:* version: link:../../core - '@spatialkit/react': + '@spatial-kit/react': specifier: workspace:* version: link:../../adapters/react react: @@ -118,7 +118,7 @@ importers: packages/svg: devDependencies: - '@spatialkit/core': + '@spatial-kit/core': specifier: workspace:* version: link:../core jsdom: diff --git a/tsconfig.json b/tsconfig.json index 00ca57a..31293d7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,9 +5,9 @@ "jsx": "react-jsx", "lib": ["ES2020", "DOM", "DOM.Iterable"], "paths": { - "@spatialkit/core": ["./packages/core/src/index.ts"], - "@spatialkit/svg": ["./packages/svg/src/index.ts"], - "@spatialkit/react": ["./packages/adapters/react/src/index.ts"] + "@spatial-kit/core": ["./packages/core/src/index.ts"], + "@spatial-kit/svg": ["./packages/svg/src/index.ts"], + "@spatial-kit/react": ["./packages/adapters/react/src/index.ts"] } }, "include": [ diff --git a/vitest.config.ts b/vitest.config.ts index b61cefb..2e039b2 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -7,9 +7,9 @@ const __dirname = fileURLToPath(new URL('.', import.meta.url)); export default defineConfig({ resolve: { alias: { - '@spatialkit/core': resolve(__dirname, 'packages/core/src/index.ts'), - '@spatialkit/svg': resolve(__dirname, 'packages/svg/src/index.ts'), - '@spatialkit/react': resolve(__dirname, 'packages/adapters/react/src/index.ts'), + '@spatial-kit/core': resolve(__dirname, 'packages/core/src/index.ts'), + '@spatial-kit/svg': resolve(__dirname, 'packages/svg/src/index.ts'), + '@spatial-kit/react': resolve(__dirname, 'packages/adapters/react/src/index.ts'), }, }, test: {