open-index/open-npm huggingface dataset:
npm package: @glassfm/react-clarity
Description: Implement Microsoft-Clarity into react project
Author: anthony-healthstreet
Latest version: 1.0.3

# GlassFM - React Microsoft Clarity

A lightweight component to make adding Microsoft Clarity to your project easily.

# Install

```bash
npm install react-microsoft-clarity --save
```

# Usage

```typescript
import { clarity } from "react-microsoft-clarity";

// Start seeing data on the Clarity dashboard with your project ID
clarity.init(id);

// Identify the user
clarity.identify("USER_ID", "SESSION_ID", "PAGE_ID");

// Cookie consent
clarity.consent();

// Setup a custom tag
clarity.setTag("key", "value");

// Upgrade session
clarity.upgrade("upgradeReason");

// Check if Clarity has been initialized before calling its methods
if (clarity.hasStarted()) {
	clarity.identify("USER_ID", "SESSION_ID", "PAGE_ID", "FRIENDLY_NAME");
	clarity.setEvent("SOME_EVENT");
}
```

-   id: Stands for 'Clarity ID' - Your site's project ID found in setup. This is the ID which tells Clarity which site settings it should load and where it should save the data collected.

You can learn more from [Clarity Docs](https://learn.microsoft.com/en-us/clarity/)
npm package: @glasshome/ha-types
Description: TypeScript type definitions for Home Assistant entities, services, and WebSocket API
Author: GlassHome Labs
Latest version: 0.1.1

# @glasshome/ha-types

TypeScript type definitions and constants for Home Assistant domains, services, events, and WebSocket API.

Auto-generated from Home Assistant Core source code.

## Install

```bash
npm install @glasshome/ha-types
```

## Usage

### Runtime values

```typescript
import { KNOWN_DOMAINS } from "@glasshome/ha-types";

// KNOWN_DOMAINS is an array of all Home Assistant domain strings
console.log(KNOWN_DOMAINS.length); // 2000+
console.log(KNOWN_DOMAINS.includes("light")); // true
```

### Type imports

```typescript
import type { Domain, ServiceCall, HAEvent } from "@glasshome/ha-types";

// Domain is a union of all known HA domain strings
const domain: Domain = "light";

// ServiceCall describes a service invocation
const call: ServiceCall = {
  domain: "light",
  service: "turn_on",
  target: { entity_id: "light.living_room" },
  data: { brightness: 255 },
};
```

### Device & entity constants

```typescript
import {
  CONNECTION_BLUETOOTH,
  CONNECTION_NETWORK_MAC,
  CONNECTION_UPNP,
  CONNECTION_ZIGBEE,
} from "@glasshome/ha-types";
```

### WebSocket API types

```typescript
import type {
  CallServiceRequest,
  SubscribeEventsRequest,
  WsResult,
  AuthRequired,
} from "@glasshome/ha-types";
```

## What's included

| Module | Exports |
|--------|---------|
| Domains | `Domain` type, `KNOWN_DOMAINS` array |
| Services | `ServiceCall`, `ServiceName`, `Services`, per-domain service types |
| Events | `HAEvent`, `CoreEventType`, event data types |
| Entity Registry | `EntityRegistryEntry`, `EntityCategory`, disabler/hider types |
| Device Registry | `DeviceEntry`, connection constants |
| Area Registry | `AreaEntry` |
| WebSocket | Auth types, command request types, result types |
| Constants | 317 domain-specific constants |

## License

MIT
npm package: @glasshome/sync-layer
Description: Type-safe, reactive state synchronization layer for Home Assistant
Author: GlassHome Labs
Latest version: 0.1.7

# @glasshome/sync-layer

Type-safe, reactive state synchronization layer for Home Assistant.

Provides connection management, entity querying, service calls, and reactive state via a SolidJS store — all with full TypeScript types powered by `@glasshome/ha-types`.

## Install

```bash
npm install @glasshome/sync-layer @glasshome/ha-types
# or
bun add @glasshome/sync-layer @glasshome/ha-types
```

## Quick Start

```typescript
import {
  initConnection,
  getConnection,
  state,
  entity,
  entities,
  callService,
} from "@glasshome/sync-layer";

// Connect to Home Assistant
await initConnection({
  hassUrl: "http://homeassistant.local:8123",
  token: "YOUR_LONG_LIVED_ACCESS_TOKEN",
});

// Access reactive state
console.log(state.connectionState); // "connected"

// Query a single entity
const light = entity("light.living_room").get();

// Query multiple entities by domain
const allLights = entities().domain("light").list();

// Call a service
await callService("light", "turn_on", {
  entity_id: "light.living_room",
  brightness: 200,
});
```

## Subpath Imports

### `@glasshome/sync-layer/solid`

SolidJS hooks for reactive UI integration. Requires `solid-js` as a peer dependency.

```typescript
import {
  useEntity,
  useEntities,
  useConnection,
  useStore,
  useService,
  useToggle,
  useArea,
  useCamera,
  useEntityHistory,
  useForecast,
} from "@glasshome/sync-layer/solid";

// Reactive entity access in SolidJS components
const light = useEntity("light.living_room");
const connection = useConnection();
const toggle = useToggle("light.living_room");
```

### `@glasshome/sync-layer/testing`

Mock utilities for testing without a live Home Assistant instance.

```typescript
import {
  MockConnection,
  createEntity,
  createArea,
  createBasicFixtures,
  simulateStateChange,
  waitForConnection,
  getStoreSnapshot,
} from "@glasshome/sync-layer/testing";

const mock = new MockConnection();
await mock.connect();

simulateStateChange("light.test", { state: "on" });
```

### `@glasshome/sync-layer/demo`

Demo mode provider for loading fixture data without a real backend.

```typescript
import {
  loadDemoData,
  unloadDemoData,
  isDemoMode,
  applyDemoServiceCall,
} from "@glasshome/sync-layer/demo";

await loadDemoData(); // Populates store with demo entities
```

## Peer Dependencies

| Package | Required | Notes |
|---------|----------|-------|
| `@glasshome/ha-types` | Yes | TypeScript types for Home Assistant entities, services, and events |
| `solid-js` | Only for `./solid` subpath | SolidJS reactive primitives used by the hooks adapter |

## License

MIT
npm package: @glasshome/ui
Description: SolidJS component library for GlassHome, built on Kobalte
Author: GlassHome Labs
Latest version: 0.1.1

# @glasshome/ui

SolidJS component library for GlassHome, built on [Kobalte](https://kobalte.dev).

56 accessible, theme-aware components plus utility functions and a Tailwind v4 CSS preset — everything you need to build smart-home dashboards.

## Install

```bash
npm install @glasshome/ui solid-js
# or
bun add @glasshome/ui solid-js
```

> `solid-js ^1.9.9` is a required peer dependency.

## Subpath Imports

### `@glasshome/ui` — Utilities

Framework-agnostic helpers exported from the root entrypoint.

```typescript
import { cn, createIsMobile } from "@glasshome/ui";

// Merge Tailwind classes with conflict resolution
const cls = cn("px-4 py-2", condition && "bg-primary text-white");

// Reactive mobile breakpoint signal (SolidJS)
const isMobile = createIsMobile();
```

### `@glasshome/ui/solid` — Components

All 56 Kobalte-based components are exported from a single subpath.

```tsx
import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from "@glasshome/ui/solid";

function DeviceCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Living Room</CardTitle>
        <Badge>Online</Badge>
      </CardHeader>
      <CardContent>
        <Button onClick={() => console.log("toggled")}>Toggle Light</Button>
      </CardContent>
    </Card>
  );
}
```

Available components include:

`Accordion` · `Alert` · `AlertDialog` · `AspectRatio` · `Avatar` · `Badge` · `Breadcrumb` · `Button` · `ButtonGroup` · `Calendar` · `Card` · `Carousel` · `Checkbox` · `Collapsible` · `Command` · `ContextMenu` · `CopyButton` · `Dialog` · `Dock` · `Drawer` · `DropdownMenu` · `Empty` · `Field` · `Form` · `GeometricBackground` · `GlassEffect` · `HoverCard` · `Input` · `InputGroup` · `InputOTP` · `Item` · `Kbd` · `Label` · `Menubar` · `NavigationMenu` · `Pagination` · `Popover` · `Progress` · `RadioGroup` · `ResizablePanel` · `ResponsiveDialog` · `ScrollArea` · `Select` · `Separator` · `Sheet` · `Skeleton` · `Slider` · `Sonner (toast)` · `Spinner` · `Switch` · `Table` · `Tabs` · `Textarea` · `Toggle` · `ToggleGroup` · `Tooltip`

### `@glasshome/ui/styles` — Tailwind v4 CSS

Import the shared CSS preset in your app's stylesheet:

```css
@import "@glasshome/ui/styles";
```

This provides the GlassHome design tokens (colors, radii, animations) as a Tailwind v4 theme layer.

## Peer Dependencies

| Package    | Required | Notes                                    |
| ---------- | -------- | ---------------------------------------- |
| `solid-js` | Yes      | SolidJS reactive primitives and JSX runtime |

## License

MIT
npm package: @glasshome/widget-cli
Description: CLI for creating and managing GlassHome widgets
Author: GlassHome Labs
Latest version: 0.4.6

# @glasshome/widget-cli

CLI for creating and managing GlassHome widgets.

## Install

```bash
bun add -g @glasshome/widget-cli
```

## Quick Start

```bash
# Create a new widget project (interactive)
bunx @glasshome/widget-cli

# Or explicitly
bunx @glasshome/widget-cli create
```

## Commands

| Command | Description |
|---------|-------------|
| `create` | Create a new widget project (default when no project found) |
| `add` | Add a new widget to an existing project |
| `build` | Build all widgets |
| `connect <url>` | Connect to a running dashboard for live testing |
| `validate [name]` | Validate all widgets or a specific one |
| `publish [hub-url]` | Select and publish a widget to GlassHome Hub |
| `login [hub-url]` | Authenticate with GlassHome Hub (required before publish) |
| `info [name]` | Show widget metadata and bundle info |
| `upgrade` | Upgrade @glasshome/widget-sdk to latest version |

Running `glasshome-widget` with no command inside a widget project shows help. Outside a widget project, it starts the create wizard.

## Publishing

```bash
# Login first (one-time)
glasshome-widget login

# Then publish
glasshome-widget publish
```

The CLI prompts you to select a widget, choose a version bump, then builds and publishes. Each widget tracks its own version in its `manifest.json`.

## Documentation

Full docs at [glasshome.app/docs](https://glasshome.app/docs)

## License

MIT
npm package: @glasshome/widget-sdk
Description: SDK for building GlassHome dashboard widgets with SolidJS
Author: GlassHome Labs
Latest version: 0.2.4

# @glasshome/widget-sdk

SDK for building GlassHome dashboard widgets with SolidJS.

Provides `defineWidget`, reactive entity bindings, framework components/hooks, a Vite plugin for widget development, and Tailwind v4 source paths — everything you need to build, preview, and ship dashboard widgets.

## Install

```bash
npm install @glasshome/widget-sdk solid-js
# or
bun add @glasshome/widget-sdk solid-js
```

> `solid-js ^1.9.11` is a required peer dependency.

## Subpath Imports

### `@glasshome/widget-sdk` — SDK API

Core widget API: define widgets, create reactive entity bindings, and use framework components/hooks.

```tsx
import { defineWidget, createEntity, SDK_VERSION } from "@glasshome/widget-sdk";

const entity = createEntity("light.living_room");

export default defineWidget({
  manifest: {
    tag: "glasshome-my-widget",
    type: "status",
    name: "My Widget",
    size: "small",
    sdkVersion: "^0.1.0",
    defaultConfig: { label: "Hello" },
  },
  component: (props) => <div>{props.config.label}</div>,
});
```

### `@glasshome/widget-sdk/vite` — Vite Plugin

Vite plugin for widget development. Handles widget bundling, preview server, and registry generation.

```typescript
// vite.config.ts
import { defineConfig } from "vite";
import { glasshomeWidget } from "@glasshome/widget-sdk/vite";

export default defineConfig({
  plugins: [glasshomeWidget()],
});
```

The plugin accepts an optional `entry` option (defaults to `"src/index.tsx"`):

```typescript
glasshomeWidget({ entry: "src/my-widget.tsx" });
```

### `@glasshome/widget-sdk/tailwind-sources` — Tailwind v4 CSS Source

Provides a `@source` directive for Tailwind v4 so the compiler scans widget SDK source files for class names.

```css
/* In your widget's CSS entrypoint */
@import "tailwindcss";
@source "@glasshome/widget-sdk/tailwind-sources";
```

## Peer Dependencies

| Package    | Required | Notes                                       |
| ---------- | -------- | ------------------------------------------- |
| `solid-js` | Yes      | SolidJS reactive primitives and JSX runtime |

## License

MIT
npm package: @glasshouse/components
Description: [![Storybook](https://img.shields.io/badge/storybook-storybook?style=for-the-badge&logo=storybook&logoColor=ffffff&color=ff4785)](https://main--668b65bdcf16256d1a25e70c.chromatic.com) [![Chromatic Library](https://img.shields.io/badge/chromatic%20library-
Latest version: 0.9.28

# ![GVSComponents](./gvs-components.svg)

[![Storybook](https://img.shields.io/badge/storybook-storybook?style=for-the-badge&logo=storybook&logoColor=ffffff&color=ff4785)](https://main--668b65bdcf16256d1a25e70c.chromatic.com)
[![Chromatic Library](https://img.shields.io/badge/chromatic%20library-chromatic?style=for-the-badge&logo=chromatic&logoColor=ffffff&color=fc521f)](https://www.chromatic.com/library?appId=668b65bdcf16256d1a25e70c&branch=main)

This package contains the core React components used by Glasshouse developers, most of the components are built from Mantine components and utilities.

## Installation

To install the `@glasshouse/components` package, use your preferred package manager:

```sh
# If you use npm
npm install @glasshouse/components

# If you use pnpm
pnpm add @glasshouse/components

# If you use Yarn
yarn add @glasshouse/components
```

## Usage

### Setup with Next.js app router

Add styles import to the `app/layout.tsx` file:

```ts
// app/layout.tsx

import '@glasshouse/components/styles.css'
import '@glasshouse/components/tailwind.css'

const RootLayout = () => (
  <html lang="en">
    <body>
      {...}
    </body>
  </html>
);

export default RootLayout;
```

Import the components you need from the `@glasshouse/components` package:

```ts
import { Grid } from '@glasshouse/components';

const Component = () => (
  <div>
    <Grid>
      <Grid.Cell>I am a Grid Cell</Grid.Cell>
    </Grid>
  </div>
);

export default App;
```