open-index/open-npm huggingface dataset:
npm package: @owlmeans/web-router
Description: This is a template directory for creating new packages within the OwlMeans Common Libraries ecosystem.
Latest version: 0.1.2

# OwlMeans Package Template

This is a template directory for creating new packages within the OwlMeans Common Libraries ecosystem.

## Usage

Copy this template directory when creating a new package:

```bash
cp -r packages/_tpl packages/your-new-package
cd packages/your-new-package
```

Then update:
- `package.json` - Change the package name and dependencies
- `README.md` - Replace with proper documentation following OwlMeans standards
- `src/index.ts` - Implement your package functionality

## Template Structure

- **package.json** - Base package configuration with common scripts and exports
- **tsconfig.json** - TypeScript configuration aligned with OwlMeans standards  
- **src/index.ts** - Entry point file
- **README.md** - This template documentation (replace with actual docs)
npm package: @owlmetry/cli
Description: OwlMetry CLI — manage projects, apps, metrics, funnels, and events from the terminal. Includes AI skill files for agent-assisted development.
Latest version: 0.1.17

# @owlmetry/cli

CLI for [OwlMetry](https://owlmetry.com) — self-hosted metrics tracking for mobile and backend apps.

Manage projects, apps, metrics, funnels, and events from the terminal. Ships with AI skill files to teach your coding agent how to use OwlMetry.

## Install

```bash
npm install -g @owlmetry/cli
```

## Quick Start

```bash
# Sign up or log in
owlmetry auth send-code --email you@example.com
owlmetry auth verify --email you@example.com --code 123456

# Save your credentials
owlmetry setup --endpoint https://api.owlmetry.com --api-key owl_agent_...

# Explore
owlmetry projects
owlmetry apps
owlmetry events --last 1h
owlmetry metrics
owlmetry funnels
```

## AI Skills

This package bundles skill files that teach AI agents (Claude Code, Codex, etc.) how to use OwlMetry — including the CLI, Node SDK, and Swift SDK.

```bash
owlmetry skills
```

This prints the absolute paths to each skill file. Point your agent to these files to give it full OwlMetry knowledge.

## Links

- [Website](https://owlmetry.com)
- [GitHub](https://github.com/Jasonvdb/owlmetry)
npm package: @owlmetry/node
Description: OwlMetry Node.js Server SDK
Latest version: 0.1.9

# @owlmetry/node

Node.js SDK for [OwlMetry](https://owlmetry.com) — self-hosted metrics tracking for mobile and backend apps.

Zero runtime dependencies. Works with any Node.js framework.

## Install

```bash
npm install @owlmetry/node
```

## Quick Start

```js
import OwlMetry from "@owlmetry/node";

OwlMetry.configure({
  clientKey: "owl_client_...",
  endpoint: "https://ingest.owlmetry.com",
});

// Log events
OwlMetry.info("User signed up", { screen: "onboarding" });
OwlMetry.error("Payment failed", { orderId: "abc123" });

// Track metrics
const op = OwlMetry.startOperation("api-request");
// ... do work ...
op.complete({ route: "/users" });

// Record funnel steps
OwlMetry.step("signup-started");

// Serverless support
export default OwlMetry.wrapHandler(async (req, res) => {
  OwlMetry.info("Request received");
  res.json({ ok: true });
});
```

## Links

- [Website](https://owlmetry.com)
- [GitHub](https://github.com/Jasonvdb/owlmetry)
- [CLI with AI skills](https://www.npmjs.com/package/@owlmetry/cli) — install the CLI and run `owlmetry skills` to get AI agent skill files
npm package: @owlpro/react-dotenv
Description: Load environment variables dynamically for your React applications created with CRA (Create-React-App).
Author: Owlpro
Latest version: 1.0.7

# react-dotenv

Load environment variables dynamically for your React applications created with `create-react-app`.

This will create a `env.js` file in your `public` and `build` directories, which will expose your environment variables you want in the global `window.env` variable.
It will also take care of configuring the `index.html` file present in those directories to load that file.

## Installation

```sh
npm install @ludovicm67/react-dotenv
```

## Usage

### Setup your project

Create a `.env` file at the root of your project, with some relevant values, like this:

```env
API_URL=https://example.com
SOME_OTHER_VARIABLE=foo
```

Open your project's `package.json` file and add:

- the `react-dotenv` command to your `start` and `build` scripts.
- the `react-dotenv.whitelist` property to specify which variables you need to be exposed.

Here is an example:

**package.json**:
```js
{
  // …other fields

  "scripts": {
    "start": "react-dotenv && react-scripts start", // <-- append command
    "build": "react-dotenv && react-scripts build", // <-- append command
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

  // …some other fields

  // Add the react-dotenv configuration
  "react-dotenv": {
    "whitelist": ["API_URL"]
  }
}
```

### Access environment variables from your code

You can start the development server using the following command:

```sh
npm run start
```

Now your project have the environment variables loaded **globally** in the `window.env` property.

You can access the environment variables from your code in two ways:

#### Using the `@ludovicm67/react-dotenv` library

```jsx
import React from "react";
import env from "@ludovicm67/react-dotenv";

const MyComponent = () => {
  return <div>{ env.API_URL }</div>;
};

export default MyComponent;
```

#### Using the `window.env` global variable

```jsx
import React from "react";

const MyComponent = () => {
  return <div>{ window.env.API_URL }</div>;
};

export default MyComponent;
```

## Known limitations

This only supports one environment (so only one `.env` file) and is not meant to do more.

## Attributions

Forked from [jeserodz/react-dotenv](https://github.com/jeserodz/react-dotenv/commit/5ca0fe8ae117f18ae43ca965534c4c3d13f81897).

Reasons:
- upgrade dependencies
- use ESM
- fix TypeScript types
- fix the import of the `env.js` file in the `index.html` files
npm package: @owlprotocol/backend-bundler
Description: [Bundler Client](https://viem.sh/account-abstraction/clients/bundler) and [Paymaster Client](https://viem.sh/account-abstraction/clients/paymaster) designed to work with [viem](https://viem.sh/) or as simple [EIP1193](https://eips.ethereum.org/EIPS/eip-11
Author: Leo Vigna
Latest version: 3.1.3

# Wallet Backend

[Bundler Client](https://viem.sh/account-abstraction/clients/bundler) and [Paymaster Client](https://viem.sh/account-abstraction/clients/paymaster) designed to work with [viem](https://viem.sh/) or as simple [EIP1193](https://eips.ethereum.org/EIPS/eip-1193) providers.

## Backend

While the backend implements "Client" interfaces, this only refers to the fact it connects to a blokchain RPC. The bundler & paymaster should only be run within the context of a NodeJS **backend service** that will act as a bundler or paymaster signer.
npm package: @owlprotocol/backend-indexer
Description: [Public Client](https://viem.sh/docs/clients/public.html) designed to work with [viem](https://viem.sh/) or as a simple [EIP1193](https://eips.ethereum.org/EIPS/eip-1193) provider and index data on Firebase.
Author: Leo Vigna
Latest version: 3.1.3

# Indexer Backend

[Public Client](https://viem.sh/docs/clients/public.html) designed to work with [viem](https://viem.sh/) or as a simple [EIP1193](https://eips.ethereum.org/EIPS/eip-1193) provider and index data on Firebase.

Created by adding middleware to common RPC operations like `eth_getBlock` or `eth_getTransactionReceipt` and interacting with Firebase.

## Backend

While the backend implements "Client" interfaces, this only refers to the fact it connects to a blokchain RPC.
This should only be run within the context of a NodeJS **backend service** connected to Firebase using the admin sdk.
npm package: @owlprotocol/backend-wallet
Description: [Wallet Client](https://viem.sh/docs/clients/wallet.html) designed to work with [viem](https://viem.sh/) or as a simple [EIP1193](https://eips.ethereum.org/EIPS/eip-1193) provider.
Author: Leo Vigna
Latest version: 3.1.3

# Wallet Backend

[Wallet Client](https://viem.sh/docs/clients/wallet.html) designed to work with [viem](https://viem.sh/) or as a simple [EIP1193](https://eips.ethereum.org/EIPS/eip-1193) provider.

Created by adding multiple [Account](https://viem.sh/docs/accounts/local) instances which enables it to support multiple accounts.
npm package: @owlprotocol/chains-deploy
Description: Owl Protocol's on-chain deployment script for various key smart contracts:
Author: Leo Vigna
Latest version: 3.1.2

# Chains Deploy

Owl Protocol's on-chain deployment script for various key smart contracts:

* Arachnid CREATE2 Deterministic Deployer
* Owl Protocol CREATE2 Factory (for more advanced deploys)
* ERC4337 Bundler & Paymaster
* EIP2535 Diamond Smart Contracts

More coming soon...

## Purpose

The key goal is to have 1 script that provides consistent deployment across EVM chains & uses counterfactual addresses whenver possible to have identical addresses on all blockchain networks.
npm package: @owlprotocol/clients
Description: Wrappers around viem & permissionless for easy integration with Owl Protocol RPC, Wallet,and Account Abstraction infrastructure.
Author: Leo Vigna
Latest version: 3.1.2

# Owl Protocol Clients

Wrappers around viem & permissionless for easy integration with Owl Protocol RPC, Wallet,and Account Abstraction infrastructure.
npm package: @owlprotocol/core-firebase
Description: Standalone package for firebase logic.
Author: Leo Vigna
Latest version: 3.1.2

# Contracts API Firebase

Standalone package for firebase logic.

Enables the following features:

-   Swap between firebase web (client side) & firebase-admin sdk (server side)
-   Data models defined in Typescript
-   Zod validators for data models
-   Security rules firebase web
-   Utility functions for CRUD operations

## Models

Exported under `@owlprotocol/contracts-api-firebase/models`. Includes interfaces of collection entities and zod validators.

## Web

Exported under `@owlprotocol/contracts-api-firebase/web`. Integration for `firebase` SDK that runs client-side. User is authenticated with a token and is bound by firestore security rules.

### Firestore Security Rules

https://firebase.google.com/docs/firestore/security/get-started#writing_rules
https://firebase.google.com/docs/firestore/security/rules-conditions

**TODO: CHANGE THIS**
All true

### Storage Bucket Security Rules

**TODO: CHANGE THIS**
All true

## Admin

Exported under `@owlprotocol/contracts-api-firebase/admin`. Integration for `firebase-admin` SDK that runs server-side. Admin SDK has full authority and ignores all security rules. Admin is authenticated using a service accouint.

## Emulators

The purpose of this package is also to have proper emulator config to be able to run local tests efficiently. We connect emulators for Firestore, Auth, Storage SDKs.

https://firebase.google.com/docs/emulator-suite/connect_firestore
https://firebase.google.com/docs/emulator-suite/connect_auth
https://firebase.google.com/docs/emulator-suite/connect_storage

## Updating Indexes
List firestore indexes for project
```bash
pnpm exec firebase --project owl-protocol-staging firestore:indexes > firestore.indexes.json
```

Update firestore indexes for project
https://firebase.google.com/docs/firestore/query-data/indexing#use_the_firebase_cli
```bash
pnpm exec firebase --project owl-protocol-staging --only firestore deploy
```
npm package: @owlprotocol/core-provider
Description: Core Owl Protocol EIP1193 provider and viem wrappers for the following types of RPC calls. * Public Client * Wallet Client * ERC4337 Bundler Client * ERC4337 Paymaster Client
Author: Leo Vigna
Latest version: 3.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Core Provider

Core Owl Protocol EIP1193 provider and viem wrappers for the following types of RPC calls.
* Public Client
* Wallet Client
* ERC4337 Bundler Client
* ERC4337 Paymaster Client
npm package: @owlprotocol/dfns-sdk-mock
Description: WARNING: For testing purposes ONLY. This is insecure!
Author: Leo Vigna
Latest version: 3.1.2

# DFNS SDK Mock

WARNING: For testing purposes ONLY. This is insecure!

Mock the DFNS SDK for local testing. The sdk stores private keys in memory and will conform to the DFNS client sdk.
npm package: @owlprotocol/envvars
Description: Typescript starter project.
Author: Leo Vigna
Latest version: 3.1.2

# Typescript Starter

Typescript starter project.

## package.json
Exports are defined as below
```json
{
  "type": "module",
  "main": "./lib/cjs/index.cjs",
  "module": "./lib/esm/index.mjs",
  "types": "./lib/types/index.d.ts",
  "exports": {
    ".": {
      "types": "./lib/types/index.d.ts",
      "require": "./lib/cjs/index.js",
      "import": "./lib/esm/index.js"
    }
}
```
* `type: "module"`: By default we use ESM Modules
* `lib/esm`: ESM built output
* `lib/cjs`: CJS build output
* `lib/types`: Typescript types
* No minified bundles are provided as these are left to frameworks to bundle.
npm package: @owlprotocol/eslint-config
Description: Shared ESLint Config.
Author: Leo Vigna
Latest version: 3.2.1

# Owl Protocol Eslint Config
Shared ESLint Config.

## Links
https://medium.com/reactbrasil/reuse-your-eslint-prettier-config-in-a-monorepo-with-lerna-54c1800cacdc
npm package: @owlprotocol/hardhat-config
Description: Shared Storybook config with Vite bundler for frotend projects using [StorybookJS](https://storybook.js.org/) for component prototyping.
Author: Leo Vigna
Latest version: 3.1.2

# Storybook Config
Shared Storybook config with Vite bundler for frotend projects using [StorybookJS](https://storybook.js.org/) for component prototyping.

Includes necessary polyfills for using Storybook + Vite with web3 projects such as [web3.js](https://web3js.readthedocs.io/) or [IPFS](https://js.ipfs.tech/).
npm package: @owlprotocol/zod-sol
Description: [zod](https://zod.dev/) schema validation for Solidity types.
Author: Leo Vigna
Latest version: 3.1.2

# Zod Sol
[zod](https://zod.dev/) schema validation for Solidity types.

Zod Sol enables the creation of Zod validators for Solidity smart contracts.
We support 2 types of zod validators:
* Typescript compiled: Uses a Typescript staticically typed ABI definition to generate a typed zod validator for function inputs & outputs. Flexible but has its limitations due to challenge of writing type inference.
* Code generation: Uses any ABI (json or object) to generate code that creates zod validator for function inputs & outputs. More flexiable and easier on the TS compiler but uses code generation and is therefore less composable with custom TS.
npm package: @owlui/closebutton
Description: [React Bootstrap Close Button Docs] https://react-bootstrap.github.io/components/close-button/
Latest version: 0.0.44

# Close Button

[React Bootstrap Close Button Docs] https://react-bootstrap.github.io/components/close-button/

## Usage

A generic close button for dismissing content such as modals and alerts.

```
const closeButton = require('@owlui/closeButton');

Default Close Button

<CloseButton />

Disabled Close Button

<CloseButton disabled />
```
npm package: @owlui/design
Description: - Open Adobe XD and create a [new file](./readme-assets/01-new-file.png) - Add some `Text` to the canvas, select the text and add its color and character styles to the [document assets](./readme-assets/02-text-example.png). - Save the file to the [Creativ
Latest version: 0.0.46

## Creating a Design

- Open Adobe XD and create a [new file](./readme-assets/01-new-file.png)
- Add some `Text` to the canvas, select the text and add its color and character styles to the [document assets](./readme-assets/02-text-example.png).
- Save the file to the [Creative Cloud](./readme-assets/03-saving-to-cloud.png)
- Select the [publish as a library](./readme-assets/04-publish.png) button and click the publish button in the current file section
- Click the browse tab, then click the done button on the [Browse shared libraries](./readme-assets/05-lib-browser.png)
- Go to the `Files` tab of the Creative Cloud portal and select the [Your libraries](./readme-assets/06-your-libs.png) section
- You should see a card of your file, hover over the card and click the menu icon then select the [share](./readme-assets/07-your-cc-file.png) option. You should see a modal open and a link being generated. **COPY** that [link](./readme-assets/08-dsp-link.png).

## Using the Design

To use the design we need to import the design file from XD then create a Design System Package (DSP).

**CC Lib Link**

> https://shared-assets.adobe.com/link/bf505209-e2bf-4af5-6378-307f3338bd14

### Importing to VS Code

- Install the Adobe VS Code extension
- Open the extension `cmd + opt + x`. It may try to locate a DSP, just close the file explorer if it does
- Go to the `DSP settings`
- Change the Languages so that only SCSS is selected
- Paste the link into the `CC LIBRARY LINK` field and click import
- Click `Save`
- Click `Start Editing` then `Finish Editing`
- Use your terminal apply changes to the [Theme](../theme/README.md) component: `yarn run presetup`

### Updating the DSP

- Go to the `DSP settings`
- Click the `Re-import` button of `CC LIBRARY LINK` field
- Click `Save`
- Click `Start Editing` then `Finish Editing`
- Use your terminal apply changes to the [Theme](../theme/README.md) component `yarn run presetup`

## Design Tokens

The DSP makes use of reference and contextual tokens. Reference tokens are hard values taken from import of the XD file. The contextual tokens are custom to the DSP and use the reference tokens as a value. This methodology has been directly inspired from [material design](https://m3.material.io/foundations/design-tokens/overview).

### Example

> `owl.ref.palette.dark` is used as the value for `owl.sys.color.on.light` and `owl.sys.bg.dark`.

This approach allows the developer to be concerned with only having to implement the appropriate context to element styling and leaves the designer free to make changes to references without having to worry about breaking code.
npm package: @owlui/dropdown
Description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin
Latest version: 0.0.44

# Dropdown Overview

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin

## Usage

Import or create an array of item objects, where each item has an id (string), a label (string), and a value; pass the items to the Dropdown component as a prop.

- [`<Dropdown>`](https://react-bootstrap.github.io/components/dropdowns/#dropdown-props)

```tsx
import { component as Dropdown } from '@owlui/dropdown';

const items = [
  {
    id: '1',
    label: 'Item 1',
    value: 'item1',
  },
  {
    id: '2',
    label: 'Item 2',
    value: undefined,
  },
  {
    id: '3',
    label: 'Item 3',
    value: undefined,
  },
];

<Dropdown items={items} />;
```
npm package: @owlui/icons
Description: Owl UI icons is a component acting as a wrapper around the [Material Design Font Icons](https://fonts.google.com/icons?selected=Material+Icons). The icon assets are managed by the [theme](../theme/README.md) not here, this allows the component to be **NOT
Latest version: 0.0.44

# Icons

Owl UI icons is a component acting as a wrapper around the [Material Design Font Icons](https://fonts.google.com/icons?selected=Material+Icons). The icon assets are managed by the [theme](../theme/README.md) not here, this allows the component to be **NOT** concerned with the actual font being used.

## Usage

```jsx
import * as Icons from '@owlui/icons';

export const Element = () => {
  return <Icons icon="home" />;
};

export default {
  Element,
};
```
npm package: @owlui/lib
Description: The purpose of this package is to provide a convenient method of importing the entirety of Owl UI.
Latest version: 0.0.46

# Components

The purpose of this package is to provide a convenient method of importing the entirety of Owl UI.

## Usage

Once this package is installed it can be used directly or on a individual component basis.

**Installation:**

> `npm i @owlui/lib`
>
> `yarn add @owlui/lib`

### Examples

#### Importing All Components

```jsx
import * as owlui from '@owlui/lib';

const DefaultBtn = owlui.button.Default;

export const Element = props => {
  const { children } = props;

  return <DefaultBtn>{children}</DefaultBtn>;
};

export default {
  Element,
};
```

#### Importing Single Component

```jsx
import { Default as DefaultBtn } from '@owlui/button';

export const Element = props => {
  const { children } = props;

  return <DefaultBtn>{children}</DefaultBtn>;
};

export default {
  Element,
};
```

## Customization

Details on how to customize the styling of components can be found [here](../theme/README.md).
npm package: @owlui/progressbar
Description: More info on the progress bar can be found here [React Bootstrap Progress Bar Docs] https://react-bootstrap.github.io/components/progress/
Latest version: 0.0.44

# Progress Bar

More info on the progress bar can be found here [React Bootstrap Progress Bar Docs] https://react-bootstrap.github.io/components/progress/

## Description

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
npm package: @owlui/switchtoggle
Description: Simple Bootstrap Switch Toggle component. Known as "Switch" - documentation can be found here: https://react-bootstrap.github.io/forms/checks-radios/#switches
Latest version: 0.0.44

# SwitchToggle Overview

Simple Bootstrap Switch Toggle component. Known as "Switch" - documentation can be found here: https://react-bootstrap.github.io/forms/checks-radios/#switches

# Description

This SwitchToggle component allows the user to click in order to switch between states, using a boolean. 

Example states: TRUE/FALSE, ON/OFF or ACTIVE/INACTIVE.

Click on each component to visit the Bootstrap docs and check out the complete list of available props:

- [`<Form.Check>`](https://react-bootstrap.github.io/forms/checks-radios/#form-check-props)
- [`<FormCheck.Input>`](https://react-bootstrap.github.io/forms/checks-radios/#form-check-input-props)
- [`<FormCheck.Label>`](https://react-bootstrap.github.io/forms/checks-radios/#form-check-label-props)

## Usage

Click the toggle to switch between opposing states.

## Example

```jsx
<Form>
  <Form.Check 
    type="switch"
    id="custom-switch"
    label="Check this switch"
  />
</Form>

## Example (disabled)
<Form>
  <Form.Check 
    disabled
    type="switch"
    label="disabled switch"
    id="disabled-custom-switch"
  />
</Form>
```
npm package: @owlui/tabs
Description: Simple Tab component based on the bootstrap Tab
Latest version: 0.0.44

# Overview

Simple Tab component based on the bootstrap Tab

## Description

The Tab component allows for simple same page navigation. Tabs is a higher-level component for quickly creating a Nav matched with a set of TabPanes with content.

## Usage

Click on each component to visit the Bootstrap docs and check out the complete list of available props:

- [`<Tabs>`](https://react-bootstrap.github.io/components/tabs/#tabs-props)

- [`<Tab>`](https://react-bootstrap.github.io/components/tabs/#tab-props)

- [`<TabContainer>`](https://react-bootstrap.github.io/components/tabs/#tab-container-props)

- [`<TabContent>`](https://react-bootstrap.github.io/components/tabs/#tab-content-props)

- [`<TabPane>`](https://react-bootstrap.github.io/components/tabs/#tab-pane-props)

## Examples

### Basic Tabs Implementation:

```jsx
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
  <Tab eventKey="home" title="Home">
    <div><div>
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <div><div>
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    <div><div>
  </Tab>
</Tabs>
```

```
npm package: @owlworks/custom-recognizer
Description: Custom recognizer
Latest version: 0.0.1

# Custom Question Answering Recognizer

## Summary
This recognizer helps you add a custom recognizer to an empty bot built with Bot Framework Composer in order to use [Azure Custom Question Answering](https://azure.microsoft.com/en-us/products/cognitive-services/question-answering/) in place of the now deprecated QnA Maker.

## Installation
Once you've installed the package using [Bot Framework Composer](https://docs.microsoft.com/composer), you can add our actions and triggers to your bot.

1. Create a new Composer bot using the `Empty Bot` template.

2. Open the Package Manager in Composer.

3. Search for `custom-question-answering-recognizer` and install the package.

## Configuration
To enable the Custom Question Answering recognizer, complete the following steps:

1. Select `Custom` as your root dialog's recognizer type.

2. Paste the following JSON into the custom recognizer configuration window:

```json
{
  "$kind": "Microsoft.CustomQuestionAnsweringRecognizer",
  "hostname": "<your endpoint, including https://>",
  "projectName": "<your project name>",
  "endpointKey": "<your endpoint key>"
}
```
3. Update the `hostname`, `projectName`, and `endpointKey` fields with the values from your Custom Question Answering service.

    - The hostname and endpoint key can be found in the `Keys & Endpoint` blade in the menus for your Azure Language Service in the Azure Portal
    - The project name can be found in your `Language Studio`

Ensure that you have selected the correct values for each field. Using the wrong values can lead to errors when running the bot.

## Usage
Once you have configured question and answer pairs in your Custom Question Answering project, custom intent triggers and the QnA intent triggers should function as normal.

Since the Custom Question Answering recognizer is a modified version of the existing QnAMaker recognizer, the workflow elements (such as multi turn) work the same. In addition the same QnAMaker events and telemetry are written out to the logs.

## Limitations
Please remember that Composer does not integrate natively with Question Answering, so managing question and answer pairs **must** be done in the Language Studio portal instead of Composer.
npm package: @owmdev/ui-components
Description: A React component library with separate CSS loading for better compatibility with sandboxed environments like HubSpot modules.
Latest version: 0.4.3

# OWM UI Components

A React component library with separate CSS loading for better compatibility with sandboxed environments like HubSpot modules.

## Installation

```bash
npm install owm-ui-components
```

## Usage

### 1. Import Components

```tsx
import { Button, Card, TextInput } from "@owmdev/ui-components";
```

### 2. Import CSS

You have several options for loading the CSS:

#### Option A: Import CSS using the css export (Recommended for React apps)

```tsx
// In your main App.tsx or index.tsx
import "@owmdev/css";
```

#### Option B: Import CSS directly from the dist folder (Recommended for HubSpot modules)

```tsx
// Import the CSS file directly
import "@owmdev/dist/owm-ui-components.css";
```

### 3. Use Components

```tsx
import React from "react";
import { Button } from "@owmdev/ui-components";

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Button variant="secondary" size="small">
        Small Button
      </Button>
    </div>
  );
}
```

## HubSpot Modules

For HubSpot React modules, use Option B above to import the CSS directly. This ensures the styles are properly loaded in the sandboxed environment.

```tsx
// In your HubSpot module
import React from "react";
import { Button } from "@owmdev/ui-components";
import "@owmdev/dist/owm-ui-components.css";

export default function MyHubSpotModule() {
  return (
    <div>
      <Button variant="primary">HubSpot Button</Button>
    </div>
  );
}
```

## Available Components

- `Button` - Various button variants and sizes
- `Card` - Container component
- `TextInput` - Form input component
- `ProgressBar` - Progress indicator
- `Stepper` - Step-by-step navigation
- `TagCheckBox` - Checkbox with tag styling
- `TagCheckBoxGroup` - Group of tag checkboxes

## CSS Variables

The library uses CSS custom properties for theming. Make sure your app has the `ds-theme` class or the CSS variables are available in your global scope.

```css
.ds-theme {
  --color-primary: #2c3b4e;
  --color-secondary: #5e8081;
  /* ... other variables */
}
```

## Troubleshooting

If you're experiencing issues with styles not loading in HubSpot modules:

1. Make sure you're importing the CSS file directly: `import '@owmdev/dist/owm-ui-components.css'`
2. Ensure the CSS variables are available in your global scope
3. Check that the `ds-theme` class is applied to your container element
npm package: @own-it/cli
Description: Own-it CLI for AI Journey tracking
Author: Own-it Team
Latest version: 0.1.3

# @own-it/cli

Own-it CLI for AI Journey tracking - Git 커밋과 Claude Code 세션을 자동으로 동기화하는 CLI 도구

## 📦 설치

### npx 사용 (권장)

```bash
npx own-it init
```

### 글로벌 설치

```bash
npm install -g @own-it/cli
own-it init
```

## 🚀 사용법

### 1. 프로젝트 초기화

프로젝트 루트 디렉토리에서 실행하세요:

```bash
npx own-it init
```

초기화 과정:
1. **Git 저장소 확인** - Git repository와 remote origin 확인
2. **API 키 입력** - Own-it Dashboard에서 발급받은 API 키 입력
3. **API 키 검증** - 사용자 인증 확인
4. **프로젝트 등록 확인** - Web Dashboard에 등록된 프로젝트인지 확인
5. **Git Hook 설치** - `post-commit` hook 자동 설치

### 2. API 키 발급

1. [https://own-it.dev/settings/api-keys](https://own-it.dev/settings/api-keys) 접속
2. "Create API Key" 버튼 클릭
3. API 키 복사

### 3. 프로젝트 등록

CLI 초기화 전에 먼저 Web Dashboard에서 프로젝트를 등록해야 합니다:

1. [https://own-it.dev/projects](https://own-it.dev/projects) 접속
2. "Link Project" 버튼 클릭
3. GitHub 저장소 선택
4. `npx own-it init` 실행

## 📋 요구사항

- **Node.js**: 20+ (권장)
- **Git**: Git 저장소 필수
- **Remote Origin**: GitHub repository URL 설정 필요
- **Claude Code**: `~/.claude/projects/` 디렉토리 (선택사항)

## 🔧 동작 방식

### Git Hook (post-commit)

커밋 시 자동으로 실행되는 Hook:

```bash
# 커밋 정보 수집
COMMIT_HASH=$(git rev-parse HEAD)
COMMIT_MESSAGE=$(git log -1 --pretty=%B)
BRANCH=$(git rev-parse --abbrev-ref HEAD)

# Claude 세션 파일 감지 (30분 이내 수정)
SESSION_FILE=$(find "$CLAUDE_PATH" -name "*.jsonl" -mmin -30 -print -quit)

# API로 세션 전송
curl -X POST "$API_URL/sync" \
  -H "Authorization: Bearer $API_KEY" \
  -F "projectId=$PROJECT_ID" \
  -F "commit=$COMMIT_HASH" \
  -F "session=@$SESSION_FILE"
```

### 설정 파일 (`.own-it`)

프로젝트 루트에 생성되는 설정 파일:

```json
{
  "projectId": "proj_abc123",
  "claudePath": "~/.claude/projects/...",
  "createdAt": "2025-12-26T10:00:00Z"
}
```

## 🚨 문제 해결

### "Git 저장소가 아닙니다"
```bash
git init
git remote add origin <repository-url>
```

### "프로젝트가 등록되지 않았습니다"
1. https://own-it.dev/projects 접속
2. "Link Project" 버튼 클릭
3. 저장소 선택
4. 다시 `npx own-it init` 실행

### "API 키가 유효하지 않습니다"
1. https://own-it.dev/settings/api-keys 에서 새 API 키 발급
2. 다시 `npx own-it init` 실행

### "Claude Code 경로를 찾을 수 없습니다"
- Claude Code를 사용하지 않는 경우 무시해도 됩니다
- Claude Code 사용 시 `~/.claude/projects/` 디렉토리가 있는지 확인

## 🔒 보안

- **API 키 보호**: Git Hook 스크립트에 평문으로 저장됨 (`.git/hooks/` 디렉토리는 `.gitignore` 대상)
- **`.own-it` 파일**: `.gitignore`에 추가하는 것을 권장

```.gitignore
.own-it
```

## 📖 참고 문서

- [Own-it AI Journey 기술 스펙](../../docs/01-development/04_own-it-journey-spec.md)
- [CLI 플로우 다이어그램](../../docs/02-scenario/02_cli-flow-diagram.md)
- [로드맵](../../docs/02-scenario/01_OWN-IT-JOURNEY-PLAN.md)

## 🛠 개발

### 로컬 빌드

```bash
cd packages/cli
pnpm install
pnpm build
```

### 로컬 링크

```bash
cd packages/cli
pnpm link --global

# 테스트 프로젝트에서
cd ~/my-test-project
npx own-it init
```

### 타입 체크

```bash
pnpm type-check
```

## 📝 라이센스

MIT

## 👥 기여자

- 황인준 - Backend/CLI 개발
- 윤누리 - Frontend 개발