@alneas/appkit-react 0.2.0 → 0.3.1

package/dist/tools/components/ui/chart.js

@@ -11,22 +11,22 @@ function s() {
 	if (!e) throw Error("useChart must be used within a <ChartContainer />");
 	return e;
 }
-var c = i.forwardRef(({ id: t, className: s, children: c, config: l, ...u }, f) => {
-	let p = i.useId(), m = `chart-${t || p.replace(/:/g, "")}`;
+function c({ ref: t, id: s, className: c, children: l, config: u, ...f }) {
+	let p = i.useId(), m = `chart-${s || p.replace(/:/g, "")}`;
 	return /* @__PURE__ */ n(o.Provider, {
-		value: { config: l },
+		value: { config: u },
 		children: /* @__PURE__ */ r("div", {
 			"data-chart": m,
-			ref: f,
-			className: e("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", s),
-			...u,
+			ref: t,
+			className: e("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", c),
+			...f,
 			children: [/* @__PURE__ */ n(d, {
 				id: m,
-				config: l
-			}), /* @__PURE__ */ n(a.ResponsiveContainer, { children: c })]
+				config: u
+			}), /* @__PURE__ */ n(a.ResponsiveContainer, { children: l })]
 		})
 	});
-});
+}
 c.displayName = "Chart";
 var l = (e) => Array.from(e, (e) => /[a-zA-Z0-9_-]/.test(e) ? e : `\\${e.codePointAt(0).toString(16)} `).join(""), u = (e) => /[<>{};\\"'\p{Cc}]|\/\*|\*\//u.test(e) ? "" : e.trim(), d = ({ id: e, config: t }) => {
 	let r = Object.entries(t).filter(([e, t]) => t.theme || t.color);
@@ -40,43 +40,44 @@ var l = (e) => Array.from(e, (e) => /[a-zA-Z0-9_-]/.test(e) ? e : `\\${e.codePoi
 	}).filter(Boolean).join("\n")}
         }
       ` } });
-}, f = a.Tooltip, p = i.forwardRef(({ active: a, payload: o, className: c, indicator: l = "dot", hideLabel: u = !1, hideIndicator: d = !1, label: f, labelFormatter: p, labelClassName: m, formatter: h, color: _, nameKey: v, labelKey: y }, b) => {
+}, f = a.Tooltip;
+function p({ ref: a, active: o, payload: c, className: l, indicator: u = "dot", hideLabel: d = !1, hideIndicator: f = !1, label: p, labelFormatter: m, labelClassName: h, formatter: _, color: v, nameKey: y, labelKey: b }) {
 	let { config: x } = s(), S = i.useMemo(() => {
-		if (u || !o?.length) return null;
-		let [t] = o, r = `${y || t.dataKey || t.name || "value"}`, i = g(x, t, r), a = !y && typeof f == "string" ? x[f]?.label || f : i?.label;
-		return p ? /* @__PURE__ */ n("div", {
-			className: e("font-medium", m),
-			children: p(a, o)
+		if (d || !c?.length) return null;
+		let [t] = c, r = `${b || t.dataKey || t.name || "value"}`, i = g(x, t, r), a = !b && typeof p == "string" ? x[p]?.label || p : i?.label;
+		return m ? /* @__PURE__ */ n("div", {
+			className: e("font-medium", h),
+			children: m(a, c)
 		}) : a ? /* @__PURE__ */ n("div", {
-			className: e("font-medium", m),
+			className: e("font-medium", h),
 			children: a
 		}) : null;
 	}, [
-		f,
 		p,
-		o,
-		u,
 		m,
+		c,
+		d,
+		h,
 		x,
-		y
+		b
 	]);
-	if (!a || !o?.length) return null;
-	let C = o.length === 1 && l !== "dot", w = o ?? [];
+	if (!o || !c?.length) return null;
+	let C = c.length === 1 && u !== "dot", w = c ?? [];
 	return /* @__PURE__ */ r("div", {
-		ref: b,
-		className: e("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", c),
+		ref: a,
+		className: e("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", l),
 		children: [C ? null : S, /* @__PURE__ */ n("div", {
 			className: "grid gap-1.5",
 			children: w.map((i, a) => {
-				let o = `${v || i.name || i.dataKey || "value"}`, s = g(x, i, o), c = _ || i.payload?.fill || i.color;
+				let o = `${y || i.name || i.dataKey || "value"}`, s = g(x, i, o), c = v || i.payload?.fill || i.color;
 				return /* @__PURE__ */ n("div", {
-					className: e("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", l === "dot" && "items-center"),
-					children: h && i?.value !== void 0 && i.name ? h(i.value, i.name, i, a, i.payload) : /* @__PURE__ */ r(t, { children: [s?.icon ? /* @__PURE__ */ n(s.icon, {}) : !d && /* @__PURE__ */ n("div", {
+					className: e("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", u === "dot" && "items-center"),
+					children: _ && i?.value !== void 0 && i.name ? _(i.value, i.name, i, a, i.payload) : /* @__PURE__ */ r(t, { children: [s?.icon ? /* @__PURE__ */ n(s.icon, {}) : !f && /* @__PURE__ */ n("div", {
 						className: e("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
-							"h-2.5 w-2.5": l === "dot",
-							"w-1": l === "line",
-							"w-0 border-[1.5px] border-dashed bg-transparent": l === "dashed",
-							"my-0.5": C && l === "dashed"
+							"h-2.5 w-2.5": u === "dot",
+							"w-1": u === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": u === "dashed",
+							"my-0.5": C && u === "dashed"
 						}),
 						style: {
 							"--color-bg": c,
@@ -99,27 +100,28 @@ var l = (e) => Array.from(e, (e) => /[a-zA-Z0-9_-]/.test(e) ? e : `\\${e.codePoi
 			})
 		})]
 	});
-});
+}
 p.displayName = "ChartTooltip";
-var m = a.Legend, h = i.forwardRef(({ className: t, hideIcon: i = !1, payload: a, verticalAlign: o = "bottom", nameKey: c }, l) => {
+var m = a.Legend;
+function h({ ref: t, className: i, hideIcon: a = !1, payload: o, verticalAlign: c = "bottom", nameKey: l }) {
 	let { config: u } = s();
-	if (!a?.length) return null;
-	let d = a;
+	if (!o?.length) return null;
+	let d = o;
 	return /* @__PURE__ */ n("div", {
-		ref: l,
-		className: e("flex items-center justify-center gap-4", o === "top" ? "pb-3" : "pt-3", t),
+		ref: t,
+		className: e("flex items-center justify-center gap-4", c === "top" ? "pb-3" : "pt-3", i),
 		children: d.map((t) => {
-			let a = `${c || t.dataKey || "value"}`, o = g(u, t, a);
+			let i = `${l || t.dataKey || "value"}`, o = g(u, t, i);
 			return /* @__PURE__ */ r("div", {
 				className: e("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
-				children: [o?.icon && !i ? /* @__PURE__ */ n(o.icon, {}) : /* @__PURE__ */ n("div", {
+				children: [o?.icon && !a ? /* @__PURE__ */ n(o.icon, {}) : /* @__PURE__ */ n("div", {
 					className: "h-2 w-2 shrink-0 rounded-[2px]",
 					style: { backgroundColor: t.color }
 				}), o?.label]
 			}, t.value);
 		})
 	});
-});
+}
 h.displayName = "ChartLegend";
 function g(e, t, n) {
 	if (typeof t != "object" || !t) return;

package/dist/tools/components/ui/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","names":["React","_Fragment","React$1","RechartsPrimitive","ChartContext","useChart","context","ChartContainer","props","uniqueId","chartId","id","cn","className","ChartStyle","escapeCssToken","value","char","safeCssColor","colorConfig","config","_","safeId","key","item","color","safeKey","safeColor","ChartTooltip","ChartTooltipContent","tooltipLabel","hideLabel","payload","labelKey","itemConfig","getPayloadConfigFromPayload","label","labelFormatter","labelClassName","active","nestLabel","indicator","tooltipPayload","nameKey","indicatorColor","formatter","index","Fragment","hideIndicator","ChartLegend","ChartLegendContent","legendPayload","verticalAlign","hideIcon","payloadPayload","configLabelKey"],"sources":["../../../../src/tools/components/ui/chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { cn } from '../../lib/utils';\n\n// Format: { group: { theme: { light: \"...\", dark: \"...\" }, label: \"...\" } }\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n    color?: string;\n    theme?: Record<'light' | 'dark', string>;\n  } & (\n    | { color?: never; theme: Record<'light' | 'dark', string> }\n    | { color: string; theme?: never }\n  );\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error('useChart must be used within a <ChartContainer />');\n  }\n\n  return context;\n}\n\nconst ChartContainer = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & {\n    config: ChartConfig;\n    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n  }\n>(({ id, className, children, config, ...props }, ref) => {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n});\nChartContainer.displayName = 'Chart';\n\n// Hex escapes work in both quoted CSS strings and identifiers (keys have a\n// --color- prefix). Preserve the original value instead of changing its identity.\n// Escaping '<' also prevents closing the raw-text <style> element during SSR.\nconst escapeCssToken = (value: string) => Array.from(value, char =>\n  /[a-zA-Z0-9_-]/.test(char) ? char : `\\\\${char.codePointAt(0)!.toString(16)} `,\n).join('');\n\n// Reject declaration/HTML breakouts rather than rewriting a possibly valid color.\n// In particular '/' is required by modern rgb/hsl/oklch alpha syntax.\nconst safeCssColor = (value: string) =>\n  /[<>{};\\\\\"'\\p{Cc}]|\\/\\*|\\*\\//u.test(value) ? '' : value.trim();\n\n/**\n * チャートの設定（テーマごとの配色等）に基づいて動的にCSS変数を適用するためのスタイルコンポーネント。\n */\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  const safeId = escapeCssToken(id);\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: `\n        [data-chart=\"${safeId}\"] {\n          ${colorConfig\n            .map(([key, item]) => {\n              const color = item.theme?.[item.theme.dark ? 'dark' : 'light'] || item.color;\n              const safeKey = escapeCssToken(key);\n              const safeColor = color ? safeCssColor(String(color)) : '';\n              return safeKey && safeColor ? `--color-${safeKey}: ${safeColor};` : '';\n            })\n            .filter(Boolean)\n            .join('\\n')}\n        }\n      `,\n      }}\n    />\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\ntype TooltipPayloadItem = {\n  dataKey?: string | number;\n  name?: string;\n  value?: number | string;\n  color?: string;\n  payload?: { fill?: string } & Record<string, unknown>;\n};\n\ntype ChartTooltipContentProps = React.ComponentProps<'div'> & {\n  active?: boolean;\n  payload?: TooltipPayloadItem[];\n  hideLabel?: boolean;\n  hideIndicator?: boolean;\n  indicator?: 'line' | 'dot' | 'dashed';\n  nameKey?: string;\n  labelKey?: string;\n  label?: React.ReactNode;\n  labelClassName?: string;\n  labelFormatter?: (value: React.ReactNode, payload: TooltipPayloadItem[]) => React.ReactNode;\n  formatter?: (\n    value: number | string,\n    name: string,\n    item: TooltipPayloadItem,\n    index: number,\n    payload?: TooltipPayloadItem['payload'],\n  ) => React.ReactNode;\n  color?: string;\n};\n\nconst ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContentProps>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = 'dot',\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref,\n  ) => {\n    const { config } = useChart();\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null;\n      }\n\n      const [item] = payload;\n      const key = `${labelKey || item.dataKey || item.name || 'value'}`;\n      const itemConfig = getPayloadConfigFromPayload(config, item, key);\n      const value =\n        !labelKey && typeof label === 'string'\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label;\n\n      if (labelFormatter) {\n        return (\n          <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>\n        );\n      }\n\n      if (!value) {\n        return null;\n      }\n\n      return <div className={cn('font-medium', labelClassName)}>{value}</div>;\n    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n    if (!active || !payload?.length) {\n      return null;\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== 'dot';\n    const tooltipPayload = payload ?? [];\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',\n          className,\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className='grid gap-1.5'>\n          {tooltipPayload.map((item, index: number) => {\n            const key = `${nameKey || item.name || item.dataKey || 'value'}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color || item.payload?.fill || item.color;\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',\n                  indicator === 'dot' && 'items-center',\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',\n                            {\n                              'h-2.5 w-2.5': indicator === 'dot',\n                              'w-1': indicator === 'line',\n                              'w-0 border-[1.5px] border-dashed bg-transparent':\n                                indicator === 'dashed',\n                              'my-0.5': nestLabel && indicator === 'dashed',\n                            },\n                          )}\n                          style={\n                            {\n                              '--color-bg': indicatorColor,\n                              '--color-border': indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        'flex flex-1 justify-between leading-none',\n                        nestLabel ? 'items-end' : 'items-center',\n                      )}\n                    >\n                      <div className='grid gap-1.5'>\n                        {nestLabel ? tooltipLabel : null}\n                        <span className='text-muted-foreground'>\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className='font-mono font-medium tabular-nums text-foreground'>\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\nChartTooltipContent.displayName = 'ChartTooltip';\n\nconst ChartLegend = RechartsPrimitive.Legend;\nconst ChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> &\n    Pick<RechartsPrimitive.LegendProps, 'verticalAlign'> & {\n      hideIcon?: boolean;\n      nameKey?: string;\n      payload?: unknown[];\n    }\n>(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n  const legendPayload = payload as Array<{\n    dataKey?: string | number;\n    value?: string | number;\n    color?: string;\n  }>;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center justify-center gap-4',\n        verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n        className,\n      )}\n    >\n      {legendPayload.map((item) => {\n        const key = `${nameKey || item.dataKey || 'value'}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',\n            )}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className='h-2 w-2 shrink-0 rounded-[2px]'\n                style={{\n                  backgroundColor: item.color,\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n});\nChartLegendContent.displayName = 'ChartLegend';\n\n// Helper to extract config from payload\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== 'object' || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"chart.js","names":["React","_Fragment","React$1","RechartsPrimitive","ChartContext","useChart","context","ChartContainer","props","uniqueId","chartId","id","cn","className","ChartStyle","escapeCssToken","value","char","safeCssColor","colorConfig","config","_","safeId","key","item","color","safeKey","safeColor","ChartTooltip","ChartTooltipContent","tooltipLabel","hideLabel","payload","labelKey","itemConfig","getPayloadConfigFromPayload","label","labelFormatter","labelClassName","active","nestLabel","indicator","tooltipPayload","nameKey","indicatorColor","formatter","index","Fragment","hideIndicator","ChartLegend","ChartLegendContent","legendPayload","verticalAlign","hideIcon","payloadPayload","configLabelKey"],"sources":["../../../../src/tools/components/ui/chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { cn } from '../../lib/utils';\n\n// Format: { group: { theme: { light: \"...\", dark: \"...\" }, label: \"...\" } }\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n    color?: string;\n    theme?: Record<'light' | 'dark', string>;\n  } & (\n    | { color?: never; theme: Record<'light' | 'dark', string> }\n    | { color: string; theme?: never }\n  );\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error('useChart must be used within a <ChartContainer />');\n  }\n\n  return context;\n}\n\nfunction ChartContainer({\n  ref,\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.PropsWithoutRef<\n  React.HTMLAttributes<HTMLDivElement> & {\n    config: ChartConfig;\n    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n  }\n> &\n  React.RefAttributes<HTMLDivElement>) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\nChartContainer.displayName = 'Chart';\n\n// Hex escapes work in both quoted CSS strings and identifiers (keys have a\n// --color- prefix). Preserve the original value instead of changing its identity.\n// Escaping '<' also prevents closing the raw-text <style> element during SSR.\nconst escapeCssToken = (value: string) => Array.from(value, char =>\n  /[a-zA-Z0-9_-]/.test(char) ? char : `\\\\${char.codePointAt(0)!.toString(16)} `,\n).join('');\n\n// Reject declaration/HTML breakouts rather than rewriting a possibly valid color.\n// In particular '/' is required by modern rgb/hsl/oklch alpha syntax.\nconst safeCssColor = (value: string) =>\n  /[<>{};\\\\\"'\\p{Cc}]|\\/\\*|\\*\\//u.test(value) ? '' : value.trim();\n\n/**\n * チャートの設定（テーマごとの配色等）に基づいて動的にCSS変数を適用するためのスタイルコンポーネント。\n */\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  const safeId = escapeCssToken(id);\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: `\n        [data-chart=\"${safeId}\"] {\n          ${colorConfig\n            .map(([key, item]) => {\n              const color = item.theme?.[item.theme.dark ? 'dark' : 'light'] || item.color;\n              const safeKey = escapeCssToken(key);\n              const safeColor = color ? safeCssColor(String(color)) : '';\n              return safeKey && safeColor ? `--color-${safeKey}: ${safeColor};` : '';\n            })\n            .filter(Boolean)\n            .join('\\n')}\n        }\n      `,\n      }}\n    />\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\ntype TooltipPayloadItem = {\n  dataKey?: string | number;\n  name?: string;\n  value?: number | string;\n  color?: string;\n  payload?: { fill?: string } & Record<string, unknown>;\n};\n\ntype ChartTooltipContentProps = React.ComponentProps<'div'> & {\n  active?: boolean;\n  payload?: TooltipPayloadItem[];\n  hideLabel?: boolean;\n  hideIndicator?: boolean;\n  indicator?: 'line' | 'dot' | 'dashed';\n  nameKey?: string;\n  labelKey?: string;\n  label?: React.ReactNode;\n  labelClassName?: string;\n  labelFormatter?: (value: React.ReactNode, payload: TooltipPayloadItem[]) => React.ReactNode;\n  formatter?: (\n    value: number | string,\n    name: string,\n    item: TooltipPayloadItem,\n    index: number,\n    payload?: TooltipPayloadItem['payload'],\n  ) => React.ReactNode;\n  color?: string;\n};\n\nfunction ChartTooltipContent({\n  ref,\n  active,\n  payload,\n  className,\n  indicator = 'dot',\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.PropsWithoutRef<ChartTooltipContentProps> & React.RefAttributes<HTMLDivElement>) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey || item.dataKey || item.name || 'value'}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === 'string'\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn('font-medium', labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== 'dot';\n  const tooltipPayload = payload ?? [];\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className='grid gap-1.5'>\n        {tooltipPayload.map((item, index: number) => {\n          const key = `${nameKey || item.name || item.dataKey || 'value'}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n          const indicatorColor = color || item.payload?.fill || item.color;\n\n          return (\n            <div\n              key={item.dataKey}\n              className={cn(\n                'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',\n                indicator === 'dot' && 'items-center',\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, item.payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\n                          'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',\n                          {\n                            'h-2.5 w-2.5': indicator === 'dot',\n                            'w-1': indicator === 'line',\n                            'w-0 border-[1.5px] border-dashed bg-transparent':\n                              indicator === 'dashed',\n                            'my-0.5': nestLabel && indicator === 'dashed',\n                          },\n                        )}\n                        style={\n                          {\n                            '--color-bg': indicatorColor,\n                            '--color-border': indicatorColor,\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\n                      'flex flex-1 justify-between leading-none',\n                      nestLabel ? 'items-end' : 'items-center',\n                    )}\n                  >\n                    <div className='grid gap-1.5'>\n                      {nestLabel ? tooltipLabel : null}\n                      <span className='text-muted-foreground'>\n                        {itemConfig?.label || item.name}\n                      </span>\n                    </div>\n                    {item.value && (\n                      <span className='font-mono font-medium tabular-nums text-foreground'>\n                        {item.value.toLocaleString()}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\nChartTooltipContent.displayName = 'ChartTooltip';\n\nconst ChartLegend = RechartsPrimitive.Legend;\nfunction ChartLegendContent({\n  ref,\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = 'bottom',\n  nameKey,\n}: React.PropsWithoutRef<\n  React.ComponentProps<'div'> &\n    Pick<RechartsPrimitive.LegendProps, 'verticalAlign'> & {\n      hideIcon?: boolean;\n      nameKey?: string;\n      payload?: unknown[];\n    }\n> &\n  React.RefAttributes<HTMLDivElement>) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n  const legendPayload = payload as Array<{\n    dataKey?: string | number;\n    value?: string | number;\n    color?: string;\n  }>;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center justify-center gap-4',\n        verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n        className,\n      )}\n    >\n      {legendPayload.map((item) => {\n        const key = `${nameKey || item.dataKey || 'value'}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',\n            )}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className='h-2 w-2 shrink-0 rounded-[2px]'\n                style={{\n                  backgroundColor: item.color,\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\nChartLegendContent.displayName = 'ChartLegend';\n\n// Helper to extract config from payload\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== 'object' || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"],"mappings":"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"}

package/dist/tools/components/ui/dnd/DnDProvider.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs");let t=require("react/jsx-runtime"),n=require("react");n=e.__toESM(n,1);let r=require("@dnd-kit/core"),i=require("@dnd-kit/sortable");function a({children:e,onDragStart:n,onDragEnd:a,onDragCancel:o}){let s=(0,r.useSensors)((0,r.useSensor)(r.PointerSensor,{activationConstraint:{distance:5}}),(0,r.useSensor)(r.KeyboardSensor,{coordinateGetter:i.sortableKeyboardCoordinates}));return(0,t.jsx)(r.DndContext,{sensors:s,collisionDetection:r.closestCenter,onDragStart:n,onDragEnd:a,onDragCancel:o,children:e})}exports.DnDProvider=a;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime"),t=require("@dnd-kit/react"),n=require("@dnd-kit/dom");var r=e=>[...e.filter(e=>e!==n.PointerSensor),n.PointerSensor.configure({activationConstraints:e=>e.pointerType===`touch`?[new n.PointerActivationConstraints.Delay({value:250,tolerance:5})]:[new n.PointerActivationConstraints.Distance({value:5})]})],i=e=>[...e,n.Feedback.configure({feedback:`clone`,dropAnimation:{duration:0}})];function a({children:n,sensors:a=r,plugins:o=i,...s}){return(0,e.jsx)(t.DragDropProvider,{sensors:a,plugins:o,...s,children:n})}exports.DnDProvider=a;
 //# sourceMappingURL=DnDProvider.cjs.map

package/dist/tools/components/ui/dnd/DnDProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DnDProvider.cjs","names":["useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","require_runtime","react_jsx_runtime","react","_dnd_kit_core","_dnd_kit_sortable","DnDProvider","sensors"],"sources":["../../../../../src/tools/components/ui/dnd/DnDProvider.tsx"],"sourcesContent":["import React from 'react';\nimport '../../../types/dnd-react19';\nimport {\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  closestCenter,\n  type DragEndEvent,\n  type DragStartEvent,\n  type DragCancelEvent,\n} from '@dnd-kit/core';\nimport { sortableKeyboardCoordinates } from '@dnd-kit/sortable';\n\nexport interface DnDProviderProps {\n  children: React.ReactNode;\n  onDragStart?: (event: DragStartEvent) => void;\n  onDragEnd?: (event: DragEndEvent) => void;\n  onDragCancel?: (event: DragCancelEvent) => void;\n}\n\n/**\n * DnD 操作のコンテキストを提供するラッパーコンポーネント\n */\nexport function DnDProvider({ children, onDragStart, onDragEnd, onDragCancel }: DnDProviderProps) {\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5, // 5px 以上動かした時にドラッグ開始（クリックとの誤爆防止）\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={onDragStart}\n      onDragEnd={onDragEnd}\n      onDragCancel={onDragCancel}\n    >\n      {children}\n    </DndContext>\n  );\n}\n"],"mappings":"A,mRAyBA,SAAgBY,EAAY,CAAE,WAAU,cAAa,YAAW,gBAAkC,CAChG,IAAMC,GAAA,EAAUb,EAAAA,WAAAA,EAAAA,EACdC,EAAAA,UAAAA,CAAUC,EAAAA,cAAe,CACvB,qBAAsB,CACpB,SAAU,CACZ,CACF,CAAC,GAAA,EACDD,EAAAA,UAAAA,CAAUE,EAAAA,eAAgB,CACxB,iBAAkBC,EAAAA,2BACpB,CAAC,CACH,EAEA,OACE,EAAAI,EAAA,IAAA,CAACH,EAAAA,WAAD,CACW,UACT,mBAAoBC,EAAAA,cACP,cACF,YACG,eAEb,UACS,CAAA,CAEhB,C"}
+{"version":3,"file":"DnDProvider.cjs","names":["PointerSensor","PointerActivationConstraints","Feedback","DragDropProvider","react_jsx_runtime","_dnd_kit_react","_dnd_kit_dom","sensors","defaults","sensor","event","plugins","DnDProvider","customSensors","customPlugins","props"],"sources":["../../../../../src/tools/components/ui/dnd/DnDProvider.tsx"],"sourcesContent":["import type {ComponentProps} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {Feedback, PointerSensor, PointerActivationConstraints} from '@dnd-kit/dom';\n\n/**\n * Native DragDropProvider props, including custom sensors/plugins and children.\n * @remarks Cancellation is delivered through onDragEnd with event.canceled;\n * the legacy onDragCancel callback is not supported. Native provider members\n * retain their upstream contracts. See the development migration guide.\n */\nexport type DnDProviderProps = ComponentProps<typeof DragDropProvider>;\nconst sensors: DnDProviderProps['sensors'] = defaults => [\n  ...defaults.filter(sensor => sensor !== PointerSensor),\n  PointerSensor.configure({activationConstraints: event => event.pointerType === 'touch'\n    ? [new PointerActivationConstraints.Delay({value: 250, tolerance: 5})]\n    : [new PointerActivationConstraints.Distance({value: 5})]}),\n];\nconst plugins: DnDProviderProps['plugins'] = defaults => [\n  ...defaults, Feedback.configure({feedback: 'clone', dropAnimation: {duration: 0}}),\n];\n\n/**\n * Provide a native drag context for Appkit registrations and host-owned children.\n * @param props - Native provider options and content; omitted sensors use 5px\n * mouse/pen movement and a 250ms touch hold with 5px tolerance. Omitted plugins\n * retain native accessibility and clone feedback with immediate drop completion.\n * @returns A provider element; no storage operations are performed by this wrapper.\n * @remarks Import Appkit CSS once. Do not mix legacy core registrations into this\n * context. Check event.canceled and nullable operation entities before persisting.\n * @example\n * ```tsx\n * import {DnDProvider} from '@alneas/appkit-react/tools/ui';\n * import '@alneas/appkit-react/styles';\n * export function DragArea() {\n *   return <DnDProvider onDragEnd={event => {\n *     if (!event.canceled) console.log(event.operation.target?.id);\n *   }}><div>Host content</div></DnDProvider>;\n * }\n * ```\n */\nexport function DnDProvider({children, sensors: customSensors = sensors, plugins: customPlugins = plugins, ...props}: DnDProviderProps) {\n  return <DragDropProvider sensors={customSensors} plugins={customPlugins} {...props}>{children}</DragDropProvider>;\n}\n"],"mappings":"A,yKAWA,IAAMO,EAAuC,GAAY,CACvD,GAAGC,EAAS,OAAO,GAAUC,IAAWT,EAAAA,aAAa,EACrDA,EAAAA,cAAc,UAAU,CAAC,sBAAuB,GAASU,EAAM,cAAgB,QAC3E,CAAC,IAAIT,EAAAA,6BAA6B,MAAM,CAAC,MAAO,IAAK,UAAW,CAAC,CAAC,CAAC,EACnE,CAAC,IAAIA,EAAAA,6BAA6B,SAAS,CAAC,MAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAC9D,EACMU,EAAuC,GAAY,CACvD,GAAGH,EAAUN,EAAAA,SAAS,UAAU,CAAC,SAAU,QAAS,cAAe,CAAC,SAAU,CAAC,CAAC,CAAC,CACnF,EAqBA,SAAgBU,EAAY,CAAC,WAAU,QAASC,EAAgBN,EAAS,QAASO,EAAgBH,EAAS,GAAGI,GAA0B,CACtI,OAAO,EAAAX,EAAA,IAAA,CAACD,EAAAA,iBAAD,CAAkB,QAASU,EAAe,QAASC,EAAe,GAAIC,EAAQ,UAA2B,CAAA,CAClH,C"}

package/dist/tools/components/ui/dnd/DnDProvider.d.cts

@@ -1,13 +1,29 @@
-import { default as React } from 'react';
-import { DragEndEvent, DragStartEvent, DragCancelEvent } from '@dnd-kit/core';
-import '../../../types/dnd-react19.cjs';
-export interface DnDProviderProps {
-    children: React.ReactNode;
-    onDragStart?: (event: DragStartEvent) => void;
-    onDragEnd?: (event: DragEndEvent) => void;
-    onDragCancel?: (event: DragCancelEvent) => void;
-}
+import { ComponentProps } from 'react';
+import { DragDropProvider } from '@dnd-kit/react';
 /**
- * DnD 操作のコンテキストを提供するラッパーコンポーネント
+ * Native DragDropProvider props, including custom sensors/plugins and children.
+ * @remarks Cancellation is delivered through onDragEnd with event.canceled;
+ * the legacy onDragCancel callback is not supported. Native provider members
+ * retain their upstream contracts. See the development migration guide.
  */
-export declare function DnDProvider({ children, onDragStart, onDragEnd, onDragCancel }: DnDProviderProps): React.JSX.Element;
+export type DnDProviderProps = ComponentProps<typeof DragDropProvider>;
+/**
+ * Provide a native drag context for Appkit registrations and host-owned children.
+ * @param props - Native provider options and content; omitted sensors use 5px
+ * mouse/pen movement and a 250ms touch hold with 5px tolerance. Omitted plugins
+ * retain native accessibility and clone feedback with immediate drop completion.
+ * @returns A provider element; no storage operations are performed by this wrapper.
+ * @remarks Import Appkit CSS once. Do not mix legacy core registrations into this
+ * context. Check event.canceled and nullable operation entities before persisting.
+ * @example
+ * ```tsx
+ * import {DnDProvider} from '@alneas/appkit-react/tools/ui';
+ * import '@alneas/appkit-react/styles';
+ * export function DragArea() {
+ *   return <DnDProvider onDragEnd={event => {
+ *     if (!event.canceled) console.log(event.operation.target?.id);
+ *   }}><div>Host content</div></DnDProvider>;
+ * }
+ * ```
+ */
+export declare function DnDProvider({ children, sensors: customSensors, plugins: customPlugins, ...props }: DnDProviderProps): import('react').JSX.Element;

package/dist/tools/components/ui/dnd/DnDProvider.d.ts

@@ -1,13 +1,29 @@
-import { default as React } from 'react';
-import { DragEndEvent, DragStartEvent, DragCancelEvent } from '@dnd-kit/core';
-import '../../../types/dnd-react19.js';
-export interface DnDProviderProps {
-    children: React.ReactNode;
-    onDragStart?: (event: DragStartEvent) => void;
-    onDragEnd?: (event: DragEndEvent) => void;
-    onDragCancel?: (event: DragCancelEvent) => void;
-}
+import { ComponentProps } from 'react';
+import { DragDropProvider } from '@dnd-kit/react';
 /**
- * DnD 操作のコンテキストを提供するラッパーコンポーネント
+ * Native DragDropProvider props, including custom sensors/plugins and children.
+ * @remarks Cancellation is delivered through onDragEnd with event.canceled;
+ * the legacy onDragCancel callback is not supported. Native provider members
+ * retain their upstream contracts. See the development migration guide.
  */
-export declare function DnDProvider({ children, onDragStart, onDragEnd, onDragCancel }: DnDProviderProps): React.JSX.Element;
+export type DnDProviderProps = ComponentProps<typeof DragDropProvider>;
+/**
+ * Provide a native drag context for Appkit registrations and host-owned children.
+ * @param props - Native provider options and content; omitted sensors use 5px
+ * mouse/pen movement and a 250ms touch hold with 5px tolerance. Omitted plugins
+ * retain native accessibility and clone feedback with immediate drop completion.
+ * @returns A provider element; no storage operations are performed by this wrapper.
+ * @remarks Import Appkit CSS once. Do not mix legacy core registrations into this
+ * context. Check event.canceled and nullable operation entities before persisting.
+ * @example
+ * ```tsx
+ * import {DnDProvider} from '@alneas/appkit-react/tools/ui';
+ * import '@alneas/appkit-react/styles';
+ * export function DragArea() {
+ *   return <DnDProvider onDragEnd={event => {
+ *     if (!event.canceled) console.log(event.operation.target?.id);
+ *   }}><div>Host content</div></DnDProvider>;
+ * }
+ * ```
+ */
+export declare function DnDProvider({ children, sensors: customSensors, plugins: customPlugins, ...props }: DnDProviderProps): import('react').JSX.Element;

package/dist/tools/components/ui/dnd/DnDProvider.js

@@ -1,21 +1,24 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import "react";
-import { DndContext as t, KeyboardSensor as n, PointerSensor as r, closestCenter as i, useSensor as a, useSensors as o } from "@dnd-kit/core";
-import { sortableKeyboardCoordinates as s } from "@dnd-kit/sortable";
+import { DragDropProvider as t } from "@dnd-kit/react";
+import { Feedback as n, PointerActivationConstraints as r, PointerSensor as i } from "@dnd-kit/dom";
 //#region src/tools/components/ui/dnd/DnDProvider.tsx
-function c({ children: c, onDragStart: l, onDragEnd: u, onDragCancel: d }) {
-	let f = o(a(r, { activationConstraint: { distance: 5 } }), a(n, { coordinateGetter: s }));
+var a = (e) => [...e.filter((e) => e !== i), i.configure({ activationConstraints: (e) => e.pointerType === "touch" ? [new r.Delay({
+	value: 250,
+	tolerance: 5
+})] : [new r.Distance({ value: 5 })] })], o = (e) => [...e, n.configure({
+	feedback: "clone",
+	dropAnimation: { duration: 0 }
+})];
+function s({ children: n, sensors: r = a, plugins: i = o, ...s }) {
 	return /* @__PURE__ */ e(t, {
-		sensors: f,
-		collisionDetection: i,
-		onDragStart: l,
-		onDragEnd: u,
-		onDragCancel: d,
-		children: c
+		sensors: r,
+		plugins: i,
+		...s,
+		children: n
 	});
 }
 //#endregion
-export { c as DnDProvider };
+export { s as DnDProvider };
 
 //# sourceMappingURL=DnDProvider.js.map

package/dist/tools/components/ui/dnd/DnDProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DnDProvider.js","names":["DnDProvider","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter"],"sources":["../../../../../src/tools/components/ui/dnd/DnDProvider.tsx"],"sourcesContent":["import React from 'react';\nimport '../../../types/dnd-react19';\nimport {\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  closestCenter,\n  type DragEndEvent,\n  type DragStartEvent,\n  type DragCancelEvent,\n} from '@dnd-kit/core';\nimport { sortableKeyboardCoordinates } from '@dnd-kit/sortable';\n\nexport interface DnDProviderProps {\n  children: React.ReactNode;\n  onDragStart?: (event: DragStartEvent) => void;\n  onDragEnd?: (event: DragEndEvent) => void;\n  onDragCancel?: (event: DragCancelEvent) => void;\n}\n\n/**\n * DnD 操作のコンテキストを提供するラッパーコンポーネント\n */\nexport function DnDProvider({ children, onDragStart, onDragEnd, onDragCancel }: DnDProviderProps) {\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5, // 5px 以上動かした時にドラッグ開始（クリックとの誤爆防止）\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={onDragStart}\n      onDragEnd={onDragEnd}\n      onDragCancel={onDragCancel}\n    >\n      {children}\n    </DndContext>\n  );\n}\n"],"mappings":";;;;;;AAyBA,SAAgBA,EAAY,EAAE,aAAU,gBAAa,cAAW,mBAAkC;CAChG,IAAMC,IAAUC,EACdC,EAAUC,GAAe,EACvB,sBAAsB,EACpB,UAAU,EACZ,EACF,CAAC,GACDD,EAAUE,GAAgB,EACxB,kBAAkBC,EACpB,CAAC,CACH;CAEA,OACE,kBAACC,GAAD;EACW;EACT,oBAAoBC;EACP;EACF;EACG;EAEb;CACS,CAAA;AAEhB"}
+{"version":3,"file":"DnDProvider.js","names":["sensors","defaults","sensor","PointerSensor","event","PointerActivationConstraints","plugins","Feedback","DnDProvider","customSensors","customPlugins","props","DragDropProvider"],"sources":["../../../../../src/tools/components/ui/dnd/DnDProvider.tsx"],"sourcesContent":["import type {ComponentProps} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {Feedback, PointerSensor, PointerActivationConstraints} from '@dnd-kit/dom';\n\n/**\n * Native DragDropProvider props, including custom sensors/plugins and children.\n * @remarks Cancellation is delivered through onDragEnd with event.canceled;\n * the legacy onDragCancel callback is not supported. Native provider members\n * retain their upstream contracts. See the development migration guide.\n */\nexport type DnDProviderProps = ComponentProps<typeof DragDropProvider>;\nconst sensors: DnDProviderProps['sensors'] = defaults => [\n  ...defaults.filter(sensor => sensor !== PointerSensor),\n  PointerSensor.configure({activationConstraints: event => event.pointerType === 'touch'\n    ? [new PointerActivationConstraints.Delay({value: 250, tolerance: 5})]\n    : [new PointerActivationConstraints.Distance({value: 5})]}),\n];\nconst plugins: DnDProviderProps['plugins'] = defaults => [\n  ...defaults, Feedback.configure({feedback: 'clone', dropAnimation: {duration: 0}}),\n];\n\n/**\n * Provide a native drag context for Appkit registrations and host-owned children.\n * @param props - Native provider options and content; omitted sensors use 5px\n * mouse/pen movement and a 250ms touch hold with 5px tolerance. Omitted plugins\n * retain native accessibility and clone feedback with immediate drop completion.\n * @returns A provider element; no storage operations are performed by this wrapper.\n * @remarks Import Appkit CSS once. Do not mix legacy core registrations into this\n * context. Check event.canceled and nullable operation entities before persisting.\n * @example\n * ```tsx\n * import {DnDProvider} from '@alneas/appkit-react/tools/ui';\n * import '@alneas/appkit-react/styles';\n * export function DragArea() {\n *   return <DnDProvider onDragEnd={event => {\n *     if (!event.canceled) console.log(event.operation.target?.id);\n *   }}><div>Host content</div></DnDProvider>;\n * }\n * ```\n */\nexport function DnDProvider({children, sensors: customSensors = sensors, plugins: customPlugins = plugins, ...props}: DnDProviderProps) {\n  return <DragDropProvider sensors={customSensors} plugins={customPlugins} {...props}>{children}</DragDropProvider>;\n}\n"],"mappings":";;;;;AAWA,IAAMA,KAAuC,MAAY,CACvD,GAAGC,EAAS,QAAO,MAAUC,MAAWC,CAAa,GACrDA,EAAc,UAAU,EAAC,wBAAuB,MAASC,EAAM,gBAAgB,UAC3E,CAAC,IAAIC,EAA6B,MAAM;CAAC,OAAO;CAAK,WAAW;AAAC,CAAC,CAAC,IACnE,CAAC,IAAIA,EAA6B,SAAS,EAAC,OAAO,EAAC,CAAC,CAAC,EAAC,CAAC,CAC9D,GACMC,KAAuC,MAAY,CACvD,GAAGL,GAAUM,EAAS,UAAU;CAAC,UAAU;CAAS,eAAe,EAAC,UAAU,EAAC;AAAC,CAAC,CACnF;AAqBA,SAAgBC,EAAY,EAAC,aAAU,SAASC,IAAgBT,GAAS,SAASU,IAAgBJ,GAAS,GAAGK,KAA0B;CACtI,OAAO,kBAACC,GAAD;EAAkB,SAASH;EAAe,SAASC;EAAe,GAAIC;EAAQ;CAA2B,CAAA;AAClH"}

package/dist/tools/components/ui/dnd/Draggable.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs");let t=require("react/jsx-runtime"),n=require("react");n=e.__toESM(n,1);let r=require("@dnd-kit/core"),i=require("@dnd-kit/utilities");function a({id:e,data:n,children:a}){let{attributes:o,listeners:s,setNodeRef:c,transform:l,isDragging:u}=(0,r.useDraggable)({id:e,data:n}),d={transform:i.CSS.Translate.toString(l),opacity:u?.5:void 0,cursor:`grab`};return(0,t.jsx)(t.Fragment,{children:a({attributes:o,listeners:s,setNodeRef:c,isDragging:u,style:d})})}exports.Draggable=a;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./use-accessible-drag-ref.cjs");let t=require("react/jsx-runtime"),n=require("@dnd-kit/react");function r({id:r,data:i,children:a}){let{ref:o,handleRef:s,isDragging:c}=(0,n.useDraggable)({id:r,data:i}),l=e.useAccessibleDragRef(o),u=e.useAccessibleDragRef(s);return(0,t.jsx)(t.Fragment,{children:a({ref:l,handleRef:u,isDragging:c,style:{opacity:c?.5:void 0,cursor:`grab`}})})}exports.Draggable=r;
 //# sourceMappingURL=Draggable.cjs.map

package/dist/tools/components/ui/dnd/Draggable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Draggable.cjs","names":["useDraggable","CSS","_Fragment","require_runtime","react_jsx_runtime","react","_dnd_kit_core","_dnd_kit_utilities","Draggable","style","transform","isDragging","children"],"sources":["../../../../../src/tools/components/ui/dnd/Draggable.tsx"],"sourcesContent":["import React from 'react';\nimport { useDraggable } from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\n\nexport interface DraggableProps {\n  /** 一意識別子 */\n  id: string;\n  /** ドラッグイベントに付随させるデータ */\n  data?: Record<string, any>;\n  /** 子要素 */\n  children: (props: {\n    attributes: any;\n    listeners: any;\n    setNodeRef: (node: HTMLElement | null) => void;\n    isDragging: boolean;\n    style: React.CSSProperties;\n  }) => React.ReactNode;\n}\n\n/**\n * ドラッグ可能な要素を作成するコンポーネント\n */\nexport function Draggable({ id, data, children }: DraggableProps) {\n  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({\n    id,\n    data,\n  });\n\n  const style: React.CSSProperties = {\n    transform: CSS.Translate.toString(transform),\n    opacity: isDragging ? 0.5 : undefined,\n    cursor: 'grab',\n  };\n\n  return <>{children({ attributes, listeners, setNodeRef, isDragging, style })}</>;\n}\n"],"mappings":"A,oRAsBA,SAAgBQ,EAAU,CAAE,KAAI,OAAM,YAA4B,CAChE,GAAM,CAAE,aAAY,YAAW,aAAY,YAAW,eAAA,EAAeR,EAAAA,aAAAA,CAAa,CAChF,KACA,MACF,CAAC,EAEKS,EAA6B,CACjC,UAAWR,EAAAA,IAAI,UAAU,SAASS,CAAS,EAC3C,QAASC,EAAa,GAAM,IAAA,GAC5B,OAAQ,MACV,EAEA,OAAO,EAAAP,EAAA,IAAA,CAAAF,EAAAA,SAAA,CAAA,SAAGU,EAAS,CAAE,aAAY,YAAW,aAAY,aAAY,OAAM,CAAC,CAAI,CAAA,CACjF,C"}
+{"version":3,"file":"Draggable.cjs","names":["useDraggable","useAccessibleDragRef","_Fragment","require_tools_components_ui_dnd_use_accessible_drag_ref","react_jsx_runtime","_dnd_kit_react","Draggable","accessibleRef","ref","accessibleHandleRef","handleRef","children","isDragging"],"sources":["../../../../../src/tools/components/ui/dnd/Draggable.tsx"],"sourcesContent":["import type {CSSProperties, ReactNode} from 'react';\nimport {useDraggable} from '@dnd-kit/react';\nimport {useAccessibleDragRef} from './use-accessible-drag-ref';\n\n/** Native draggable options; render refs replace legacy attributes/listeners. */\nexport interface DraggableProps {\n  /** Unique identifier within the provider. */\n  id: string;\n  /** Native source.data payload. */\n  data?: Record<string, any>;\n  /** Attach ref to the moving element and optional handleRef to its activator. */\n  children: (props: {\n    /** Attach to the element moved by native feedback; pass null on removal. */\n    ref: (element: Element | null) => void;\n    /** Optional separate activator; otherwise the element itself activates dragging. */\n    handleRef: (element: Element | null) => void;\n    /** Whether this registration is the current dragging source. */\n    isDragging: boolean;\n    /** Cursor/opacity presentation only; native feedback owns movement transforms. */\n    style: CSSProperties;\n  }) => ReactNode;\n}\n\n/**\n * Register an element and optional separate handle with the native provider.\n * @param props - Unique string id, optional source.data payload and render callback.\n * @returns The rendered child inside a fragment; input listeners are installed natively.\n * @remarks Place under DnDProvider. Keep nested interactive controls outside the\n * handle when they must remain independently clickable. See the migration guide\n * for native event and feedback semantics.\n * @example\n * ```tsx\n * import {DnDProvider, Draggable} from '@alneas/appkit-react/tools/ui';\n * import '@alneas/appkit-react/styles';\n * export function MovableItem() {\n *   return <DnDProvider><Draggable id=\"report\" data={{name: 'Report'}}>\n *     {({ref, handleRef, style}) => <div ref={ref} style={style}>\n *       <button ref={handleRef}>Move report</button>\n *     </div>}\n *   </Draggable></DnDProvider>;\n * }\n * ```\n */\nexport function Draggable({id, data, children}: DraggableProps) {\n  const {ref, handleRef, isDragging} = useDraggable({id, data});\n  const accessibleRef = useAccessibleDragRef(ref);\n  const accessibleHandleRef = useAccessibleDragRef(handleRef);\n  return <>{children({ref: accessibleRef, handleRef: accessibleHandleRef, isDragging, style: {opacity: isDragging ? 0.5 : undefined, cursor: 'grab'}})}</>;\n}\n"],"mappings":"A,gMA2CA,SAAgBM,EAAU,CAAC,KAAI,OAAM,YAA2B,CAC9D,GAAM,CAAC,MAAK,YAAW,eAAA,EAAcN,EAAAA,aAAAA,CAAa,CAAC,KAAI,MAAI,CAAC,EACtDO,EAAgBN,EAAAA,qBAAqBO,CAAG,EACxCC,EAAsBR,EAAAA,qBAAqBS,CAAS,EAC1D,OAAO,EAAAN,EAAA,IAAA,CAAAF,EAAAA,SAAA,CAAA,SAAGS,EAAS,CAAC,IAAKJ,EAAe,UAAWE,EAAqB,aAAY,MAAO,CAAC,QAASG,EAAa,GAAM,IAAA,GAAW,OAAQ,MAAM,CAAC,CAAC,CAAI,CAAA,CACzJ,C"}

package/dist/tools/components/ui/dnd/Draggable.d.cts

@@ -1,19 +1,40 @@
-import { default as React } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+/** Native draggable options; render refs replace legacy attributes/listeners. */
 export interface DraggableProps {
-    /** 一意識別子 */
+    /** Unique identifier within the provider. */
     id: string;
-    /** ドラッグイベントに付随させるデータ */
+    /** Native source.data payload. */
     data?: Record<string, any>;
-    /** 子要素 */
+    /** Attach ref to the moving element and optional handleRef to its activator. */
     children: (props: {
-        attributes: any;
-        listeners: any;
-        setNodeRef: (node: HTMLElement | null) => void;
+        /** Attach to the element moved by native feedback; pass null on removal. */
+        ref: (element: Element | null) => void;
+        /** Optional separate activator; otherwise the element itself activates dragging. */
+        handleRef: (element: Element | null) => void;
+        /** Whether this registration is the current dragging source. */
         isDragging: boolean;
-        style: React.CSSProperties;
-    }) => React.ReactNode;
+        /** Cursor/opacity presentation only; native feedback owns movement transforms. */
+        style: CSSProperties;
+    }) => ReactNode;
 }
 /**
- * ドラッグ可能な要素を作成するコンポーネント
+ * Register an element and optional separate handle with the native provider.
+ * @param props - Unique string id, optional source.data payload and render callback.
+ * @returns The rendered child inside a fragment; input listeners are installed natively.
+ * @remarks Place under DnDProvider. Keep nested interactive controls outside the
+ * handle when they must remain independently clickable. See the migration guide
+ * for native event and feedback semantics.
+ * @example
+ * ```tsx
+ * import {DnDProvider, Draggable} from '@alneas/appkit-react/tools/ui';
+ * import '@alneas/appkit-react/styles';
+ * export function MovableItem() {
+ *   return <DnDProvider><Draggable id="report" data={{name: 'Report'}}>
+ *     {({ref, handleRef, style}) => <div ref={ref} style={style}>
+ *       <button ref={handleRef}>Move report</button>
+ *     </div>}
+ *   </Draggable></DnDProvider>;
+ * }
+ * ```
  */
-export declare function Draggable({ id, data, children }: DraggableProps): React.JSX.Element;
+export declare function Draggable({ id, data, children }: DraggableProps): import('react').JSX.Element;

package/dist/tools/components/ui/dnd/Draggable.d.ts

@@ -1,19 +1,40 @@
-import { default as React } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+/** Native draggable options; render refs replace legacy attributes/listeners. */
 export interface DraggableProps {
-    /** 一意識別子 */
+    /** Unique identifier within the provider. */
     id: string;
-    /** ドラッグイベントに付随させるデータ */
+    /** Native source.data payload. */
     data?: Record<string, any>;
-    /** 子要素 */
+    /** Attach ref to the moving element and optional handleRef to its activator. */
     children: (props: {
-        attributes: any;
-        listeners: any;
-        setNodeRef: (node: HTMLElement | null) => void;
+        /** Attach to the element moved by native feedback; pass null on removal. */
+        ref: (element: Element | null) => void;
+        /** Optional separate activator; otherwise the element itself activates dragging. */
+        handleRef: (element: Element | null) => void;
+        /** Whether this registration is the current dragging source. */
         isDragging: boolean;
-        style: React.CSSProperties;
-    }) => React.ReactNode;
+        /** Cursor/opacity presentation only; native feedback owns movement transforms. */
+        style: CSSProperties;
+    }) => ReactNode;
 }
 /**
- * ドラッグ可能な要素を作成するコンポーネント
+ * Register an element and optional separate handle with the native provider.
+ * @param props - Unique string id, optional source.data payload and render callback.
+ * @returns The rendered child inside a fragment; input listeners are installed natively.
+ * @remarks Place under DnDProvider. Keep nested interactive controls outside the
+ * handle when they must remain independently clickable. See the migration guide
+ * for native event and feedback semantics.
+ * @example
+ * ```tsx
+ * import {DnDProvider, Draggable} from '@alneas/appkit-react/tools/ui';
+ * import '@alneas/appkit-react/styles';
+ * export function MovableItem() {
+ *   return <DnDProvider><Draggable id="report" data={{name: 'Report'}}>
+ *     {({ref, handleRef, style}) => <div ref={ref} style={style}>
+ *       <button ref={handleRef}>Move report</button>
+ *     </div>}
+ *   </Draggable></DnDProvider>;
+ * }
+ * ```
  */
-export declare function Draggable({ id, data, children }: DraggableProps): React.JSX.Element;
+export declare function Draggable({ id, data, children }: DraggableProps): import('react').JSX.Element;

package/dist/tools/components/ui/dnd/Draggable.js

@@ -1,24 +1,21 @@
 "use client";
-import { Fragment as e, jsx as t } from "react/jsx-runtime";
-import "react";
-import { useDraggable as n } from "@dnd-kit/core";
-import { CSS as r } from "@dnd-kit/utilities";
+import { useAccessibleDragRef as e } from "./use-accessible-drag-ref.js";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+import { useDraggable as r } from "@dnd-kit/react";
 //#region src/tools/components/ui/dnd/Draggable.tsx
 function i({ id: i, data: a, children: o }) {
-	let { attributes: s, listeners: c, setNodeRef: l, transform: u, isDragging: d } = n({
+	let { ref: s, handleRef: c, isDragging: l } = r({
 		id: i,
 		data: a
-	}), f = {
-		transform: r.Translate.toString(u),
-		opacity: d ? .5 : void 0,
-		cursor: "grab"
-	};
-	return /* @__PURE__ */ t(e, { children: o({
-		attributes: s,
-		listeners: c,
-		setNodeRef: l,
-		isDragging: d,
-		style: f
+	}), u = e(s), d = e(c);
+	return /* @__PURE__ */ n(t, { children: o({
+		ref: u,
+		handleRef: d,
+		isDragging: l,
+		style: {
+			opacity: l ? .5 : void 0,
+			cursor: "grab"
+		}
 	}) });
 }
 //#endregion

package/dist/tools/components/ui/dnd/Draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Draggable.js","names":["_Fragment","Draggable","useDraggable","style","CSS","transform","isDragging","Fragment","children"],"sources":["../../../../../src/tools/components/ui/dnd/Draggable.tsx"],"sourcesContent":["import React from 'react';\nimport { useDraggable } from '@dnd-kit/core';\nimport { CSS } from '@dnd-kit/utilities';\n\nexport interface DraggableProps {\n  /** 一意識別子 */\n  id: string;\n  /** ドラッグイベントに付随させるデータ */\n  data?: Record<string, any>;\n  /** 子要素 */\n  children: (props: {\n    attributes: any;\n    listeners: any;\n    setNodeRef: (node: HTMLElement | null) => void;\n    isDragging: boolean;\n    style: React.CSSProperties;\n  }) => React.ReactNode;\n}\n\n/**\n * ドラッグ可能な要素を作成するコンポーネント\n */\nexport function Draggable({ id, data, children }: DraggableProps) {\n  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({\n    id,\n    data,\n  });\n\n  const style: React.CSSProperties = {\n    transform: CSS.Translate.toString(transform),\n    opacity: isDragging ? 0.5 : undefined,\n    cursor: 'grab',\n  };\n\n  return <>{children({ attributes, listeners, setNodeRef, isDragging, style })}</>;\n}\n"],"mappings":";;;;;;AAsBA,SAAgBC,EAAU,EAAE,OAAI,SAAM,eAA4B;CAChE,IAAM,EAAE,eAAY,cAAW,eAAY,cAAW,kBAAeC,EAAa;EAChF;EACA;CACF,CAAC,GAEKC,IAA6B;EACjC,WAAWC,EAAI,UAAU,SAASC,CAAS;EAC3C,SAASC,IAAa,KAAM,KAAA;EAC5B,QAAQ;CACV;CAEA,OAAO,kBAAAN,GAAA,EAAA,UAAGQ,EAAS;EAAE;EAAY;EAAW;EAAY;EAAY;CAAM,CAAC,EAAI,CAAA;AACjF"}
+{"version":3,"file":"Draggable.js","names":["_Fragment","Draggable","useDraggable","accessibleRef","useAccessibleDragRef","ref","accessibleHandleRef","handleRef","Fragment","children","isDragging"],"sources":["../../../../../src/tools/components/ui/dnd/Draggable.tsx"],"sourcesContent":["import type {CSSProperties, ReactNode} from 'react';\nimport {useDraggable} from '@dnd-kit/react';\nimport {useAccessibleDragRef} from './use-accessible-drag-ref';\n\n/** Native draggable options; render refs replace legacy attributes/listeners. */\nexport interface DraggableProps {\n  /** Unique identifier within the provider. */\n  id: string;\n  /** Native source.data payload. */\n  data?: Record<string, any>;\n  /** Attach ref to the moving element and optional handleRef to its activator. */\n  children: (props: {\n    /** Attach to the element moved by native feedback; pass null on removal. */\n    ref: (element: Element | null) => void;\n    /** Optional separate activator; otherwise the element itself activates dragging. */\n    handleRef: (element: Element | null) => void;\n    /** Whether this registration is the current dragging source. */\n    isDragging: boolean;\n    /** Cursor/opacity presentation only; native feedback owns movement transforms. */\n    style: CSSProperties;\n  }) => ReactNode;\n}\n\n/**\n * Register an element and optional separate handle with the native provider.\n * @param props - Unique string id, optional source.data payload and render callback.\n * @returns The rendered child inside a fragment; input listeners are installed natively.\n * @remarks Place under DnDProvider. Keep nested interactive controls outside the\n * handle when they must remain independently clickable. See the migration guide\n * for native event and feedback semantics.\n * @example\n * ```tsx\n * import {DnDProvider, Draggable} from '@alneas/appkit-react/tools/ui';\n * import '@alneas/appkit-react/styles';\n * export function MovableItem() {\n *   return <DnDProvider><Draggable id=\"report\" data={{name: 'Report'}}>\n *     {({ref, handleRef, style}) => <div ref={ref} style={style}>\n *       <button ref={handleRef}>Move report</button>\n *     </div>}\n *   </Draggable></DnDProvider>;\n * }\n * ```\n */\nexport function Draggable({id, data, children}: DraggableProps) {\n  const {ref, handleRef, isDragging} = useDraggable({id, data});\n  const accessibleRef = useAccessibleDragRef(ref);\n  const accessibleHandleRef = useAccessibleDragRef(handleRef);\n  return <>{children({ref: accessibleRef, handleRef: accessibleHandleRef, isDragging, style: {opacity: isDragging ? 0.5 : undefined, cursor: 'grab'}})}</>;\n}\n"],"mappings":";;;;;AA2CA,SAAgBC,EAAU,EAAC,OAAI,SAAM,eAA2B;CAC9D,IAAM,EAAC,QAAK,cAAW,kBAAcC,EAAa;EAAC;EAAI;CAAI,CAAC,GACtDC,IAAgBC,EAAqBC,CAAG,GACxCC,IAAsBF,EAAqBG,CAAS;CAC1D,OAAO,kBAAAP,GAAA,EAAA,UAAGS,EAAS;EAAC,KAAKN;EAAe,WAAWG;EAAqB;EAAY,OAAO;GAAC,SAASI,IAAa,KAAM,KAAA;GAAW,QAAQ;EAAM;CAAC,CAAC,EAAI,CAAA;AACzJ"}

package/dist/tools/components/ui/dnd/Droppable.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs");let t=require("react/jsx-runtime"),n=require("react");n=e.__toESM(n,1);let r=require("@dnd-kit/core");function i({id:e,data:n,disabled:i,children:a}){let{isOver:o,setNodeRef:s}=(0,r.useDroppable)({id:e,data:n,disabled:i});return(0,t.jsx)(t.Fragment,{children:a({setNodeRef:s,isOver:o})})}exports.Droppable=i;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime"),t=require("@dnd-kit/react"),n=require("@dnd-kit/collision");function r({id:r,data:i,disabled:a,children:o}){let{ref:s,isDropTarget:c}=(0,t.useDroppable)({id:r,data:i,disabled:a,collisionDetector:n.pointerIntersection});return(0,e.jsx)(e.Fragment,{children:o({ref:s,isDropTarget:c})})}exports.Droppable=r;
 //# sourceMappingURL=Droppable.cjs.map