simplify imports setup

.prettierrc

@@ -1,5 +1,9 @@
 {
   "singleQuote": true,
   "printWidth": 120,
-  "htmlWhitespaceSensitivity": "strict"
+  "htmlWhitespaceSensitivity": "strict",
-}
+  "plugins": [
+    "prettier-plugin-organize-imports"
+  ],
+  "organizeImportsSkipDestructiveCodeActions": true
+}

labs/folk-arrow.ts

@@ -1,8 +1,8 @@
-import { getBoxToBoxArrow } from 'perfect-arrows';
+import { getSvgPathFromStroke, pointsOnBezierCurves } from '@lib/utils';
-import { FolkBaseConnection } from './folk-base-connection.ts';
-import { getSvgPathFromStroke, pointsOnBezierCurves } from '@lib/utils.ts';
-import { getStroke, StrokeOptions } from 'perfect-freehand';
 import { PropertyValues } from '@lit/reactive-element';
+import { getBoxToBoxArrow } from 'perfect-arrows';
+import { getStroke, StrokeOptions } from 'perfect-freehand';
+import { FolkBaseConnection } from './folk-base-connection.ts';
 
 export type Arrow = [
   /** The x position of the (padded) starting point. */
@@ -22,7 +22,7 @@ export type Arrow = [
   /** The angle (in radians) for a starting arrowhead. */
   as: number,
   /** The angle (in radians) for a center arrowhead. */
-  ac: number
+  ac: number,
 ];
 
 declare global {
@@ -75,7 +75,7 @@ export class FolkArrow extends FolkBaseConnection {
       targetRect.x,
       targetRect.y,
       targetRect.width,
-      targetRect.height
+      targetRect.height,
     ) as Arrow;
 
     const points = pointsOnBezierCurves([

labs/folk-base-connection.ts

@@ -1,9 +1,7 @@
-import { parseVertex } from '@lib/utils.ts';
+import { ClientRectObserverEntry, FolkElement, FolkObserver, parseDeepCSSSelector } from '@lib';
-import { ClientRectObserverEntry } from '@lib/client-rect-observer.ts';
+import { parseVertex } from '@lib/utils';
-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';
+import { property, state } from '@lit/reactive-element/decorators.js';
 
 const folkObserver = new FolkObserver();
 

labs/folk-base-set.ts

@@ -1,7 +1,5 @@
 import { property, state } from '@lit/reactive-element/decorators.js';
-import { ClientRectObserverEntry } from '@lib/client-rect-observer.ts';
+import { ClientRectObserverEntry, FolkElement, FolkObserver, parseDeepCSSSelector } from '@lib';
-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,9 +1,7 @@
-import { DOMRectTransform } from '@lib/DOMRectTransform.ts';
+import { DOMRectTransform, Point, WebGLUtils } from '@lib';
-import { Point } from '@lib/types.ts';
+import { glsl } from '@lib/tags';
-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';
+import { FolkBaseSet } from './folk-base-set.ts';
 
 /**
  * The DistanceField class calculates a distance field using the Jump Flooding Algorithm (JFA) in WebGL.
@@ -296,7 +294,7 @@ export class FolkDistanceField extends FolkBaseSet {
       this.renderSeedPointsForGroup(
         this.groups[groupName].shapeVAO,
         this.groups[groupName].textures[this.groups[groupName].isPingTexture ? 0 : 1],
-        vertexCount
+        vertexCount,
       );
     }
   }
@@ -462,7 +460,7 @@ export class FolkDistanceField extends FolkBaseSet {
       gl.FLOAT, // type
       false, // normalize
       0, // stride
-      0 // offset
+      0, // offset
     );
 
     gl.bindVertexArray(null);

labs/folk-graph.ts

@@ -2,9 +2,8 @@ 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 '@lib/animation-frame-controller.ts';
+import { AnimationFrameController, AnimationFrameControllerHost, TransformIntegrator } from '@lib';
 import { FolkBaseConnection } from './folk-base-connection';
-import { TransformIntegrator } from '@lib/EffectIntegrator.ts';
 
 export class FolkGraph extends FolkBaseSet implements AnimationFrameControllerHost {
   static override tagName = 'folk-graph';

labs/folk-hull.ts

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

labs/folk-ink.ts

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

labs/folk-map.ts

@@ -1,10 +1,9 @@
-import { LatLng, LatLngExpression, LeafletEvent, map, Map, tileLayer } from 'leaflet';
+import { FolkElement } from '@lib';
-
+import { css, unsafeCSS } from '@lit/reactive-element';
+import { LatLng, LatLngExpression, LeafletEvent, map, tileLayer } from 'leaflet';
 // @ts-ignore
 // Vite specific import :(
 import leafletCSS from 'leaflet/dist/leaflet.css?inline';
-import { FolkElement } from '@lib/folk-element';
-import { css, PropertyValues, unsafeCSS } from '@lit/reactive-element';
 
 export class RecenterEvent extends Event {
   constructor() {
@@ -39,12 +38,12 @@ export class FolkMap extends FolkElement {
       tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
         attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-      })
+      }),
     );
 
     this.#map.setView(
       (this.getAttribute('coordinates') || '0, 0').split(',').map(Number) as LatLngExpression,
-      Number(this.getAttribute('zoom') || 13)
+      Number(this.getAttribute('zoom') || 13),
     );
 
     return root;

labs/folk-physics.ts

@@ -1,9 +1,9 @@
-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 '@lib/EffectIntegrator.ts';
+import { DOMRectTransform, TransformIntegrator } from '@lib';
+import { PropertyValues } from '@lit/reactive-element';
+import { FolkBaseSet } from './folk-base-set.ts';
+import { FolkShape } from './folk-shape';
+
 await init();
 
 export class FolkPhysics extends FolkBaseSet {
@@ -72,7 +72,7 @@ export class FolkPhysics extends FolkBaseSet {
         const bodyDesc = RAPIER.RigidBodyDesc.dynamic()
           .setTranslation(
             (rect.x + rect.width / 2) * FolkPhysics.PHYSICS_SCALE,
-            (rect.y + rect.height / 2) * FolkPhysics.PHYSICS_SCALE
+            (rect.y + rect.height / 2) * FolkPhysics.PHYSICS_SCALE,
           )
           .setRotation(rect.rotation);
 
@@ -81,7 +81,7 @@ export class FolkPhysics extends FolkBaseSet {
         // Scale down the collider size
         const colliderDesc = RAPIER.ColliderDesc.cuboid(
           (rect.width / 2) * FolkPhysics.PHYSICS_SCALE,
-          (rect.height / 2) * FolkPhysics.PHYSICS_SCALE
+          (rect.height / 2) * FolkPhysics.PHYSICS_SCALE,
         ).setTranslation(0, 0);
 
         this.world!.createCollider(colliderDesc, body);
@@ -101,7 +101,7 @@ export class FolkPhysics extends FolkBaseSet {
             x: (rect.x + rect.width / 2) * FolkPhysics.PHYSICS_SCALE,
             y: (rect.y + rect.height / 2) * FolkPhysics.PHYSICS_SCALE,
           },
-          true
+          true,
         );
         body.setRotation(rect.rotation, true);
       } else if (body.bodyType() === RAPIER.RigidBodyType.KinematicPositionBased) {
@@ -111,7 +111,7 @@ export class FolkPhysics extends FolkBaseSet {
           this.world!.removeCollider(collider, true);
           const newColliderDesc = RAPIER.ColliderDesc.cuboid(
             (rect.width / 2) * FolkPhysics.PHYSICS_SCALE,
-            (rect.height / 2) * FolkPhysics.PHYSICS_SCALE
+            (rect.height / 2) * FolkPhysics.PHYSICS_SCALE,
           ).setTranslation(0, 0);
           this.world!.createCollider(newColliderDesc, body);
         }
@@ -151,7 +151,7 @@ export class FolkPhysics extends FolkBaseSet {
                 x: (result.x + result.width / 2) * FolkPhysics.PHYSICS_SCALE,
                 y: (result.y + result.height / 2) * FolkPhysics.PHYSICS_SCALE,
               },
-              true
+              true,
             );
             body.setRotation(result.rotation, true);
           }

labs/folk-projector.ts

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

labs/folk-proximity.ts

@@ -1,5 +1,4 @@
-import { aabbIntersection } from '@lib/collision.ts';
+import { aabbIntersection, TransformEvent } from '@lib';
-import { TransformEvent } from '@lib/TransformEvent.ts';
 import { FolkHull } from './folk-hull';
 import { FolkShape } from './folk-shape.ts';
 
@@ -178,7 +177,7 @@ export class FolkProximity extends HTMLElement {
       const isInCluster = Array.from(cluster.sourceElements)
         .filter((element) => el !== element)
         .some((element) =>
-          aabbIntersection(el.getTransformDOMRect(), (element as FolkShape).getTransformDOMRect(), PROXIMITY)
+          aabbIntersection(el.getTransformDOMRect(), (element as FolkShape).getTransformDOMRect(), PROXIMITY),
         );
 
       if (!isInCluster) {

labs/folk-rope.ts

@@ -1,12 +1,9 @@
 // This is a rewrite of https://github.com/guerrillacontra/html5-es6-physics-rope
 
-import { Vector } from '@lib/Vector.ts';
+import { AnimationFrameController, AnimationFrameControllerHost, DOMRectTransform, Vector, type Point } from '@lib';
-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 '@lib/animation-frame-controller.ts';
 import { property } from '@lit/reactive-element/decorators.js';
+import { FolkBaseConnection } from './folk-base-connection.ts';
 
 // 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"!
 interface RopePoint {

labs/folk-sand.glsl.ts

@@ -1,4 +1,4 @@
-import { glsl } from '@lib/tags.ts';
+import { glsl } from '@lib/tags';
 
 /** 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,17 +1,15 @@
-import { WebGLUtils } from '@lib/webgl.ts';
+import { DOMRectTransform, WebGLUtils } from '@lib';
+import { css, PropertyValues } from '@lit/reactive-element';
+import { FolkBaseSet } from './folk-base-set.ts';
 import {
   collisionFragmentShader,
   collisionVertexShader,
-  simulationShader,
   distanceFieldInitShader,
   distanceFieldPropagationShader,
-  visualizationShader,
+  simulationShader,
   vertexShader,
+  visualizationShader,
 } from './folk-sand.glsl.ts';
-import { requestAnimationFrame } from '@lib/rAF.ts';
-import { FolkBaseSet } from './folk-base-set.ts';
-import { css, PropertyValues } from '@lit/reactive-element';
-import { DOMRectTransform } from '@lib/DOMRectTransform.ts';
 
 export class FolkSand extends FolkBaseSet {
   static override tagName = 'folk-sand';

labs/folk-shape.ts

@@ -1,10 +1,6 @@
-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 '@labs/utils/cursors';
-import { TransformEvent } from '@lib/TransformEvent';
+import { DOMRectTransform, DOMRectTransformReadonly, Point, ResizeObserverManager, TransformEvent, Vector } from '@lib';
+import { css, html } from '@lib/tags';
 
 const resizeObserver = new ResizeObserverManager();
 
@@ -277,21 +273,23 @@ export class FolkShape extends HTMLElement {
     // Ideally we would creating these lazily on first focus, but the resize handlers need to be around for delegate focus to work.
     // Maybe can add the first resize handler here, and lazily instantiate the rest when needed?
     // I can see it becoming important at scale
-    this.#shadow.setHTMLUnsafe(html` <button part="rotation-top-left" tabindex="-1"></button>
+    this.#shadow.setHTMLUnsafe(
-      <button part="rotation-top-right" tabindex="-1"></button>
+      html` <button part="rotation-top-left" tabindex="-1"></button>
-      <button part="rotation-bottom-right" tabindex="-1"></button>
+        <button part="rotation-top-right" tabindex="-1"></button>
-      <button part="rotation-bottom-left" tabindex="-1"></button>
+        <button part="rotation-bottom-right" tabindex="-1"></button>
-      <button part="resize-top-left" aria-label="Resize shape from top left"></button>
+        <button part="rotation-bottom-left" tabindex="-1"></button>
-      <button part="resize-top-right" aria-label="Resize shape from top right"></button>
+        <button part="resize-top-left" aria-label="Resize shape from top left"></button>
-      <button part="resize-bottom-right" aria-label="Resize shape from bottom right"></button>
+        <button part="resize-top-right" aria-label="Resize shape from top right"></button>
-      <button part="resize-bottom-left" aria-label="Resize shape from bottom left"></button>
+        <button part="resize-bottom-right" aria-label="Resize shape from bottom right"></button>
-      <div><slot></slot></div>`);
+        <button part="resize-bottom-left" aria-label="Resize shape from bottom left"></button>
+        <div><slot></slot></div>`,
+    );
 
     this.#handles = Object.fromEntries(
       Array.from(this.#shadow.querySelectorAll('[part]')).map((el) => [
         el.getAttribute('part') as ResizeHandle | RotateHandle,
         el as HTMLElement,
-      ])
+      ]),
     ) as Record<ResizeHandle | RotateHandle, HTMLElement>;
 
     this.#updateCursors();

labs/folk-space-projector.ts

@@ -1,8 +1,8 @@
+import { DOMRectTransform } from '@lib';
 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 '@lib/DOMRectTransform';
 
 FolkShape.define();
 FolkSpreadsheet.define();

labs/folk-space-radial.ts

@@ -1,11 +1,7 @@
-import { DOMRectTransform } from '@lib/DOMRectTransform';
+import { DOMRectTransform, Experimental, TransformEvent, Vector } from '@lib';
 import { css, type PropertyValues } from '@lit/reactive-element';
-import { TransformEvent } from '@lib/TransformEvent';
-import { FolkShape } from './folk-shape';
-import { Experimental } from '@lib/Experimental';
 import { FolkBaseSet } from './folk-base-set';
-import { Vector } from '@lib/Vector';
+import { FolkShape } from './folk-shape';
-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 '@lib';
-import { FolkElement } from '@lib/folk-element';
 import { html } from '@lib/tags';
+import { css } from '@lit/reactive-element';
 
 declare global {
   interface HTMLElementTagNameMap {

labs/folk-spreadsheet.ts

@@ -1,4 +1,4 @@
-import { css, html } from '@lib/tags';
+import { css } from '@lib/tags';
 
 // hardcoded column and row numbers
 const styles = css`
@@ -155,7 +155,7 @@ export function templateCells(numberOfRows: number, numberOfColumns: number, cel
           tabindex="0" 
           ${expression ? `expression="${expression}"` : ''}
           ${readonly ? 'readonly' : ''}
-        ></folk-cell>`
+        ></folk-cell>`,
       );
     }
   }
@@ -229,7 +229,7 @@ export class FolkSpreadsheet extends HTMLElement {
     const rows = Array.from({ length: rowNames.size }).map((_, i) => i + 1);
 
     this.#columns.setHTMLUnsafe(
-      columns.map((column) => `<s-header column="${column}">${column}</s-header>`).join('\n')
+      columns.map((column) => `<s-header column="${column}">${column}</s-header>`).join('\n'),
     );
 
     this.#rows.setHTMLUnsafe(rows.map((row) => `<s-header row="${row}">${row}</s-header>`).join('\n'));
@@ -245,7 +245,7 @@ export class FolkSpreadsheet extends HTMLElement {
           (column) =>
             `s-header[column="${column}"], ::slotted(folk-cell[column="${column}"]) { grid-column: ${
               getColumnIndex(column) + 1
-            }; }`
+            }; }`,
         )
         .join('\n')}
 
@@ -485,7 +485,7 @@ export class FolkSpreadSheetCell extends HTMLElement {
           const [, column, row] = dep.split(/([A-Z]+)(\d+)/s);
           return this.#getCell(column, row);
         })
-        .filter((cell) => cell !== null)
+        .filter((cell) => cell !== null),
     );
 
     this.#dependencies.forEach((dep) => dep.addEventListener('propagate', this));

labs/folk-toolset.ts

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

labs/folk-xanadu.ts

@@ -1,7 +1,7 @@
-import { FolkBaseConnection } from './folk-base-connection.js';
+import type { Point } from '@lib';
-import { verticesToPolygon } from '@lib/utils.js';
+import { verticesToPolygon } from '@lib/utils';
-import type { Point } from '@lib/types.js';
 import { PropertyValues } from '@lit/reactive-element';
+import { FolkBaseConnection } from './folk-base-connection.js';
 export class FolkXanadu extends FolkBaseConnection {
   static override tagName = 'folk-xanadu';
 
@@ -37,15 +37,15 @@ export class FolkXanadu extends FolkBaseConnection {
     // To trace the link we need to rotate the vertices of the source to start on the bottom right corner.
     const maxRightCoordinate = Math.max.apply(
       null,
-      sourceVertices.map((vertex) => vertex.x)
+      sourceVertices.map((vertex) => vertex.x),
     );
     const maxBottomCoordinate = Math.max.apply(
       null,
-      sourceVertices.filter((vertex) => vertex.x === maxRightCoordinate).map((vertex) => vertex.y)
+      sourceVertices.filter((vertex) => vertex.x === maxRightCoordinate).map((vertex) => vertex.y),
     );
 
     const index = sourceVertices.findIndex(
-      (vertex) => vertex.x === maxRightCoordinate && vertex.y === maxBottomCoordinate
+      (vertex) => vertex.x === maxRightCoordinate && vertex.y === maxBottomCoordinate,
     );
 
     sourceVertices = sourceVertices.slice(index).concat(sourceVertices.slice(0, index));
@@ -62,7 +62,7 @@ function computeInlineVertices(rects: DOMRect[]): Point[] {
       width: Math.round(rect.width),
       x: Math.round(rect.x),
       y: Math.round(rect.y),
-    })
+    }),
   );
 
   if (rects.length === 0) return [];
@@ -86,11 +86,11 @@ function computeInlineVertices(rects: DOMRect[]): Point[] {
 
   const maxRightCoordinate = Math.max.apply(
     null,
-    rects.map((rect) => rect.right)
+    rects.map((rect) => rect.right),
   );
   const maxBottomCoordinate = Math.max.apply(
     null,
-    rects.filter((rect) => rect.right === maxRightCoordinate).map((rect) => rect.bottom)
+    rects.filter((rect) => rect.right === maxRightCoordinate).map((rect) => rect.bottom),
   );
 
   vertices.push({

lib/index.ts

@@ -3,32 +3,29 @@ export * from './animation-frame-controller';
 export * from './rAF';
 
 // Core utilities and types
-export * from './types';
-export * from './utils';
-export * from './Vector';
 export * from './Matrix';
+export * from './types';
+export * from './Vector';
 
 // DOM and transformation
+export * from '../labs/utils/cursors';
 export * from './DOMRectTransform';
 export * from './TransformEvent';
-export * from '../labs/utils/cursors';
 
 // Observers
 export * from './client-rect-observer';
-export * from './resize-observer';
 export * from './folk-observer';
+export * from './resize-observer';
 
 // Integration and effects
-export * from './EffectIntegrator';
 export * from './collision';
+export * from './EffectIntegrator';
 
 // Base elements and components
 export * from './folk-element';
 
 // WebGL utilities
 export * from './webgl';
-// Template literal tags
-export * from './tags';
 
 // Experimental features
 export * from './Experimental';

package.json

@@ -21,6 +21,7 @@
     "webcola": "^3.4.0"
   },
   "devDependencies": {
+    "prettier-plugin-organize-imports": "^4.1.0",
     "@types/leaflet": "^1.9.14",
     "@types/node": "^22.10.1",
     "@webgpu/types": "^0.1.51",
@@ -29,4 +30,4 @@
     "typescript": "^5.7.2",
     "vite": "^6.0.3"
   }
-}
+}

website/canvas/src/folk-metronome.ts

@@ -1,4 +1,4 @@
-import { FolkElement } from '@lib/folk-element';
+import { FolkElement } from '@lib';
 
 declare global {
   interface HTMLElementTagNameMap {

website/canvas/src/folk-timer.ts

@@ -1,4 +1,4 @@
-import { FolkElement } from '@lib/folk-element';
+import { FolkElement } from '@lib';
 
 declare global {
   interface HTMLElementTagNameMap {