@loom-forge/grid 0.1.0

package/README.md

@@ -0,0 +1,48 @@
+# @loom-forge/grid
+
+**loom** · o layout **`grid`** (dashboard) sobre `react-grid-layout`. É a prova de que o DSL
+normaliza para o RGL: o nó declara `layout: "grid"` e cada filho um `placement: {x,y,w,h}`; o
+**planner** (headless, do lado do core) vira o array de layout e o **renderer** monta o
+`<ReactGridLayout>`. O core nem sabe que é RGL — ver
+[react/DECISIONS ADR-106](../react/docs/DECISIONS.md).
+
+```bash
+pnpm add @loom-forge/grid react-grid-layout
+```
+
+```ts
+import { gridPlanner, gridRenderer } from "@loom-forge/grid";
+const engine = createEngine({
+  planners: { ...defaultPlanners(), grid: gridPlanner() },
+  layoutRenderers: { ...defaultLayoutRenderers(), grid: gridRenderer() },
+});
+// def: { type:"Dashboard", layout:"grid", children:[{ id, type:"Widget", placement:{x,y,w,h} }] }
+import "react-grid-layout/css/styles.css"; // na v2 as alças já vêm nesta folha
+```
+
+Na **v1** do react-grid-layout falta a folha das alças, e ela vem do
+`react-resizable` (`import "react-resizable/css/styles.css"`). Na **v2** o pacote a
+embute, e o `react-resizable` deixou de ser dependência dele — importar de lá quebra
+o build.
+
+- `gridPlanner({ cols?, rowHeight? })` (headless) — `placement` → array de layout do RGL.
+- `gridRenderer({ width?, margin?, className?, component? })` — plano → `<ReactGridLayout>`. `component`
+  permite `WidthProvider(Responsive)` pra auto-width.
+
+## O `placement` — o contrato que o layout lê, e que ele publica
+
+O que um filho de `layout: "grid"` escreve em `placement` (`GridPlacement`):
+
+| campo                          | o quê                                                          |
+| ------------------------------ | -------------------------------------------------------------- |
+| `x`, `y`, `w`, `h`             | a célula: coluna, linha, largura e altura em unidades da grade |
+| `minW`, `maxW`, `minH`, `maxH` | os limites do redimensionamento                                |
+| `static`                       | fixo: nem arrasta nem redimensiona                             |
+| `isDraggable`, `isResizable`   | liga/desliga cada gesto por item                               |
+
+Tudo opcional; o que não é escrito segue o default do RGL. O planner **publica essa forma como
+JSON Schema em `placementSchema`** — é o que o inspetor da bancada lê para montar os campos de
+posição de um filho (`x`/`y`/`w`/`h` viram controles numéricos, `static` um checkbox), sem
+nenhuma lista escrita à mão do lado do editor: a fonte do campo é o contrato do layout, e não há
+segunda descrição para divergir dele. Um layout que não publica `placementSchema` deixa o
+inspetor mostrar o objeto cru — que é o preço de não ter contrato, e não um campo inventado.

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+import { LayoutPlanner } from '@loom-forge/core';
+import { ComponentType } from 'react';
+import { LayoutRenderer } from '@loom-forge/react';
+
+interface GridPlacement {
+    x?: number;
+    y?: number;
+    w?: number;
+    h?: number;
+    minW?: number;
+    maxW?: number;
+    minH?: number;
+    maxH?: number;
+    static?: boolean;
+    isDraggable?: boolean;
+    isResizable?: boolean;
+}
+interface GridLayoutItem {
+    i: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    minW?: number;
+    maxW?: number;
+    minH?: number;
+    maxH?: number;
+    static?: boolean;
+    isDraggable?: boolean;
+    isResizable?: boolean;
+}
+interface GridPlan {
+    cols: number;
+    rowHeight: number;
+    items: GridLayoutItem[];
+}
+interface GridPlannerOptions {
+    cols?: number;
+    rowHeight?: number;
+}
+declare function gridPlanner(opts?: GridPlannerOptions): LayoutPlanner;
+
+interface GridRendererOptions {
+    /** largura em px (o RGL base exige). Default 1200. Pra auto-width responsivo, use `component`. */
+    width?: number;
+    margin?: [number, number];
+    className?: string;
+    /** componente RGL custom (ex.: `WidthProvider(Responsive)`). Default: react-grid-layout. */
+    component?: ComponentType<Record<string, unknown>>;
+}
+declare function gridRenderer(opts?: GridRendererOptions): LayoutRenderer;
+
+export { type GridLayoutItem, type GridPlacement, type GridPlan, type GridPlannerOptions, type GridRendererOptions, gridPlanner, gridRenderer };

package/dist/index.js

@@ -0,0 +1,80 @@
+import RGLImport from 'react-grid-layout';
+import { jsx } from 'react/jsx-runtime';
+
+// src/planner.ts
+var PASS = [
+  "minW",
+  "maxW",
+  "minH",
+  "maxH",
+  "static",
+  "isDraggable",
+  "isResizable"
+];
+var GRID_PLACEMENT = {
+  type: "object",
+  properties: {
+    x: { type: "number" },
+    y: { type: "number" },
+    w: { type: "number" },
+    h: { type: "number" },
+    minW: { type: "number" },
+    maxW: { type: "number" },
+    minH: { type: "number" },
+    maxH: { type: "number" },
+    static: { type: "boolean" },
+    isDraggable: { type: "boolean" },
+    isResizable: { type: "boolean" }
+  }
+};
+function gridPlanner(opts = {}) {
+  const cols = opts.cols ?? 12;
+  const rowHeight = opts.rowHeight ?? 30;
+  return {
+    name: "grid",
+    plan(children) {
+      const items = children.map((c, idx) => {
+        const p = c.placement ?? {};
+        const item = {
+          i: c.id,
+          x: p.x ?? 0,
+          y: p.y ?? idx,
+          // sem y → empilha
+          w: p.w ?? cols,
+          h: p.h ?? 1
+        };
+        const bag = item;
+        for (const k of PASS) if (p[k] !== void 0) bag[k] = p[k];
+        return item;
+      });
+      return { cols, rowHeight, items };
+    },
+    placementSchema: GRID_PLACEMENT
+  };
+}
+var DefaultRGL = RGLImport.default ?? RGLImport;
+function gridRenderer(opts = {}) {
+  const Grid = opts.component ?? DefaultRGL;
+  return {
+    name: "grid",
+    render(plan, children) {
+      const p = plan;
+      return /* @__PURE__ */ jsx(
+        Grid,
+        {
+          className: opts.className,
+          layout: p.items,
+          cols: p.cols,
+          rowHeight: p.rowHeight,
+          width: opts.width ?? 1200,
+          margin: opts.margin,
+          children: p.items.map((it) => /* @__PURE__ */ jsx("div", { children: children.get(it.i) }, it.i))
+        }
+      );
+    }
+  };
+}
+
+export { gridPlanner, gridRenderer };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/planner.ts","../src/renderer.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { LayoutPlanner, PlannerChild } from \"@loom-forge/core\";\n\n/* ──────────────────────────────────────────────────────────────────────────────\n   Planner `grid` — metade HEADLESS do adapter de dashboard. `placement = {x,y,w,h,…}`\n   por nó → o array de layout do react-grid-layout (dados puros, sem RGL/react). O renderer\n   (view) consome esse plano e normaliza pro <ReactGridLayout>. O DSL fica NO NOSSO formato;\n   o RGL é só o meio de render.\n   ────────────────────────────────────────────────────────────────────────────── */\n\nexport interface GridPlacement {\n  x?: number;\n  y?: number;\n  w?: number;\n  h?: number;\n  minW?: number;\n  maxW?: number;\n  minH?: number;\n  maxH?: number;\n  static?: boolean;\n  isDraggable?: boolean;\n  isResizable?: boolean;\n}\n\nexport interface GridLayoutItem {\n  i: string;\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n  minW?: number;\n  maxW?: number;\n  minH?: number;\n  maxH?: number;\n  static?: boolean;\n  isDraggable?: boolean;\n  isResizable?: boolean;\n}\n\nexport interface GridPlan {\n  cols: number;\n  rowHeight: number;\n  items: GridLayoutItem[];\n}\n\nexport interface GridPlannerOptions {\n  cols?: number;\n  rowHeight?: number;\n}\n\nconst PASS = [\n  \"minW\",\n  \"maxW\",\n  \"minH\",\n  \"maxH\",\n  \"static\",\n  \"isDraggable\",\n  \"isResizable\",\n] as const;\n\n/** a forma do `placement` que este layout lê — a de `GridPlacement`, como JSON Schema. */\nconst GRID_PLACEMENT = {\n  type: \"object\",\n  properties: {\n    x: { type: \"number\" },\n    y: { type: \"number\" },\n    w: { type: \"number\" },\n    h: { type: \"number\" },\n    minW: { type: \"number\" },\n    maxW: { type: \"number\" },\n    minH: { type: \"number\" },\n    maxH: { type: \"number\" },\n    static: { type: \"boolean\" },\n    isDraggable: { type: \"boolean\" },\n    isResizable: { type: \"boolean\" },\n  },\n} as const;\n\nexport function gridPlanner(opts: GridPlannerOptions = {}): LayoutPlanner {\n  const cols = opts.cols ?? 12;\n  const rowHeight = opts.rowHeight ?? 30;\n  return {\n    name: \"grid\",\n    plan(children: PlannerChild[]): GridPlan {\n      const items = children.map((c, idx): GridLayoutItem => {\n        const p = (c.placement ?? {}) as GridPlacement;\n        const item: GridLayoutItem = {\n          i: c.id,\n          x: p.x ?? 0,\n          y: p.y ?? idx, // sem y → empilha\n          w: p.w ?? cols,\n          h: p.h ?? 1,\n        };\n        const bag = item as unknown as Record<string, unknown>;\n        for (const k of PASS) if (p[k] !== undefined) bag[k] = p[k];\n        return item;\n      });\n      return { cols, rowHeight, items };\n    },\n    placementSchema: GRID_PLACEMENT,\n  };\n}\n","import type { ComponentType } from \"react\";\nimport RGLImport from \"react-grid-layout\";\nimport type { LayoutRenderer } from \"@loom-forge/react\";\nimport type { GridPlan } from \"./planner\";\n\n/* Metade de VIEW do adapter `grid` — transforma o plano (do planner headless) num\n   <ReactGridLayout>. Interop CJS: o default export do react-grid-layout vem como `.default`\n   em alguns bundlers. Pra responsivo, passe `component` (ex.: `WidthProvider(Responsive)`). */\n\nconst DefaultRGL = ((\n  RGLImport as unknown as { default?: ComponentType<unknown> }\n).default ?? RGLImport) as ComponentType<Record<string, unknown>>;\n\nexport interface GridRendererOptions {\n  /** largura em px (o RGL base exige). Default 1200. Pra auto-width responsivo, use `component`. */\n  width?: number;\n  margin?: [number, number];\n  className?: string;\n  /** componente RGL custom (ex.: `WidthProvider(Responsive)`). Default: react-grid-layout. */\n  component?: ComponentType<Record<string, unknown>>;\n}\n\nexport function gridRenderer(opts: GridRendererOptions = {}): LayoutRenderer {\n  const Grid = opts.component ?? DefaultRGL;\n  return {\n    name: \"grid\",\n    render(plan, children) {\n      const p = plan as GridPlan;\n      return (\n        <Grid\n          className={opts.className}\n          layout={p.items}\n          cols={p.cols}\n          rowHeight={p.rowHeight}\n          width={opts.width ?? 1200}\n          margin={opts.margin}\n        >\n          {p.items.map((it) => (\n            <div key={it.i}>{children.get(it.i)}</div>\n          ))}\n        </Grid>\n      );\n    },\n  };\n}\n"]}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@loom-forge/grid",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "loom · o layout grid (dashboard) sobre react-grid-layout: o planner (headless) vira placement {x,y,w,h} em layout do RGL; o renderer monta o <ReactGridLayout>.",
+  "keywords": [
+    "grid",
+    "dashboard",
+    "layout",
+    "react-grid-layout"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Anderson D. Rosa",
+    "url": "https://github.com/andersondrosa"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/andersondrosa/loom-forge.git",
+    "directory": "packages/grid"
+  },
+  "homepage": "https://github.com/andersondrosa/loom-forge/tree/main/packages/grid#readme",
+  "bugs": {
+    "url": "https://github.com/andersondrosa/loom-forge/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@loom-forge/core": "0.1.0",
+    "@loom-forge/react": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-grid-layout": "^1 || ^2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-grid-layout": "^2.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-grid-layout": "^2.2.3",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}