@bloomscorp/blooms-ai-embed 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+All notable changes to `@bloomscorp/blooms-ai-embed`.
+
+## 0.1.0
+
+First release.
+
+- Ships the prebuilt blooms.ai element bundle (`blooms-embed.js`) and its shared stylesheet
+  (`blooms-embed.css`) as an npm package, so hosts — Electron in particular — can bundle the
+  components locally instead of loading remote code into a renderer, and work offline.
+- Importing the package defines the custom elements (`<blooms-login>`) as a side effect and
+  exports the typed `BloomsEmbed` SDK: `configure`, `mode`, `manifest`, `login`, `session`,
+  `resume`, `can`, `logout`, `on`.
+- Hand-written TypeScript declarations for the whole public surface, including
+  `<blooms-login>` in `HTMLElementTagNameMap` and `BloomsEmbed` on `Window`.
+- Importing outside a browser throws an explanatory error naming the likely cause (SSR, or the
+  Electron main process instead of the renderer) instead of failing on a missing `HTMLElement`.
+- Integrator documentation: quick start, API reference, events and error codes, theming,
+  framework notes (plain HTML, React 19, React <= 18 wrapper, Angular), and Electron setup.

package/README.md

@@ -0,0 +1,456 @@
+# `@bloomscorp/blooms-ai-embed`
+
+The blooms.ai embeddable UI, as a prebuilt npm package: import it and you get blooms.ai
+components as custom elements in your own dashboard, plus a small JS SDK for sign-in and
+session state.
+
+It is the same bundle blooms.ai serves from its own domain, published to npm so you can ship
+it inside your app. That matters for **Electron** — loading remote code into a renderer is
+against Electron's security guidance — and for anything that has to work offline or behind a
+locked-down CSP.
+
+```
+npm install @bloomscorp/blooms-ai-embed
+```
+
+Requires a browser (or an Electron renderer). Node >= 18 to install. No runtime dependencies.
+
+---
+
+## The two credentials
+
+A **project embed token** (`blm_embed_…`) identifies *your integration*. It is publishable —
+it ships in your frontend — and on its own it grants nothing: no data, no project access, not
+even a directory of users. It is only accepted from the web origins a blooms.ai admin has
+registered on it.
+
+A **user session** is what actually authorizes data. Each of your users signs in with their
+own blooms.ai account, and the server returns only what that account is already allowed to see
+in that project, narrowed further to the features enabled on your token. No session, no data.
+
+> Ask your blooms.ai contact to register every origin you will load from (e.g.
+> `https://app.example.com`, `http://localhost:5173`, `app://your-desktop-app`). An
+> unregistered origin fails CORS, which browsers report to JavaScript as a generic network
+> error — the SDK rewrites that into an explicit message, but the fix is always "register the
+> origin".
+
+---
+
+## Quick start
+
+```html
+<script type="module">
+  import { BloomsEmbed } from '@bloomscorp/blooms-ai-embed';
+
+  BloomsEmbed.configure({
+    token: 'blm_embed_9f2c…',
+    apiBase: 'https://api.blooms.ai',
+  });
+
+  BloomsEmbed.on('session', event => {
+    console.log(event.session ? `signed in as ${event.session.user.email}` : 'signed out');
+  });
+</script>
+
+<blooms-login></blooms-login>
+```
+
+That is the whole integration. Importing the package defines the elements and installs the SDK;
+`<blooms-login>` renders the sign-in form, remembers the session across reloads, and revalidates
+it on the next load.
+
+Three things worth knowing:
+
+- **`configure()` once, early.** Elements placed in your HTML upgrade the moment the package
+  evaluates, which is before your `configure()` call runs. They wait for it rather than failing,
+  showing a skeleton meanwhile — so a slow `configure()` is a slow first paint, not an error.
+- **`apiBase` is optional** when you load the bundle from blooms.ai, because it defaults to the
+  bundle's own origin. When you install from npm the bundle's origin is *your* app, so **pass
+  `apiBase` explicitly**.
+- **Place elements unconditionally.** Feature elements render a sign-in prompt until a session
+  exists; you do not have to gate them yourself.
+
+---
+
+## `BloomsEmbed` API
+
+| Member | Signature | Notes |
+|---|---|---|
+| `version` | `string` | Bundle version. |
+| `configure` | `(config: BloomsEmbedConfig) => void` | Call first. Throws on a missing token or a token that is not `blm_embed_…`. |
+| `mode` | `() => 'element' \| 'iframe' \| null` | The resolved rendering mode; `null` before `configure()`. |
+| `manifest` | `() => Promise<EmbedManifest>` | Pre-login bootstrap: project name, enabled features, theme, branding flag, session TTL. |
+| `login` | `({ email, password }) => Promise<EmbedSessionState>` | Programmatic alternative to `<blooms-login>`, for hosts with their own form. |
+| `session` | `() => EmbedSessionState \| null` | The current session, restored from storage by `configure()`. Synchronous. |
+| `resume` | `() => Promise<EmbedSessionState \| null>` | Revalidates a restored session server-side and re-reads permissions. `null` if it is no longer good. |
+| `can` | `(featureKey: string) => boolean` | Local check against the session's `grantedKeys`. Use it for UI, never as your only gate — the server re-checks every request. |
+| `logout` | `() => Promise<void>` | Revokes the session server-side and clears storage. |
+| `on` | `(type, handler) => () => void` | Subscribe; returns an unsubscribe function. `type` is `'session'`, `'error'`, `'navigate'` or `'all'`. |
+
+### `configure()` options
+
+| Option | Type | Default | Notes |
+|---|---|---|---|
+| `token` | `string` | — | Required. `blm_embed_…`. Never put a secret API key (`blm_live_…`) in a browser. |
+| `apiBase` | `string` | the bundle's origin | Pass it explicitly when installing from npm. |
+| `storage` | `'local' \| 'session' \| 'memory'` | `'local'` | `'local'` survives reloads; `'memory'` keeps nothing on disk. Every storage access is already guarded, so private windows and blocked site data degrade to memory rather than throwing. |
+| `mode` | `'auto' \| 'element' \| 'iframe'` | `'auto'` | See [Rendering modes](#rendering-modes). |
+| `theme` | `Record<string, string>` | `{}` | CSS custom properties, applied to each element's shadow root. Only `--…` names are accepted. |
+
+### Session shape
+
+```ts
+{
+  token: string;          // access token — the elements send it for you
+  refreshToken: string;
+  expiresAt: number;      // epoch ms
+  user:    { id, name, email, avatar: string | null };
+  project: { id, name };
+  grantedKeys: string[];  // feature keys, already narrowed to your token's ceiling
+  isProjectOwner: boolean;
+}
+```
+
+Refresh is automatic: the SDK refreshes stale access tokens and retries a 401 once, and
+concurrent calls share a single in-flight refresh. You never need to touch `refreshToken`.
+
+---
+
+## Events
+
+```js
+const off = BloomsEmbed.on('all', event => { /* … */ });
+off();   // unsubscribe
+```
+
+| Event | Payload | When |
+|---|---|---|
+| `session` | `{ type, session: EmbedSessionState \| null, mode }` | Sign-in, refresh, sign-out, expiry. `session: null` means signed out — show `<blooms-login>` again. |
+| `error` | `{ type, code, message, status? }` | Any surfaced failure. Branch on `code`, not on `message`. |
+| `navigate` | `{ type, feature, view, params }` | A component moved between its own views. Ignore it, or mirror it in your own URL. |
+
+`<blooms-login>` also emits DOM events, so a host that never touches the SDK object still works:
+`bloomssession` (`event.detail` is the session or `null`) and `bloomserror` (`event.detail` is the
+error event above).
+
+Codes you should actually handle:
+
+| Code | What to do |
+|---|---|
+| `EMBED_CREDENTIALS_INVALID` | Nothing — the login element shows it. |
+| `EMBED_NO_PROJECT_ACCESS` | The account is valid but has no access to this project. Point the user at whoever administers their blooms.ai access. |
+| `EMBED_ORIGIN_REJECTED` | Your origin is not registered on the token. Contact blooms.ai. |
+| `EMBED_TOKEN_REVOKED` / `EMBED_PROJECT_INACTIVE` | Hide the integration; retrying will not help. |
+| `EMBED_SESSION_EXPIRED` / `EMBED_SESSION_REVOKED` | Show sign-in again. |
+| `EMBED_RATE_LIMITED` | Back off; `Retry-After` is honoured internally for requests. |
+| `EMBED_FEATURE_DISABLED` | The feature is not enabled on your integration. |
+| `EMBED_NETWORK` | Unreachable API base — very often an unregistered origin (see above). |
+
+---
+
+## `<blooms-login>`
+
+```html
+<blooms-login heading="Sign in to Acme Insights"></blooms-login>
+```
+
+| Property | Attribute | Type | Purpose |
+|---|---|---|---|
+| `heading` | `heading` | `string` | Overrides the heading copy. |
+| `subheading` | `subheading` | `string` | Overrides the default "Continue to *project*". |
+| `compact` | `compact` | `boolean` | Drops the card chrome, for dropping into a panel you already styled. |
+
+Attributes arrive as strings, so `compact="false"` is truthy. For booleans set the property
+(`el.compact = true`) or leave the attribute off entirely.
+
+The element handles its own states: loading skeleton, signed-out form, signed-in summary, and
+distinct messages for a wrong password, an account without access to the project, a deactivated
+or banned account, and rate limiting.
+
+Google sign-in is not offered. Accounts created with Google must set a password in the blooms.ai
+portal before they can use this form.
+
+---
+
+## Styles and theming
+
+`<blooms-login>` is fully self-styled: it renders correctly with no stylesheet of yours and no
+extra request. Every element uses shadow DOM, so your CSS cannot reach in and ours cannot leak
+out.
+
+Feature components additionally use the shared stylesheet `blooms-embed.css`. At runtime the
+bundle fetches it from beside itself — `<the bundle's own directory>/blooms-embed.css`, which is
+the CDN in production. This package ships an identical
+copy so you can serve it from your own app instead — required if you must work offline, or if
+your CSP will not allow the fetch:
+
+```js
+import '@bloomscorp/blooms-ai-embed/blooms-embed.css';   // if your bundler handles CSS imports
+```
+
+```html
+<!-- or copy it out of node_modules and serve it yourself -->
+<link rel="stylesheet" href="/assets/blooms-embed.css" />
+```
+
+Theme with CSS custom properties — either through `configure({ theme })` or on the element itself.
+These are read with fallbacks, so set only what you care about:
+
+| Property | Default |
+|---|---|
+| `--brand-primary` | `#5b3df6` (the accent: buttons, focus rings, links) |
+| `--color-card-bg` | `#ffffff` light / `#1a1825` dark |
+| `--color-text` | `#14121f` light / `#f4f3f8` dark |
+| `--color-text-muted` | `#6b6880` light / `#a09db4` dark |
+| `--color-border` | `#e7e5ee` light / `#2e2b3d` dark |
+| `--radius-lg` | `16px` |
+| `--shadow-md` | `0 8px 28px rgba(20, 18, 31, .10)` |
+| `--font-sans` | system UI stack |
+
+```js
+BloomsEmbed.configure({
+  token: 'blm_embed_…',
+  apiBase: 'https://api.blooms.ai',
+  theme: { '--brand-primary': '#0f766e', '--radius-lg': '10px' },
+});
+```
+
+Dark mode follows the host's `prefers-color-scheme` unless you set the properties explicitly.
+Your blooms.ai admin can also set a default theme on the token; `configure({ theme })` wins over it.
+
+---
+
+## Framework notes
+
+### Plain HTML / Vue / Svelte / Solid
+
+Nothing special. Import the package once at startup and use the tags.
+
+### React 19+
+
+Works natively — React 19 sets unknown props as *properties* on custom elements, so object and
+boolean props arrive intact. For events, subscribe through the SDK (the same code works in every
+React version):
+
+```jsx
+import { useEffect } from 'react';
+import { BloomsEmbed } from '@bloomscorp/blooms-ai-embed';
+
+BloomsEmbed.configure({ token: 'blm_embed_…', apiBase: 'https://api.blooms.ai' });
+
+export function Login({ onSession }) {
+  useEffect(() => BloomsEmbed.on('session', e => onSession(e.session)), [onSession]);
+  return <blooms-login heading="Sign in" />;
+}
+```
+
+### React <= 18
+
+React 17/18 write every JSX prop as an **attribute** (strings only) and do not attach listeners
+for lowercase custom events. Wrap the element once — properties via a ref, events via
+`addEventListener`:
+
+```jsx
+import { useEffect, useRef } from 'react';
+import '@bloomscorp/blooms-ai-embed';
+
+export function BloomsLogin({ heading, subheading, compact = false, onSession, onError }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.heading = heading ?? '';        // properties, not attributes
+    el.subheading = subheading ?? '';
+    el.compact = compact;
+  }, [heading, subheading, compact]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const session = e => onSession?.(e.detail);
+    const error = e => onError?.(e.detail);
+    el.addEventListener('bloomssession', session);
+    el.addEventListener('bloomserror', error);
+    return () => {
+      el.removeEventListener('bloomssession', session);
+      el.removeEventListener('bloomserror', error);
+    };
+  }, [onSession, onError]);
+
+  return <blooms-login ref={ref} />;
+}
+```
+
+### Angular host
+
+Add `CUSTOM_ELEMENTS_SCHEMA` to the component or module that uses the tags, or Angular's
+compiler rejects the unknown element and its properties:
+
+```ts
+@Component({
+  selector: 'app-insights',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<blooms-login [compact]="true" (bloomssession)="onSession($event)"></blooms-login>`,
+})
+export class InsightsComponent {}
+```
+
+The embed bundle is zoneless and boots its own Angular context, so it does not interfere with
+your app's zone, router or DI — but include it **once** per page. Loading it twice (say, the npm
+package plus a `<script>` tag) is detected and the second copy yields with a console warning,
+which is a warning you should fix rather than live with.
+
+---
+
+## Electron
+
+Element mode works in an Electron renderer as long as the renderer has a real, sendable origin.
+Get a `clientType: 'desktop'` token from blooms.ai and register that origin on it.
+
+**Install this package and bundle it.** Do not load the bundle over `<script src="https://…">`
+into a renderer: remote code in a renderer is exactly what Electron's security checklist tells
+you to avoid, and a bundled copy also works offline.
+
+**Custom scheme (`app://`) — recommended.** Register the scheme as privileged before any window
+loads, in the main process:
+
+```js
+const { app, protocol, BrowserWindow } = require('electron');
+
+protocol.registerSchemesAsPrivileged([{
+  scheme: 'app',
+  privileges: { standard: true, secure: true, corsEnabled: true, supportFetchAPI: true },
+}]);
+```
+
+Without `standard` + `secure` the renderer has an opaque origin, `fetch` is not available to it,
+and the API will never authorize it. Then ask blooms.ai to register `app://your-app-name` on the
+token.
+
+**`http://localhost` renderers** work too — register the exact origin including the port.
+
+**Never set `webSecurity: false`.** It is the usual "fix" for this class of problem and it
+disables the protections that make embedding safe at all. If requests are being refused, the
+cause is an unregistered origin or a missing privileged-scheme registration, not web security.
+
+**CSP.** Your renderer's CSP must allow calls to the API and the loading of the stylesheet:
+
+```
+default-src 'self' app:;
+connect-src 'self' https://api.blooms.ai;
+style-src 'self' 'unsafe-inline';
+img-src 'self' data: https:;
+```
+
+`connect-src` must name your `apiBase` exactly. `style-src 'unsafe-inline'` is needed because the
+components inject their styles into shadow roots; if your policy forbids it, serve
+`blooms-embed.css` from your own app and use a nonce-free `<link>` for it.
+
+**`file://` renderers cannot use element mode.** A `file://` page has an opaque origin, so the
+server has nothing to authorize, and the SDK falls back to the iframe automatically. That path
+needs `allowFraming` and `allowOpaqueAncestor` set on your token by a blooms.ai admin — a
+deliberate opt-in, because it means the frame cannot restrict who embeds it. Prefer a custom
+scheme or `http://localhost` and keep element mode.
+
+---
+
+## Rendering modes
+
+`configure({ mode: 'auto' })` is the default and picks:
+
+| Situation | Mode |
+|---|---|
+| A normal page on a real origin (`https://…`, `http://localhost`, privileged `app://`) | `element` |
+| `file://`, an opaque origin, or no `customElements` | `iframe` |
+
+An explicit `mode` always wins. The resolved mode is reported on every `session` event and by
+`BloomsEmbed.mode()`, so you can log which path a given install got. Both modes run the same
+compiled components; the iframe exists so hosts that cannot present a registrable origin still
+work.
+
+---
+
+## TypeScript
+
+Types ship with the package — no `@types` install. The declarations also register
+`<blooms-login>` in `HTMLElementTagNameMap`, so `document.querySelector('blooms-login')` is typed,
+and add `BloomsEmbed` to `Window`.
+
+```ts
+import { BloomsEmbed, type EmbedSessionState } from '@bloomscorp/blooms-ai-embed';
+
+BloomsEmbed.configure({ token: 'blm_embed_…', apiBase: 'https://api.blooms.ai' });
+
+const session: EmbedSessionState | null = await BloomsEmbed.resume();
+if (session && BloomsEmbed.can('analytics')) { /* … */ }
+```
+
+Exported types: `BloomsEmbedConfig`, `ResolvedEmbedConfig`, `EmbedMode`, `EmbedModeSetting`,
+`EmbedStorage`, `EmbedUser`, `EmbedProject`, `EmbedSessionState`, `EmbedEvent` (plus
+`EmbedSessionEvent`, `EmbedErrorEvent`, `EmbedNavigateEvent`), `EmbedManifest`, `BloomsEmbedSdk`,
+`BloomsLoginElement`.
+
+---
+
+## Server-side rendering
+
+The package touches the DOM as it loads, so importing it on a server throws a deliberate,
+explanatory error rather than a confusing `ReferenceError`. Import it lazily on the client:
+
+```js
+useEffect(() => { import('@bloomscorp/blooms-ai-embed').then(({ BloomsEmbed }) => BloomsEmbed.configure({ /* … */ })); }, []);
+```
+
+In Electron, that also means: import it in the **renderer**, never in the main process.
+
+---
+
+## Security notes worth reading once
+
+- The embed token is publishable, but it is not a secret to be careless with: it is what ties
+  usage back to your integration, and it is revocable. Secret API keys (`blm_live_…`) must never
+  reach a browser.
+- Your users type blooms.ai credentials into a page you control. Shadow DOM is encapsulation, not
+  a security boundary — a compromised host page can read them. This is why embed tokens are
+  issued by blooms.ai admins to partners under contract rather than self-service.
+- `BloomsEmbed.can()` is a UI convenience. The server re-authorizes every single request against
+  the user's live permissions, so a stale client-side `true` gets you a 403, not data.
+- Every sign-in, refusal, refresh and feature action is logged against your integration and
+  visible to blooms.ai admins and to the project's owner.
+
+---
+
+## Support
+
+Questions, origin registration, feature enablement and token rotation all go through your
+blooms.ai contact. Include your project name and the integration name from the token.
+
+## Multiple projects
+
+An integration can be scoped to several projects. The user signs in **once** and
+switching is instant — no round trip, no re-authentication.
+
+```js
+const projects = BloomsEmbed.projects();   // [{ id, name, grantedKeys, isOwner }, …]
+BloomsEmbed.setProject(projects[1].id);    // returns false if not permitted
+BloomsEmbed.project();                     // the active one
+```
+
+Grants differ per project, so ask per project:
+
+```js
+BloomsEmbed.can('keywords');               // the ACTIVE project
+BloomsEmbed.can('keywords', someOtherId);  // a specific one
+```
+
+`can()` returns `false` for a project the session cannot act on — it does not
+fall back to the active project's permissions.
+
+`setProject()` emits a `session` event, so a listener added with
+`BloomsEmbed.on('session', …)` re-renders on a switch without a separate
+subscription.
+
+A single-project integration reports one entry, and every field you already use
+keeps its meaning — it describes the active project.

package/dist/blooms-embed.css

@@ -0,0 +1 @@
+@charset "UTF-8";@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecg.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDD4Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--color-primary-soft: #E3D8F1;--color-secondary: #DABECA;--color-accent: #E84855;--color-accent-soft: #f5c5c9;--color-text: #5D5F71;--color-text-muted: #9395a5;--color-bg: #f7f5fb;--color-card-bg: #FFFFFF;--color-sidebar-bg: #FFFFFF;--color-rail-bg: #f3f0f8;--color-border: #ede9f6;--color-hover: #f5f2fb;--font-sans: "Poppins", system-ui, -apple-system, sans-serif;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 4px rgba(0, 0, 0, .06);--shadow-md: 0 4px 16px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .1);--z-agent-button: 9000;--z-agent-widget: 9100;--z-agent-menu: 9200;--z-agent-banner: 9300}@keyframes agent-halo-spin{to{transform:rotate(360deg)}}@keyframes agent-halo-pulse{0%,to{opacity:.8}50%{opacity:1}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--font-sans);font-size:14px;color:var(--color-text);background-color:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bui-tooltip{position:fixed;z-index:100000;max-width:260px;padding:7px 11px;border-radius:12px;background:#fff;color:#1d1d1f;border:1px solid rgba(0,0,0,.06);box-shadow:0 8px 26px #00000029,0 2px 6px #0000001a;font-family:var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);font-size:12.5px;font-weight:500;line-height:1.45;letter-spacing:.01em;text-align:left;white-space:normal;word-break:break-word;pointer-events:none;opacity:0;transform:scale(.92);transform-origin:center;transition:opacity .13s ease,transform .14s cubic-bezier(.34,1.56,.64,1)}.bui-tooltip--in{opacity:1;transform:scale(1)}.bui-tooltip__tail{position:absolute;z-index:-1;width:9px;height:9px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:2px;transform:rotate(45deg)}.bui-tooltip__tail.is-bottom{bottom:-5px}.bui-tooltip__tail.is-top{top:-5px}.bui-tooltip__tail.is-right{right:-5px}.bui-tooltip__tail.is-left{left:-5px}@media (prefers-reduced-motion: reduce){.bui-tooltip{transition:opacity .1s ease;transform:none}.bui-tooltip--in{transform:none}}h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:700;line-height:1.3;color:var(--color-text)}a{color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}p{line-height:1.7}.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s;text-decoration:none;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn-primary:hover{background:#d13d4a;border-color:#d13d4a;box-shadow:0 2px 8px #e848554d;text-decoration:none}.btn-outline{background:transparent;color:var(--color-text);border-color:var(--color-border)}.btn-outline:hover{background:var(--color-hover);border-color:#d5d0e4;text-decoration:none}.btn-ghost{background:transparent;color:var(--color-text-muted);border-color:transparent}.btn-ghost:hover{background:var(--color-hover);color:var(--color-text)}.btn-sm{padding:6px 12px;font-size:12px;border-radius:var(--radius-sm)}.btn-lg{padding:12px 24px;font-size:15px;border-radius:12px}input,textarea,select{font-family:var(--font-sans);font-size:14px;color:var(--color-text)}.text-muted{color:var(--color-text-muted)}.text-accent{color:var(--color-accent)}.text-sm{font-size:12px}.text-xs{font-size:11px}.font-semibold{font-weight:600}.font-bold{font-weight:700}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-4{gap:16px}.w-full{width:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-secondary)}router-outlet+*{animation:fadeInUp .2s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.pane-section{display:flex;flex-direction:column;gap:24px;max-width:520px}.pane-hd{display:flex;flex-direction:column;gap:4px;padding-bottom:20px;border-bottom:1px solid var(--color-border)}.pane-hd--row{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px}.pane-title{font-size:15px;font-weight:700;color:var(--color-text);margin:0}.pane-desc{font-size:12px;color:var(--color-text-muted);margin:0;line-height:1.5}.pane-form{display:flex;flex-direction:column;gap:18px}.pane-success{font-size:12px;font-weight:500;color:#065f46;background:#d1fae5;border:1px solid #a7f3d0;border-radius:var(--radius-sm);padding:8px 12px;margin:0}.field{display:flex;flex-direction:column;gap:6px}.field__label{font-size:12px;font-weight:600;color:var(--color-text);letter-spacing:.02em;text-transform:uppercase}.field__input{padding:9px 13px;border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:13px;color:var(--color-text);background:var(--color-bg);outline:none;transition:border-color .15s,box-shadow .15s;width:100%}.field__input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px #e8485514}.field__input--locked{opacity:.55;cursor:not-allowed;color:var(--color-text-muted)}.field__input:disabled{cursor:not-allowed}.field textarea.field__input{resize:vertical}.field__hint{font-size:11px;color:var(--color-text-muted)}@media (max-width: 768px){.btn{padding:8px 14px}.detail-table-wrap,.pages-table-wrap,.diff-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.result-summary,.insight-grid,.pr-stats-grid{grid-template-columns:1fr 1fr!important}.sitemap-form{flex-direction:column}.pr-detail__cols,.diff-screen__body{grid-template-columns:1fr!important}.diff-files{display:none}.diff-files.mobile-show{display:block}.pr-filters__top{flex-direction:column;align-items:flex-start}.pr-filters__right{width:100%}.pr-search{max-width:100%!important;flex:1}.repo-card{flex-direction:column;align-items:flex-start}.repo-card__right{align-self:flex-start;flex-wrap:wrap}.history-item{flex-direction:column}.results-toolbar{flex-direction:column;align-items:flex-start}.diff-screen__title-row{flex-direction:column}.diff-screen__header-right{align-self:flex-start}}