procreateParse

PSD inspector: parses Photoshop files into a layer inventory (every attribute we can glean — bounds, opacity, blend modes, masks, text content & fonts, effects), stores them in SQLite, and presents them as a zine/poster-styled dashboard. SvelteKit + ElysiaJS with end-to-end type safety via Eden Treaty, Drizzle ORM, Tailwind. Runs on bun.

PSD pipeline

bun run psd:parse <file.psd> --out .artifacts/<name>.json   # parse → versioned JSON artifact
bun run psd:thumbs <file.psd>                               # render layer thumbnails + composite → static/psd/<slug>/
bun run psd:ingest .artifacts/<name>.json                   # upsert into sqlite (idempotent by slug)

Then browse:

• /psd — ingested documents (zine table of contents)
• /psd/<slug> — the dashboard: masthead stats, layer tree, per-layer detail via ?layer=<n>
• /styleguide — the zine design system, every component in every state
• /export/<slug> — pure HTML+CSS rendition (prerendered, csr=false)

Static export (→ identikey-website)

bun run export:static      # build + assemble self-contained bundle into dist-export/<slug>/
bun run export:identikey   # same, but copies into ~/work/IdentiKey/identikey-website/static/psd/<slug>/

The bundle is a single index.html (CSS inlined, zero <script> tags, relative ./assets/ refs) plus thumbnails — portable to any static host or SvelteKit static/ dir at any path depth. The script self-verifies (no _app refs, all assets present) and is idempotent.

Architecture

The backend is a single Elysia app mounted into SvelteKit's router; the frontend consumes it through a fully typed Eden Treaty client — request/response types flow from the server schemas to the client with no codegen.

scripts/
  parse-psd.ts                  # bun CLI: psd → JSON artifact
  render-thumbs.ts              # bun CLI: psd → layer/composite PNGs
  ingest-psd.ts                 # bun CLI: artifact → sqlite (bun:sqlite)
  export-static.ts              # build + assemble portable static bundle
  make-fixture-psd.ts           # regenerates the tiny test fixture .psd
src/
  lib/
    api.ts                      # Eden Treaty client (createApi / api)
    ui/                         # zine design system (Masthead, TornCard, Stamp, …)
    server/
      api/
        index.ts                # Elysia app (prefix /api), exports App type
        routes/{tasks,psd}.ts   # resource plugins (typebox-validated)
        *.spec.ts               # unit tests via treaty(app), no HTTP server
      db/                       # drizzle client + schema (task, psd_document, psd_layer)
      psd/                      # extract.ts: ag-psd → typed LayerInfo[] (+ fixture & spec)
  routes/
    api/[...slugs]/+server.ts   # mounts the Elysia app (fallback → app.handle)
    psd/                        # dashboard routes (+ colocated *.e2e.ts smoke specs)
    export/[slug]/              # prerendered static rendition (csr=false)
    styleguide/                 # design-system showcase
drizzle/                        # SQL migrations (committed)
docs/                           # design-direction.md, testing.md

Every UI route ships a colocated *.e2e.ts playwright smoke spec (page loads, key landmarks, zero console errors, state variants) — see docs/testing.md.

Adding an endpoint: create a plugin in src/lib/server/api/routes/, .use() it in src/lib/server/api/index.ts, and the typed client picks it up automatically.

Developing

bun install
bun run db:migrate   # apply migrations to local.db (DATABASE_URL in .env)
bun run dev

Database

Migrations only — drizzle-kit push is intentionally not wired up.

bun run db:generate  # after editing src/lib/server/db/schema.ts
bun run db:migrate
bun run db:studio

Testing & quality

bun run test:unit    # vitest (client browser project + server project)
bun run test:e2e     # playwright
bun run check        # svelte-check
bun run lint         # prettier + eslint

Building

bun run build        # adapter-node
bun run preview