init

Author: seveibar

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

biome.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "files": {
+    "ignore": ["cosmos-export", "dist", "package.json", "tsconfig.*"]
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "all",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      },
+      "complexity": {
+        "noForEach": "info"
+      },
+      "style": {
+        "noUselessElse": "off",
+        "noNonNullAssertion": "off",
+        "useNumberNamespace": "off",
+        "useFilenamingConvention": {
+          "level": "error",
+          "options": {
+            "strictCase": true,
+            "requireAscii": true,
+            "filenameCases": ["kebab-case", "export"]
+          }
+        }
+      }
+    }
+  }
+}

bun.lockb

@@ -0,0 +1,176 @@
+# dsn-converter
+
+A TypeScript library for converting between DSN files and Circuit JSON format.
+
+## Overview
+
+dsn-converter is a powerful tool that enables bidirectional conversion between Specctr DSN format and Circuit JSON. This makes it possible to:
+
+- Parse Specctra DSN files into a workable JSON format
+- Convert Circuit JSON back into KiCad-compatible DSN files
+- Visualize PCB designs using SVG rendering
+
+## Installation
+
+```bash
+# Using bun
+bun add dsn-converter
+
+# Using npm
+npm install dsn-converter
+```
+
+## Usage
+
+### Basic Usage
+
+#### Converting DSN to Circuit JSON
+
+```typescript
+import { parseDsnToCircuitJson } from "dsn-converter"
+
+// Read DSN file
+const dsnContent = await Bun.file("your-design.dsn").text()
+
+// Convert to Circuit JSON
+const circuitJson = parseDsnToCircuitJson(dsnContent)
+
+// Save the output
+await Bun.write("output.circuit.json", JSON.stringify(circuitJson, null, 2))
+```
+
+#### Converting Circuit JSON to DSN
+
+```typescript
+import { circuitJsonToDsnString } from "dsn-converter"
+
+// Convert Circuit JSON to DSN format
+const dsnString = circuitJsonToDsnString(circuitJson)
+
+// Save the DSN file
+await Bun.write("output.dsn", dsnString)
+```
+
+### Advanced Usage
+
+#### Working with DSN JSON Directly
+
+```typescript
+import { 
+  parseDsnToDsnJson,
+  convertDsnJsonToCircuitJson,
+  stringifyDsnJson
+} from "dsn-converter"
+
+// Parse DSN to intermediate JSON format
+const dsnJson = parseDsnToDsnJson(dsnString)
+
+// Modify the DSN JSON structure
+dsnJson.placement.components.push({
+  name: "NewComponent",
+  place: {
+    refdes: "U1",
+    x: 1000,
+    y: 1000,
+    side: "front",
+    rotation: 0
+  }
+})
+
+// Convert to Circuit JSON
+const circuitJson = convertDsnJsonToCircuitJson(dsnJson)
+
+// Or convert back to DSN string
+const modifiedDsnString = stringifyDsnJson(dsnJson)
+```
+
+#### Custom Component Processing
+
+```typescript
+import { convertCircuitJsonToDsnJson } from "dsn-converter"
+
+// Create Circuit JSON elements
+const elements = [
+  {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "pad1",
+    pcb_component_id: "R1",
+    shape: "rect",
+    x: 0,
+    y: 0,
+    width: 0.5,
+    height: 0.6,
+    layer: "top"
+  },
+  // Add more elements...
+]
+
+// Convert to DSN format
+const dsnJson = convertCircuitJsonToDsnJson(elements)
+```
+
+### Type Support
+
+The library provides comprehensive TypeScript types:
+
+```typescript
+import type { 
+  DsnPcb,
+  Component,
+  Padstack,
+  Network,
+  Wire
+} from "dsn-converter"
+
+// Use types for type-safe DSN manipulation
+const component: Component = {
+  name: "R1",
+  place: {
+    refdes: "R1",
+    x: 1000,
+    y: 1000,
+    side: "front",
+    rotation: 0
+  }
+}
+```
+
+## Features
+
+- **Complete DSN Support**: Handles all major DSN file components including:
+
+  - Component placement
+  - PCB layers
+  - Traces and wiring
+  - Padstacks and SMT pads
+  - Net definitions
+  - Board boundaries
+
+- **Accurate Conversions**: Maintains precise measurements and positions during conversion
+
+- **Type Safety**: Full TypeScript support with comprehensive type definitions
+
+## Data Structure
+
+### DSN Format
+
+The DSN format is represented as a structured JSON with the following main sections:
+
+- `parser`: Contains file metadata
+- `resolution`: Defines measurement units
+- `structure`: Describes board layers and rules
+- `placement`: Component positions
+- `library`: Component and padstack definitions
+- `network`: Net connections
+- `wiring`: Trace routing
+
+### Circuit JSON
+
+The Circuit JSON format includes:
+
+- PCB traces
+- SMT pads
+- Component definitions
+- Layer information
+- Routing data
+

docs/dsn-converter-readme.md

@@ -0,0 +1,87 @@
+# @tscircuit/pcb-viewer
+
+[![npm version](https://badge.fury.io/js/@tscircuit%2Fpcb-viewer.svg)](https://badge.fury.io/js/@tscircuit%2Fpcb-viewer)
+
+[Examples](https://pcb-viewer.vercel.app/) · [TSCircuit](https://tscircuit.com) · [Open in CodeSandbox](https://codesandbox.io/p/github/tscircuit/pcb-viewer)
+
+Render Printed Circuit Boards w/ React
+
+If you want to render to an image, check out [circuit-to-png](https://github.com/tscircuit/circuit-to-png)
+
+![image](https://github.com/tscircuit/pcb-viewer/assets/1910070/e010f44e-b8c0-4e1d-9d59-1ea66716427f)
+
+## Usage
+
+```bash
+npm install @tscircuit/pcb-viewer
+```
+
+There are two main ways to use the PCBViewer:
+
+### 1. Using Circuit Components
+
+This approach allows you to declaratively define your circuit using React components:
+
+```tsx
+import React from "react"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+
+export default () => {
+  return (
+    <div style={{ backgroundColor: "black" }}>
+      <PCBViewer>
+        <resistor footprint="0805" resistance="10k" />
+        <capacitor footprint="0603" capacitance="100nF" />
+      </PCBViewer>
+    </div>
+  )
+}
+```
+
+### 2. Using Circuit JSON
+
+If you already have circuit JSON data, you can pass it directly:
+
+```tsx
+import React from "react"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+
+const circuitJson = [
+  {
+    type: "pcb_component",
+    pcb_component_id: "R1",
+    center: { x: 0, y: 0 },
+    // ... other component properties
+  },
+  // ... more elements
+]
+
+export default () => {
+  return (
+    <div style={{ backgroundColor: "black" }}>
+      <PCBViewer circuitJson={circuitJson} />
+    </div>
+  )
+}
+```
+
+### Props
+
+The PCBViewer component accepts these props:
+
+- `children`: Circuit components to render
+- `circuitJson`: Circuit JSON elements array (alternative to children)
+- `height`: Height of viewer in pixels (default: 600)
+- `allowEditing`: Enable/disable editing capabilities (default: true)
+- `editEvents`: Array of edit events to apply
+- `onEditEventsChanged`: Callback when edit events change
+- `initialState`: Initial state for the viewer
+
+### Features
+
+- Interactive PCB viewing with pan and zoom
+- Multiple layer support (top, bottom, inner layers)
+- Component placement editing
+- Trace routing
+- DRC (Design Rule Check) visualization
+- Measurement tools