open-index/open-npm huggingface dataset:
npm package: @kdex-tech/ui
Description: KDex UI Components
Author: KDex Tech
Latest version: 1.2.17

# kdex-ui

## 🧩 Integration Guide: Building for the Framework

Our application server uses Custom Elements as the primary unit of UI abstraction. To ensure your element stays in sync with the server-side router, it should adhere to the following lifecycle and property contract.

### 1. The Core Contract (Standard Properties)

The framework's client-side router will actively manage two properties on your element. You can either implement these manually or use our AppBridge mixin.

|Property|Type|Description|
|---|---|---|
|`active`|`boolean`|Set to true when the element's slot is the primary target of the current URL.|
|`appPath`|`string`|The portion of the URI following the `/-/` separator (e.g., `/profile/settings`).|

### 2. Standard Events

The router dispatches these events directly on your element. Use these for global state cleanup or analytics.

- `app-route-change`: Fired when the appPath is updated.
- `app-route-deactivated`: Fired when the user navigates away to a different app slot.

### 3. Implementation Options

#### Option A: Using the AppBridge Mixin (Recommended)

The easiest way to integrate is to wrap your class in our Mixin. It handles the attribute-to-property mirroring and provides clean lifecycle hooks.

```javascript
import { AppBridge } from '@your-framework/client';

class MyProfileApp extends AppBridge(HTMLElement) {
  // Triggered when the app becomes the URL target
  onRouteActivated(path) {
    console.log("Navigated to:", path);
    this.render();
  }

  // Triggered when another app slot takes over the URL
  onRouteDeactivated() {
    this.cleanup();
  }
}

customElements.define('profile-app', MyProfileApp);
```

#### Option B: Manual Implementation (Vanilla or Lit)

If you prefer not to use our Mixin, simply ensure your component reacts to attribute changes or defines the relevant setters.

```javascript
class ManualApp extends HTMLElement {
  static get observedAttributes() { return ['active-route', 'app-path']; }

  attributeChangedCallback(name, old, value) {
    if (name === 'active-route') {
      this.isFocused = (value !== null);
    }
  }
}
```

### 4. How the Router Communicates

When a user navigates, the framework performs a "Handshake" with your component's lifecycle:

1. Discovery:
    - Parses the URI to find the target element via the `data-app-slot` attribute.
    - Calculates the `appPath` from the URI.
2. Deactivation:
    - Clears the `active-route` and `app-path` attributes on the previous occupant.
    - Clears `active` status and `appPath` property on the previous occupant.
    - Dispatches `app-route-deactivated` on the previous occupant.
3. Activation:
    - Sets `active-route` and `app-path` attributes on the new target.
    - Sets `active` and `appPath` property on the new target.
    - Dispatches `app-route-change` event on the new target.
npm package: @kdg/ffprobe-static
Description: Static binaries for ffprobe.
Author: joshwnj
Latest version: 4.4.0

ffprobe-static
====

Static binaries for `ffprobe`.

Based on <https://github.com/eugeneware/ffmpeg-static>.

Binaries are from <http://ffmpeg.zeranoe.com/builds/>

Usage
----

```js
var ffprobe = require('ffprobe-static');
console.log(ffprobe.path);
```

Version Notes
----

Currently supports Mac OS X (Intel 64-bit and ARM), Linux (32, 64-bit and ARM) and Windows
(32 and 64-bit).

Currently version `4.4.0` is installed for Mac, Windows and Linux.<br>
**Multiple architectures have been removed from this release to make publishing possible**

I pulled the versions from the ffmpeg static build pages linked from the
official ffmpeg site. Namely:

* [64 bit Mac OSX](https://evermeet.cx/ffmpeg/)
* [ARM64 Mac OSX](https://evermeet.cx/ffmpeg/)
* [64 bit Linux](http://johnvansickle.com/ffmpeg/)
* [32 bit Linux](http://johnvansickle.com/ffmpeg/)
* [64 bit Windows](https://www.gyan.dev/ffmpeg/builds/)

Acknowledgements
----

Special thanks to [eugeneware](https://github.com/eugeneware) for <https://github.com/eugeneware/ffmpeg-static>, which this is based upon.

Thanks to the original [`ffprobe-static` package](https://github.com/joshwnj/ffprobe-static) and its creator joshwnj.