elements-new-package
Creating a New Elements Package
Use scripts/new-package to scaffold a new @editframe/* workspace package. It creates all required files and registers the package in tsconfig.json — the single source of truth for path aliases.
Quick Start
# From the elements/ directory (or via the runner)
./scripts/new-package <name>
# e.g. ./scripts/new-package captions
# Then install to symlink the workspace package
./scripts/npm install
What the Script Does
Creates packages/<name>/ with:
src/index.ts— empty export stubpackage.json— correct version, ESM exports,publishConfig.access: "public"tsconfig.json— extends root configtsdown.config.ts— minimal build config
Inserts a path entry into elements/tsconfig.json:
"@editframe/<name>": ["./packages/<name>/src/index.ts"]
Both vitest configs (vitest.config.ts, vitest.config.browser.ts) derive their aliases from tsconfig.json automatically via vitest.aliases.ts — no manual updates needed there.
Publishing a New Package to npm
CI publishes via OIDC trusted publishing (no stored token). OIDC requires the package to exist on npm before trusted publishing can be configured, so the first publish is manual:
# One-time, run locally while logged in to npm
npm publish --access public --workspace @editframe/<name>
After that first publish:
- Go to npmjs.com →
@editframe/<name>→ Settings → Trusted Publisher - Add GitHub Actions: repo
editframe/elements, workflowrelease.yaml, environmentnpm-publish
All subsequent releases publish automatically via CI.
Path Alias Registration
tsconfig.json is the only file that needs a new entry. The script adds it automatically. Sub-path exports (e.g. @editframe/foo/node) must be added manually to tsconfig.json if needed — the base alias handles sub-path imports naturally via Vite prefix replacement, so explicit entries are only needed for files that don't follow the src/<name>.ts pattern.
Adding Dependencies on Other Workspace Packages
Add the sibling package to dependencies in the new package's package.json using the current workspace version (check the root package.json). Run ./scripts/npm install to re-symlink. Run ./scripts/node scripts/deps.js update-dependencies after a version bump to keep all cross-package pins in sync.
More from editframe/skills
video-analysis
Analyze video files using ffprobe, mp4dump, and jq. Use when investigating video samples, keyframes, MP4 box structure, codec info, packet timing, or debugging video playback issues.
74visual-thinking
Create visual analogies by mapping relational structure from familiar domains onto unfamiliar concepts using spatial relationships to make abstract patterns concrete. Covers static diagrams AND animated video storytelling (camera choreography, race comparisons, pacing). Use when explaining complex concepts, creating analogies, designing diagrams, creating explainer animations, or revealing system structure.
70css-animations
CSS animation fill-mode requirements for Editframe timeline system. Use when creating CSS animations, debugging flashing/flickering issues, or when user mentions animation problems, fade effects, slide effects, or sequential animations.
68threejs-compositions
Integrate Three.js 3D scenes into Editframe compositions via addFrameTask. Scenes are pure functions of time, fully scrubable, and renderable to MP4. Use when creating 3D animations, WebGL content in compositions, or integrating Three.js with Editframe's timeline system.
65editor-gui
Build video editing interfaces using Editframe's GUI web components. Assemble timeline, scrubber, filmstrip, preview, and playback controls like lego bricks. Use when creating video editors, editing tools, or when user mentions timeline, scrubber, preview, playback controls, trim handles, or wants to build editing UIs.
63ef-agent-panel
Workbench agent panel system — ef-edit CustomEvent pipeline, registry roll-up, selector grouping, and element property schema. Use when adding new GUI edit capture points, expanding the inspector schema, or continuing development of the EFAgentPanel feature.
60