## Upgrade to 2.0

Version 2.0 adds typed layer utilities, group layers, and new setters for
layer values and meta.

Follow the steps below to update to 2.0.0.

### Update package.json to 2.0.0

In your `package.json` file, update the registry URL to `version=2.0.0`:

```json
{
  "name": "my-designer",
  "dependencies": {
    "@shadcn/designer": "https://ds.shadcn.com/registry?version=2.0.0&license=YOUR_LICENSE_KEY"
  }
}
```

Then run `pnpm install` to pull version 2.0.0 from the registry.

### Use createLayerType

Custom layer definitions should now use `createLayerType`.

```tsx
import { createLayerType } from "@shadcn/designer"

export const shapeLayer = createLayerType({
  type: "shape",
  name: "Shape",
  defaultValues: {
    name: "Shape",
    value: { type: "square" },
    cssVars: {
      "--width": "100px",
      "--height": "100px",
      "--background-color": "#000000",
    },
  },
  render: (layer) => {
    return <div style={layer.contentStyle} />
  },
})
```

Keep your layer types in an inferred array. Do not annotate the array as
`LayerType[]`.

```ts
import { DEFAULT_LAYER_TYPES } from "@shadcn/designer"
import { shapeLayer } from "./shape"

export const layerTypes = [...DEFAULT_LAYER_TYPES, shapeLayer]
```

Register the array for type-safe `Layer`, `showForLayerTypes`, and layer setter
usage:

```ts
import type { InferLayerTypes } from "@shadcn/designer"
import type { layerTypes } from "./layers"

declare module "@shadcn/designer" {
  interface DesignerLayerTypes extends InferLayerTypes<typeof layerTypes> {}
}
```

### Review group layers

`DEFAULT_LAYER_TYPES` now includes a built-in `group` layer type. Groups use
`parentId` to store nested layers:

```ts
type Layer = {
  id: string
  type: string
  parentId?: string
}
```

2.0 adds:

- `GROUP_LAYERS` and `UNGROUP_LAYERS` actions.
- Ctrl/Cmd + G to group selected layers.
- Ctrl/Cmd + Shift + G to ungroup.
- Nested layer rendering and drag-and-drop parenting in `<PaneLayerTree>`.
- Layout controls for display, direction, alignment, wrapping, and gap.

New actions are available for working with groups:

```tsx
import { ActionLayoutWrap, ActionLayoutAlign, ActionLayoutDirection, ActionLayoutDisplay, ActionLayoutGap, ActionLayoutJustify, ActionLayoutPadding } from "@shadcn/designer"
```

### Replace value and meta writes

Use the new `useSetLayersValue` and `useSetLayersMeta` hooks to set layer values and meta. Keep `useSetLayersProperty` for shared fields such as `name` and `isLocked`.

```tsx
import { useSetLayersProperty } from "@shadcn/designer"

const setLayersProperty = useSetLayersProperty()

setLayersProperty(selectedLayerIds, "value", { type: "circle" })
```

```tsx
import { useSetLayersValue } from "@shadcn/designer"

const setLayersValue = useSetLayersValue()

setLayersValue<"shape">(selectedLayerIds, { type: "circle" })
```

Use `useSetLayersMeta` for `layer.meta`:

```tsx
import { useSetLayersProperty } from "@shadcn/designer"

const setLayersProperty = useSetLayersProperty()

setLayersProperty(selectedLayerIds, "meta", { approved: true })
```

```tsx
import { useSetLayersMeta } from "@shadcn/designer"

const setLayersMeta = useSetLayersMeta()

setLayersMeta<"card">(selectedLayerIds, { approved: true })
```

When you only have IDs, pass the layer type as a generic:

```tsx
setLayersValue<"shape">(selectedLayerIds, { type: "square" })
setLayersMeta<"card">(selectedLayerIds, { approved: true })
```

### 2.0 checklist

- Update the registry URL version and run `pnpm install`.
- Convert custom layer definitions to `createLayerType`.
- Register custom layer types with `InferLayerTypes`.
- Preserve and handle `parentId` in custom layer-list logic.
- Replace `value` writes with `useSetLayersValue`.
- Replace `meta` writes with `useSetLayersMeta`.

---

## Update to the latest minor version

In your `package.json` file, update the `version={PACKAGE_VERSION}` to the latest version. The latest version is **{PACKAGE_VERSION}**.

```json
{
  "name": "my-designer",
  "dependencies": {
    "@shadcn/designer": "https://ds.shadcn.com/registry?version=PACKAGE_VERSION&license=YOUR_LICENSE_KEY"
  }
}
```

Then run `pnpm install` to pull the latest version from the registry.