@ssgoi/angular 6.6.6 → 7.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MeurSyphus
+
+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,162 +1,125 @@
 # @ssgoi/angular
 
-Angular bindings for SSGOI that give any Angular 20+ app native-feeling page transitions powered by the `@ssgoi/core` animation engine.
+Angular bindings for SSGOI.
 
-try this: [ssgoi.dev](https://ssgoi.dev)
+[![SSGOI live showcase](https://ssgoi.dev/readme.png)](https://ssgoi.dev)
 
-## AI-Assisted Setup
-
-Using Claude, Cursor, ChatGPT, or another AI assistant? Point it at:
-
-```
-https://ssgoi.dev/llms.txt
-```
-
-It has the full setup guide, every transition, the API, and troubleshooting — everything an agent needs to wire SSGOI into your app.
-
-## Installation
+[Live demos](https://ssgoi.dev) · [Hero, Zoom, Film, and Sheet in motion](https://ssgoi.dev/blog/view-transition-api-limitations)
 
 ```bash
 npm install @ssgoi/angular
-# or
-pnpm add @ssgoi/angular
-# or
-yarn add @ssgoi/angular
 ```
 
-## What You Get
-
-- `Ssgoi` directive (selector: `[ssgoi]`) that bootstraps the core transition context on the client and gracefully no-ops during SSR.
-- `data-ssgoi-transition` route markers discovered automatically inside `[ssgoi]`.
-- Deprecated `SsgoiTransition` directive (selector: `[ssgoiTransition]`) kept for backward compatibility.
-- `injectSsgoi()` helper and `SSGOI_CONTEXT` injection token for retrieving the transition context anywhere in your component tree.
-- Re-exported transition factories under `@ssgoi/angular/view-transitions`.
+Agent setup guide: https://ssgoi.dev/llms.txt
 
-## Quick Start
+## Setup
 
-### 1. Provide the transition context once
+Create one SSGOI root above the router outlet.
 
-```typescript
+```ts
 import { Component, signal } from "@angular/core";
 import { RouterOutlet } from "@angular/router";
-import { Ssgoi, SsgoiConfig } from "@ssgoi/angular";
-import { fade } from "@ssgoi/angular/view-transitions";
+import { Ssgoi, type SsgoiConfig } from "@ssgoi/angular";
+import { drill } from "@ssgoi/angular/view-transitions";
 
 @Component({
   selector: "app-root",
   standalone: true,
   imports: [RouterOutlet, Ssgoi],
   template: `
-    <!-- position: relative + z-index: 0 are required (the outgoing page is cloned with position:absolute) -->
-    <div
+    <main
       ssgoi
-      [config]="ssgoiConfig()"
-      style="position: relative; z-index: 0; min-height: 100vh"
+      [config]="config()"
+      style="position:relative;z-index:0;overflow-x:clip"
     >
       <router-outlet />
-    </div>
+    </main>
   `,
 })
 export class AppComponent {
-  protected readonly ssgoiConfig = signal<SsgoiConfig>({
-    transitions: [fade({ paths: ["/home", "/about"] })],
+  protected readonly config = signal<SsgoiConfig>({
+    transitions: [{ on: "/posts/**", except: "/posts", transition: drill() }],
   });
 }
 ```
 
-### 2. Mark each routed view
+## Route boundary
 
-```typescript
-import { Component } from "@angular/core";
+Mark the root element of each routed component.
 
+```ts
 @Component({
-  selector: "app-home",
+  selector: "app-post",
   standalone: true,
   template: `
-    <section data-ssgoi-transition="/home">
-      <h1>Home Page</h1>
-    </section>
+    <article data-ssgoi-transition="/posts/42">
+      <!-- page -->
+    </article>
   `,
 })
-export class HomeComponent {}
+export class PostComponent {}
 ```
 
-The `data-ssgoi-transition` value should uniquely identify the view (commonly the route path).
-
-## How It Works
-
-- `Ssgoi` wraps `createSggoiTransitionContext` from `@ssgoi/core`, injects it via `SSGOI_CONTEXT`, and observes `data-ssgoi-transition` elements under the host. The directive guards against the server platform so SSR renders stay deterministic.
-- The deprecated `SsgoiTransition` directive still sets `data-ssgoi-transition` and registers the host directly for backward compatibility.
+The id must match the config route patterns.
 
-Because everything is driven by signals, Angular change detection stays minimal and the bundle remains fully tree-shakeable.
+## Config
 
-## API Reference
-
-- `Ssgoi`
-  - `config: SsgoiConfig` (input, optional) – global transition configuration. Uses `{}` as default.
-  - `host: HostAnimation | undefined` (input, optional) – external playback host for debug tooling.
-- `data-ssgoi-transition` – identifier for the target view/container.
-- `SsgoiTransition` is deprecated; use `data-ssgoi-transition` directly.
-- `injectSsgoi(): SsgoiContext` – returns the adapter context. During SSR it falls back to a no-op implementation so you can call it unconditionally.
-
-## Available Transitions
-
-Import view-level factories from `@ssgoi/angular/view-transitions`:
-
-```typescript
-import {
-  fade,
-  drill,
-  slide,
-  scroll,
-  axis,
-  sheet,
-  hero,
-  zoom,
-  strip,
-  blind,
-  film,
-  rotate,
-  jaemin,
-} from "@ssgoi/angular/view-transitions";
-```
-
-- `fade()` - Calm cross-fade. Safe default for unrelated pages
-- `drill()` - iOS-style hierarchical navigation (list → detail)
-- `slide()` - Horizontal push for tabs / sequential flows
-- `scroll()` - Vertical page scroll for onboarding / paginated views
-- `axis()` - Material/Flutter shared-axis swap for sibling/tab routes
-- `sheet()` - Bottom sheet that slides up (modal-like flows)
-- `hero()` - Shared element transition (matching `data-hero-enter-key` / `data-hero-exit-key`)
-- `zoom()` - Card-to-detail expansion (matching `data-zoom-enter-key` / `data-zoom-exit-key`)
-- `strip()` - 3D Y-axis perspective flip
-- `blind()` - Window-blinds wipe reveal
-- `film()` - Cinematic shrink + tile (gallery / lightbox)
-- `rotate()` - Card flip between siblings
-- `jaemin()` - Playful rotated zoom for special moments
-
-Each factory takes the unified config: `{ paths }` (symmetric), `{ enter, exit, type? }` (directional, e.g. `drill`/`sheet`), or `{ paths }` with order deciding direction (`slide`/`scroll`/`axis`).
-
-## Sample Configuration
-
-```typescript
-import { fade, scroll } from "@ssgoi/angular/view-transitions";
+```ts
 import type { SsgoiConfig } from "@ssgoi/angular";
+import { drill, slide, zoom } from "@ssgoi/angular/view-transitions";
 
-export const config: SsgoiConfig = {
+const config: SsgoiConfig = {
   transitions: [
-    fade({ paths: ["/", "/home"] }),
-    scroll({ paths: ["/home", "/about"] }),
+    {
+      on: "/posts/**",
+      except: "/posts",
+      transition: drill(),
+    },
+    {
+      from: "/gallery",
+      to: "/gallery/*",
+      transition: zoom(),
+    },
+    {
+      ordered: ["/tabs/a", "/tabs/b"],
+      transition: slide(),
+    },
   ],
 };
 ```
 
-## License
-
-MIT © MeurSyphus
+- `on`: route family.
+- `from`/`to`: precise pair.
+- `ordered`: directional sequence.
+- Scroll is automatic: `on` and `from`/`to` restore `from` and reset `to`;
+  `ordered` restores both. Override with
+  `preserveScroll: { from: boolean, to: boolean }`.
+- Patterns support exact paths, a `*` path segment, and suffix `**`.
+- Higher `priority` wins before path specificity.
+
+## Effect index
+
+- `fade`: unrelated pages.
+- `drill`: list → detail.
+- `slide`: ordered tabs.
+- `axis`: sibling destinations.
+- `sheet`: modal-like routes.
+- `zoom`: card/image → detail.
+- `hero`: shared elements and page chrome.
+- `scroll`: vertical sequences.
+- `strip`, `film`, `rotate`, `blind`, `jaemin`: expressive transitions.
+
+Options: https://ssgoi.dev/llms.txt#7-transition-index
+
+## API
+
+- `[ssgoi]`: creates the root transition context.
+- `[config]`: accepts `SsgoiConfig`.
+- `[host]`: accepts an optional `HostAnimation`.
+- `data-ssgoi-transition`: marks a route boundary.
+- `injectSsgoi()`: returns the transition context.
+- `[ssgoiTransition]`: deprecated; use the data attribute.
 
-## Links
+## License
 
-- [Documentation](https://ssgoi.dev)
-- [GitHub](https://github.com/meursyphus/ssgoi)
-- [Issues](https://github.com/meursyphus/ssgoi/issues)
+MIT

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@ssgoi/angular",
-  "version": "6.6.6",
+  "version": "7.0.0",
   "description": "Angular bindings for SSGOI - Native app-like page transitions for Angular applications",
   "private": false,
   "type": "module",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@ssgoi/core": "^6.6.6"
+    "@ssgoi/core": "^7.0.0"
   },
   "peerDependencies": {
     "@angular/common": "^20.0.0",