folioscope 0.0.2 → 0.0.3

package/README.md

@@ -1,8 +1,9 @@
 # folioscope
 
 **Flip through your prototypes.** `<folioscope-player>` plays the interactive prototype of a
-`.fig` file in the browser, with no account and no design tool: screens, clicks and timed links,
-transitions. `.sketch`, `.xd` and `.penpot` files follow.
+`.fig`, `.sketch` or `.penpot` file in the browser, with no account and no design tool: screens,
+clicks, hovers, overlays, scrolling, transitions. `.xd` files follow. Not a viewer for the design file: a player
+for its clickable prototype.
 
 > Early development: see the [roadmap](https://github.com/baxyz/folioscope/blob/main/PROJECT.md#8-roadmap).
 
@@ -12,7 +13,7 @@ transitions. `.sketch`, `.xd` and `.penpot` files follow.
 // vite.config.ts
 import { folioscope } from "folioscope/vite";
 
-export default { plugins: [folioscope({ include: "designs/*.fig" })] };
+export default { plugins: [folioscope({ include: "designs/*.{fig,sketch}", fonts: "fonts" })] };
 ```
 
 `designs/app.fig` is served as `/folio/app.folio/`: layered images (lossless WebP, or AVIF for

package/dist/index.d.mts

@@ -41,6 +41,33 @@ interface FolioFrame {
     content: Rect;
     fixed?: string[];
   };
+  /** Interactive component instances, whose variants change in place. */
+  components?: FolioComponent[];
+  /** For smart animate: the background (named `""`), then each direct child, by name. */
+  parts?: {
+    name: string;
+    layer: Layer;
+  }[];
+}
+/** An instance switching between variants ("change to"), each a state with its own layer. */
+interface FolioComponent {
+  /** Ids of the instances from the frame down to this one, joined by `;`. */
+  id: string;
+  name: string;
+  /** In the frame's coordinates. */
+  bounds: Rect;
+  /** The variant shown first. */
+  initial: string;
+  fixed?: boolean;
+  states: {
+    variant: string;
+    name: string;
+    /** From the component's top-left corner. */
+    bounds: Rect;
+    /** In the state's coordinates. */
+    hotspots: Hotspot[];
+    layer: Layer;
+  }[];
 }
 interface OverlaySettings {
   position: "center" | "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight" | "manual";
@@ -88,6 +115,12 @@ type Action = {
   type: "navigate";
   to: string;
   transition: Transition;
+} |
+/** Switches the hotspot's interactive component to another of its variants. */
+{
+  type: "changeTo";
+  to: string;
+  transition: Transition;
 } | {
   type: "scrollTo";
   to: string;
@@ -132,6 +165,13 @@ interface Transition {
   } | {
     type: "cubicBezier";
     points: [number, number, number, number];
+  } |
+  /** Lasts as long as the spring takes to settle, whatever `durationMs` says. */
+  {
+    type: "spring";
+    mass: number;
+    stiffness: number;
+    damping: number;
   } | {
     type: "other";
     name: string;
@@ -158,6 +198,8 @@ export declare class FolioscopePlayer extends BaseElement {
   private base;
   private density;
   private shown?;
+  /** The frame `shown` draws, for smart animate. */
+  private shownFrame?;
   private timers;
   private loading;
   private preloadedPage?;
@@ -290,4 +332,4 @@ declare global {
   }
 }
 //#endregion
-export type { Action, Flow, FolioFrame, FolioIndex, FolioPage, Hotspot, Interaction, Layer, OverlaySettings, Point, Rect, SUPPORTED_FOLIO, SUPPORTED_IR, Side, Step, Transition, Trigger };
+export type { Action, Flow, FolioComponent, FolioFrame, FolioIndex, FolioPage, Hotspot, Interaction, Layer, OverlaySettings, Point, Rect, SUPPORTED_FOLIO, SUPPORTED_IR, Side, Step, Transition, Trigger };