@likec4/diagram 1.0.0-next.2 → 1.0.0

package/dist/xyflow/types.d.ts

@@ -1,19 +1,21 @@
 import { SetReadonly, SetRequired, Simplify } from 'type-fest';
-import { Edge, Node, ReactFlowInstance } from '@xyflow/react';
-import { BBox, DiagramEdge, DiagramNode, Point } from '@likec4/core';
+import { MouseEvent as ReactMouseEvent } from 'react';
+import { Edge, EdgeMouseHandler, InternalNode, Node, NodeMouseHandler, OnMoveEnd, OnMoveStart, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
+import { BBox, DiagramEdge, DiagramNode, Fqn, Point } from '@likec4/core';
 
 export type ElementNodeData = {
-    id: string;
+    fqn: Fqn;
     element: DiagramNode;
 };
 type TypedXYFlowNode<D extends Record<string, unknown>, T extends string> = SetReadonly<SetRequired<Node<D, T>, 'type'>, 'id' | 'type'>;
 export type ElementXYFlowNode = TypedXYFlowNode<ElementNodeData, 'element'>;
 export type CompoundNodeData = {
-    id: string;
+    fqn: Fqn;
     element: DiagramNode;
 };
 export type CompoundXYFlowNode = TypedXYFlowNode<CompoundNodeData, 'compound'>;
 export type XYFlowNode = ElementXYFlowNode | CompoundXYFlowNode;
+export type InternalXYFlowNode = InternalNode<XYFlowNode>;
 export declare namespace XYFlowNode {
     type Data = ElementNodeData | CompoundNodeData;
     function isCompound(node: unknown): node is CompoundXYFlowNode;
@@ -42,11 +44,13 @@ export declare namespace XYFlowEdge {
         target: string;
         style?: import('react').CSSProperties;
         id: string;
+        zIndex?: number;
+        markerEnd?: import('@xyflow/react').EdgeMarkerType;
+        markerStart?: import('@xyflow/react').EdgeMarkerType;
         hidden?: boolean;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
-        zIndex?: number;
         ariaLabel?: string;
         className?: string;
         focusable?: boolean;
@@ -54,8 +58,6 @@ export declare namespace XYFlowEdge {
         sourceHandle?: string | null;
         targetHandle?: string | null;
         animated?: boolean;
-        markerStart?: import('@xyflow/react').EdgeMarkerType;
-        markerEnd?: import('@xyflow/react').EdgeMarkerType;
         interactionWidth?: number;
         labelStyle?: import('react').CSSProperties;
         labelShowBg?: boolean;
@@ -68,9 +70,19 @@ export declare namespace XYFlowEdge {
     };
 }
 export type XYFlowInstance = ReactFlowInstance<XYFlowNode, XYFlowEdge>;
+export type XYFlowState = ReactFlowState<XYFlowNode, XYFlowEdge>;
 export type XYFlowData = {
     nodes: XYFlowNode[];
     edges: XYFlowEdge[];
 };
+export type XYFlowEventHandlers = {
+    onPanelClick: (event: ReactMouseEvent) => void;
+    onNodeContextMenu: NodeMouseHandler<XYFlowNode>;
+    onEdgeContextMenu: EdgeMouseHandler<XYFlowEdge>;
+    onPaneContextMenu: (event: ReactMouseEvent | MouseEvent) => void;
+    onNodeClick: NodeMouseHandler<XYFlowNode>;
+    onEdgeClick: EdgeMouseHandler<XYFlowEdge>;
+    onMoveStart: OnMoveStart;
+    onMoveEnd: OnMoveEnd;
+};
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/xyflow/utils.d.ts

@@ -2,4 +2,3 @@ import { XYPosition } from '@xyflow/react';
 
 export declare function toDomPrecision(v: number | null): number;
 export declare function distance(a: XYPosition, b: XYPosition): number;
-//# sourceMappingURL=utils.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.0.0-next.2",
+  "version": "1.0.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -15,43 +15,50 @@
     "LICENSE",
     "README.md",
     "dist",
+    "src",
+    "!dist/src",
     "!**/*.spec.*",
-    "!**/*.map"
-  ],
-  "sideEffects": [
-    "**/*.css"
+    "!**/*.d.ts.map"
   ],
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "default": "./dist/index.mjs"
     },
-    "./style.css": "./dist/style.css",
-    "./dist/style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
-    "access": "public"
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "./style.css": "./dist/style.css"
+    }
   },
   "packageManager": "yarn@4.1.1",
   "scripts": {
-    "typecheck": "tsc --emitDeclarationOnly --declaration --declarationMap",
+    "typecheck": "tsc",
+    "prepack": "vite build --mode production",
     "build:turbo": "run -T turbo build --filter='diagram'",
-    "build": "vite build && run typecheck",
+    "build": "vite build --mode development && tsc -b",
     "lint": "run -T eslint src/ --fix",
-    "clean": "run -T rimraf dist bundle"
+    "clean": "run -T rimraf -v dist/* .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.0.0-next.2",
-    "@mantine/core": "^7.7.0",
-    "@mantine/hooks": "^7.7.0",
-    "framer-motion": "^11.0.22",
-    "react-tracked": "^1.7.11",
-    "remeda": "^1.56.0",
-    "scheduler": "^0.23.0",
-    "type-fest": "^4.13.1"
+    "@likec4/core": "1.0.0",
+    "@mantine/core": "^7.9.0",
+    "@mantine/hooks": "^7.9.0",
+    "@react-hookz/web": "^24.0.4",
+    "esm-env": "^1.0.0",
+    "fast-equals": "^5.0.1",
+    "framer-motion": "^11.1.7",
+    "remeda": "^1.61.0",
+    "zustand": "^4.5.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -59,30 +66,25 @@
   },
   "devDependencies": {
     "@lume/kiwi": "^0.4.3",
-    "@mantine/vanilla-extract": "^7.7.0",
-    "@react-hookz/deep-equal": "^2.0.2",
-    "@react-hookz/web": "^24.0.4",
+    "@mantine/vanilla-extract": "^7.9.0",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/css": "^1.15.1",
     "@vanilla-extract/dynamic": "^2.1.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.5",
-    "@vanilla-extract/recipes": "^0.5.2",
     "@vitejs/plugin-react": "^4.2.1",
-    "@xyflow/react": "^12.0.0-next.12",
-    "clsx": "^2.1.0",
+    "@xyflow/react": "^12.0.0-next",
+    "clsx": "^2.1.1",
     "execa": "^8.0.1",
-    "fast-equals": "^5.0.1",
     "khroma": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "terser": "^5.30.0",
     "tilg": "^0.1.1",
-    "typescript": "^5.4.3",
+    "type-fest": "^4.18.2",
+    "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
-    "vite": "^5.2.6",
-    "vite-plugin-dts": "^3.8.1",
-    "vite-plugin-shadow-style": "^1.1.0"
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.8.1"
   }
 }

package/src/LikeC4Diagram.css.ts

@@ -0,0 +1,31 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { vars, xyvars } from './theme.css'
+
+export const cssReactFlow = style({})
+
+globalStyle(`.react-flow${cssReactFlow}`, {
+  vars: {
+    [xyvars.background.color]: vars.likec4.background.color,
+    [xyvars.background.pattern.color]: vars.likec4.background.pattern.color
+  }
+})
+globalStyle(`.react-flow${cssReactFlow} .react-flow__viewport`, {
+  willChange: 'transform'
+})
+
+export const cssDisablePan = style({})
+
+export const cssTransparentBg = style({})
+
+globalStyle(`.react-flow${cssReactFlow}${cssTransparentBg}`, {
+  backgroundColor: 'transparent !important',
+  vars: {
+    [vars.likec4.background.color]: 'transparent !important',
+    [xyvars.background.color]: 'transparent !important'
+  }
+})
+
+export const cssNoControls = style({})
+globalStyle(`:where(${cssNoControls}, ${cssTransparentBg}) .react-flow__attribution`, {
+  display: 'none'
+})

package/src/LikeC4Diagram.props.ts

@@ -0,0 +1,154 @@
+import type {
+  DiagramEdge,
+  DiagramNode,
+  DiagramView,
+  ElementShape,
+  Fqn,
+  NonEmptyArray,
+  ThemeColor,
+  ViewID
+} from '@likec4/core'
+import type { MouseEvent as ReactMouseEvent } from 'react'
+import type { SetRequired, Simplify } from 'type-fest'
+import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
+import type { XYBackgroundProps } from './xyflow/XYFlowBackground'
+
+export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
+
+export type OnNavigateTo = {
+  (
+    to: ViewID,
+    event: ReactMouseEvent,
+    element: DiagramNodeWithNavigate,
+    xynode: XYFlowNode
+  ): void
+}
+export type OnNodeClick = (
+  event: {
+    element: DiagramNode
+    xynode: XYFlowNode
+    event: ReactMouseEvent
+  }
+) => void
+export type OnEdgeClick = (
+  event: {
+    relation: DiagramEdge
+    xyedge: XYFlowEdge
+    event: ReactMouseEvent
+  }
+) => void
+
+/**
+ * On pane/canvas click (not on any node or edge)
+ */
+export type OnCanvasClick = (event: ReactMouseEvent) => void
+
+export namespace Changes {
+  export interface ChangeColor {
+    op: 'change-color'
+    color: ThemeColor
+    targets: NonEmptyArray<Fqn>
+  }
+
+  export interface ChangeShape {
+    op: 'change-shape'
+    shape: ElementShape
+    targets: NonEmptyArray<Fqn>
+  }
+}
+
+export type Change =
+  | Changes.ChangeColor
+  | Changes.ChangeShape
+
+export type ChangeEvent = {
+  changes: NonEmptyArray<Change>
+}
+export type OnChange = {
+  (event: ChangeEvent): void
+}
+export type LikeC4ColorScheme = 'light' | 'dark'
+
+export interface LikeC4DiagramProperties {
+  view: DiagramView
+
+  className?: string | undefined
+
+  /**
+   * Controls color scheme used for styling the flow
+   * By default inherits from system or surrounding MantineProvider
+   *
+   * @example 'light' | 'dark'
+   */
+  // colorScheme?: LikeC4ColorScheme | undefined
+
+  /**
+   * Show/hide controls menu
+   * @default false
+   */
+  controls?: boolean | undefined
+  /**
+   * Enable/disable panning
+   * @default true
+   */
+  pannable?: boolean | undefined
+  /**
+   * Enable/disable zooming
+   * @default true
+   */
+  zoomable?: boolean | undefined
+  /**
+   * Disable any editing (dragging still can be enabled with `nodesDraggable`)
+   * @default true
+   */
+  readonly?: boolean | undefined
+  /**
+   * If set, initial viewport will show all nodes & edges
+   * @default true
+   */
+  fitView?: boolean | undefined
+  /**
+   * Seems like this is percentage of the view size
+   * @default 0
+   */
+  fitViewPadding?: number | undefined
+  nodesSelectable?: boolean | undefined
+
+  /**
+   * @default false
+   */
+  nodesDraggable?: boolean | undefined
+
+  initialWidth?: number | undefined
+  initialHeight?: number | undefined
+
+  /**
+   * Keep aspect ratio of the diagram
+   * @default false
+   */
+  keepAspectRatio?: boolean | undefined
+
+  /**
+   * Background pattern
+   * @default 'dots'
+   */
+  background?: 'transparent' | 'solid' | XYBackgroundProps | undefined
+
+  /**
+   * Display hovercards with element links
+   * @default true
+   */
+  showElementLinks?: boolean | undefined
+}
+
+export interface LikeC4DiagramEventHandlers {
+  onChange?: OnChange | null | undefined
+  onNavigateTo?: OnNavigateTo | null | undefined
+  onNodeClick?: OnNodeClick | null | undefined
+  onNodeContextMenu?: OnNodeClick | null | undefined
+  onCanvasContextMenu?: OnCanvasClick | null | undefined
+  onEdgeClick?: OnEdgeClick | null | undefined
+  onEdgeContextMenu?: OnEdgeClick | null | undefined
+  onCanvasClick?: OnCanvasClick | null | undefined
+  onCanvasDblClick?: OnCanvasClick | null | undefined
+}

package/src/LikeC4Diagram.tsx

@@ -0,0 +1,119 @@
+import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
+import clsx from 'clsx'
+import { useRef } from 'react'
+import { rootClassName } from './globals.css'
+import { cssDisablePan, cssNoControls, cssReactFlow, cssTransparentBg } from './LikeC4Diagram.css'
+import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
+import { EnsureMantine } from './mantine/EnsureMantine'
+import { DiagramContextProvider } from './state/DiagramContext'
+import { WhenInitialized } from './state/WhenInitialized'
+import { KeepAspectRatio } from './ui/KeepAspectRatio'
+import OptionsPanel from './ui/OptionsPanel'
+import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
+import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
+import { SyncWithDiagram } from './xyflow/SyncWithDiagram'
+import type { XYFlowData } from './xyflow/types'
+import { XYFlow } from './xyflow/XYFlowWrapper'
+
+export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers
+export function LikeC4Diagram({
+  view,
+  className,
+  fitView = true,
+  fitViewPadding = 0,
+  readonly = true,
+  pannable = true,
+  zoomable = true,
+  nodesSelectable = !readonly,
+  nodesDraggable = !readonly,
+  background = 'dots',
+  controls = false,
+  showElementLinks = true,
+  initialWidth,
+  initialHeight,
+  keepAspectRatio = false,
+  onCanvasClick,
+  onCanvasContextMenu,
+  onCanvasDblClick,
+  onEdgeClick,
+  onChange,
+  onEdgeContextMenu,
+  onNavigateTo,
+  onNodeClick,
+  onNodeContextMenu
+}: LikeC4DiagramProps) {
+  const initialRef = useRef<{
+    defaultNodes: XYFlowData['nodes']
+    defaultEdges: XYFlowData['edges']
+    initialWidth: number
+    initialHeight: number
+  }>()
+  if (!initialRef.current) {
+    const initial = diagramViewToXYFlowData(view, {
+      selectable: nodesSelectable,
+      draggable: nodesDraggable
+    })
+    initialRef.current = {
+      defaultNodes: initial.nodes,
+      defaultEdges: initial.edges,
+      initialWidth: initialWidth ?? view.width,
+      initialHeight: initialHeight ?? view.height
+    }
+  }
+  return (
+    <EnsureMantine>
+      <XYFlowProvider
+        fitView={fitView}
+        {...initialRef.current}
+      >
+        <DiagramContextProvider
+          view={view}
+          readonly={readonly}
+          fitViewEnabled={fitView}
+          fitViewPadding={fitViewPadding}
+          showElementLinks={showElementLinks}
+          nodesDraggable={nodesDraggable}
+          nodesSelectable={nodesSelectable}
+          onCanvasClick={onCanvasClick}
+          onCanvasContextMenu={onCanvasContextMenu}
+          onEdgeClick={onEdgeClick}
+          onEdgeContextMenu={onEdgeContextMenu}
+          onNodeClick={onNodeClick}
+          onNodeContextMenu={onNodeContextMenu}
+          onChange={onChange}
+          onNavigateTo={onNavigateTo}
+          onCanvasDblClick={onCanvasDblClick}
+        >
+          <KeepAspectRatio
+            className={clsx(rootClassName, className)}
+            enabled={keepAspectRatio}
+            width={view.width}
+            height={view.height}
+          >
+            <XYFlow
+              className={clsx(
+                'likec4-diagram',
+                cssReactFlow,
+                controls === false && cssNoControls,
+                pannable !== true && cssDisablePan,
+                background === 'transparent' && cssTransparentBg
+              )}
+              background={background}
+              controls={controls}
+              defaultNodes={initialRef.current.defaultNodes}
+              defaultEdges={initialRef.current.defaultEdges}
+              pannable={pannable}
+              zoomable={zoomable}
+            >
+              {readonly !== true && <OptionsPanel />}
+            </XYFlow>
+          </KeepAspectRatio>
+          <WhenInitialized>
+            <SyncWithDiagram />
+            <FitViewOnDiagramChange />
+          </WhenInitialized>
+        </DiagramContextProvider>
+      </XYFlowProvider>
+    </EnsureMantine>
+  )
+}

package/src/StaticLikeC4Diagram.tsx

@@ -0,0 +1,39 @@
+import { LikeC4Diagram } from './LikeC4Diagram'
+import type { LikeC4DiagramProperties } from './LikeC4Diagram.props'
+
+export type StaticLikeC4DiagramProps = Pick<
+  LikeC4DiagramProperties,
+  | 'view'
+  | 'keepAspectRatio'
+  | 'className'
+  | 'fitView'
+  | 'fitViewPadding'
+  | 'background'
+  | 'initialWidth'
+  | 'initialHeight'
+>
+
+export function StaticLikeC4Diagram({
+  view,
+  fitView = true,
+  fitViewPadding = 0,
+  background = 'transparent',
+  ...rest
+}: StaticLikeC4DiagramProps) {
+  return (
+    <LikeC4Diagram
+      view={view}
+      readonly
+      fitView={fitView}
+      fitViewPadding={fitViewPadding}
+      pannable={false}
+      zoomable={false}
+      controls={false}
+      background={background}
+      showElementLinks
+      nodesSelectable={false}
+      nodesDraggable={false}
+      {...rest}
+    />
+  )
+}

package/src/globals.css.ts

@@ -0,0 +1,128 @@
+import type { ThemeColor } from '@likec4/core'
+import { defaultTheme } from '@likec4/core'
+import { createGlobalTheme } from '@vanilla-extract/css'
+import { omit } from 'remeda'
+import { mantine } from './mantine.css'
+import { vars } from './theme.css'
+
+export const rootClassName = 'likec4-diagram-root'
+
+createGlobalTheme(`.${rootClassName}`, {
+  ...omit(vars, ['optionsPanel', 'default'])
+}, {
+  likec4: {
+    font:
+      `var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"')`,
+    background: {
+      color: mantine.colors.body,
+      pattern: {
+        color: mantine.colors.dimmed
+      }
+    }
+  },
+  compound: {
+    font: vars.likec4.font,
+    titleColor: vars.element.loContrast
+  },
+  element: {
+    font: vars.likec4.font,
+    ...defaultTheme.elements.primary
+  },
+  relation: {
+    ...defaultTheme.relationships.slate
+  }
+  // likec4: {
+  //   font: `var(--likec4-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"')`,
+  //   backgroundColor: fallbackVar(globalvars.likec4.backgroundColor, mantine.colors.body)
+  // },
+  // compound: {
+  //   font: fallbackVar(vars.compound.font, vars.likec4.font),
+  //   titleColor: fallbackVar(globalvars.compound.titleColor, globalvars.element.loContrast),
+  // },
+  // element: {
+  //   font: fallbackVar(globalvars.element.font, vars.likec4.font),
+  //   fill: fallbackVar(globalvars.element.fill, defaultTheme.elements.primary.fill),
+  //   stroke: fallbackVar(globalvars.element.stroke, defaultTheme.elements.primary.stroke),
+  //   hiContrast: fallbackVar(globalvars.element.hiContrast, defaultTheme.elements.primary.hiContrast),
+  //   loContrast: fallbackVar(globalvars.element.loContrast, defaultTheme.elements.primary.loContrast),
+  // },
+  // relation: {
+  //   lineColor: fallbackVar(globalvars.relation.lineColor, defaultTheme.relationships.slate.lineColor),
+  //   labelColor: fallbackVar(globalvars.relation.labelColor, defaultTheme.relationships.slate.labelColor),
+  //   labelBgColor: fallbackVar(globalvars.relation.labelBgColor, defaultTheme.relationships.slate.labelBgColor),
+  // },
+  // optionsPanel: {
+  //   top: globalvars.optionsPanel.top,
+  //   right: globalvars.optionsPanel.right
+  // }
+})
+
+createGlobalTheme(`:where([data-mantine-color-scheme='light']) .${rootClassName}`, {
+  likec4: {
+    background: {
+      pattern: {
+        color: vars.likec4.background.pattern.color
+      }
+    }
+  }
+}, {
+  likec4: {
+    background: {
+      pattern: {
+        color: mantine.colors.dark[3]
+      }
+    }
+  }
+})
+
+// globalStyle(`${scope} *, ${scope} *::before, ${scope} *::after`, {
+//   boxSizing: 'border-box',
+//   outline: 'none',
+//   borderWidth: 0,
+//   borderStyle: 'solid',
+//   borderColor: 'transparent',
+// })
+
+// createGlobalTheme(':where(.likec4-diagram-root)', {
+//   ...omit(vars, ['optionsPanel', 'defaults']),
+// }, {
+//   likec4: {
+//     font: `var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"')`,
+//     backgroundColor: mantine.colors.body
+//   },
+//   compound: {
+//     font: vars.likec4.font,
+//     titleColor: vars.element.loContrast
+//   },
+//   element: {
+//     font: vars.likec4.font,
+//     ...defaultTheme.elements.primary
+//   },
+//   relation: {
+//     ...defaultTheme.relationships.slate
+//   }
+// })
+
+for (const color of Object.keys(defaultTheme.elements)) {
+  if (!(color in defaultTheme.elements) || !(color in defaultTheme.relationships)) {
+    continue
+  }
+  createGlobalTheme(`:where([data-likec4-color='${color}'])`, {
+    element: {
+      fill: vars.element.fill,
+      stroke: vars.element.stroke,
+      hiContrast: vars.element.hiContrast,
+      loContrast: vars.element.loContrast
+    },
+    compound: {
+      titleColor: vars.compound.titleColor
+    },
+    relation: vars.relation
+  }, {
+    element: defaultTheme.elements[color as ThemeColor],
+    compound: {
+      titleColor: defaultTheme.elements[color as ThemeColor].loContrast
+    },
+    relation: defaultTheme.relationships[color as ThemeColor]
+  })
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useSetState'
+export * from './useUpdateEffect'

package/src/hooks/useSetState.ts

@@ -0,0 +1,19 @@
+import { shallowEqual } from 'fast-equals'
+import { useCallback, useState } from 'react'
+import type { NonEmptyObject } from 'type-fest'
+
+export function useSetState<T extends object>(initialState: T | (() => T)) {
+  const [state, _setState] = useState(initialState)
+  const setState = useCallback(
+    (statePartial: NonEmptyObject<Partial<T>> | ((current: T) => NonEmptyObject<Partial<T>>)) =>
+      _setState((current) => {
+        const next = {
+          ...current,
+          ...typeof statePartial === 'function' ? statePartial(current) : statePartial
+        }
+        return shallowEqual(current, next) ? current : next
+      }),
+    []
+  )
+  return [state, setState] as const
+}