@griddle/vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Trustybits
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# @griddle/vue
+
+Vue 3 bindings for [Griddle](https://github.com/Trustybits/griddle) — a headless,
+zero-dependency grid/canvas engine. Provides a `<GriddleGrid />` component and a
+`useGriddle()` composable that wrap [`@griddle/core`](https://www.npmjs.com/package/@griddle/core)
+with virtualized rendering, drag/resize handles, and animations.
+
+## Install
+
+```sh
+npm install @griddle/vue @griddle/core
+```
+
+`@griddle/core` and `vue` are **peer dependencies**. On npm 7+ the peers are
+installed automatically; with Yarn or pnpm, add `@griddle/core` yourself (as
+shown above). `vue` (>=3.3) is expected to already be in your app.
+
+## Usage
+
+```vue
+<script setup>
+import { GriddleGrid, useGriddle } from '@griddle/vue';
+
+const api = useGriddle({
+  config: { cols: 12, rows: 12, unitWidth: 75, unitHeight: 75 },
+  tiles: [
+    { id: '1', col: 0, row: 0, w: 2, h: 2 },
+    { id: '2', col: 2, row: 0, w: 1, h: 1 },
+  ],
+});
+</script>
+
+<template>
+  <GriddleGrid :api="api">
+    <template #tile="{ tile, selected }">
+      <div :data-selected="selected">#{{ tile.id }}</div>
+    </template>
+  </GriddleGrid>
+</template>
+```
+
+## Loop mode (infinite gallery)
+
+Enable `loop` in the config and the content repeats endlessly with drag-to-pan
+physics — no scrollbars:
+
+```ts
+const api = useGriddle({
+  config: {
+    cols: 12, rows: 12, unitWidth: 120, unitHeight: 120,
+    loop: { enabled: true, interaction: 'pan' }, // 'pan' = viewer, 'edit' = ghost edit
+  },
+  tiles,
+});
+```
+
+`<GriddleGrid>` automatically switches to the loop renderer when
+`config.loop.enabled` is `true`, so most apps never touch the loop component
+directly. For advanced cases where you want to render the loop plane explicitly,
+`GriddleLoopGrid` is also exported and takes the same props as `GriddleGrid`:
+
+```js
+import { GriddleLoopGrid } from '@griddle/vue';
+```
+
+See the [main repository](https://github.com/Trustybits/griddle) for full docs.
+
+## License
+
+MIT © Trustybits

package/dist/GriddleGrid.vue.d.ts

@@ -0,0 +1,57 @@
+import type { CameraState, Tile } from '@griddle/core';
+import type { GriddleApi } from './useGriddle.js';
+type __VLS_Props = {
+    api: GriddleApi;
+    className?: string;
+    height?: number | string;
+    showGrid?: boolean;
+    /** Controlled selection. If omitted, managed internally. */
+    selection?: Set<string>;
+};
+declare var __VLS_14: {
+    tile: Tile;
+    selected: boolean;
+}, __VLS_16: {
+    tile: Tile;
+    selected: boolean;
+};
+type __VLS_Slots = {} & {
+    tile?: (props: typeof __VLS_14) => any;
+} & {
+    tile?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    selectionChange: (selection: Set<string>) => any;
+    dragStart: (tileId: string) => any;
+    dragEnd: (tileId: string, committed: boolean) => any;
+    resizeStart: (tileId: string) => any;
+    resizeEnd: (tileId: string, committed: boolean) => any;
+    cameraChange: (camera: CameraState) => any;
+    drawCreate: (rect: {
+        col: number;
+        row: number;
+        w: number;
+        h: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelectionChange?: ((selection: Set<string>) => any) | undefined;
+    onDragStart?: ((tileId: string) => any) | undefined;
+    onDragEnd?: ((tileId: string, committed: boolean) => any) | undefined;
+    onResizeStart?: ((tileId: string) => any) | undefined;
+    onResizeEnd?: ((tileId: string, committed: boolean) => any) | undefined;
+    onCameraChange?: ((camera: CameraState) => any) | undefined;
+    onDrawCreate?: ((rect: {
+        col: number;
+        row: number;
+        w: number;
+        h: number;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=GriddleGrid.vue.d.ts.map

package/dist/GriddleGrid.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GriddleGrid.vue.d.ts","sourceRoot":"","sources":["../src/GriddleGrid.vue"],"names":[],"mappings":"AAwuBA,OAAO,KAAK,EAAE,WAAW,EAAU,IAAI,EAAE,MAAM,eAAe,CAAC;AAc/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,UAAU,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AAowBF,QAAA,IAAI,QAAQ;;;CAAW,EAAE,QAAQ;;;CAAY,CAAE;AAC/C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AA8C7C,QAAA,MAAM,eAAe;;;;;;;;aAhzBY,MAAM;aAAO,MAAM;WAAK,MAAM;WAAK,MAAM;;;;;;;;;;aAAzC,MAAM;aAAO,MAAM;WAAK,MAAM;WAAK,MAAM;;kFAuzBxE,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/LoopGrid.vue.d.ts

@@ -0,0 +1,44 @@
+import type { CameraState, Tile } from '@griddle/core';
+import type { GriddleApi } from './useGriddle.js';
+type __VLS_Props = {
+    api: GriddleApi;
+    className?: string;
+    height?: number | string;
+    showGrid?: boolean;
+    selection?: Set<string>;
+};
+declare var __VLS_1: {
+    tile: Tile;
+    selected: boolean;
+}, __VLS_3: {
+    tile: Tile;
+    selected: boolean;
+};
+type __VLS_Slots = {} & {
+    tile?: (props: typeof __VLS_1) => any;
+} & {
+    tile?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    selectionChange: (selection: Set<string>) => any;
+    dragStart: (tileId: string) => any;
+    dragEnd: (tileId: string, committed: boolean) => any;
+    resizeStart: (tileId: string) => any;
+    resizeEnd: (tileId: string, committed: boolean) => any;
+    cameraChange: (camera: CameraState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelectionChange?: ((selection: Set<string>) => any) | undefined;
+    onDragStart?: ((tileId: string) => any) | undefined;
+    onDragEnd?: ((tileId: string, committed: boolean) => any) | undefined;
+    onResizeStart?: ((tileId: string) => any) | undefined;
+    onResizeEnd?: ((tileId: string, committed: boolean) => any) | undefined;
+    onCameraChange?: ((camera: CameraState) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=LoopGrid.vue.d.ts.map

package/dist/LoopGrid.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoopGrid.vue.d.ts","sourceRoot":"","sources":["../src/LoopGrid.vue"],"names":[],"mappings":"AA4nBA,OAAO,KAAK,EAAE,WAAW,EAAmB,IAAI,EAAE,MAAM,eAAe,CAAC;AASxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,KAAK,WAAW,GAAG;IACjB,GAAG,EAAE,UAAU,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AAqnBF,QAAA,IAAI,OAAO;;;CAAU,EAAE,OAAO;;;CAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AA8C5C,QAAA,MAAM,eAAe;;;;;;;;;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as GriddleGrid } from './GriddleGrid.vue';
+export { default as GriddleLoopGrid } from './LoopGrid.vue';
+export { useGriddle, type GriddleApi, type UseGriddleInit } from './useGriddle.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC"}