move things to labs

labs/folk-arrow.ts

@@ -1,6 +1,6 @@
 import { getBoxToBoxArrow } from 'perfect-arrows';
 import { FolkBaseConnection } from './folk-base-connection.ts';
-import { getSvgPathFromStroke, pointsOnBezierCurves } from './common/utils.ts';
+import { getSvgPathFromStroke, pointsOnBezierCurves } from '@lib/utils.ts';
 import { getStroke, StrokeOptions } from 'perfect-freehand';
 import { PropertyValues } from '@lit/reactive-element';
 

labs/folk-base-connection.ts

@@ -1,7 +1,7 @@
-import { parseVertex } from './common/utils.ts';
-import { ClientRectObserverEntry } from './common/client-rect-observer.ts';
-import { FolkObserver, parseDeepCSSSelector } from './common/folk-observer.ts';
-import { FolkElement } from './common/folk-element.ts';
+import { parseVertex } from '@lib/utils.ts';
+import { ClientRectObserverEntry } from '@lib/client-rect-observer.ts';
+import { FolkObserver, parseDeepCSSSelector } from '@lib/folk-observer.ts';
+import { FolkElement } from '@lib/folk-element.ts';
 import { property, state } from '@lit/reactive-element/decorators.js';
 import { css, CSSResultGroup, PropertyValues } from '@lit/reactive-element';
 

labs/folk-base-set.ts

@@ -1,7 +1,7 @@
 import { property, state } from '@lit/reactive-element/decorators.js';
-import { ClientRectObserverEntry } from './common/client-rect-observer.ts';
-import { FolkElement } from './common/folk-element.ts';
-import { FolkObserver, parseDeepCSSSelector } from './common/folk-observer.ts';
+import { ClientRectObserverEntry } from '@lib/client-rect-observer.ts';
+import { FolkElement } from '@lib/folk-element.ts';
+import { FolkObserver, parseDeepCSSSelector } from '@lib/folk-observer.ts';
 import { css, CSSResultGroup, PropertyValues } from '@lit/reactive-element';
 
 const folkObserver = new FolkObserver();

labs/folk-distance-field.ts

@@ -1,7 +1,7 @@
-import { DOMRectTransform } from './common/DOMRectTransform.ts';
-import { Point } from './common/types.ts';
-import { glsl } from './common/tags.ts';
-import { WebGLUtils } from './common/webgl.ts';
+import { DOMRectTransform } from '@lib/DOMRectTransform.ts';
+import { Point } from '@lib/types.ts';
+import { glsl } from '@lib/tags.ts';
+import { WebGLUtils } from '@lib/webgl.ts';
 import { FolkBaseSet } from './folk-base-set.ts';
 import { PropertyValues } from '@lit/reactive-element';
 

labs/folk-graph.ts

@@ -2,9 +2,9 @@ import { FolkBaseSet } from './folk-base-set.ts';
 import { PropertyValues } from '@lit/reactive-element';
 import { Layout } from 'webcola';
 import { FolkShape } from './folk-shape.ts';
-import { AnimationFrameController, AnimationFrameControllerHost } from './common/animation-frame-controller.ts';
+import { AnimationFrameController, AnimationFrameControllerHost } from '@lib/animation-frame-controller.ts';
 import { FolkBaseConnection } from './folk-base-connection';
-import { TransformIntegrator } from './common/EffectIntegrator.ts';
+import { TransformIntegrator } from '@lib/EffectIntegrator.ts';
 
 export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHost {
   static override tagName = 'folk-graph';

labs/folk-hull.ts

@@ -1,6 +1,6 @@
 import { FolkBaseSet } from './folk-base-set';
-import { verticesToPolygon } from './common/utils';
-import type { Point } from './common/types';
+import { verticesToPolygon } from '@lib/utils';
+import type { Point } from '@lib/types';
 import { PropertyValues, css } from '@lit/reactive-element';
 
 declare global {

labs/folk-ink.ts

@@ -1,8 +1,8 @@
 import { getStroke, StrokeOptions } from 'perfect-freehand';
-import { FolkElement } from './common/folk-element';
+import { FolkElement } from '@lib/folk-element';
 import { property } from '@lit/reactive-element/decorators.js';
 import { css, PropertyValues } from '@lit/reactive-element';
-import { getSvgPathFromStroke } from './common/utils';
+import { getSvgPathFromStroke } from '@lib/utils';
 
 export type Point = [x: number, y: number, pressure: number];
 

labs/folk-map.ts

@@ -3,7 +3,7 @@ import { LatLng, LatLngExpression, LeafletEvent, map, Map, tileLayer } from 'lea
 // @ts-ignore
 // Vite specific import :(
 import leafletCSS from 'leaflet/dist/leaflet.css?inline';
-import { FolkElement } from './common/folk-element';
+import { FolkElement } from '@lib/folk-element';
 import { css, PropertyValues, unsafeCSS } from '@lit/reactive-element';
 
 export class RecenterEvent extends Event {

labs/folk-physics.ts

@@ -1,9 +1,9 @@
-import { DOMRectTransform } from './common/DOMRectTransform.ts';
+import { DOMRectTransform } from '@lib/DOMRectTransform.ts';
 import { FolkBaseSet } from './folk-base-set.ts';
 import { PropertyValues } from '@lit/reactive-element';
 import { FolkShape } from './folk-shape';
 import RAPIER, { init } from '@dimforge/rapier2d-compat';
-import { TransformIntegrator } from './common/EffectIntegrator.ts';
+import { TransformIntegrator } from '@lib/EffectIntegrator.ts';
 await init();
 
 export class FolkPhysics extends FolkBaseSet {

labs/folk-projector.ts

@@ -1,4 +1,4 @@
-import { DOMRectTransform } from './common/DOMRectTransform';
+import { DOMRectTransform } from '@lib/DOMRectTransform';
 import { FolkShape } from './folk-shape';
 
 declare global {

labs/folk-proximity.ts

@@ -1,5 +1,5 @@
-import { aabbIntersection } from './common/collision.ts';
-import { TransformEvent } from './common/TransformEvent.ts';
+import { aabbIntersection } from '@lib/collision.ts';
+import { TransformEvent } from '@lib/TransformEvent.ts';
 import { FolkHull } from './folk-hull';
 import { FolkShape } from './folk-shape.ts';
 

labs/folk-rope.ts

@@ -1,11 +1,11 @@
 // This is a rewrite of https://github.com/guerrillacontra/html5-es6-physics-rope
 
-import { Vector } from './common/Vector.ts';
-import type { Point } from './common/types.ts';
-import { DOMRectTransform } from './common/DOMRectTransform.ts';
+import { Vector } from '@lib/Vector.ts';
+import type { Point } from '@lib/types.ts';
+import { DOMRectTransform } from '@lib/DOMRectTransform.ts';
 import { FolkBaseConnection } from './folk-base-connection.ts';
 import { css, PropertyValues } from '@lit/reactive-element';
-import { AnimationFrameController, AnimationFrameControllerHost } from './common/animation-frame-controller.ts';
+import { AnimationFrameController, AnimationFrameControllerHost } from '@lib/animation-frame-controller.ts';
 import { property } from '@lit/reactive-element/decorators.js';
 
 // Each rope part is one of these uses a high precision variant of Störmer–Verlet integration to keep the simulation consistent otherwise it would "explode"!

labs/folk-sand.glsl.ts

@@ -1,4 +1,4 @@
-import { glsl } from './common/tags.ts';
+import { glsl } from '@lib/tags.ts';
 
 /** Falling sand shaders using block cellular automata with Margolus offsets.
  * Based on "Probabilistic Cellular Automata for Granular Media in Video Games" (https://arxiv.org/abs/2008.06341)

labs/folk-sand.ts

@@ -1,4 +1,4 @@
-import { WebGLUtils } from './common/webgl';
+import { WebGLUtils } from '@lib/webgl.ts';
 import {
   collisionFragmentShader,
   collisionVertexShader,
@@ -8,10 +8,10 @@ import {
   visualizationShader,
   vertexShader,
 } from './folk-sand.glsl.ts';
-import { requestAnimationFrame } from './common/rAF.ts';
+import { requestAnimationFrame } from '@lib/rAF.ts';
 import { FolkBaseSet } from './folk-base-set.ts';
 import { css, PropertyValues } from '@lit/reactive-element';
-import { DOMRectTransform } from './common/DOMRectTransform.ts';
+import { DOMRectTransform } from '@lib/DOMRectTransform.ts';
 
 export class FolkSand extends FolkBaseSet {
   static override tagName = 'folk-sand';

labs/folk-shape.ts

@@ -1,10 +1,10 @@
-import { css, html } from './common/tags';
-import { ResizeObserverManager } from './common/resize-observer';
-import { Point } from './common/types';
-import { DOMRectTransform, DOMRectTransformReadonly } from './common/DOMRectTransform';
-import { Vector } from './common/Vector';
-import { getResizeCursorUrl, getRotateCursorUrl } from './common/cursors';
-import { TransformEvent } from './common/TransformEvent';
+import { css, html } from '@lib/tags';
+import { ResizeObserverManager } from '@lib/resize-observer';
+import { Point } from '@lib/types';
+import { DOMRectTransform, DOMRectTransformReadonly } from '@lib/DOMRectTransform';
+import { Vector } from '@lib/Vector';
+import { getResizeCursorUrl, getRotateCursorUrl } from '@lib/cursors';
+import { TransformEvent } from '@lib/TransformEvent';
 
 const resizeObserver = new ResizeObserverManager();
 

labs/folk-space-projector.ts

@@ -2,7 +2,7 @@ import { css, PropertyValues } from '@lit/reactive-element';
 import { FolkBaseSet } from './folk-base-set';
 import { FolkShape } from './folk-shape';
 import { CellTemplate, FolkSpreadsheet, FolkSpreadSheetCell, templateCells } from './folk-spreadsheet';
-import { DOMRectTransform } from './common/DOMRectTransform';
+import { DOMRectTransform } from '@lib/DOMRectTransform';
 
 FolkShape.define();
 FolkSpreadsheet.define();

labs/folk-space-radial.ts

@@ -1,11 +1,11 @@
-import { DOMRectTransform } from './common/DOMRectTransform';
+import { DOMRectTransform } from '@lib/DOMRectTransform';
 import { css, type PropertyValues } from '@lit/reactive-element';
-import { TransformEvent } from './common/TransformEvent';
+import { TransformEvent } from '@lib/TransformEvent';
 import { FolkShape } from './folk-shape';
-import { Experimental } from './common/Experimental';
+import { Experimental } from '@lib/Experimental';
 import { FolkBaseSet } from './folk-base-set';
-import { Vector } from './common/Vector';
-import type { Point } from './common/types';
+import { Vector } from '@lib/Vector';
+import type { Point } from '@lib/types';
 
 export class FolkSpaceRadial extends FolkBaseSet {
   static override tagName = 'folk-space-radial';

labs/folk-space.ts

@@ -1,6 +1,6 @@
 import { css, PropertyValues } from '@lit/reactive-element';
-import { FolkElement } from './common/folk-element';
-import { html } from './common/tags';
+import { FolkElement } from '@lib/folk-element';
+import { html } from '@lib/tags';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/folk-spreadsheet.ts

@@ -1,4 +1,4 @@
-import { css, html } from './common/tags';
+import { css, html } from '@lib/tags';
 
 // hardcoded column and row numbers
 const styles = css`

labs/folk-toolset.ts

@@ -1,5 +1,5 @@
-import type { DOMRectTransform } from './common/DOMRectTransform';
-import { Vector } from './common/Vector';
+import type { DOMRectTransform } from '@lib/DOMRectTransform';
+import { Vector } from '@lib/Vector';
 import { FolkEventPropagator } from './folk-event-propagator';
 import { FolkShape } from './folk-shape';
 

labs/folk-xanadu.ts

@@ -1,6 +1,6 @@
 import { FolkBaseConnection } from './folk-base-connection.js';
-import { verticesToPolygon } from './common/utils.js';
-import type { Point } from './common/types.js';
+import { verticesToPolygon } from '@lib/utils.js';
+import type { Point } from '@lib/types.js';
 import { PropertyValues } from '@lit/reactive-element';
 export class FolkXanadu extends FolkBaseConnection {
   static override tagName = 'folk-xanadu';

lib/EffectIntegrator.ts

@@ -1,4 +1,4 @@
-import type { FolkShape } from '../folk-shape';
+import type { FolkShape } from '../labs/folk-shape';
 
 /**
  * Coordinates effects between multiple systems, integrating their proposals into a single result.

lib/__tests__/DOMRectTransform.test.ts

@@ -1,6 +1,6 @@
 import { expect, test, describe } from 'bun:test';
-import { DOMRectTransform, DOMRectTransformReadonly } from '../common/DOMRectTransform';
-import { Point } from '../common/types';
+import { DOMRectTransform, DOMRectTransformReadonly } from '../DOMRectTransform';
+import { Point } from '../types';
 
 // Helper for comparing points with floating point values
 const expectPointClose = (actual: Point, expected: Point) => {

lib/__tests__/Vector.bench.ts

@@ -1,5 +1,5 @@
 import { bench, run } from 'mitata';
-import { Vector } from '../common/Vector';
+import { Vector } from '../Vector.ts';
 
 // Basic vector operations
 bench('Vector.zero()', () => {

lib/__tests__/Vector.test.ts

@@ -1,5 +1,5 @@
 import { expect, test, describe } from 'bun:test';
-import { Vector } from '../common/Vector';
+import { Vector } from '../Vector';
 
 describe('Vector', () => {
   describe('basic operations', () => {

lib/folk-observer.ts

@@ -1,4 +1,4 @@
-import { FolkShape } from '../folk-shape';
+import { FolkShape } from '../labs/folk-shape';
 import { ClientRectObserver, ClientRectObserverEntry } from './client-rect-observer';
 import { TransformEvent } from './TransformEvent';
 

web-extension/injected.ts

@@ -14,7 +14,7 @@ if (typeof customElements !== 'undefined') {
   console.log('importing folk-shape');
   // this also won't work
   // maybe just simply build and bundle it all up, this is probl easiest.
-  // import('../../lib/folk-shape').then((m) => m.FolkShape.define());
+  // import('@lib/folk-shape').then((m) => m.FolkShape.define());
 } else {
   console.warn('CUSTOM ELEMENTS NOT DEFINED');
 }

website/canvas/[shaders]distance-field.html

@@ -45,8 +45,8 @@
     </folk-distance-field>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-distance-field.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-distance-field.ts';
     </script>
   </body>
 </html>

website/canvas/[shaders]falling-sand.html

@@ -89,8 +89,8 @@
     </folk-sand>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-sand.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-sand.ts';
 
       document.querySelector('folk-sand').onMaterialChange = (materialNumber) => {
         document.querySelector('key-helper button[active]').removeAttribute('active');

website/canvas/[tests]distance-field.html

@@ -22,8 +22,8 @@
   </head>
   <body>
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-distance-field.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-distance-field.ts';
 
       const d = document.createElement('folk-distance-field');
       const geometries = [];

website/canvas/[tests]many-shapes.html

@@ -22,7 +22,7 @@
   </head>
   <body>
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-shape.ts';
 
       const geometries = [];
 

website/canvas/[tests]rope.html

@@ -84,8 +84,8 @@
     <folk-rope source="#box1" target="#box2"></folk-rope>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-rope.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-rope.ts';
     </script>
   </body>
 </html>

website/canvas/_xanadu-article.html

@@ -133,7 +133,7 @@
     </main>
 
     <script type="module">
-      import '../../lib/common/iframe-script.ts';
+      import '@lib/common/iframe-script.ts';
     </script>
   </body>
 </html>

website/canvas/animated-shapes-on-a-canvas.html

@@ -64,7 +64,7 @@
     <folk-shape x="100" y="300" width="50" height="50"></folk-shape>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-shape.ts';
 
       const geos = document.querySelectorAll('folk-shape');
 

website/canvas/audio-beats-with-event-propagators.html

@@ -54,8 +54,8 @@
 
     <script type="module">
       import './src/folk-metronome.ts';
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-event-propagator.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-event-propagator.ts';
     </script>
   </body>
 </html>

website/canvas/canvasify-a-html-document.html

@@ -100,7 +100,7 @@
     </main>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-shape.ts';
 
       function copyStyles(from, to) {
         const styles = getComputedStyle(from);

website/canvas/chains-of-thought/main.ts

@@ -1,5 +1,5 @@
-import { FolkShape } from '../../../lib/folk-shape.ts';
-import { FolkArrow } from '../../../lib/folk-arrow.ts';
+import { FolkShape } from '../../../labs/folk-shape.ts';
+import { FolkArrow } from '../../../labs/folk-arrow.ts';
 import { FileSaver } from '../src/file-system.ts';
 
 declare global {

website/canvas/cross-iframe-sand.html

@@ -105,8 +105,8 @@
     <folk-shape x="500" y="100" width="30" height="70"></folk-shape>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-sand.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-sand.ts';
 
       document.querySelector('folk-sand').onMaterialChange = (materialNumber) => {
         document.querySelector('key-helper button[active]').removeAttribute('active');

website/canvas/cross-iframe-sticky-html-arrow.html

@@ -39,8 +39,8 @@
     <folk-rope source="iframe#frame1 #box1" target="iframe#frame2 #box2"></folk-rope>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-rope.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-rope.ts';
     </script>
   </body>
 </html>

website/canvas/cross-iframe-xanadu-links.html

@@ -62,7 +62,7 @@
     <folk-xanadu source="iframe#frame1 p:nth-child(6)" target="iframe#frame2 p:nth-child(4)"></folk-xanadu>
 
     <script type="module">
-      import '../../lib/standalone/folk-xanadu.ts';
+      import '@labs/standalone/folk-xanadu.ts';
     </script>
   </body>
 </html>

website/canvas/cutting-event-propagators.html

@@ -51,8 +51,8 @@ rotation: from.x/10"
     ></folk-event-propagator>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import { FolkEventPropagator } from '../../lib/standalone/folk-event-propagator.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import { FolkEventPropagator } from '@labs/standalone/folk-event-propagator.ts';
 
       class CutTool {
         entry() {

website/canvas/effect-integrator.html

@@ -49,11 +49,11 @@
     <folk-physics sources="#shape1, #shape2, #shape3, #shape4, #shape5, #shape6, #shape7, #shape8"></folk-physics>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-arrow.ts';
-      import '../../lib/standalone/folk-rope.ts';
-      import '../../lib/standalone/folk-graph.ts';
-      import '../../lib/standalone/folk-physics.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-arrow.ts';
+      import '@labs/standalone/folk-rope.ts';
+      import '@labs/standalone/folk-graph.ts';
+      import '@labs/standalone/folk-physics.ts';
     </script>
   </body>
 </html>

website/canvas/embeddable-llm-with-propagators.html

@@ -107,9 +107,9 @@
 
     <script type="module">
       import './src/folk-timer.ts';
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-llm.ts';
-      import '../../lib/standalone/folk-event-propagator.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-llm.ts';
+      import '@labs/standalone/folk-event-propagator.ts';
     </script>
   </body>
 </html>

website/canvas/event-propagators-with-weather.html

@@ -54,8 +54,8 @@ rotation: from.x"
     ></folk-event-propagator>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-event-propagator.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-event-propagator.ts';
 
       let timeout = -1;
       let isBlowing = false;

website/canvas/event-propagators.html

@@ -45,8 +45,8 @@ rotation: from.x/10"
     ></folk-event-propagator>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-event-propagator.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-event-propagator.ts';
     </script>
   </body>
 </html>

website/canvas/folk-interface-for-qr-codes.html

@@ -72,8 +72,8 @@
 
     <script type="module">
       import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js';
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-event-propagator.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-event-propagator.ts';
 
       const ropeMode = document.querySelector('input[type="checkbox"]');
 

website/canvas/graph-layout.html

@@ -47,10 +47,10 @@
     </folk-graph>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-arrow.ts';
-      import '../../lib/standalone/folk-rope.ts';
-      import '../../lib/standalone/folk-graph.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-arrow.ts';
+      import '@labs/standalone/folk-rope.ts';
+      import '@labs/standalone/folk-graph.ts';
     </script>
   </body>
 </html>

website/canvas/html-ink.html

@@ -23,8 +23,8 @@
   <body>
     <button on:click="DRAW">Draw</button>
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-ink.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-ink.ts';
 
       const drawButton = document.querySelector('button');
 

website/canvas/html-spreadsheet.html

@@ -123,8 +123,8 @@
     </folk-shape>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-spreadsheet.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-spreadsheet.ts';
     </script>
   </body>
 </html>

website/canvas/moveBefore.html

@@ -58,7 +58,7 @@
     <folk-shape x="100" y="300" width="50" height="50" rotation="45"></folk-shape>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-shape.ts';
 
       // Check for moveBefore support
       if (!Element.prototype.moveBefore) {

website/canvas/music-crossfader.html

@@ -78,8 +78,8 @@
 
     <script type="module">
       import './src/record-player.ts';
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-event-propagator.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-event-propagator.ts';
     </script>
   </body>
 </html>

website/canvas/physics.html

@@ -41,9 +41,9 @@
     </folk-physics>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-physics.ts';
-      import '../../lib/standalone/folk-event-propagator.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-physics.ts';
+      import '@labs/standalone/folk-event-propagator.ts';
     </script>
   </body>
 </html>

website/canvas/projector.html

@@ -54,8 +54,8 @@
     <folk-shape x="300" y="350" width="60" height="90" rotation="45"></folk-shape>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-projector.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-projector.ts';
 
       const projector = document.querySelector('folk-projector');
 

website/canvas/proximity-based-communication-and-event-propagators.html

@@ -90,10 +90,10 @@
     <script type="module">
       import { GeoWiki } from './src/geo-wiki.ts';
       import { FolkWeather } from './src/folk-weather.ts';
-      import '../../lib/standalone/folk-shape.ts';
-      import { FolkMap } from '../../lib/standalone/folk-map.ts';
-      import { FolkCluster } from '../../lib/standalone/folk-proximity.ts';
-      import '../../lib/standalone/folk-event-propagator.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import { FolkMap } from '@labs/standalone/folk-map.ts';
+      import { FolkCluster } from '@labs/standalone/folk-proximity.ts';
+      import '@labs/standalone/folk-event-propagator.ts';
 
       FolkCluster.registerElement({
         constructor: FolkMap,

website/canvas/proximity-based-communication.html

@@ -77,9 +77,9 @@
     <script type="module">
       import { GeoWiki } from './src/geo-wiki.ts';
       import { FolkWeather } from './src/folk-weather.ts';
-      import '../../lib/standalone/folk-shape.ts';
-      import { FolkMap } from '../../lib/standalone/folk-map.ts';
-      import { FolkCluster } from '../../lib/standalone/folk-proximity.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import { FolkMap } from '@labs/standalone/folk-map.ts';
+      import { FolkCluster } from '@labs/standalone/folk-proximity.ts';
 
       FolkCluster.registerElement({
         constructor: FolkMap,

website/canvas/proximity-based-music.html

@@ -61,8 +61,8 @@
 
     <script type="module">
       import './src/record-player.ts';
-      import '../../lib/standalone/folk-shape.ts';
-      import { aabbIntersection } from '../../lib/common/collision.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import { aabbIntersection } from '@lib/common/collision.ts';
 
       let proximityDistance = 150;
       const proximitySet = new Set();

website/canvas/radial-space.html

@@ -37,8 +37,8 @@
     <folk-space-radial sources="folk-shape"> </folk-space-radial>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-space-radial.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-space-radial.ts';
     </script>
   </body>
 </html>

website/canvas/responsive-canvas-shapes.html

@@ -89,8 +89,8 @@
     </folk-shape> -->
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-arrow.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-arrow.ts';
     </script>
   </body>
 </html>

website/canvas/semantic-zoom-in-a-canvas.html

@@ -144,8 +144,8 @@
     <folk-arrow source="#box1" target="#box3"></folk-arrow>
 
     <script type="module">
-      import '../../lib/standalone/folk-shape.ts';
-      import '../../lib/standalone/folk-arrow.ts';
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-arrow.ts';
 
       document.body.querySelectorAll('folk-shape').forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
       document.body.querySelectorAll('folk-arrow').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));

website/canvas/shape-collision-detection.html

@@ -49,8 +49,8 @@
     <folk-shape x="400" y="275" width="50" height="50"></folk-shape>
 
     <script type="module">
-      import { FolkShape } from '../../lib/standalone/folk-shape.ts';
-      import { aabbHitDetection } from '../../lib/common/collision.ts';
+      import { FolkShape } from '@labs/standalone/folk-shape.ts';
+      import { aabbHitDetection } from '@lib/common/collision.ts';
 
       const shapes = Array.from(document.querySelectorAll('folk-shape, p'));