morphico 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Raycho Ivanov
+
+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

@@ -1,3 +1,20 @@
-# Temporary Holding Version
+# morphico
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Morphing line-art icons for the web: digits (and later other icon states) that smoothly change from one to another by interpolating SVG path data. No runtime dependencies.
+
+> **Status:** early development. The API is not available yet. Version 0.0.x only tests the release pipeline.
+
+## Development
+
+Written in TypeScript. Requires Node 24 (it runs the `.ts` tools directly).
+
+```sh
+npm install        # dev tools only: typescript, @types/node
+npm run dev        # preview page at http://localhost:3003
+npm run typecheck
+npm run build      # src/ → dist/
+```
+
+## License
+
+[MIT](LICENSE)

package/dist/morphico.js

@@ -0,0 +1,10 @@
+/*! morphico v0.0.1 | MIT License */
+var morphico = (function () {
+'use strict';
+// index.ts
+// morphico public API. The icon() / text() layers come later; for now only the version is exported.
+/** Package version, e.g. "0.0.1" (tools/build.ts replaces 'dev'). */
+const version = '0.0.1';
+
+return { version };
+})();

package/dist/morphico.mjs

@@ -0,0 +1,7 @@
+/*! morphico v0.0.1 | MIT License */
+// index.ts
+// morphico public API. The icon() / text() layers come later; for now only the version is exported.
+/** Package version, e.g. "0.0.1" (tools/build.ts replaces 'dev'). */
+const version = '0.0.1';
+
+export { version };

package/dist/types/engine.d.ts

@@ -0,0 +1,12 @@
+/** Maps linear progress (0…1) to eased progress. */
+export type Easing = (progress: number) => number;
+export declare const easings: {
+    linear: (progress: number) => number;
+    easeInOutCubic: (progress: number) => number;
+    easeOutBack: (progress: number) => number;
+    easeOutElastic: (progress: number) => number;
+};
+/** Called on every animation frame with the frame time; returns true while it wants more frames. */
+export type FrameCallback = (frameTime: number) => boolean;
+/** Adds a callback to the shared loop. Returns a function that removes it again. */
+export declare const animate: (onFrame: FrameCallback) => (() => void);

package/dist/types/geometry.d.ts

@@ -0,0 +1,30 @@
+import type { CubicSegment, IconSet, PairLayout, PathNumbers, Point, Stroke } from './types.js';
+export declare const line: (fromX: number, fromY: number, toX: number, toY: number) => Stroke;
+/** Angles in degrees. Because y points down, `endAngle > startAngle` draws clockwise on screen. */
+export declare const arc: (centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number) => Stroke;
+export declare const cubic: (startX: number, startY: number, control1X: number, control1Y: number, control2X: number, control2Y: number, endX: number, endY: number) => Stroke;
+export declare const pointOnCircle: (centerX: number, centerY: number, radius: number, angle: number) => Point;
+export declare const segmentCountOf: (path: PathNumbers) => number;
+export declare const toSegments: (path: PathNumbers) => CubicSegment[];
+export declare const fromSegments: (segments: CubicSegment[]) => PathNumbers;
+/** Same picture, different segment order: start a closed loop at another segment and/or draw it backwards. */
+export declare const reorderSegments: (path: PathNumbers, { startSegment, reversed }?: PairLayout) => PathNumbers;
+export declare const interpolate: (from: PathNumbers, to: PathNumbers, progress: number) => PathNumbers;
+/** SVG `d` attribute: `M x y` followed by one `C` per segment. */
+export declare const toPathData: (path: PathNumbers) => string;
+/** Rotates the whole shape around the icon center (12, 12). */
+export declare const rotateAroundCenter: (path: PathNumbers, angle: number) => PathNumbers;
+/**
+ * The part of a stroke between two progress values (0…1) as one cubic segment.
+ * A piece of a line/arc/cubic is exactly a line/arc/cubic, so segment ends can slide along a stroke
+ * without changing how it looks.
+ */
+export declare const strokePiece: (stroke: Stroke, startProgress: number, endProgress: number) => CubicSegment;
+/** Lays out cubic segments along the strokes; see `PairLayout.breakpoints`. */
+export declare const layoutStrokes: (strokes: Stroke[], breakpoints: number[]) => PathNumbers;
+/** Default breakpoints: segments spread over the strokes by length, arcs get at least one segment per 90°. */
+export declare const defaultBreakpoints: (strokes: Stroke[], segmentCount: number) => number[];
+/** Every state of the set laid out with its default breakpoints. */
+export declare const defaultShapes: (iconSet: IconSet) => Record<string, PathNumbers>;
+/** The shape of `state` laid out for morphing to or from `otherState`. */
+export declare const shapeForPair: (iconSet: IconSet, shapes: Record<string, PathNumbers>, state: string, otherState: string) => PathNumbers;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+/** Package version, e.g. "0.0.1" (tools/build.ts replaces 'dev'). */
+export declare const version: string;

package/dist/types/sets/v1.d.ts

@@ -0,0 +1,3 @@
+import type { IconSet } from '../types.js';
+declare const digitsV1: IconSet;
+export default digitsV1;

package/dist/types/sets/v2.d.ts

@@ -0,0 +1,3 @@
+import type { IconSet } from '../types.js';
+declare const digitsV2: IconSet;
+export default digitsV2;

package/dist/types/sets/v3.d.ts

@@ -0,0 +1,3 @@
+import type { IconSet } from '../types.js';
+declare const digitsV3: IconSet;
+export default digitsV3;

package/dist/types/types.d.ts

@@ -0,0 +1,63 @@
+/** A point `[x, y]`. */
+export type Point = [x: number, y: number];
+/** One cubic Bézier segment. */
+export type CubicSegment = [start: Point, control1: Point, control2: Point, end: Point];
+/**
+ * Path data as a flat list of numbers: the start point (x, y), then 6 numbers per cubic segment
+ * (control1, control2, end). Within an icon set every shape has the same segment count,
+ * so any two shapes interpolate number by number.
+ */
+export type PathNumbers = number[];
+export interface LineStroke {
+    kind: 'line';
+    from: Point;
+    to: Point;
+}
+/** Angles in degrees. Because y points down, `endAngle > startAngle` draws clockwise on screen. */
+export interface ArcStroke {
+    kind: 'arc';
+    center: Point;
+    radius: number;
+    startAngle: number;
+    endAngle: number;
+}
+export interface CubicStroke {
+    kind: 'cubic';
+    segment: CubicSegment;
+}
+/** One piece of a drawing: a straight line, a circular arc or a free cubic curve. */
+export type Stroke = LineStroke | ArcStroke | CubicStroke;
+/**
+ * How to lay out a shape for one morph pair. Every option keeps the picture the same and only changes
+ * which part of it each segment draws, so segments pair up better with the other shape.
+ */
+export interface PairLayout {
+    /** Closed loops: start drawing at this segment instead of segment 0. */
+    startSegment?: number;
+    /** Draw in the opposite direction. */
+    reversed?: boolean;
+    /**
+     * `segmentCount + 1` positions along the strokes where segments start/end.
+     * Integer part = stroke index, fraction = position within that stroke.
+     * Two equal neighbours make a zero-length segment that "grows" during the morph.
+     * Rules: a segment never spans two strokes; an arc segment covers at most 90°.
+     */
+    breakpoints?: number[];
+    /** Lay out the breakpoints along `alternativeStrokes[tracing]` instead of the state's own strokes. */
+    tracing?: string;
+    /** Rotate by this many degrees around the icon center (only for shapes that look the same turned). */
+    rotation?: number;
+}
+export interface IconSet {
+    /** Cubic segments per shape. The state that needs the most segments decides it. */
+    segmentCount: number;
+    strokeWidth: number;
+    /** The strokes of each state, as one continuous line in drawing order. */
+    strokes: Record<string, Stroke[]>;
+    /** Alternative tracings: the same picture (with round joins) drawn in a different order. */
+    alternativeStrokes: Record<string, Stroke[]>;
+    /** `pairLayouts[state][otherState]`: how to lay out `state` when morphing to or from `otherState`. */
+    pairLayouts: Record<string, Record<string, PairLayout>>;
+    /** `spins[fromState][toState]`: degrees to rotate around the icon center while morphing. */
+    spins: Record<string, Record<string, number>>;
+}

package/package.json

@@ -1,6 +1,50 @@
 {
   "name": "morphico",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1",
+  "description": "Morphing line-art icons: smooth SVG path transitions between digits and other states. No dependencies.",
+  "license": "MIT",
+  "author": "Raycho Ivanov",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rastiv/morphico.git"
+  },
+  "homepage": "https://github.com/rastiv/morphico#readme",
+  "bugs": {
+    "url": "https://github.com/rastiv/morphico/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/morphico.mjs"
+    }
+  },
+  "module": "./dist/morphico.mjs",
+  "types": "./dist/types/index.d.ts",
+  "jsdelivr": "./dist/morphico.js",
+  "unpkg": "./dist/morphico.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "node tools/serve.ts",
+    "typecheck": "tsc -p tsconfig.json && tsc -p tools/tsconfig.json",
+    "build": "node tools/build.ts",
+    "check": "node tools/check.ts",
+    "verify": "node tools/verify.ts",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+  "keywords": [
+    "icons",
+    "svg",
+    "morph",
+    "animation",
+    "digits",
+    "countdown"
+  ],
+  "devDependencies": {
+    "@types/node": "^24.19.2",
+    "typescript": "^7.0.2"
+  }
+}