ghosto 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 1qh
+
+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,161 @@
+# ogrid
+
+**The dashboard grid that builds itself.**
+
+Drop widgets in. They measure themselves, find their place, and snap to a grid. Drag to rearrange. Resize to fit. Copy the config. Paste into code. Ship it.
+
+Your users can do the same thing — toggle edit mode, customize their layout, and it persists automatically. One prop.
+
+No other grid library does this. They all make you guess dimensions, wire up persistence, build dev tools from scratch. ogrid does it all.
+
+## Install
+
+```sh
+bun add ogrid
+```
+
+## Quick start
+
+```tsx
+import { Grid } from 'ogrid'
+import 'ogrid/styles.css'
+
+const config = {
+  layout: [
+    { i: 'revenue', w: 12, fill: true },
+    { i: 'users', w: 12 },
+    { i: 'chart', w: 16, fill: true },
+    { i: 'table', w: 8 },
+  ],
+}
+
+<Grid config={config}>
+  <RevenueChart key="revenue" />
+  <UserCount key="users" />
+  <ActivityChart key="chart" />
+  <RecentTable key="table" />
+</Grid>
+```
+
+That’s it. Each child needs a unique `key` matching a layout item’s `i`. Items without explicit `x`/`y` are auto-placed. Items with `fill: true` stretch to available height. Everything else sizes to content.
+
+## Edit mode
+
+```tsx
+<Grid config={config} editable>
+```
+
+One prop. Drag handles appear. Items become resizable. Users can rearrange everything.
+
+## Persistence
+
+```tsx
+<Grid config={config} editable id="dashboard" persist>
+```
+
+Two more props. User customizations save to localStorage automatically. Reload the page — layout restored. Reset clears it.
+
+## The Panel
+
+```tsx
+<Grid.Panel />
+<Grid config={config} editable id="dashboard" persist>
+```
+
+A toolbar that appears when `editable` is true. Sliders for columns, gap, and row height. Toggle cell boundaries. Copy the current layout as TypeScript. Reset to defaults. Accepts `children` (rendered at start) and `trailing` (rendered at end) for your own controls.
+
+```tsx
+<Grid.Panel trailing={<ThemeToggle />}>
+  <EditSwitch />
+</Grid.Panel>
+```
+
+## Dev workflow
+
+1. Add `editable` to your Grid
+2. Open the Panel — drag widgets, tweak sliders, toggle rings to see boundaries
+3. Click **Copy** — get the exact `GridConfig` as TypeScript
+4. Paste into your code as the default config
+5. Remove `editable` — ship a static, clean dashboard
+
+## User customization workflow
+
+1. User triggers edit mode (button, keyboard shortcut, easter egg — you decide)
+2. Drag handles and resize handles appear
+3. User rearranges their dashboard
+4. Layout persists to localStorage via `id` + `persist`
+5. User exits edit mode — clean view, their layout preserved
+6. **Reset** in Panel clears saved layout, restores your defaults
+
+## Props
+
+### `<Grid>`
+
+| Prop             | Type                           | Default | Description                              |
+| ---------------- | ------------------------------ | ------- | ---------------------------------------- |
+| `config`         | `GridConfig`                   | —       | Layout configuration                     |
+| `editable`       | `boolean`                      | `false` | Enable drag, resize, and handles         |
+| `id`             | `string`                       | —       | Storage key for persistence              |
+| `persist`        | `boolean`                      | `false` | Save user customizations to localStorage |
+| `onConfigChange` | `(config: GridConfig) => void` | —       | Called after drag/resize/slider changes  |
+
+### `<Grid.Panel>`
+
+| Prop       | Type        | Description                               |
+| ---------- | ----------- | ----------------------------------------- |
+| `children` | `ReactNode` | Controls rendered at the start of the bar |
+| `trailing` | `ReactNode` | Controls rendered at the end of the bar   |
+
+Auto-hides when `editable` is `false` and no `children`/`trailing` are provided.
+
+### `GridConfig`
+
+```ts
+interface GridConfig {
+  cols?: number // default: 24
+  gap?: number // default: 16px
+  rowHeight?: number // default: 50px
+  layout?: LayoutItem[]
+}
+
+interface LayoutItem {
+  i: string // must match child's key
+  w?: number // width in columns (default: full width)
+  h?: number // height in rows
+  x?: number // column position (auto-placed if omitted)
+  y?: number // row position (auto-placed if omitted)
+  fill?: boolean // stretch to available height
+  minH?: number // minimum height (auto-computed from content)
+  minW?: number // minimum width
+  className?: string // CSS classes for the cell
+}
+```
+
+## Hooks
+
+### `useGridConfig()`
+
+Returns the current `GridConfig` or `null` during measurement.
+
+```tsx
+import { useGridConfig } from 'ogrid'
+
+const config = useGridConfig()
+// { cols: 24, gap: 16, layout: [...] }
+```
+
+## How it works
+
+1. **Measurement phase** — Grid renders invisible, measures each child’s natural height via ResizeObserver
+2. **Layout computation** — Column-based placement algorithm finds optimal positions
+3. **Content constraints** — Resize can never shrink a cell below its content height
+4. **Freeform mode** — After measurement, items can be freely dragged and resized
+5. **Responsive** — Below 768px, switches to single-column compact mode
+
+## Built on
+
+- [react-grid-layout](https://github.com/1qh/react-grid-layout) — the battle-tested layout engine that handles drag, resize, collision detection, and smooth animations
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,77 @@
+import { ReactNode } from "react";
+import * as _$zustand from "zustand";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/mascot-canvas.d.ts
+declare const MascotCanvas: () => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/mascot.d.ts
+declare const MascotBubbleFollower: ({
+  children,
+  offsetY
+}: {
+  children: ReactNode;
+  offsetY?: number;
+}) => _$react_jsx_runtime0.JSX.Element;
+declare const Mascot: ({
+  bubble,
+  size
+}: {
+  bubble?: ReactNode;
+  size?: number;
+}) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/use-mascot-pose.d.ts
+interface MascotPose {
+  bodyScreenPx: {
+    x: number;
+    y: number;
+  };
+  homeWorld: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  setBodyScreenPx: (x: number, y: number) => void;
+  setHomeWorld: (x: number, y: number, z: number) => void;
+}
+declare const useMascotPose: _$zustand.UseBoundStore<_$zustand.StoreApi<MascotPose>>;
+//#endregion
+//#region src/constants.d.ts
+declare const CHANNEL_DECAY_S: {
+  readonly affection: 30;
+  readonly affinity: number;
+  readonly annoyance: 3;
+  readonly attention: 4;
+  readonly boredom: 600;
+  readonly cheer: 0.6;
+  readonly curiosity: 0.8;
+  readonly dizzy: 0.5;
+  readonly energy: 1800;
+  readonly excitement: 0.5;
+  readonly fatigue: 3600;
+  readonly heat: 0.6;
+  readonly hunger: 1800;
+  readonly joy: 0.6;
+  readonly loneliness: 40;
+  readonly magnetism: 1.5;
+  readonly worry: 4;
+};
+type ChannelName = keyof typeof CHANNEL_DECAY_S;
+//#endregion
+//#region src/use-mascot-channels.d.ts
+type ChannelName$1 = keyof typeof CHANNEL_DECAY_S;
+type Channels = Record<ChannelName$1, number>;
+interface MascotState {
+  bump: (name: ChannelName$1, delta: number, cap?: number) => void;
+  channels: Channels;
+  decay: (dt: number) => void;
+  set: (name: ChannelName$1, value: number) => void;
+  setSmoothK: (k: number) => void;
+  smoothed: () => Channels;
+  snapshot: () => Channels;
+  tick: (dt: number) => void;
+}
+declare const useMascotChannels: _$zustand.UseBoundStore<_$zustand.StoreApi<MascotState>>;
+//#endregion
+export { type ChannelName, Mascot, MascotBubbleFollower, MascotCanvas, useMascotChannels, useMascotPose };