@multiplatform.one/forms 7.6.3 → 7.7.1

package/src/DescriptionList/index.tsx

@@ -87,6 +87,15 @@ function purposeMaxCh(): number {
   return LABEL_COLUMN_MAX_CH;
 }
 
+function labelColumnGridTrack(width: string): string {
+  const prefix = "min(max-content,";
+  if (width.startsWith(prefix) && width.endsWith(")")) {
+    const inner = width.slice(prefix.length, -1).trim();
+    if (inner.endsWith("ch")) return `fit-content(${inner})`;
+  }
+  return width;
+}
+
 function listItemRhythm(density: string) {
   const compact = density === "compact";
   return {
@@ -152,7 +161,9 @@ function TermText({ children }: { children: ReactNode }) {
       {...knobProps.body}
       color="$color11"
       minWidth={0}
-      {...(isWeb ? ({ overflowWrap: "break-word" } as Record<string, unknown>) : undefined)}
+      // `overflowWrap` is not a tamagui style prop; passed as one it reaches
+      // the DOM host as an unknown React prop. Web takes it through `style`.
+      {...(isWeb ? { style: { overflowWrap: "break-word" } } : undefined)}
     >
       {children}
     </Text>
@@ -320,18 +331,32 @@ function DescriptionListWeb({
   placement: DescriptionListPlacement;
   framed: boolean;
 }) {
+  // Write tracks after commit: React's style setter (and invalid `min()`
+  // track syntax) otherwise leave a one-column computed grid.
+  const columns = stacked
+    ? undefined
+    : hasAction
+      ? `${labelColumnGridTrack(labelColumnWidth)} minmax(0, 1fr) max-content`
+      : `${labelColumnGridTrack(labelColumnWidth)} minmax(0, 1fr)`;
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const el = listRef.current;
+    if (!el) return;
+    if (columns) {
+      el.style.setProperty("grid-template-columns", columns);
+    } else {
+      el.style.removeProperty("grid-template-columns");
+    }
+  }, [columns]);
+
   const style: CSSProperties = stacked
-    ? { display: "block", width: "100%" }
-    : {
-        display: "grid",
-        gridTemplateColumns: hasAction
-          ? `${labelColumnWidth} minmax(0, 1fr) max-content`
-          : `${labelColumnWidth} minmax(0, 1fr)`,
-        width: "100%",
-      };
+    ? { display: "block", width: "100%", minWidth: 0 }
+    : { display: "grid", width: "100%", minWidth: 0 };
 
   return (
-    <YStack
+    <div
+      ref={listRef}
       data-mpo-description-list=""
       data-placement={placement}
       data-stacked={stacked ? "true" : "false"}
@@ -342,8 +367,6 @@ function DescriptionListWeb({
       data-label-column-width={labelColumnWidth}
       data-density={density}
       data-size={size}
-      width="100%"
-      minWidth={0}
       style={style}
     >
       {rows.map((row, index) => (
@@ -357,17 +380,26 @@ function DescriptionListWeb({
           quiet={quiet}
         />
       ))}
-    </YStack>
+    </div>
   );
 }
 
-function useContainerWide(enabled: boolean): { ref: Ref<unknown>; wide: boolean } {
+type HostLayoutEvent = { nativeEvent: { layout: { width: number } } };
+
+function useContainerWide(enabled: boolean): {
+  ref: Ref<unknown>;
+  wide: boolean;
+  onLayout: ((event: HostLayoutEvent) => void) | undefined;
+} {
   const ref = useRef<HTMLDivElement>(null);
-  const [wide, setWide] = useState(true);
+  // Web assumes wide until measured (desktop stories). Native assumes stacked
+  // until onLayout — phones sit under the 480 collapse.
+  const [wide, setWide] = useState(isWeb);
 
   useLayoutEffect(() => {
+    if (!isWeb || !enabled) return;
     const el = ref.current;
-    if (!el || !enabled) {
+    if (!el) {
       setWide(true);
       return;
     }
@@ -392,7 +424,14 @@ function useContainerWide(enabled: boolean): { ref: Ref<unknown>; wide: boolean
     return () => ro.disconnect();
   }, [enabled]);
 
-  return { ref, wide };
+  const onLayout =
+    !isWeb && enabled
+      ? (event: HostLayoutEvent) => {
+          setWide(event.nativeEvent.layout.width >= FORM_GRID_COLLAPSE_WIDTH);
+        }
+      : undefined;
+
+  return { ref, wide, onLayout };
 }
 
 export function DescriptionList({
@@ -415,8 +454,8 @@ export function DescriptionList({
     return itemsFromChildren(children);
   }, [items, children]);
   const hasAction = rows.some(rowHasAction);
-  const measureCollapse = placement === "side" && isWeb;
-  const { ref, wide } = useContainerWide(measureCollapse);
+  const measureCollapse = placement === "side";
+  const { ref, wide, onLayout } = useContainerWide(measureCollapse);
   const stacked = placement === "top" || (placement === "side" && !wide);
 
   const list = (
@@ -453,7 +492,7 @@ export function DescriptionList({
             <DescriptionListRowView
               key={index}
               row={row}
-              stacked={true}
+              stacked={stacked}
               hasActionColumn={hasAction}
               rhythm={rhythm}
               showRule={index > 0}
@@ -476,6 +515,7 @@ export function DescriptionList({
       ref={ref as never}
       data-mpo-description-list-host=""
       data-testid={testID}
+      onLayout={onLayout}
       minWidth={0}
       {...widthProps}
       {...(framed

package/src/ErrorSummary.stories.tsx

@@ -0,0 +1,197 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { Input as TamaguiInput, Paragraph, YStack } from "tamagui";
+import { Button } from "./Button";
+import { ErrorSummary, collectFormFieldErrors } from "./ErrorSummary";
+import { FieldLayout } from "./fieldLayout";
+import { Form } from "./Form";
+import { FormSection } from "./FormSection";
+
+const meta: Meta<typeof ErrorSummary> = {
+  title: "Forms/ErrorSummary",
+  component: ErrorSummary,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          'Form-level error summary (DG-VAL-02), the GOV.UK pattern. It lists every field error as a link that focuses the offending control, carries `role="alert"`, and takes keyboard focus itself the moment it appears — so a submit failure is announced once and the keyboard lands somewhere useful instead of at the top of the document.',
+      },
+    },
+  },
+  argTypes: {
+    title: { control: "text" },
+    disableAutoFocus: { control: "boolean" },
+  },
+  args: {
+    disableAutoFocus: true,
+    errors: [
+      { name: "email", error: "Enter an email address in the format name@example.com" },
+      { name: "password", error: "Enter a password" },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ErrorSummary>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <YStack maxWidth={520}>
+      <ErrorSummary {...args} onFocusField={action("onFocusField")} />
+    </YStack>
+  ),
+};
+
+/**
+ * Structured errors (DG-VAL-04): a validator may return `{ problem, action }`
+ * instead of a string, and the summary flattens the pair into one sentence —
+ * what is wrong, then what to do about it.
+ */
+export const StructuredErrors: Story = {
+  render: () => (
+    <YStack maxWidth={520}>
+      <ErrorSummary
+        disableAutoFocus
+        errors={[
+          {
+            name: "vatNumber",
+            error: {
+              problem: "That VAT number is not registered.",
+              action: "Check it against your registration certificate.",
+            },
+          },
+          {
+            name: "startDate",
+            error: { problem: "The start date is in the past." },
+          },
+        ]}
+        onFocusField={action("onFocusField")}
+      />
+    </YStack>
+  ),
+};
+
+/** A custom `label` overrides the link text without touching the error payload. */
+export const CustomLabels: Story = {
+  render: () => (
+    <YStack maxWidth={520}>
+      <ErrorSummary
+        disableAutoFocus
+        title="Check these before continuing"
+        errors={[
+          { name: "email", label: "Email address", error: "Enter an email address" },
+          { name: "phone", label: "Phone number", error: "Enter a phone number" },
+        ]}
+        onFocusField={action("onFocusField")}
+      />
+    </YStack>
+  ),
+};
+
+/** One error, the common case after a single missed required field. */
+export const SingleError: Story = {
+  render: () => (
+    <YStack maxWidth={520}>
+      <ErrorSummary
+        disableAutoFocus
+        errors={[{ name: "terms", error: "You must accept the terms to continue" }]}
+        onFocusField={action("onFocusField")}
+      />
+    </YStack>
+  ),
+};
+
+/** An empty list renders nothing at all — no empty banner, no reserved space. */
+export const EmptyRendersNothing: Story = {
+  render: () => (
+    <YStack maxWidth={520} gap="$3">
+      <Paragraph size="$3">Nothing should paint between these two lines.</Paragraph>
+      <ErrorSummary errors={[]} />
+      <Paragraph size="$3">Second line.</Paragraph>
+    </YStack>
+  ),
+};
+
+/**
+ * The live loop: submit empty, the summary appears, and clicking a link puts
+ * the caret in the field that caused it. `collectFormFieldErrors` turns
+ * TanStack `fieldMeta` into the item list.
+ */
+export const FocusesTheFieldOnPress: Story = {
+  render: () => {
+    const Example = () => {
+      const [errors, setErrors] = useState<ReturnType<typeof collectFormFieldErrors>>([]);
+      const form = useForm({
+        defaultValues: { email: "", password: "" },
+        onSubmit: async ({ value }) => {
+          action("onSubmit")(value);
+        },
+      });
+      const submit = () => {
+        const next = collectFormFieldErrors({
+          email: { errors: [form.state.values.email ? undefined : "Enter an email address"] },
+          password: { errors: [form.state.values.password ? undefined : "Enter a password"] },
+        });
+        setErrors(next);
+        if (next.length === 0) void form.handleSubmit();
+      };
+      return (
+        <Form form={form}>
+          <YStack maxWidth={520} gap="$4">
+            <ErrorSummary errors={errors} disableAutoFocus onFocusField={action("onFocusField")} />
+            <FormSection label="Sign in">
+              <FieldLayout id="email" label="Email">
+                <TamaguiInput
+                  id="email"
+                  placeholder="you@example.com"
+                  onChangeText={(text) => form.setFieldValue("email", text)}
+                />
+              </FieldLayout>
+              <FieldLayout id="password" label="Password">
+                <TamaguiInput
+                  id="password"
+                  secureTextEntry
+                  onChangeText={(text) => form.setFieldValue("password", text)}
+                />
+              </FieldLayout>
+            </FormSection>
+            <Button onPress={submit}>Submit</Button>
+          </YStack>
+        </Form>
+      );
+    };
+    return <Example />;
+  },
+};
+
+/**
+ * `disableAutoFocus` off is the shipping default: the summary steals focus so
+ * a screen reader announces it. Toggle the control to feel the difference.
+ */
+export const AutoFocusOnAppear: Story = {
+  render: () => {
+    const Example = () => {
+      const [shown, setShown] = useState(false);
+      return (
+        <YStack maxWidth={520} gap="$4">
+          <Button onPress={() => setShown((prev) => !prev)}>
+            {shown ? "Hide the summary" : "Show the summary"}
+          </Button>
+          {shown ? (
+            <ErrorSummary
+              errors={[
+                { name: "email", error: "Enter an email address" },
+                { name: "postcode", error: "Enter a postcode" },
+              ]}
+              onFocusField={action("onFocusField")}
+            />
+          ) : null}
+        </YStack>
+      );
+    };
+    return <Example />;
+  },
+};

package/src/ErrorSummary.tsx

@@ -1,4 +1,4 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { FOCUS_RING_HALO_OFFSET, useResolvedKnobs } from "@multiplatform.one/theme";
 import { WarningCircleIcon } from "@phosphor-icons/react";
 import { type ReactNode, useEffect, useId, useRef } from "react";
 import { Anchor, H4, Paragraph, YStack, isWeb } from "tamagui";
@@ -152,7 +152,10 @@ export function ErrorSummary({
         outlineWidth: 2,
         outlineStyle: "solid",
         outlineColor: "$color8",
-        outlineOffset: 2,
+        // LC-71 §4 halo: inline text link. The summary sits in a run of prose,
+        // so a band at offset 0 crosses the line box and collides with the
+        // ascenders/descenders around it.
+        outlineOffset: FOCUS_RING_HALO_OFFSET,
       }}
       data-testid="error-summary"
     >

package/src/FloatingPanel/panelWidthContract.spec.ts

@@ -24,8 +24,8 @@ const fieldsDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "fields
 /** Pickers whose trigger is a form FIELD: the panel may never be narrower. */
 const fieldShapedPickers = [
   "DatePicker/parts.tsx",
-  "DatePicker/DatetimePicker.tsx",
-  "TimePicker/index.tsx",
+  "DatePicker/DatetimePicker.catalog.tsx",
+  "TimePicker/catalog.tsx",
   "ColorPicker/parts.tsx",
   "Icon/index.tsx",
 ];

package/src/FloatingPanel/useFloatingPanel.spec.tsx

@@ -15,9 +15,10 @@
  */
 import { waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it } from "vitest";
 import {
   type PanelWidthMode,
+  measureDrawnRadius,
   panelAnchorOffset,
   resolvePanelWidthMode,
   useFloatingPanel,
@@ -166,3 +167,200 @@ describe("FloatingPanel width modes (MPO-38)", () => {
     expect(result.getByTestId("anchor-floating").style.minWidth).toBe("");
   });
 });
+
+/**
+ * Drawn-radius equality (MPO-129).
+ *
+ * The panel wears the arc the TRIGGER actually draws, and the box the panel
+ * anchors to is not always the box that paints. `FloatingPanelWeb` hands
+ * `setReferenceRef` to a layout-only `<View>` around the caller's `trigger`
+ * slot, so reading the anchor's own computed radius returned 0px and
+ * `min(0, h/2, w/2)` pinned every consumer's panel to a square corner at
+ * EVERY stop — measured on origin/main 3bb889f32: trigger 5/9/16/50px,
+ * panel 0px, in light and dark.
+ *
+ * These cases lock the three behaviours that fix depends on, so the zero
+ * cannot come back: the anchor's own paint wins when it has one (the
+ * Select/Combobox path, which was never broken), an unpainted anchor
+ * descends to the box sharing its corner, and an anchor with nothing painted
+ * anywhere returns null so the caller falls back to the CLAMPED TOKEN rather
+ * than to zero.
+ *
+ * FIXTURE FIDELITY, and it is load-bearing. jsdom reports an UNSET
+ * `borderTopLeftRadius` as the empty string; a browser reports "0px". The old
+ * implementation ran `parseFloat` on that value, so on an unstyled jsdom node
+ * it saw NaN and returned null — accidentally the right answer — while in a
+ * browser it saw 0 and returned a measured 0 that beat the token fallback.
+ * That is the bug. So every layout-only wrapper below sets
+ * `borderTopLeftRadius: "0px"` explicitly: without it these cases pass against
+ * the broken implementation and lock nothing.
+ */
+function boxed(
+  el: HTMLElement,
+  rect: { x: number; y: number; width: number; height: number },
+  style: Partial<CSSStyleDeclaration>,
+) {
+  mockRect(el, rect);
+  Object.assign(el.style, style);
+  return el;
+}
+
+/** jsdom resolves computed style only for ATTACHED nodes, and the fix reads
+ *  computed style — so the fixture has to live in the document. */
+function mounted(el: HTMLElement) {
+  document.body.appendChild(el);
+  return el;
+}
+
+describe("FloatingPanel drawn radius (MPO-129)", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("reads the anchor itself when the anchor is the painted control", () => {
+    // Select and Combobox spread the reference onto InputParts.Box. That path
+    // was correct before this fix and must stay byte-for-byte correct after.
+    const anchor = mounted(
+      boxed(
+        document.createElement("div"),
+        { x: 0, y: 0, width: 240, height: 44 },
+        {
+          borderTopLeftRadius: "9px",
+          backgroundColor: "rgb(255, 255, 255)",
+        },
+      ),
+    );
+    expect(measureDrawnRadius(anchor)).toBe(9);
+  });
+
+  it("descends to the painted trigger when the anchor is a layout-only wrapper", () => {
+    // The regression itself: wrapper draws nothing, Button draws 16px.
+    const wrapper = mounted(
+      boxed(
+        document.createElement("div"),
+        { x: 0, y: 0, width: 240, height: 44 },
+        {
+          // A browser reports "0px" here; jsdom leaves it "". Without this the
+          // fixture is not the box the bug happens on — see the note above.
+          borderTopLeftRadius: "0px",
+          cursor: "pointer",
+          opacity: "1",
+        },
+      ),
+    );
+    const button = boxed(
+      document.createElement("div"),
+      { x: 0, y: 0, width: 240, height: 44 },
+      {
+        borderTopLeftRadius: "16px",
+        backgroundColor: "rgb(240, 240, 240)",
+      },
+    );
+    wrapper.appendChild(button);
+    expect(measureDrawnRadius(wrapper)).toBe(16);
+  });
+
+  it("clamps the descended radius to the painted trigger's own half-height", () => {
+    // `full` asks for 50px on a 44px control; CSS draws 22px, so the panel
+    // must draw 22px too — matching a 50px arc would not coincide.
+    const wrapper = mounted(
+      boxed(
+        document.createElement("div"),
+        { x: 0, y: 0, width: 240, height: 44 },
+        {
+          // A browser reports "0px" here; jsdom leaves it "". Without this the
+          // fixture is not the box the bug happens on — see the note above.
+          borderTopLeftRadius: "0px",
+          cursor: "pointer",
+        },
+      ),
+    );
+    const button = boxed(
+      document.createElement("div"),
+      { x: 0, y: 0, width: 240, height: 44 },
+      {
+        borderTopLeftRadius: "50px",
+        backgroundColor: "rgb(240, 240, 240)",
+      },
+    );
+    wrapper.appendChild(button);
+    expect(measureDrawnRadius(wrapper)).toBe(22);
+  });
+
+  it("keeps a square corner square rather than inventing one", () => {
+    const wrapper = mounted(
+      boxed(
+        document.createElement("div"),
+        { x: 0, y: 0, width: 240, height: 44 },
+        {
+          // A browser reports "0px" here; jsdom leaves it "". Without this the
+          // fixture is not the box the bug happens on — see the note above.
+          borderTopLeftRadius: "0px",
+          cursor: "pointer",
+        },
+      ),
+    );
+    const button = boxed(
+      document.createElement("div"),
+      { x: 0, y: 0, width: 240, height: 44 },
+      {
+        borderTopLeftRadius: "0px",
+        backgroundColor: "rgb(240, 240, 240)",
+      },
+    );
+    wrapper.appendChild(button);
+    expect(measureDrawnRadius(wrapper)).toBe(0);
+  });
+
+  it("ignores a painted descendant that does not share the anchor's corner", () => {
+    // An inset swatch is not the corner the panel meets. Nothing else paints,
+    // so this resolves to the token fallback, not to the swatch's radius.
+    const wrapper = mounted(
+      boxed(
+        document.createElement("div"),
+        { x: 0, y: 0, width: 240, height: 44 },
+        {
+          // A browser reports "0px" here; jsdom leaves it "". Without this the
+          // fixture is not the box the bug happens on — see the note above.
+          borderTopLeftRadius: "0px",
+          cursor: "pointer",
+        },
+      ),
+    );
+    const swatch = boxed(
+      document.createElement("div"),
+      { x: 12, y: 12, width: 20, height: 20 },
+      {
+        borderTopLeftRadius: "10px",
+        backgroundColor: "rgb(255, 0, 0)",
+      },
+    );
+    wrapper.appendChild(swatch);
+    expect(measureDrawnRadius(wrapper)).toBeNull();
+  });
+
+  it("returns null — never 0 — when nothing under the anchor paints a corner", () => {
+    // This is the whole bug in one assertion. A measured 0 wins over the
+    // token fallback because `measuredRadius ?? clampDropdownRadius(token)`
+    // only falls back on null, so returning 0 here squares every panel.
+    const wrapper = mounted(
+      boxed(
+        document.createElement("div"),
+        { x: 0, y: 0, width: 240, height: 44 },
+        {
+          // A browser reports "0px" here; jsdom leaves it "". Without this the
+          // fixture is not the box the bug happens on — see the note above.
+          borderTopLeftRadius: "0px",
+          cursor: "pointer",
+        },
+      ),
+    );
+    wrapper.appendChild(
+      boxed(document.createElement("span"), { x: 0, y: 0, width: 60, height: 20 }, {}),
+    );
+    // Guard the premise: if this ever reads "" again the case below goes green
+    // against a broken implementation, exactly as it did before MPO-129.
+    expect(getComputedStyle(wrapper).borderTopLeftRadius).toBe("0px");
+    expect(measureDrawnRadius(wrapper)).toBeNull();
+  });
+});

package/src/FloatingPanel/useFloatingPanel.ts

@@ -141,6 +141,42 @@ export interface UseFloatingPanelReturn {
 
 // ── Hook ──────────────────────────────────────────────────────
 
+/** A box paints a corner if it draws a radius, a border or a background. */
+function paintsACorner(el: HTMLElement): boolean {
+  const cs = getComputedStyle(el);
+  if (Number.parseFloat(cs.borderTopLeftRadius) > 0) return true;
+  if (Number.parseFloat(cs.borderTopWidth) > 0 && cs.borderTopStyle !== "none") return true;
+  const bg = cs.backgroundColor;
+  return !!bg && bg !== "transparent" && bg !== "rgba(0, 0, 0, 0)";
+}
+
+/**
+ * The element the panel ANCHORS to is not always the element that PAINTS
+ * (MPO-129). `FloatingPanelWeb` hands `setReferenceRef` to a layout-only
+ * `<View>` wrapping the caller's `trigger` slot — it carries cursor and
+ * opacity and draws nothing — so reading its computed radius returns 0px and
+ * `min(0, h/2, w/2)` pins the panel to a square corner at EVERY stop, not
+ * just at `full`. Select and Combobox escape it only because they spread the
+ * reference onto `InputParts.Box`, which is the painted control itself.
+ *
+ * Positioning still measures the wrapper (that is the cover contract's box —
+ * a ColorPicker read from its swatch would measure the swatch's inset).
+ * Only the ARC descends: to the outermost box that shares the anchor's own
+ * top-left corner and actually paints one. Nothing painted → null, so the
+ * caller falls back to the clamped token rather than to zero.
+ */
+function paintedCornerBox(root: HTMLElement): HTMLElement | null {
+  if (paintsACorner(root)) return root;
+  const rootRect = root.getBoundingClientRect();
+  for (const el of Array.from(root.querySelectorAll<HTMLElement>("*"))) {
+    const rect = el.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) continue;
+    if (Math.abs(rect.left - rootRect.left) > 1 || Math.abs(rect.top - rootRect.top) > 1) continue;
+    if (paintsACorner(el)) return el;
+  }
+  return null;
+}
+
 /**
  * OVERLAY_ANCHOR_GAP rule — radius equality: a panel that aligns to (or
  * covers) its trigger must draw the SAME corner arc as the trigger at the
@@ -149,11 +185,17 @@ export interface UseFloatingPanelReturn {
  * ~22px arcs on a 44px-high field while a token-styled panel would draw its
  * own, different arc. Measure the trigger's effective (drawn) radius
  * instead and hand that px value to the panel.
+ *
+ * Exported for `useFloatingPanel.spec.tsx`: the arc is measured, not
+ * declared, so the only way to lock it is to feed it real boxes.
  */
-function measureDrawnRadius(el: HTMLElement): number | null {
-  const raw = parseFloat(getComputedStyle(el).borderTopLeftRadius);
+export function measureDrawnRadius(el: HTMLElement): number | null {
+  const box = paintedCornerBox(el);
+  if (!box) return null;
+  const raw = parseFloat(getComputedStyle(box).borderTopLeftRadius);
   if (!Number.isFinite(raw)) return null;
-  const rect = el.getBoundingClientRect();
+  const rect = box.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) return null;
   return Math.min(raw, rect.height / 2, rect.width / 2);
 }