panelui-native 0.65.0 → 0.68.0

package/src/components/flow/flow-identifiers.ts

@@ -0,0 +1,98 @@
+const FLOW_TOKEN_PREFIX = 'panelui-flow:';
+
+export interface FlowEndpoint {
+  node: string;
+  handle?: string;
+}
+
+export type FlowEndpointReference = string | FlowEndpoint;
+
+type EncodedReference = ['legacy', string] | ['endpoint', string] | ['endpoint', string, string];
+
+function encodedReference(reference: FlowEndpointReference): EncodedReference {
+  if (typeof reference === 'string') return ['legacy', reference];
+  return reference.handle === undefined
+    ? ['endpoint', reference.node]
+    : ['endpoint', reference.node, reference.handle];
+}
+
+function decodedReference(value: unknown): FlowEndpointReference | undefined {
+  if (!Array.isArray(value)) return undefined;
+  if (value.length === 2 && value[0] === 'legacy' && typeof value[1] === 'string') {
+    return value[1];
+  }
+  if (
+    (value.length === 2 || value.length === 3) &&
+    value[0] === 'endpoint' &&
+    typeof value[1] === 'string' &&
+    (value.length === 2 || typeof value[2] === 'string')
+  ) {
+    return value.length === 2 ? { node: value[1] } : { node: value[1], handle: value[2] };
+  }
+  return undefined;
+}
+
+function decodeToken(token: string): unknown[] | undefined {
+  if (!token.startsWith(FLOW_TOKEN_PREFIX)) return undefined;
+  try {
+    const value: unknown = JSON.parse(token.slice(FLOW_TOKEN_PREFIX.length));
+    return Array.isArray(value) ? value : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/** Opaque identity for a registered handle. Node and handle text remain untouched. */
+export function encodeFlowHandleKey(node: string, handle: string): string {
+  return FLOW_TOKEN_PREFIX + JSON.stringify(['handle', node, handle]);
+}
+
+export function decodeFlowHandleKey(token: string): FlowEndpoint | undefined {
+  const value = decodeToken(token);
+  if (
+    value?.length !== 3 ||
+    value[0] !== 'handle' ||
+    typeof value[1] !== 'string' ||
+    typeof value[2] !== 'string'
+  ) {
+    return undefined;
+  }
+  return { node: value[1], handle: value[2] };
+}
+
+/** Opaque identity for an edge registration or accessibility connection action. */
+export function encodeFlowEdgeKey(
+  from: FlowEndpointReference,
+  to: FlowEndpointReference
+): string {
+  return FLOW_TOKEN_PREFIX + JSON.stringify(['edge', encodedReference(from), encodedReference(to)]);
+}
+
+export function decodeFlowEdgeKey(
+  token: string
+): { from: FlowEndpointReference; to: FlowEndpointReference } | undefined {
+  const value = decodeToken(token);
+  if (value?.length !== 3 || value[0] !== 'edge') return undefined;
+  const from = decodedReference(value[1]);
+  const to = decodedReference(value[2]);
+  return from === undefined || to === undefined ? undefined : { from, to };
+}
+
+/**
+ * Resolve a public endpoint without splitting its identifiers. Exact node ids
+ * win; legacy `node.handle` text is accepted only when it names one registered
+ * handle. Structured endpoints cover the otherwise ambiguous case.
+ */
+export function resolveFlowEndpoint(
+  reference: FlowEndpointReference,
+  nodes: readonly string[],
+  handles: readonly { node: string; id: string }[]
+): FlowEndpoint {
+  if (typeof reference !== 'string') return reference;
+  if (nodes.includes(reference)) return { node: reference };
+
+  const matches = handles.filter((handle) => `${handle.node}.${handle.id}` === reference);
+  return matches.length === 1
+    ? { node: matches[0]!.node, handle: matches[0]!.id }
+    : { node: reference };
+}

package/src/components/flow/index.tsx

@@ -107,6 +107,13 @@ import {
   type FlowAccessibilityHandle,
   type FlowAccessibilityNode,
 } from './flow-accessibility';
+import {
+  encodeFlowEdgeKey,
+  encodeFlowHandleKey,
+  resolveFlowEndpoint,
+  type FlowEndpoint,
+  type FlowEndpointReference,
+} from './flow-identifiers';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
@@ -1314,7 +1321,7 @@ function FlowHandle({
     unregisterHandle,
     connectNodes,
   } = flow;
-  const key = `${node}.${id}`;
+  const key = encodeFlowHandleKey(node, id);
 
   useEffect(() => {
     registerHandle({
@@ -1481,10 +1488,10 @@ FlowHandle.displayName = 'Flow.Handle';
 /* -------------------------------------------------------------------------- */
 
 export interface FlowEdgeProps {
-  /** Source, as `"nodeId"` or `"nodeId.handleId"`. */
-  from: string;
-  /** Target, same shape. */
-  to: string;
+  /** Source node or handle. Strings retain the `"nodeId.handleId"` shorthand. */
+  from: FlowEndpointReference;
+  /** Target node or handle, in the same shape. */
+  to: FlowEndpointReference;
   /** How the edge is routed. */
   variant?: FlowEdgeVariant;
   /**
@@ -1530,7 +1537,7 @@ export interface FlowEdgeProps {
  */
 function FlowEdge(props: FlowEdgeProps) {
   const { registerEdge, unregisterEdge } = useFlow('Flow.Edge');
-  const key = `${props.from}->${props.to}`;
+  const key = encodeFlowEdgeKey(props.from, props.to);
 
   // Re-registered whenever any prop changes, so `animated` toggling or a
   // variant switch reaches the layer that draws it.
@@ -1571,8 +1578,9 @@ function FlowEdgePath({
   tint: string;
   origin: { x: number; y: number };
 }) {
-  const source = resolveEnd(from, fromSide, handles);
-  const target = resolveEnd(to, toSide, handles);
+  const nodes = Object.keys(boxes);
+  const source = resolveEnd(from, fromSide, nodes, handles);
+  const target = resolveEnd(to, toSide, nodes, handles);
 
   const fromRect = boxes[source.node];
   const toRect = boxes[target.node];
@@ -1631,22 +1639,24 @@ function FlowEdgePath({
 }
 
 /**
- * Splits `"node"` or `"node.handle"` into the node and, when a handle was
- * named, the face and offset that handle registered.
+ * Resolves a node or handle without parsing either identifier. Legacy
+ * `"node.handle"` references are matched against the structured registry.
  */
 function resolveEnd(
-  reference: string,
+  reference: FlowEndpointReference,
   explicit: FlowSide | undefined,
+  nodes: string[],
   handles: HandleEntry[]
 ): { node: string; side: FlowSide | undefined; offset: number } {
-  const dot = reference.indexOf('.');
-  if (dot === -1) {
-    return { node: reference, side: explicit, offset: 0.5 };
-  }
-  const node = reference.slice(0, dot);
-  const entry = handles.find((handle) => handle.key === reference);
+  const endpoint = resolveFlowEndpoint(reference, nodes, handles);
+  const entry =
+    endpoint.handle === undefined
+      ? undefined
+      : handles.find(
+          (handle) => handle.node === endpoint.node && handle.id === endpoint.handle
+        );
   return {
-    node,
+    node: endpoint.node,
     side: explicit ?? entry?.side,
     offset: entry?.offset ?? 0.5,
   };
@@ -2199,4 +2209,4 @@ export const Flow = Object.assign(FlowRoot, {
   MiniMap: FlowMiniMap,
 });
 
-export type { FlowSide, FlowRect, FlowPoint };
+export type { FlowEndpoint, FlowEndpointReference, FlowSide, FlowRect, FlowPoint };

package/src/components/form/index.tsx

@@ -7,11 +7,8 @@
  * take differently-shaped change props, and only the caller knows which one
  * a given field needs to wire up.
  *
- * `Form`/`Form.Field` trade some type precision for that JSX ergonomics — a
- * field's `name` isn't checked against `keyof YourValues` here, because a
- * value's shape can't flow through `useContext` generically. Reach for
- * `useField(form, name)` directly when a field's name should be checked
- * against the form's own value type.
+ * `createForm<Values>()` binds that value shape to the same runtime components
+ * when field names and render values should stay typed through JSX.
  *
  * ```tsx
  * const form = useForm({
@@ -37,6 +34,7 @@
 import { createContext, useContext, type ReactNode } from 'react';
 import { useField, type FormFieldRenderProps, type UseFieldOptions } from './use-field';
 import { useForm, type FormApi, type FieldErrors, type FieldTouched, type FieldState, type UseFormOptions, type Validator } from './use-form';
+import { bindFormRuntime } from './typed-form';
 
 export { useForm, useField };
 export type {
@@ -57,6 +55,11 @@ export interface FormProps {
   children?: ReactNode;
 }
 
+export interface TypedFormProps<T extends Record<string, any>> {
+  form: FormApi<T>;
+  children?: ReactNode;
+}
+
 function FormRoot({ form, children }: FormProps) {
   return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
 }
@@ -70,6 +73,14 @@ export interface FormFieldProps {
   children: (field: FormFieldRenderProps<any>) => ReactNode;
 }
 
+export interface TypedFormFieldProps<
+  T extends Record<string, any>,
+  K extends keyof T,
+> extends UseFieldOptions<T, K> {
+  name: K;
+  children: (field: FormFieldRenderProps<T[K]>) => ReactNode;
+}
+
 function FormField({ name, validate, validateOn, children }: FormFieldProps) {
   const form = useContext(FormContext);
   if (!form) {
@@ -83,3 +94,19 @@ FormField.displayName = 'Form.Field';
 export const Form = Object.assign(FormRoot, {
   Field: FormField,
 });
+
+export interface TypedForm<T extends Record<string, any>> {
+  (props: TypedFormProps<T>): ReactNode;
+  Field: <K extends keyof T>(props: TypedFormFieldProps<T, K>) => ReactNode;
+  useForm: (options: UseFormOptions<T>) => FormApi<T>;
+  useField: <K extends keyof T>(
+    form: FormApi<T>,
+    name: K,
+    options?: UseFieldOptions<T, K>
+  ) => FormFieldRenderProps<T[K]>;
+}
+
+/** Bind a value shape to Form's existing runtime without creating new state. */
+export function createForm<T extends Record<string, any>>(): TypedForm<T> {
+  return bindFormRuntime(FormRoot, FormField, useForm, useField) as TypedForm<T>;
+}

package/src/components/form/typed-form.ts

@@ -0,0 +1,13 @@
+/** Attach bound helpers to the existing runtime components; no state is cloned. */
+export function bindFormRuntime<
+  Root,
+  Field,
+  UseForm,
+  UseField,
+>(root: Root, field: Field, useForm: UseForm, useField: UseField) {
+  return Object.assign(root as object, { Field: field, useForm, useField }) as Root & {
+    Field: Field;
+    useForm: UseForm;
+    useField: UseField;
+  };
+}

package/src/components/form/use-form.ts

@@ -67,6 +67,10 @@ export interface FormApi<T extends Record<string, any>> {
   setFieldValue: <K extends keyof T>(name: K, value: T[K]) => void;
   setFieldTouched: <K extends keyof T>(name: K, touched?: boolean) => void;
   setFieldError: <K extends keyof T>(name: K, error: string | undefined) => void;
+  /** Read the latest value, including a change made before React renders again. */
+  getValue: <K extends keyof T>(name: K) => T[K];
+  /** Read a field from this render so a component naturally follows its changes. */
+  watch: <K extends keyof T>(name: K) => T[K];
   getFieldState: <K extends keyof T>(name: K) => FieldState<T[K]>;
   /** Used by `useField`/`Form.Field` to attach a field's validation rule. */
   registerValidator: <K extends keyof T>(name: K, validator?: Validator<T, K>) => void;
@@ -249,6 +253,9 @@ export function useForm<T extends Record<string, any>>({
     [state.values, state.errors, state.touched]
   );
 
+  const getValue = useCallback(<K extends keyof T>(name: K): T[K] => valuesRef.current[name], []);
+  const watch = useCallback(<K extends keyof T>(name: K): T[K] => state.values[name], [state.values]);
+
   const validateField = useCallback(async <K extends keyof T>(name: K) => {
     const validator = validatorsRef.current[name];
     if (!validator) return true;
@@ -369,6 +376,8 @@ export function useForm<T extends Record<string, any>>({
     setFieldValue,
     setFieldTouched,
     setFieldError,
+    getValue,
+    watch,
     getFieldState,
     registerValidator,
     validateField,

package/src/components/heatmap-chart/index.tsx

@@ -61,6 +61,7 @@ import Animated, {
 import Svg, { ClipPath, Defs, G, Line as SvgLine, Rect } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { cn } from '../../utils/cn';
 import { normalizeWeekStart, startOfDay } from '../../utils/date';
 
@@ -309,7 +310,7 @@ function deriveLevels(data: HeatmapColumn[]): number[] {
 /* Root                                                                       */
 /* -------------------------------------------------------------------------- */
 
-export interface HeatmapChartProps extends ViewProps {
+export interface HeatmapChartProps extends ViewProps, ChartAccessibilityProps<HeatmapCell> {
   className?: string;
   /** One column per period, with its row bins inside. */
   data: HeatmapColumn[];
@@ -396,6 +397,11 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
     animationDuration = 900,
     inactiveOpacity = 1,
     onActiveCellChange,
+    accessible,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelForDatum,
+    onAccessibilityDatumPress,
     children,
     ...props
   },
@@ -491,6 +497,20 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
     [data, levelOf]
   );
 
+  const accessibilityCells = useMemo(
+    () =>
+      data.flatMap((column) =>
+        column.bins.map((bin) => ({
+          column: column.bin,
+          row: bin.bin,
+          count: bin.count,
+          level: levelOf(bin.count),
+          date: bin.date,
+        }))
+      ),
+    [data, levelOf]
+  );
+
   const setActiveCell = useMemo(
     () => (cell: HeatmapCell | null) => {
       setActiveCellState(cell);
@@ -570,11 +590,37 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
             whole chart, so it starts at the chart's edge, not the grid's. */}
         {parts.header}
 
+        <ChartAccessibilityData
+          chart="Heatmap chart"
+          data={accessibilityCells}
+          disabled={accessible === false}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityLabelForDatum={accessibilityLabelForDatum}
+          onAccessibilityDatumPress={onAccessibilityDatumPress}
+          valueOf={(cell) => [
+            ['date', cell.date],
+            ['column', cell.column],
+            ['row', cell.row],
+            ['count', cell.count],
+          ]}
+        />
+
         {parts.x ? (
-          <View style={{ paddingLeft: axisWidth }}>{parts.x}</View>
+          <View
+            style={{ paddingLeft: axisWidth }}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
+            {parts.x}
+          </View>
         ) : null}
 
-        <View className="flex-row">
+        <View
+          className="flex-row"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
           {parts.y}
           <View style={{ width: grid.width, height: grid.height }}>
             {grid.width > 0 ? (

package/src/components/line-chart/index.tsx

@@ -82,6 +82,7 @@ import Svg, {
 } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import {
   areaPath,
   columnValues,
@@ -172,7 +173,7 @@ export function useLineChart() {
   };
 }
 
-export interface LineChartProps extends ViewProps {
+export interface LineChartProps extends ViewProps, ChartAccessibilityProps<LineChartDatum> {
   className?: string;
   /** The rows. Each one is a point along the x-axis. */
   data: LineChartDatum[];
@@ -227,6 +228,11 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
     yDomain,
     curve = 'monotone',
     onActiveIndexChange,
+    accessible,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelForDatum,
+    onAccessibilityDatumPress,
     compact = false,
     children,
     ...props
@@ -443,7 +449,26 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
     <LineChartContext.Provider value={context}>
       <View {...props} style={props.style} className={cn('w-full', className)}>
         {header}
-        <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+        <ChartAccessibilityData
+          chart="Line chart"
+          data={data}
+          disabled={accessible === false || loading}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityLabelForDatum={accessibilityLabelForDatum}
+          onAccessibilityDatumPress={onAccessibilityDatumPress}
+          valueOf={(datum) => [
+            [xDataKey, datum[xDataKey]],
+            ...series.map(([key]) => [key, datum[key]] as [string, unknown]),
+          ]}
+        />
+        <View
+          onLayout={onLayout}
+          style={{ aspectRatio }}
+          className="w-full"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
           {plot.width > 0 ? (
             <>
               <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>