@toonstrip/element 0.1.0 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Daniel Kim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+# @toonstrip/element
+
+`<comic-strip>` — a zero-framework-dependency custom element that renders a
+`ComicStripDocument` (from `@toonstrip/schema`) as a live, responsive strip
+of `<canvas>` panels, wrapping `@toonstrip/core`. Works in any framework, or
+none.
+
+Part of [toonstrip](https://github.com/dkdev24/toonstrip), a
+framework-embeddable comic-strip renderer. Using Astro? See
+[`@toonstrip/astro`](https://www.npmjs.com/package/@toonstrip/astro) for a
+ready-made `<ComicStrip>` component instead.
+
+## Install
+
+```
+npm install @toonstrip/element
+```
+
+## Usage
+
+```html
+<comic-strip id="strip"></comic-strip>
+
+<script type="module">
+  import "@toonstrip/element";
+
+  const strip = document.getElementById("strip");
+  strip.packs = ["/packs/comic-chat/"]; // one or more asset-pack base URLs
+  strip.document = {
+    version: 1,
+    panels: [
+      {
+        backdrop: "pastoral",
+        camera: "establishing",
+        bodies: [{ character: "dan", emotion: { angle: 0, intensity: 0.6 } }],
+        speakers: [{ speaker: "caption", balloon: "caption", text: "A field outside town." }],
+      },
+    ],
+  };
+</script>
+```
+
+- `.packs` — array of asset-pack **base URLs**. Each must serve a
+  `pack.json` plus the `characters/`/`backdrops/` files it declares (fetched
+  over HTTP, not read from disk). Registering more than one pack that
+  declares the same character/backdrop id throws.
+- `.document` — a `ComicStripDocument`, validated via `@toonstrip/schema` at
+  the boundary.
+- `src="..."` attribute is also accepted as a convenience for fetching the
+  document JSON from a URL instead of setting `.document` directly.
+
+## Behavior
+
+- One `<canvas>` per panel, laid out via `@toonstrip/core`'s `layoutStrip`
+  (3 columns wide, 2 mid-width, 1 narrow) and relaid live on
+  `ResizeObserver`.
+- `devicePixelRatio`-aware backing store; `IntersectionObserver`-gated
+  painting (a panel scrolled off-screen isn't redrawn until visible again).
+- Shadow DOM style isolation; each panel carries `role="img"` and a
+  generated `aria-label` describing its camera shot, room, and dialogue.
+- Pose selection is frozen once per panel in document order, so a resize
+  repaint reproduces the same figures rather than re-rolling them.
+
+## Asset packs
+
+Any `@toonstrip/pack-*` package (e.g.
+[`@toonstrip/pack-comic-chat`](https://www.npmjs.com/package/@toonstrip/pack-comic-chat))
+works, served as static files at the URL you pass to `.packs`. See
+[`docs/packs.md`](https://github.com/dkdev24/toonstrip/blob/main/docs/packs.md)
+in the repo for the pack contract and how to build your own.
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@toonstrip/element",
-  "version": "0.1.0",
+  "version": "0.1.2",
+  "description": "<comic-strip>, a zero-framework-deps custom element for embedding toonstrip comic strips.",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,15 +9,9 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "test": "vitest run",
-    "lint": "tsc -p tsconfig.json --noEmit",
-    "verify:demo": "node scripts/verify-demo.mjs"
-  },
   "dependencies": {
-    "@toonstrip/core": "workspace:*",
-    "@toonstrip/schema": "workspace:*"
+    "@toonstrip/schema": "0.1.1",
+    "@toonstrip/core": "0.1.2"
   },
   "devDependencies": {
     "typescript": "^5.6.3",
@@ -27,5 +22,24 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "keywords": [
+    "toonstrip",
+    "comic",
+    "custom-element",
+    "web-components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dkdev24/toonstrip.git",
+    "directory": "packages/element"
+  },
+  "homepage": "https://github.com/dkdev24/toonstrip#readme",
+  "bugs": "https://github.com/dkdev24/toonstrip/issues",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "vitest run",
+    "lint": "tsc -p tsconfig.json --noEmit",
+    "verify:demo": "node scripts/verify-demo.mjs"
   }
-}
+}