open-index/open-npm huggingface dataset:
npm package: @grida/cg
Description: Grida Canvas Core Graphics
Author: softmarshmallow
Latest version: 0.0.0

# @grida/cg

Core Graphics Typings and Utilities

## Installation

```bash
npm install @grida/pixel-grid
# or
yarn add @grida/pixel-grid
# or
pnpm add @grida/pixel-grid
```

## Usage

```ts
import cg from "@grida/cg";

const boxShadow: cg.BoxShadow = {
  color: { r: 0, g: 0, b: 0, a: 0.25 },
  offset: [0, 4],
  blur: 4,
  spread: 0,
};
```
npm package: @grida/tokens
Description: Grida AST logic model
Author: softmarshmallow
Latest version: 0.0.0

# @grida/tokens

A utility package for handling property access expressions, template expressions, and object path resolution in Grida's codebase.

## Overview

This package provides utilities for:

- Property access expression handling
- Template expression rendering
- Object path resolution with scoped identifiers
- Deep object access and selection

## Installation

```bash
npm install @grida/tokens
# or
yarn add @grida/tokens
# or
pnpm add @grida/tokens
```

## Usage

### Property Access Expressions

```typescript
import { factory } from "@grida/tokens";

// Create a property access expression
const propertyAccess = factory.createPropertyAccessExpression(["props", "a"]);

// Get dependencies from the expression
const deps =
  factory.getStringValueExpressionAccessIdentifiersDependencyArray(
    propertyAccess
  );
// Returns: [["props", "a"]]
```

### Template Expressions

```typescript
import { factory } from "@grida/tokens";

// Create a template expression
const template = factory.createTemplateExpression([
  { kind: "StringLiteral", text: "Hi " },
  { kind: "Identifier", name: "name" },
]);

// Get dependencies from the template
const deps =
  factory.getStringValueExpressionAccessIdentifiersDependencyArray(template);
// Returns: [["name"]]
```

### Object Access and Path Resolution

```typescript
import { access } from "@grida/tokens";

const context = {
  scopedIdentifiers: {
    identifier: ["b", "c"],
    nested: ["identifier", "d"],
  },
};

// Resolve a path with context
const path = ["identifier", "d"];
const resolvedPath = access.resolvePath(path, context);
// Returns: ["b", "c", "d"]

// Access object values with context
const obj = { b: { c: { d: "value" } } };
const result = access.access(obj, path, context);
// Returns: "value"
```

## Features

- Property access expression creation and dependency analysis
- Template expression handling with string literals and identifiers
- Object path resolution with scoped identifier context
- Deep object access and selection utilities
- Recursive rendering of nested structures

## API

The package exports several modules:

- `factory`: Utilities for creating and analyzing expressions
- `render`: Template and expression rendering utilities
- `access`: Object path resolution and access utilities

## License

MIT
npm package: @grida/transparency-grid
Description: Transparency Grid component for Infinite Canvas
Author: softmarshmallow
Latest version: 0.0.0

# `@grida/transparency-grid`

Transparency Grid component for Infinite Canvas. A lightweight, performant transparency grid component that supports zooming, panning, and custom transformations.

## Installation

```bash
npm install @grida/transparency-grid
# or
yarn add @grida/transparency-grid
# or
pnpm add @grida/transparency-grid
```

## Usage

### React Component

```tsx
import { TransparencyGrid } from "@grida/transparency-grid/react";

function MyCanvas() {
  const [zoom, setZoom] = React.useState(1);
  const [offset, setOffset] = React.useState({ x: 0, y: 0 });

  return (
    <div className="relative w-full h-full">
      {/* Controls */}
      <div className="absolute top-4 left-4 z-10 bg-background rounded-sm border p-1 text-xs font-mono">
        <div className="flex gap-2">
          <button
            onClick={() => {
              setOffset({ x: 0, y: 0 });
              setZoom(1);
            }}
          >
            Reset
          </button>
          <span>Zoom: {zoom.toFixed(2)}</span>
          <span>
            Offset: ({offset.x.toFixed(2)}, {offset.y.toFixed(2)})
          </span>
        </div>
      </div>

      {/* Transparency Grid */}
      <TransparencyGrid
        width={window.innerWidth}
        height={window.innerHeight}
        transform={[
          [zoom, 0, offset.x],
          [0, zoom, offset.y],
        ]}
      />
    </div>
  );
}
```

### Core API (Non-React)

```typescript
import { TransparencyGrid2D } from "@grida/transparency-grid";

const canvas = document.querySelector("canvas");
const grid = new TransparencyGrid2D(canvas, {
  width: 800,
  height: 600,
  transform: [
    [1, 0, 0],
    [0, 1, 0],
  ],
});

// Update grid
grid.update({
  transform: [
    [2, 0, 100],
    [0, 2, 100],
  ],
});

// Draw
grid.draw();
```

## API Reference

### React Component Props

```typescript
type TransparencyGridProps = {
  width: number; // Width of the grid
  height: number; // Height of the grid
  transform: [
    // 2x3 transformation matrix
    [number, number, number], // [scaleX, skewY, translateX]
    [number, number, number], // [skewX, scaleY, translateY]
  ];
};
```

### Core API Types

```typescript
type TransparencyGridOptions = {
  width: number;
  height: number;
  transform: [[number, number, number], [number, number, number]];
};
```

## Features

- 🎯 Zero dependencies (except for color parsing)
- ⚡️ High performance canvas-based rendering
- 🔍 Support for zooming and panning
- 🎨 Customizable appearance
- 📱 Responsive design
- 🔄 Both React and vanilla JS support
- 🎮 WebGPU support (experimental)

## License

MIT © [Grida](https://grida.co)
npm package: @griddo/api-types
Description: Tipos públicos de la API de Griddo
Latest version: 1.1.3

# @griddo/api-types

> Tipos TypeScript compartidos entre proyectos del ecosistema Griddo.

Este paquete contiene definiciones de tipos reutilizables como DTOs, enums, filtros y estructuras de paginación que se
usan tanto en la API como en otros servicios o clientes.

---

## 📦 Instalación

```bash
npm install @griddo/api-types
# o
yarn add @griddo/api-types
# o
pnpm add @griddo/api-types
```

---

## 📚 Estructura del paquete

> EN CONSTRUCCIÓN

## 🛡️ Buenas prácticas

> EN CONSTRUCCIÓN

---

## 👥 Contribución

> EN CONSTRUCCIÓN

---
npm package: @griddo/eslint-plugin-griddo
Description: Griddo eslint plugin for best practices
Author: Griddo
Latest version: 1.0.17

# @griddo/eslint-plugin-griddo

Custom ESLint rules for Griddo projects.

## Installation

```bash
yarn add -D @griddo/eslint-plugin-griddo
```

## Usage (ESLint 8+)

### Option 1: Recommended Configuration (Recommended)

Add the recommended configuration to your `.eslintrc`:

```javascript
module.exports = {
  extends: [
    // ... other extends
    "plugin:@griddo/griddo/recommended",
  ],
};
```

### Option 2: Manual Configuration

Add the plugin and rules manually to your `.eslintrc`:

```javascript
module.exports = {
  plugins: ["@griddo/eslint-plugin-griddo"],
  rules: {
    "@griddo/griddo/no-browser-apis": "error",
  },
};
```

## Usage (ESLint 9+)

ESLint 9 uses the new flat config format. Create an `eslint.config.js` file:

### Option 1: Recommended Configuration (Recommended)

```javascript
import griddoPlugin from "@griddo/eslint-plugin-griddo";

export default [
  // ... other configs
  griddoPlugin.configs["flat/recommended"],
];
```

### Option 2: Manual Configuration

```javascript
import griddoPlugin from "@griddo/eslint-plugin-griddo";

export default [
  {
    plugins: {
      "@griddo/griddo": griddoPlugin,
    },
    rules: {
      "@griddo/griddo/no-browser-apis": "error",
    },
  },
];
```

## Rules

### no-browser-apis

Prevents usage of browser APIs that are not available during SSR (Server-Side Rendering). This helps prevent runtime errors in SSR environments like Gatsby where browser APIs are not available during the build process.

❌ Examples of incorrect code:

```jsx
// Direct usage of browser APIs
const title = document.title;
window.scrollTo(0, 0);
const data = localStorage.getItem("key");
const userAgent = navigator.userAgent;
```

✅ Examples of correct code:

> Although it's not strictly necessary to check `typeof window !== "undefined"` inside a useEffect (since it only runs on the client), it's considered good practice and is recommended for robustness and portability.

```jsx
import { useEffect } from "react";

function Component() {
  useEffect(() => {
    // Check if we're in the browser
    if (typeof window !== "undefined") {
      window.scrollTo(0, 0);
    }
  }, []);

  return <div>Hello</div>;
}
```