telva 1.1.1 → 1.1.2

package/README.md

@@ -1,86 +1,24 @@
-<div align="center">
+# telva
 
-# Telva
+Embeddable React drawing editor package.
 
-### The open-source design tool built for developers.
+## Install
 
-**A full-featured, multiplayer-ready design canvas you can embed in any React application.**  
-Free forever. No license fees. No per-seat pricing. Just open source.
-
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE.md)
-[![npm @telva/telva](https://img.shields.io/npm/v/@telva/telva?label=%40telva%2Ftelva&color=blue)](https://www.npmjs.com/package/@telva/telva)
-[![npm @telva/core](https://img.shields.io/npm/v/@telva/core?label=%40telva%2Fcore&color=blue)](https://www.npmjs.com/package/@telva/core)
-
-</div>
-
----
-
-## Why Telva?
-
-Design tooling has been locked behind proprietary walls for too long. Figma is great — but it charges per seat, owns your data, and cannot be self-hosted or extended at a deep level. **Telva changes that.**
-
-Telva is a **production-grade, open-source vector design canvas** that runs entirely in the browser as a React component. Drop it into your product, your internal tool, or your SaaS. Customize every shape, behavior, panel, and shortcut. Ship it as your own.
-
-> Built and maintained by **[vmaspad](https://github.com/vmaspad)**.
-
----
-
-## What makes Telva different
-
-| Feature                       | Telva               | Figma                  |
-| ----------------------------- | ------------------- | ---------------------- |
-| Open source                   | ✅ MIT license      | ❌ Proprietary         |
-| Self-hostable                 | ✅                  | ❌                     |
-| Embeddable in React           | ✅ Single component | ❌                     |
-| Custom React shapes on canvas | ✅ Native support   | ❌                     |
-| Real-time multiplayer         | ✅ Built-in         | ✅                     |
-| Offline-first                 | ✅                  | ❌                     |
-| Per-seat pricing              | ✅ Free forever     | ❌ $12–45/seat         |
-| Extend with code              | ✅ Full API         | ❌ Plugin sandbox only |
-
----
-
-## The killer feature: React Components as Canvas Shapes
-
-Telva is the only open-source design tool that lets you place **live, interactive React components** directly onto the canvas as first-class shapes.
-
-```tsx
-import { Telva } from '@telva/telva'
-import { MyChart, MyDataTable, MyForm } from './components'
-
-// Register your React components as canvas shapes
-const registry = {
-  chart: MyChart,
-  table: MyDataTable,
-  form: MyForm,
-}
-
-export default function App() {
-  return (
-    <div style={{ width: '100vw', height: '100vh' }}>
-      <Telva reactComponents={registry} />
-    </div>
-  )
-}
+```bash
+npm i telva
 ```
 
-Your components render live inside the canvas. They respond to user input, fetch data, animate — and can be moved, resized, grouped, and exported just like any other shape. **This is not an iframe. It's your actual component tree, rendered on an infinite canvas.**
-
----
+## Peer dependencies
 
-## Get started in 60 seconds
+- `react >= 16.8`
+- `react-dom >= 16.8`
 
-```bash
-npm install @telva/telva
-# or
-yarn add @telva/telva
-```
+## Basic usage
 
 ```tsx
-import { Telva } from '@telva/telva'
-import '@telva/telva/telva.css'
+import { Telva } from 'telva'
 
-export default function App() {
+export function App() {
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
       <Telva />
@@ -89,210 +27,27 @@ export default function App() {
 }
 ```
 
-That's it. A fully functional design canvas, in your app, in under a minute.
-
----
-
-## Full Feature Set
-
-### Drawing & Shapes
-
-Telva ships with a complete set of professional vector shapes out of the box:
-
-- **Rectangle** — with fill, stroke, dash styles, border radius, and opacity
-- **Ellipse** — perfect circles and ovals with the same full style set
-- **Triangle** — directional shapes for diagrams and flows
-- **Arrow** — straight and curved arrows with decorations (heads, dots, bars) on either end; snap-to-shape binding
-- **Draw** — freehand pencil tool with perfect-freehand smoothing
-- **Text** — rich inline text with font family, size, weight, and alignment options
-- **Sticky Note** — color-coded sticky notes with full text editing
-- **Image** — drag-and-drop image placement and resizing
-- **Video** — embedded video playback as a canvas shape
-- **Group** — group any combination of shapes and operate on them as one
-- **React Component** — any React component rendered live as a resizable canvas shape
-
-### Editing & Interaction
-
-- Infinite canvas with smooth pan and zoom
-- Select tool with click, drag-box, and deep-click-into-group
-- Multi-select, group select, select all
-- Move, rotate, resize, flip, align, distribute, stretch
-- Snap-to-grid and snap-to-shape guidelines
-- Erase tool
-- Undo / redo with full command history
-- Copy, paste, duplicate
-- Lock shapes to prevent accidental edits
-- Keyboard shortcuts for every action
-
-### Styles & Theming
-
-- Per-shape styles: color, fill, stroke, dash, opacity, font, size, alignment
-- Dark mode and light mode with a single prop
-- Fully themeable UI via CSS custom properties and Stitches
-- Custom color palettes per project
-
-### Layers & Organization
-
-- Layers panel with full reordering, visibility toggle, and lock
-- Page management — create, rename, duplicate, and reorder pages in a document
-- Focus mode to minimize the UI while working
-
-### Export
-
-- Export to PNG with configurable DPI
-- Export to SVG (vector-perfect)
-- Export any selection, current page, or entire document
-- Transparent or white background
-- Programmatic export via API
-
-### Real-time Collaboration
-
-Built-in multiplayer support with live presence:
+## Next.js client-only usage
 
 ```tsx
-import { MultiplayerEditor } from './components/MultiplayerEditor' // Drop-in multiplayer via Liveblocks — or bring your own backend
+import dynamic from 'next/dynamic'
 
-;<Telva roomId="my-design-room" onMount={(app) => connectToRoom(app)} />
-```
+;('use client')
 
-- Live cursor presence for all connected users
-- Real-time shape sync
-- User color coding
-- Read-only viewer mode for stakeholders
-- Compatible with Liveblocks, Yjs, or any CRDT backend
+const Telva = dynamic(() => import('telva').then((m) => m.Telva), {
+  ssr: false,
+})
 
-### Persistence & File System
-
-- Auto-save to `localStorage` with a single `id` prop
-- Load and save `.tlvr` files to disk
-- Full document JSON API for custom storage (database, S3, anywhere)
-- Load documents programmatically at runtime
-
-### Programmatic API
-
-The `TelvaApp` gives you full imperative control over the canvas at runtime:
-
-```tsx
-const app = useTelvaApp()
-
-// Create shapes
-app.createShapes([{ type: 'rectangle', ... }])
-
-// Select shapes
-app.select('shape-id-1', 'shape-id-2')
-
-// Move the camera
-app.zoomToFit()
-app.zoomTo(1.5)
-
-// Export
-const svg = await app.getSvg(['shape-id-1'])
-const png = await app.exportImage(...)
-
-// Undo/redo
-app.undo()
-app.redo()
-
-// React to everything
-app.on('change', (state) => syncToServer(state))
-```
-
-### Embedding Modes
-
-Telva is designed for embedding. Every aspect of the UI is optional:
-
-```tsx
-<Telva
-  id="my-editor" // persist state under this key
-  darkMode={true} // dark or light theme
-  showMenu={false} // hide the file menu
-  showPages={false} // single-page mode
-  showTools={false} // hide the toolbar
-  showUI={false} // canvas-only, no UI at all
-  readOnly={true} // viewer mode
-  autofocus={true} // grab focus on mount
-  document={myDocument} // controlled document prop
-  onMount={(app) => {}} // access the app instance
-  onChange={(state, reason) => {}} // listen to every change
-/>
-```
-
----
-
-## Packages
-
-This is a Yarn/Turborepo monorepo containing:
-
-| Package                                  | Description                                        |
-| ---------------------------------------- | -------------------------------------------------- |
-| [`@telva/telva`](packages/telva)         | The full editor — a turnkey React component        |
-| [`@telva/core`](packages/core)           | The canvas renderer — build your own editor on top |
-| [`@telva/vec`](packages/vec)             | 2D vector math utilities                           |
-| [`@telva/intersect`](packages/intersect) | Geometry intersection utilities                    |
-| [`@telva/curve`](packages/curve)         | Bezier curve utilities                             |
-
-### Build your own editor with `@telva/core`
-
-`@telva/core` is the low-level canvas renderer that powers `@telva/telva`. Use it to build a completely custom canvas-based experience — flowcharts, whiteboards, diagram editors, design systems, game maps — with your own shapes, tools, and UI.
-
-```tsx
-import { Renderer } from '@telva/core'
-
-;<Renderer
-  page={page}
-  pageState={pageState}
-  shapeUtils={myCustomShapeUtils}
-  onPointShape={handlePointShape}
-  onDragShape={handleDragShape}
-  // ... full event API
-/>
+export default function Page() {
+  return <Telva />
+}
 ```
 
----
-
-## Examples
-
-| Example                                                            | Description                              |
-| ------------------------------------------------------------------ | ---------------------------------------- |
-| [`examples/telva-example`](examples/telva-example)                 | Full editor with all features enabled    |
-| [`examples/core-example`](examples/core-example)                   | Minimal custom canvas with `@telva/core` |
-| [`examples/core-example-advanced`](examples/core-example-advanced) | Advanced custom shapes and interactions  |
-
-Run any example locally:
+## Workspace scripts
 
 ```bash
-git clone https://github.com/vmaspad/telva-v1.git
-cd telva-v1
-yarn install
-yarn start
-# → http://localhost:5420
+yarn dev
+yarn build
+yarn test
+yarn lint
 ```
-
----
-
-## Roadmap highlights
-
-- [ ] Vector pen tool
-- [ ] Component variants and slots
-- [ ] Plugin system
-- [ ] AI-assisted layout
-- [ ] Export to Tailwind / CSS
-- [ ] Design tokens integration
-
----
-
-## Contributing
-
-Contributions are welcome and encouraged. See the [contributing guide](CONTRIBUTING.md) for how to get started — whether that's fixing bugs, adding shapes, improving docs, or translating the UI.
-
-## Support
-
-Found a bug or need help? [Open an issue](https://github.com/vmaspad/telva-v1/issues/new).
-
-## License
-
-MIT — free to use, modify, and distribute, including in commercial products.
-
-## Author & Maintainer
-
-**vmaspad** — [github.com/vmaspad](https://github.com/vmaspad)

package/dist/Telva.d.ts

@@ -5,9 +5,9 @@ import '@fontsource/recursive';
 import '@fontsource/source-code-pro';
 import '@fontsource/source-sans-pro';
 import { CursorComponent } from 'telva-core';
-import { TVCallbacks } from './state';
-import { ReactComponentEntry } from './state/reactRegistry';
-import { TVDocument } from './types';
+import { TVCallbacks } from '~state';
+import { ReactComponentEntry } from '~state/reactRegistry';
+import { TVDocument } from '~types';
 export interface TelvaProps extends TVCallbacks {
     /**
      * (optional) If provided, the component will load / persist state under this key.

package/dist/components/CenterToolbar/CenterToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CenterToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/CenterToolbar/CenterToolbar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,eAAO,MAAM,aAAa,oCAkIxB,CAAA"}
+{"version":3,"file":"CenterToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/CenterToolbar/CenterToolbar.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,eAAO,MAAM,aAAa,oCAsIxB,CAAA"}

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RowButtonProps } from '../Primitives/RowButton';
+import { RowButtonProps } from '~components/Primitives/RowButton';
 interface ContextMenuProps {
     onBlur?: React.FocusEventHandler;
     children: React.ReactNode;

package/dist/components/Primitives/DropdownMenu/DMCheckboxItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RowButtonProps } from '../RowButton';
+import { RowButtonProps } from '~components/Primitives/RowButton';
 interface DMCheckboxItemProps {
     checked: boolean;
     disabled?: boolean;

package/dist/components/Primitives/DropdownMenu/DMItem.d.ts

@@ -1,4 +1,4 @@
-import { RowButtonProps } from '../RowButton';
+import { RowButtonProps } from '~components/Primitives/RowButton';
 export declare function DMItem({ onSelect, id, ...rest }: RowButtonProps & {
     onSelect?: (event: Event) => void;
     id?: string;

package/dist/components/Primitives/DropdownMenu/DMRadioItem.d.ts

@@ -1,5 +1,5 @@
 export declare const DMRadioItem: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>, {
-    isActive?: boolean | "false" | "true" | undefined;
+    isActive?: boolean | "true" | "false" | undefined;
     bp?: "small" | "mobile" | undefined;
 }, {
     micro: "(max-width: 370px)";

package/dist/components/Primitives/DropdownMenu/DMTriggerIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ToolButtonProps } from '../ToolButton';
+import { ToolButtonProps } from '~components/Primitives/ToolButton';
 interface DMTriggerIconProps extends ToolButtonProps {
     children: React.ReactNode;
     id?: string;

package/dist/components/Primitives/Panel/Panel.d.ts

@@ -1,5 +1,5 @@
 export declare const Panel: import("@stitches/react/types/styled-component").StyledComponent<"div", {
-    side?: "center" | "left" | "right" | undefined;
+    side?: "left" | "right" | "center" | undefined;
 }, {
     micro: "(max-width: 370px)";
     sm: "(min-width: 640px)";

package/dist/components/Primitives/RowButton/RowButton.d.ts

@@ -17,7 +17,7 @@ export declare const StyledRowButton: import("@stitches/react/types/styled-compo
     variant?: "wide" | "styleMenu" | undefined;
     size?: "icon" | undefined;
     isWarning?: boolean | "true" | undefined;
-    isActive?: boolean | "false" | "true" | undefined;
+    isActive?: boolean | "true" | "false" | undefined;
 }, {
     micro: "(max-width: 370px)";
     sm: "(min-width: 640px)";

package/dist/components/Primitives/TextField/TextField.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 export interface TextFieldProps extends React.HTMLProps<HTMLInputElement> {
     icon?: React.ReactElement;
 }
-export declare const TextField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "size" | "start" | "hidden" | "content" | "default" | "wrap" | "open" | "icon" | "multiple" | "disabled" | "list" | "selected" | "translate" | "sizes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "step" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "useMap" | "autoComplete" | "cols" | "maxLength" | "minLength" | "readOnly" | "required" | "rows" | "shape" | "classID" | "src" | "scrolling" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "download" | "encType" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "mediaGroup" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "rel" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "seamless" | "srcDoc" | "srcLang" | "srcSet" | "wmode"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TextField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "open" | "label" | "start" | "type" | "size" | "style" | "id" | "name" | "children" | "width" | "height" | "cite" | "data" | "dir" | "form" | "slot" | "span" | "summary" | "title" | "pattern" | "color" | "value" | "target" | "selected" | "key" | "content" | "translate" | "hidden" | "default" | "wrap" | "icon" | "sizes" | "onBlur" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "as" | "step" | "autoComplete" | "autoFocus" | "cols" | "disabled" | "maxLength" | "minLength" | "readOnly" | "required" | "rows" | "shape" | "crossOrigin" | "href" | "max" | "media" | "method" | "min" | "src" | "multiple" | "capture" | "kind" | "scrolling" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoPlay" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "mediaGroup" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "rel" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "seamless" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode"> & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/components/Primitives/ToolButton/ToolButton.d.ts

@@ -236,8 +236,8 @@ export declare const StyledToolButtonInner: import("@stitches/react/types/styled
     };
 }>>;
 export declare const StyledToolButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
-    variant?: "circle" | "text" | "icon" | "primary" | undefined;
-    isActive?: boolean | "false" | "true" | undefined;
+    variant?: "text" | "circle" | "icon" | "primary" | undefined;
+    isActive?: boolean | "true" | "false" | undefined;
     bp?: "small" | "mobile" | undefined;
 }, {
     micro: "(max-width: 370px)";

package/dist/components/RightPanel/PropertiesPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PropertiesPanel.d.ts","sourceRoot":"","sources":["../../../src/components/RightPanel/PropertiesPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsD9B,eAAO,MAAM,eAAe,oCAyG1B,CAAA"}
+{"version":3,"file":"PropertiesPanel.d.ts","sourceRoot":"","sources":["../../../src/components/RightPanel/PropertiesPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsD9B,eAAO,MAAM,eAAe,oCAoG1B,CAAA"}

package/dist/components/ToolsPanel/PrimaryTools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryTools.d.ts","sourceRoot":"","sources":["../../../src/components/ToolsPanel/PrimaryTools.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,eAAO,MAAM,YAAY,oCAuHvB,CAAA"}
+{"version":3,"file":"PrimaryTools.d.ts","sourceRoot":"","sources":["../../../src/components/ToolsPanel/PrimaryTools.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,eAAO,MAAM,YAAY,oCAqIvB,CAAA"}

package/dist/components/ToolsPanel/ShapesMenu.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TVToolType } from '../../types';
+import { TVToolType } from '~types';
 interface ShapesMenuProps {
     activeTool: TVToolType;
     isToolLocked: boolean;

package/dist/components/TopPanel/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/TopPanel/Menu/Menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,UAAU,SAAS;IACjB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAUD,eAAO,MAAM,IAAI,uCAoTf,CAAA"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/TopPanel/Menu/Menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,UAAU,SAAS;IACjB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAUD,eAAO,MAAM,IAAI,uCAgTf,CAAA"}

package/dist/components/TopPanel/PageMenu/PageMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare function PageMenu(): JSX.Element;
-export declare const PageButton: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("../../Primitives/RowButton").RowButtonProps & React.RefAttributes<HTMLButtonElement>>, {}, {
+export declare const PageButton: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("~components/Primitives/RowButton").RowButtonProps & React.RefAttributes<HTMLButtonElement>>, {}, {
     micro: "(max-width: 370px)";
     sm: "(min-width: 640px)";
     md: "(min-width: 768px)";

package/dist/components/TopPanel/PageOptionsDialog/PageOptionsDialog.d.ts

@@ -1,6 +1,6 @@
 import * as Dialog from '@radix-ui/react-alert-dialog';
 import * as React from 'react';
-import type { TVPage } from '../../../types';
+import type { TVPage } from '~types';
 interface PageOptionsDialogProps {
     page: TVPage;
     onOpen?: () => void;

package/dist/constants.d.ts

@@ -1,4 +1,4 @@
-import type { Easing } from './types';
+import type { Easing } from '~types';
 export declare const LETTER_SPACING = "-0.03em";
 export declare const LINE_HEIGHT = 1;
 export declare const GRID_SIZE = 8;

package/dist/hooks/useFileSystem.d.ts

@@ -1,4 +1,4 @@
-import type { TelvaApp } from '../state';
+import type { TelvaApp } from '~state';
 import { DialogState } from './useDialog';
 export declare function useFileSystem(): {
     onNewProject: (app: TelvaApp, openDialog: (dialogState: DialogState, onYes: () => Promise<void>, onNo: () => Promise<void>, onCancel: () => Promise<void>) => void) => Promise<void>;

package/dist/hooks/useKeyboardShortcuts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyboardShortcuts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,QA4tBxE"}
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyboardShortcuts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,QAsuBxE"}

package/dist/hooks/useTelvaApp.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TelvaApp } from '../state';
+import type { TelvaApp } from '~state';
 export declare const TelvaContext: React.Context<TelvaApp>;
 export declare function useTelvaApp(): TelvaApp;
 export declare const ContainerContext: React.Context<React.RefObject<HTMLDivElement>>;

package/dist/hooks/useTheme.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from '../types';
+import type { Theme } from '~types';
 export declare function useTheme(): {
     theme: Theme;
     toggle: () => import("..").TelvaApp;

package/dist/hooks/useTranslation.d.ts

@@ -1,3 +1,3 @@
-import { TVLanguage } from '../translations';
-export declare function useTranslation(locale?: TVLanguage): import("../translations").TVTranslation;
+import { TVLanguage } from '~translations';
+export declare function useTranslation(locale?: TVLanguage): import("~translations").TVTranslation;
 //# sourceMappingURL=useTranslation.d.ts.map

package/dist/hooks/useTranslation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTranslation.d.ts","sourceRoot":"","sources":["../../src/hooks/useTranslation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAkB,MAAM,eAAe,CAAA;AAE1D,wBAAgB,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,yCASjD"}
+{"version":3,"file":"useTranslation.d.ts","sourceRoot":"","sources":["../../src/hooks/useTranslation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAkB,MAAM,eAAe,CAAA;AAE1D,wBAAgB,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,yCAOjD"}