open-index/open-npm huggingface dataset:
npm package: @hypofriend/vue-segment-analytics
Description: Vue plugin for segment analytics.js
Author: Ryan Stuart
Latest version: 0.3.7

<p align="center">
 <a href="https://www.npmjs.com/package/vue-segment-analytics">
  <img src="https://img.shields.io/npm/dm/vue-segment-analytics.svg" />
 <a/>
</p>

# vue-segment-analytics

Vue plugin for Segment.io Analytics

## Requirements

Vue ^2.0.0

## TL;DR

```bash
npm install --save-dev vue-segment-analytics
```

```js
import Vue from 'vue'
import VueSegmentAnalytics from 'vue-segment-analytics'

Vue.use(VueSegmentAnalytics, {
  id: 'XXXXX',
  router // Optional
})
```
npm package: @hypofriend/web-session-counter
Description: Utility to count a user's web sessions based on the definition GA uses. Edit
Author: Swizec Teller
Latest version: 1.1.5


# Web Session Counter

What do you do if your boss comes up to you and asks *"So how many
times must a person come to our app before they give us $500?"*

As an engineer you might not care, but this is the stuff that keeps
your CEO and growth lead and head of product up at night. A business
owner that can answer that 👆 question reliably is god amongst men.

You can use this repo :)

## How to use

```
$ npm install --save web-session-counter
```

```javascript

import WebSessionCounter from 'web-session-counter';

// Do this on user activity
WebSessionCounter.update();

// To get the total count of sessions
const count = WebSessionCounter.count;

```

`.update()` is called automatically every time you import
WebSessionCounter. I recommend calling `.update()`, if you have a
single page app that doesn't perform a lot of refreshes. Calling
`.update` frequently, ensures your code will correctly detect every 30
minute period of inactivity.

## What is a session

We use the [same definition as Google Analytics](https://support.google.com/analytics/answer/2731565?hl=en). The tl;dr is that a new session starts after every:

- 30 minutes of inactivity
- midnight
- `utm_campaign` query change


Enjoy.
npm package: @hypoth-ui/a11y-audit
Description: Accessibility audit and conformance reporting for the hypoth-ui design system
Latest version: 1.0.2

# @hypoth-ui/a11y-audit

Accessibility audit and conformance reporting tools for the hypoth-ui design system. Provides automated CI checks, manual audit checklists, and WCAG conformance report generation.

## Installation

```bash
npm install @hypoth-ui/a11y-audit
```

## Usage

### Run Automated Accessibility Tests

```bash
pnpm test:a11y
```

### Start a Manual Audit

```bash
pnpm a11y:audit -- --component ds-button --category form-controls
```

Available categories: `form-controls`, `overlays`, `navigation`, `data-display`, `feedback`.

### Generate a Conformance Report

```bash
pnpm a11y:report -- --version 1.0.0
```

### Validate Audit Records

```bash
pnpm a11y:validate
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/cli
Description: CLI tool for adding hypoth-ui components to your project
Latest version: 1.0.2

# @hypoth-ui/cli

CLI tool for scaffolding and managing hypoth-ui components in your project. Initialize configuration, browse available components, and add them with a single command.

## Installation

```bash
npm install -g @hypoth-ui/cli
```

Or use directly with `npx`:

```bash
npx @hypoth-ui/cli init
```

## Usage

### Initialize a Project

```bash
npx @hypoth-ui/cli init
```

Creates a `ds.config.json` with your project settings (framework, package manager, paths).

### Add Components

```bash
npx @hypoth-ui/cli add button dialog
```

Installs the component packages and any required dependencies.

### Copy Component Source

```bash
npx @hypoth-ui/cli add button --copy
```

Copies the component source files into your project instead of installing a package.

### List Available Components

```bash
npx @hypoth-ui/cli list
npx @hypoth-ui/cli list --installed
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/css
Description: CSS layers and base styles for the hypoth-ui design system
Latest version: 1.0.2

# @hypoth-ui/css

CSS layers and base styles for the hypoth-ui design system. Provides a structured CSS foundation using native `@layer` for reset, tokens, base styles, component styles, utilities, and overrides.

## Installation

```bash
npm install @hypoth-ui/css
```

## Usage

### Full Bundle

```typescript
import '@hypoth-ui/css';
```

Or in HTML:

```html
<link rel="stylesheet" href="node_modules/@hypoth-ui/css/dist/index.css">
```

### Individual Layers

```typescript
import '@hypoth-ui/css/layers/reset';
import '@hypoth-ui/css/layers/tokens';
import '@hypoth-ui/css/layers/base';
import '@hypoth-ui/css/layers/components';
import '@hypoth-ui/css/layers/utilities';
import '@hypoth-ui/css/layers/overrides';
```

## CSS Layer Order

The layers are ordered from lowest to highest specificity:

1. `reset` -- Browser reset / normalize
2. `tokens` -- Design token custom properties
3. `base` -- Base element styles
4. `components` -- Component styles
5. `utilities` -- Utility classes
6. `overrides` -- Consumer overrides (highest priority)

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/docs-content
Description: Documentation content packs for the hypoth-ui design system
Latest version: 1.0.2

# @hypoth-ui/docs-content

Documentation content packs for the hypoth-ui design system. Contains component manifests, MDX documentation files, and edition configuration used by the docs renderer.

## Installation

```bash
npm install @hypoth-ui/docs-content
```

> **Note:** This is primarily an internal package consumed by `@hypoth-ui/docs-renderer-next`.

## Usage

### Access Manifests

```typescript
import manifest from '@hypoth-ui/docs-content/manifests/button.json';
```

### Access MDX Content

```typescript
import content from '@hypoth-ui/docs-content/components/button.mdx';
```

### Access Edition Configuration

```typescript
import edition from '@hypoth-ui/docs-content/editions/core.json';
```

## Structure

```
docs-content/
  manifests/      # Component manifest.json files
  components/     # Component documentation (MDX)
  guides/         # Guide documentation (MDX)
  editions/       # Edition configuration files
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/docs-core
Description: Documentation engine and validation tools for the hypoth-ui design system
Latest version: 1.0.2

# @hypoth-ui/docs-core

Internal documentation engine and validation tooling for the hypoth-ui design system. Handles manifest validation, edition filtering, search indexing, and component auditing.

## Installation

```bash
npm install @hypoth-ui/docs-core
```

> **Note:** This is primarily an internal tooling package used by the documentation site and CI pipelines.

## Usage

### Validate Manifests and Documentation

```bash
pnpm --filter @hypoth-ui/docs-core validate
pnpm --filter @hypoth-ui/docs-core validate --strict
```

### Audit Components

```bash
pnpm --filter @hypoth-ui/docs-core audit:components
pnpm --filter @hypoth-ui/docs-core audit:components --json
pnpm --filter @hypoth-ui/docs-core audit:components --markdown
```

### Build Edition Map

```bash
pnpm --filter @hypoth-ui/docs-core build:edition-map
```

### Programmatic API

```typescript
import { validateManifests, buildEditionMap } from '@hypoth-ui/docs-core';

const result = await validateManifests({ strict: true });
const editionMap = await buildEditionMap('core');
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/docs-renderer-next
Description: Next.js documentation renderer for the hypoth-ui design system
Latest version: 1.0.2

# @hypoth-ui/docs-renderer-next

Next.js-based documentation site renderer for the hypoth-ui design system. Renders MDX content packs with edition filtering, tenant branding, search, and live component previews.

## Installation

```bash
npm install @hypoth-ui/docs-renderer-next
```

> **Note:** This is primarily an internal package used to build the documentation site.

## Usage

### Import Components

```typescript
import { NavSidebar } from '@hypoth-ui/docs-renderer-next/components/nav-sidebar';
import { MdxRenderer } from '@hypoth-ui/docs-renderer-next/components/mdx-renderer';
```

### Import Styles

```typescript
import '@hypoth-ui/docs-renderer-next/styles/globals.css';
```

### Run the Docs Site

```bash
pnpm --filter @ds/docs-app dev:core        # Core edition
pnpm --filter @ds/docs-app dev:pro         # Pro edition
pnpm --filter @ds/docs-app dev:enterprise  # Enterprise edition
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/next
Description: Next.js App Router integration for hypoth-ui Web Components
Latest version: 1.0.2

# @hypoth-ui/next

Next.js App Router integration for hypoth-ui Web Components. Provides a client-side loader that registers custom elements for use with Server Components and React Server Components (RSC).

## Installation

```bash
npm install @hypoth-ui/next
```

### Peer Dependencies

```bash
npm install @hypoth-ui/wc @hypoth-ui/react next react react-dom
```

## Usage

Add `HypothUIProvider` to your root layout to register all custom elements client-side:

```tsx
// app/layout.tsx
import '@hypoth-ui/css';
import { DsLoader } from '@hypoth-ui/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <DsLoader />
        {children}
      </body>
    </html>
  );
}
```

Then use components in any client component or page:

```tsx
"use client";
import { DsButton } from '@hypoth-ui/react/client';

export default function Page() {
  return <DsButton variant="primary">Click me</DsButton>;
}
```

## Selective Component Loading

By default, `DsLoader` registers all Web Components. Use `include` or `exclude` to load only the components you need, reducing bundle size:

```tsx
// Register only specific components
<DsLoader include={["ds-button", "ds-dialog", "ds-input"]} />

// Register all except specific components
<DsLoader exclude={["ds-data-table"]} />
```

When both `include` and `exclude` are provided, `include` takes precedence.

### Props

| Prop | Type | Description |
|------|------|-------------|
| `include` | `ComponentTag[]` | Only register these component tags |
| `exclude` | `ComponentTag[]` | Register all except these tags (ignored if `include` is set) |
| `debug` | `boolean` | Enable console logging for registration |
| `onLoad` | `() => void` | Callback fired after all components are registered |

### Debug Mode

Enable `debug` to see which components are registered and catch unknown tag names:

```tsx
<DsLoader include={["ds-button"]} debug onLoad={() => console.log("Components ready")} />
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/primitives-dom
Description: DOM behavior primitives for the hypoth-ui design system — focus trap, roving focus, type-ahead
Latest version: 1.0.2

# @hypoth-ui/primitives-dom

Low-level DOM behavior primitives for the hypoth-ui design system. Provides framework-agnostic utilities for focus management, keyboard navigation, and ARIA patterns used by higher-level components.

## Installation

```bash
npm install @hypoth-ui/primitives-dom
```

## Usage

```typescript
import {
  createFocusTrap,
  createRovingFocus,
  createTypeAhead,
  createDismissableLayer,
} from '@hypoth-ui/primitives-dom';

// Trap focus within a dialog
const trap = createFocusTrap(dialogElement);
trap.activate();

// Enable arrow-key navigation within a list
const roving = createRovingFocus(listElement, {
  orientation: 'vertical',
});

// Add type-ahead search to a listbox
const typeAhead = createTypeAhead(listboxElement, {
  onMatch: (item) => item.focus(),
});

// Dismiss on outside click or Escape
const layer = createDismissableLayer(popoverElement, {
  onDismiss: () => closePopover(),
});
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/react
Description: React adapter components for the hypoth-ui design system
Latest version: 1.0.2

# @hypoth-ui/react

React adapter components for the hypoth-ui design system. Provides type-safe React wrappers around the underlying Lit Web Components with full support for Server Components and Client Components in Next.js.

## Installation

```bash
npm install @hypoth-ui/react
```

### Peer Dependencies

```bash
npm install @hypoth-ui/wc react react-dom
```

## Usage

### Type Imports (Server-Safe)

```tsx
import type { ButtonProps, DialogRootProps } from '@hypoth-ui/react';
```

### Runtime Components

```tsx
import { DsButton } from '@hypoth-ui/react/client';

function App() {
  return <DsButton variant="primary">Click me</DsButton>;
}
```

### Client Components (Next.js App Router)

```tsx
"use client";
import { Dialog, Input, DsButton } from "@hypoth-ui/react/client";

function MyComponent() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <DsButton>Open Dialog</DsButton>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Title>Edit Profile</Dialog.Title>
        <Input placeholder="Enter name" />
      </Dialog.Content>
    </Dialog.Root>
  );
}
```

### Compound Component Pattern

Most complex components use the compound pattern:

```tsx
import { Select } from "@hypoth-ui/react/client";

<Select.Root onValueChange={(value) => console.log(value)}>
  <Select.Trigger>
    <Select.Value placeholder="Choose..." />
  </Select.Trigger>
  <Select.Content>
    <Select.Option value="a">Option A</Select.Option>
    <Select.Option value="b">Option B</Select.Option>
  </Select.Content>
</Select.Root>
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/test-utils
Description: Test utilities for the hypoth-ui design system
Latest version: 1.0.2

# @hypoth-ui/test-utils

Shared test utilities for the hypoth-ui design system. Provides helpers for rendering, querying, and asserting on Web Components and React adapters in Vitest.

## Installation

```bash
npm install @hypoth-ui/test-utils --save-dev
```

## Usage

```typescript
import { renderWc, renderReact, waitForElement } from '@hypoth-ui/test-utils';

// Render a Web Component for testing
const el = await renderWc('<ds-button variant="primary">Click</ds-button>');

// Render a React adapter for testing
const { getByRole } = renderReact(<Button variant="primary">Click</Button>);

// Wait for a custom element to be defined
await waitForElement('ds-button');
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/tokens
Description: Design tokens for the hypoth-ui design system — CSS custom properties, TypeScript constants
Latest version: 1.0.2

# @hypoth-ui/tokens

DTCG-compliant design tokens for the hypoth-ui design system. Provides CSS custom properties, JSON, and TypeScript constants for colors, spacing, typography, and more.

## Installation

```bash
npm install @hypoth-ui/tokens
```

## Usage

### CSS Custom Properties

```css
@import '@hypoth-ui/tokens/css';

.my-element {
  color: var(--ds-color-primary);
  padding: var(--ds-spacing-md);
  font-size: var(--ds-font-size-base);
}
```

### TypeScript Constants

```typescript
import { tokens } from '@hypoth-ui/tokens';

console.log(tokens.color.primary); // resolved token value
```

### JSON

```typescript
import tokenData from '@hypoth-ui/tokens/json';
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypoth-ui/wc
Description: Web Components (Lit) for the hypoth-ui design system
Latest version: 1.0.2

# @hypoth-ui/wc

Lit-based Web Components with Light DOM rendering for the hypoth-ui design system. Framework-agnostic custom elements that work with any frontend stack.

## Installation

```bash
npm install @hypoth-ui/wc
```

### Peer Dependencies

```bash
npm install @hypoth-ui/css @hypoth-ui/tokens
```

## Usage

```html
<script type="module">
  import '@hypoth-ui/wc/primitives';
</script>

<ds-button variant="primary">Click me</ds-button>
```

### Granular Imports (Recommended)

Import from category-specific entry points for optimal bundle size:

```typescript
import { DsButton, DsLink, DsIcon } from "@hypoth-ui/wc/primitives";
import { DsInput, DsCheckbox, DsSwitch } from "@hypoth-ui/wc/form-controls";
import { DsDialog, DsPopover, DsTooltip } from "@hypoth-ui/wc/overlays";
import { DsTabs, DsAccordion, DsBreadcrumb } from "@hypoth-ui/wc/navigation";
import { DsAvatar, DsTable, DsBadge } from "@hypoth-ui/wc/data-display";
import { DsAlert, DsToast, DsProgress } from "@hypoth-ui/wc/feedback";
import { DsCard, DsSeparator } from "@hypoth-ui/wc/layout";
```

### Events

Components emit custom events with the `ds:` prefix:

```typescript
document.querySelector('ds-select')
  .addEventListener('ds:change', (e) => {
    console.log(e.detail.value);
  });
```

## Documentation

See the [main README](../../README.md) for full documentation and architecture overview.

## License

MIT
npm package: @hypothesi/sass-string-utils
Description: A small utility library for string manipulation functions in SASS/SCSS
Author: Matt Luedke
Latest version: 0.1.0-alpha.0

# SASS/SCSS String Utils

A small utility library for string manipulation functions in SASS/SCSS.

## Getting Started

```bash
npm install @hypothesi/sass-string-utils
```

Import string utils into your SCSS:

```scss
@use '@hypothesi/sass-string-utils' as strUtils;

// Example usage
$camelCase: strUtils.kebab-to-camel-case('background-color'); // Outputs backgroundColor
```
npm package: @hypothesi/tauri-mcp-cli
Description: CLI wrapper for calling the Tauri MCP server tools directly from the terminal
Author: hypothesi
Latest version: 0.10.0

# @hypothesi/tauri-mcp-cli

CLI wrapper for calling the Tauri MCP server tools directly from the terminal.

## Install

```bash
npm install -g @hypothesi/tauri-mcp-cli
```

Or run without a permanent install:

```bash
npx @hypothesi/tauri-mcp-cli <command>
```

## Session Lifecycle

Most automation tools require an active driver session. Start one before calling other tools.

### 1. Start a session

```bash
tauri-mcp driver-session start --port 9223
```

The session connects to a Tauri app running in development mode (`cargo tauri dev`) on the specified port. The MCP server process stays alive in the background via MCPorter keep-alive, so later commands reuse the same session.

### 2. Call tools in separate invocations

```bash
tauri-mcp webview-screenshot --file screenshot.png
tauri-mcp webview-execute-script --script "document.title"
tauri-mcp driver-session status --json
```

Each command exits normally. Session state persists across invocations.

### 3. Stop the session

```bash
tauri-mcp driver-session stop
```

## Output

- Image-producing tools write image files to disk by default.
- Default filename: `<tool-name>-<timestamp>.png` in the current directory.
- Use `--file <path>` to control the output filename.
- Use `--json` to print structured JSON output. Images are still written to disk; the JSON includes their file paths.

## Daemon Management

The keep-alive daemon persists the MCP server between commands. Manage it directly:

```bash
tauri-mcp daemon status    # Show daemon status
tauri-mcp daemon stop      # Stop the daemon
tauri-mcp daemon start     # Start or prewarm the daemon
tauri-mcp daemon restart   # Restart the daemon
```

## Troubleshooting

### "No active session" error

The daemon restarted and lost session state. Re-run `driver-session start`:

```bash
tauri-mcp driver-session start --port 9223
```

### Connection refused or stale daemon

```bash
tauri-mcp daemon restart
tauri-mcp driver-session start --port 9223
```

### Check daemon and session state

```bash
tauri-mcp daemon status
tauri-mcp driver-session status --json
```

## Agent Skills

This package ships one bundled [Agent Skill](https://agentskills.io) so AI coding agents learn correct CLI usage automatically. After installing the package, wire it into your agent config:

```bash
npx @tanstack/intent@latest install
```

Bundled skill:

- `tauri-mcp-cli` — one skill covering session lifecycle, UI automation, screenshots and inspection, IPC debugging, and mobile or remote device workflows

See the [Agent Skills guide](../../docs/guides/agent-skills.md) for installation options and the full coverage summary.