@oxy.so/bloom 6.4.0 → 7.0.1

package/src/project-board/TicketGenieSurface.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import { useWindowDimensions } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useDialogContext } from '../dialog/context';
+import { StyledView } from '../styles/styled-primitives';
+const AnimatedView = Animated.createAnimatedComponent(StyledView);
+function phase(start: number, end: number, value: number) {
+  'worklet';
+  const t = Math.min(1, Math.max(0, (value - start) / (end - start)));
+  return t * t * (3 - 2 * t);
+}
+export function TicketGenieSurface({
+  children,
+  corner = false,
+}: {
+  children: ReactNode;
+  corner?: boolean;
+}) {
+  const { isClosing = false } = useDialogContext();
+  const reduced = useReducedMotion();
+  const progress = useSharedValue(reduced ? 0 : 1);
+  const [height, setHeight] = useState(280);
+  const { height: viewportHeight } = useWindowDimensions();
+  useEffect(() => {
+    progress.value = withTiming(isClosing ? 1 : 0, {
+      duration: reduced ? 0 : 480,
+      easing: Easing.bezier(0.42, 0, 0.58, 1),
+    });
+  }, [isClosing, progress, reduced]);
+  const style = useAnimatedStyle(() => {
+    const p = reduced ? 0 : progress.value;
+    const extension = 64 * phase(0, 0.42, p);
+    const swallow = phase(0.32, 1, p);
+    const stretch = Math.max(
+      0.001,
+      ((height + extension) * (1 - swallow)) / height,
+    );
+    return {
+      opacity: 1 - phase(0.94, 1, p),
+      transform: [
+        {
+          translateY: corner
+            ? viewportHeight * swallow * 0.5
+            : extension + (height * (1 - stretch)) / 2,
+        },
+        { translateX: corner ? 24 * phase(0, 0.72, p) : 0 },
+        { scaleX: corner ? 1 - 0.88 * swallow : 1 },
+        { scaleY: stretch },
+      ],
+    };
+  }, [progress, reduced, corner, height, viewportHeight]);
+  return (
+    <AnimatedView
+      onLayout={(event) => setHeight(event.nativeEvent.layout.height || 280)}
+      style={[corner ? { flex: 1, minHeight: 0 } : {}, style]}
+    >
+      {children}
+    </AnimatedView>
+  );
+}
+export function TicketCornerGenieSurface({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <TicketGenieSurface corner>{children}</TicketGenieSurface>;
+}

package/src/project-board/TicketGenieSurface.web.tsx

@@ -0,0 +1,190 @@
+import { useEffect, useId, useRef, type ReactNode } from 'react';
+import { Easing, useReducedMotion } from 'react-native-reanimated';
+import { useDialogContext } from '../dialog/context';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { animateNumber } from './animation.web';
+const styles = {
+  dark: 'bloom-ticket-create-dark',
+  genie: 'bloom-ticket-create-genie',
+  panel: 'bloom-ticket-create-panel',
+  shadow: 'bloom-ticket-create-shadow',
+  surface: 'bloom-ticket-create-surface',
+};
+const CSS =
+  '.bloom-ticket-create-panel {\n  transform-origin: center bottom;\n}\n\n.bloom-ticket-create-genie {\n  position: relative;\n  isolation: isolate;\n}\n\n.bloom-ticket-create-surface {\n  position: relative;\n  transform-origin: center bottom;\n}\n\n/* Paint once on a sibling layer, then animate only transform/opacity. The\n * broad shadows no longer sample and re-blur the changing dialog pixels. */\n.bloom-ticket-create-shadow {\n  position: absolute;\n  inset: 0;\n  border-radius: 24px;\n  pointer-events: none;\n  transform-origin: center bottom;\n  box-shadow:\n    0 1px 1px rgb(0 0 0 / 0.04),\n    0 4px 4px rgb(0 0 0 / 0.02),\n    0 0 120px rgb(0 0 0 / 0.1),\n    0 0 48px rgb(0 0 0 / 0.2);\n}\n\n:global(.bloom-ticket-create-dark) .bloom-ticket-create-shadow {\n  box-shadow:\n    0 1px 1px rgb(0 0 0 / 0.14),\n    0 4px 4px rgb(0 0 0 / 0.1),\n    0 0 120px rgb(0 0 0 / 0.1),\n    0 0 48px rgb(0 0 0 / 0.2);\n}\n\n/* React Aria waits for this animation before unmounting. Geometry is driven\n * by one Motion timeline on the surface, so the panel itself never slides. */\n.bloom-ticket-create-panel[data-entering],\n.bloom-ticket-create-panel[data-exiting] {\n  animation: bloom-ticket-create-ticket-presence 480ms linear both;\n}\n\n.bloom-ticket-create-panel[data-exiting] {\n  pointer-events: none;\n}\n\n.bloom-ticket-create-panel[data-entering] .bloom-ticket-create-surface,\n.bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-surface,\n.bloom-ticket-create-panel[data-entering] .bloom-ticket-create-shadow,\n.bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-shadow {\n  will-change: transform, opacity;\n}\n\n@keyframes bloom-ticket-create-ticket-presence {\n  from { opacity: 0.9999; }\n  to { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bloom-ticket-create-panel[data-entering],\n  .bloom-ticket-create-panel[data-exiting] {\n    animation: none;\n  }\n\n  .bloom-ticket-create-panel[data-entering] .bloom-ticket-create-surface,\n  .bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-surface,\n  .bloom-ticket-create-panel[data-entering] .bloom-ticket-create-shadow,\n  .bloom-ticket-create-panel[data-exiting] .bloom-ticket-create-shadow {\n    will-change: auto;\n  }\n}\n';
+
+// A smooth, steep center gradient creates a narrow neck with a displacement
+// no larger than the dialog width. Its cubic mask leaves the top broad while
+// the bottom contracts. The field is static, decoded once per mounted dialog.
+const FIELD_STOPS = Array.from({ length: 33 }, (_, index) => {
+  const x = index / 32;
+  const red = 127.5 * (1 + Math.tanh((x - 0.5) * 16) / Math.tanh(8));
+  return `<stop offset="${x}" stop-color="rgb(${red},128,128)"/>`;
+}).join('');
+const CURVE_STOPS = Array.from({ length: 33 }, (_, index) => {
+  const y = index / 32;
+  return `<stop offset="${y}" stop-color="white" stop-opacity="${y ** 3}"/>`;
+}).join('');
+
+function smoothStep(start: number, end: number, value: number) {
+  const t = Math.max(0, Math.min(1, (value - start) / (end - start)));
+  return t * t * (3 - 2 * t);
+}
+
+const WARP_MAP = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="560" height="280" viewBox="0 0 560 280">
+<defs>
+  <linearGradient id="field">${FIELD_STOPS}</linearGradient>
+  <linearGradient id="curve" x1="0" y1="0" x2="0" y2="1">${CURVE_STOPS}</linearGradient>
+  <mask id="bend"><rect width="560" height="280" fill="url(#curve)"/></mask>
+</defs>
+<rect width="560" height="280" fill="rgb(128,128,128)"/>
+<rect width="560" height="280" fill="url(#field)" mask="url(#bend)"/>
+</svg>`)}`;
+
+/** Warp the actual dialog pixels, including its content, during entry/exit. */
+export function TicketGenieSurface({ children }: { children: ReactNode }) {
+  const { isClosing: exiting = false } = useDialogContext();
+  adoptStyleSheet('bloom-ticket-create', CSS);
+  const id = `ticket-genie-${useId().replace(/:/g, '')}`;
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const shadowRef = useRef<HTMLDivElement>(null);
+  const displacementRef = useRef<SVGFEDisplacementMapElement>(null);
+  const blurRef = useRef<SVGFEGaussianBlurElement>(null);
+  const mapRef = useRef<SVGFEImageElement>(null);
+  const progressRef = useRef(1);
+  const reduceMotion = useReducedMotion();
+
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    const shadow = shadowRef.current;
+    const displacement = displacementRef.current;
+    if (!surface || !shadow || !displacement) return;
+    if (reduceMotion) {
+      surface.style.willChange = 'auto';
+      shadow.style.willChange = 'auto';
+      surface.style.filter = 'none';
+      surface.style.transform = 'none';
+      surface.style.opacity = '1';
+      shadow.style.transform = 'none';
+      shadow.style.opacity = '1';
+      progressRef.current = 0;
+      return;
+    }
+    // SVG percentages otherwise resolve against the page viewport for an HTML
+    // filter. Fit the displacement field to the dialog's untransformed pixels.
+    const width = surface.offsetWidth;
+    const height = surface.offsetHeight;
+    mapRef.current?.setAttribute('width', String(width));
+    mapRef.current?.setAttribute('height', String(height));
+    // Reach just beyond the viewport. All geometry is measured once; each
+    // frame only updates filter attributes and compositor transforms.
+    const bounds = surface.parentElement!.getBoundingClientRect();
+    const dockDistance = Math.max(0, window.innerHeight - bounds.bottom) + 24;
+    surface.style.filter = `url("#${id}")`;
+    surface.style.willChange = 'transform, opacity';
+    shadow.style.willChange = 'transform, opacity';
+    const deform = (progress: number) => {
+      progressRef.current = progress;
+      const neck = smoothStep(0, 0.72, progress);
+      const extension = dockDistance * smoothStep(0, 0.42, progress);
+      const swallow = smoothStep(0.32, 1, progress);
+      // The bottom leads, stretching into a funnel while the top stays put.
+      // Only then does the top follow the neck down into the offscreen dock.
+      const stretch = Math.max(
+        0.001,
+        ((height + extension) * (1 - swallow)) / height,
+      );
+      displacement.setAttribute('scale', String(width * 0.98 * neck));
+      blurRef.current?.setAttribute(
+        'stdDeviation',
+        String(2 * smoothStep(0.8, 1, progress)),
+      );
+      surface.style.transform = `translateY(${extension}px) scaleY(${stretch})`;
+      surface.style.opacity = String(1 - smoothStep(0.94, 1, progress));
+      shadow.style.transform = `translateY(${extension}px) scale(${1 - neck * 0.65}, ${1 - swallow * 0.9})`;
+      shadow.style.opacity = String(1 - smoothStep(0.08, 0.72, progress));
+    };
+    // Reverse from the current shape if dismissed before opening completes.
+    deform(progressRef.current);
+    const animation = animateNumber(progressRef.current, exiting ? 1 : 0, {
+      duration: 0.48,
+      ease: Easing.bezier(0.42, 0, 0.58, 1).factory(),
+      onUpdate: deform,
+      onComplete: () => {
+        surface.style.willChange = 'auto';
+        shadow.style.willChange = 'auto';
+        // Remove the filter at rest so text is crisp and controls stay native.
+        if (!exiting) {
+          surface.style.filter = 'none';
+          surface.style.transform = 'none';
+        }
+      },
+    });
+    return () => animation.stop();
+  }, [exiting, id, reduceMotion]);
+
+  return (
+    <>
+      <svg
+        width="0"
+        height="0"
+        aria-hidden
+        className="pointer-events-none absolute"
+      >
+        <defs>
+          <filter
+            id={id}
+            x="-5%"
+            y="-10%"
+            width="110%"
+            height="120%"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodColor="rgb(128,128,128)" result="neutral" />
+            <feImage
+              ref={mapRef}
+              href={WARP_MAP}
+              x="0"
+              y="0"
+              width="560"
+              height="230"
+              preserveAspectRatio="none"
+              result="field"
+            />
+            <feComposite
+              in="field"
+              in2="neutral"
+              operator="over"
+              result="warp"
+            />
+            <feDisplacementMap
+              ref={displacementRef}
+              in="SourceGraphic"
+              in2="warp"
+              scale={reduceMotion ? 0 : 200}
+              xChannelSelector="R"
+              yChannelSelector="G"
+            />
+            <feGaussianBlur ref={blurRef} stdDeviation={reduceMotion ? 0 : 4} />
+          </filter>
+        </defs>
+      </svg>
+      <div className={styles.genie}>
+        {/* An independent, cacheable shadow moves with the panel. Filtering a
+            parent would recompute every shadow from the changing warp. */}
+        <div ref={shadowRef} aria-hidden className={styles.shadow} />
+        <div
+          ref={surfaceRef}
+          className={styles.surface}
+          style={{
+            filter: reduceMotion ? 'none' : `url("#${id}")`,
+            transform: reduceMotion ? 'none' : 'scaleY(0.001)',
+            opacity: reduceMotion ? 1 : 0,
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/project-board/animation.web.ts

@@ -0,0 +1,22 @@
+/** Source numeric animation timeline, with the same 480ms cubic easing. */
+export function animateNumber(
+  from: number,
+  to: number,
+  options: {
+    duration: number;
+    ease: (t: number) => number;
+    onUpdate: (value: number) => void;
+    onComplete: () => void;
+  },
+) {
+  const start = performance.now();
+  let frame = 0;
+  const tick = (now: number) => {
+    const t = Math.min(1, (now - start) / (options.duration * 1000));
+    options.onUpdate(from + (to - from) * options.ease(t));
+    if (t < 1) frame = requestAnimationFrame(tick);
+    else options.onComplete();
+  };
+  frame = requestAnimationFrame(tick);
+  return { stop: () => cancelAnimationFrame(frame) };
+}

package/src/project-board/constants.ts

@@ -0,0 +1,20 @@
+import type { TicketPriority } from './types';
+
+export const PRIORITIES: readonly TicketPriority[] = [
+  'Low',
+  'Medium',
+  'High',
+  'Urgent',
+];
+export const PRIORITY_STYLES: Record<TicketPriority, string> = {
+  Low: 'bg-status-blue-background text-status-blue-text',
+  Medium: 'bg-status-yellow-background text-status-yellow-text',
+  High: 'bg-status-orange-background text-status-orange-text',
+  Urgent: 'bg-status-rose-background text-status-rose-text',
+};
+export const CHIP_BASE =
+  'inline-flex items-center justify-center rounded-md px-1.5 whitespace-nowrap transition-[padding,font-size] duration-200 ease py-0.5 text-body-medium';
+export const cx = (...values: (string | false | undefined | null)[]) =>
+  values.filter(Boolean).join(' ');
+
+export const DEFAULT_PROJECT = 'Bloom';

package/src/project-board/context.ts

@@ -0,0 +1,46 @@
+import {
+  createContext,
+  useContext,
+  type ComponentType,
+  type ReactNode,
+} from 'react';
+import type * as NativeButton from '../button';
+import type * as NativeDialog from '../dialog';
+import type * as NativeMenu from '../dropdown-menu';
+import type * as NativeSelect from '../select';
+import type * as NativeTooltip from '../tooltip';
+
+export interface ProjectBoardPlatform {
+  Tooltip: typeof NativeTooltip.Tooltip;
+  TooltipTrigger: typeof NativeTooltip.TooltipTrigger;
+  TooltipContent: typeof NativeTooltip.TooltipContent;
+  TicketGenieSurface: ComponentType<{ children: ReactNode }>;
+  TicketCornerGenieSurface: ComponentType<{ children: ReactNode }>;
+  Button: typeof NativeButton.Button;
+  CloseButton: typeof NativeButton.CloseButton;
+  Dialog: typeof NativeDialog.Dialog;
+  Portal: ComponentType<{ children?: ReactNode }>;
+  Select: typeof NativeSelect.Select;
+  SelectTrigger: typeof NativeSelect.SelectTrigger;
+  SelectValue: typeof NativeSelect.SelectValue;
+  SelectContent: typeof NativeSelect.SelectContent;
+  SelectItem: typeof NativeSelect.SelectItem;
+  SelectItemText: typeof NativeSelect.SelectItemText;
+  SelectItemIndicator: typeof NativeSelect.SelectItemIndicator;
+  DropdownMenu: typeof NativeMenu.DropdownMenu;
+  DropdownMenuTrigger: typeof NativeMenu.DropdownMenuTrigger;
+  DropdownMenuContent: typeof NativeMenu.DropdownMenuContent;
+  DropdownMenuItem: typeof NativeMenu.DropdownMenuItem;
+  DropdownMenuCheckboxItem: typeof NativeMenu.DropdownMenuCheckboxItem;
+  DropdownMenuLabel: typeof NativeMenu.DropdownMenuLabel;
+}
+export const ProjectBoardPlatformContext =
+  createContext<ProjectBoardPlatform | null>(null);
+export function useProjectBoardPlatform() {
+  const platform = useContext(ProjectBoardPlatformContext);
+  if (!platform)
+    throw new Error(
+      'Project Board parts must be rendered inside ProjectBoard.',
+    );
+  return platform;
+}

package/src/project-board/index.ts

@@ -0,0 +1,12 @@
+export { ProjectBoard } from './ProjectBoard';
+export type {
+  BoardSort,
+  NewProjectTicket,
+  ProjectBoardProps,
+  ProjectColumn,
+  ProjectMember,
+  ProjectTicket,
+  TicketComment,
+  TicketPriority,
+  TicketSubtask,
+} from './types';

package/src/project-board/index.web.ts

@@ -0,0 +1,17 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/project-board/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
+export { ProjectBoard } from './ProjectBoard.web';
+export type {
+  BoardSort,
+  NewProjectTicket,
+  ProjectBoardProps,
+  ProjectColumn,
+  ProjectMember,
+  ProjectTicket,
+  TicketComment,
+  TicketPriority,
+  TicketSubtask,
+} from './types';

package/src/project-board/messages.ts

@@ -0,0 +1,74 @@
+import { defineMessages } from '../locale/messages';
+export const PROJECT_BOARD_MESSAGES = defineMessages('PROJECT_BOARD_MESSAGES', {
+  defaultTitle: 'Bloom Design Tasks',
+  defaultTeam: 'Bloom team',
+  openTicket: (code: string, title: string) => `Open ${code}: ${title}`,
+  addTicketTo: (column: string) => `Add ticket to ${column}`,
+  board: 'Project board',
+  controls: 'Board controls',
+  navigation: 'Open navigation',
+  inbox: 'Open project inbox',
+  newTicket: 'New ticket',
+  columns: 'Project board columns',
+  sortTickets: 'Sort tickets',
+  filterTickets: 'Filter tickets',
+  displayOptions: 'Display options',
+  sort: 'Sort',
+  filter: 'Filter',
+  display: 'Display',
+  manualOrder: 'Manual order',
+  priority: 'Priority',
+  title: 'Title',
+  project: 'Project',
+  allPriorities: 'All priorities',
+  allProjects: 'All projects',
+  clearFilters: 'Clear filters',
+  showDone: 'Show done column',
+  fillScreens: 'Fill wide screens',
+  createTicket: 'Create ticket',
+  closeCreate: 'Close create ticket',
+  ticketTitle: 'Ticket title',
+  enterTitle: 'Enter ticket title',
+  description: 'Description',
+  descriptionArea: 'Description area',
+  status: 'Status',
+  urgency: 'Urgency',
+  assignee: 'Assignee',
+  unassigned: 'Unassigned',
+  keepCreating: 'Keep creating',
+  cancel: 'Cancel',
+  addTicket: 'Add ticket',
+  sortTitle: 'Sort by title',
+  noTickets: 'No issues here',
+  favoriteAdd: 'Add to favorites',
+  favoriteRemove: 'Remove from favorites',
+  copyLink: 'Copy ticket link',
+  actions: 'Ticket actions',
+  editDescription: 'Edit description',
+  copyId: 'Copy ticket ID',
+  reopen: 'Reopen ticket',
+  markDone: 'Mark as done',
+  closeDetails: 'Close ticket details',
+  linkCopied: 'Ticket link copied',
+  idCopied: 'Ticket ID copied',
+  copyFailed: 'Could not copy. Please try again.',
+  createdBy: 'Created by',
+  saveDescription: 'Save description',
+  ticketDescription: 'Ticket description',
+  properties: 'Properties',
+  editAssignees: 'Edit assignees',
+  resources: 'Resources',
+  tokens: 'Tokens burned',
+  comments: 'Comments',
+  you: 'You',
+  justNow: 'Just now',
+  addComment: 'Add a comment',
+  enterComment: 'Enter your comment',
+  postComment: 'Post comment',
+  moveUp: 'Move up',
+  moveDown: 'Move down',
+  nextColumn: 'Move to next column',
+  previousColumn: 'Move to previous column',
+  keyboardHint:
+    'Press Enter to open. Space picks up, arrow keys move, space drops, Escape cancels.',
+});

package/src/project-board/shared.ts

@@ -0,0 +1,104 @@
+import type { BoardSort, ProjectColumn, ProjectTicket } from './types';
+
+export function cloneColumns(
+  columns: readonly ProjectColumn[],
+): ProjectColumn[] {
+  return columns.map((column) => ({
+    ...column,
+    tickets: column.tickets.map((ticket) => ({
+      ...ticket,
+      assignees: [...ticket.assignees],
+      comments: ticket.comments?.map((comment) => ({ ...comment })),
+      subtasks: ticket.subtasks?.map((task) => ({ ...task })),
+    })),
+  }));
+}
+
+/** Insert by full-column index so a filtered view does not destroy hidden tickets. */
+export function moveTicket(
+  columns: ProjectColumn[],
+  id: string,
+  destination: string,
+  index = 0,
+): ProjectColumn[] {
+  const source = columns.find((column) =>
+    column.tickets.some((ticket) => ticket.id === id),
+  );
+  const target = columns.find((column) => column.id === destination);
+  const ticket = source?.tickets.find((item) => item.id === id);
+  if (!source || !target || !ticket) return columns;
+  return columns.map((column) => {
+    if (column.id !== source.id && column.id !== destination) return column;
+    const tickets = column.tickets.filter((item) => item.id !== id);
+    if (column.id === destination)
+      tickets.splice(Math.max(0, Math.min(index, tickets.length)), 0, ticket);
+    return { ...column, tickets };
+  });
+}
+
+export function updateTicket(
+  columns: ProjectColumn[],
+  id: string,
+  patch: Partial<ProjectTicket>,
+): ProjectColumn[] {
+  return columns.map((column) => ({
+    ...column,
+    tickets: column.tickets.map((ticket) =>
+      ticket.id === id ? { ...ticket, ...patch, id: ticket.id } : ticket,
+    ),
+  }));
+}
+
+export function sortColumns(
+  columns: ProjectColumn[],
+  sort: BoardSort,
+): ProjectColumn[] {
+  if (sort === 'manual') return columns;
+  const rank = { Urgent: 0, High: 1, Medium: 2, Low: 3 };
+  return columns.map((column) => ({
+    ...column,
+    tickets: [...column.tickets].sort((a, b) =>
+      sort === 'priority'
+        ? rank[a.priority] - rank[b.priority]
+        : a.title.localeCompare(b.title),
+    ),
+  }));
+}
+
+export type BoardRect = { x: number; y: number; width: number; height: number };
+/** Choose the column first; nearest-card comparisons across columns steal drops. */
+export function dropTarget(
+  x: number,
+  y: number,
+  columns: ProjectColumn[],
+  columnRects: Record<string, BoardRect>,
+  ticketRects: Record<string, BoardRect>,
+  movingId: string,
+) {
+  const column = columns.find((item) => {
+    const rect = columnRects[item.id];
+    return (
+      rect &&
+      x >= rect.x &&
+      x <= rect.x + rect.width &&
+      y >= rect.y &&
+      y <= rect.y + rect.height
+    );
+  });
+  if (!column) return null;
+  let index = column.tickets.length;
+  for (let i = 0; i < column.tickets.length; i++) {
+    const ticket = column.tickets[i];
+    if (!ticket || ticket.id === movingId) continue;
+    const rect = ticketRects[ticket.id];
+    if (rect && y < rect.y + rect.height / 2) {
+      index = i;
+      break;
+    }
+  }
+  const fromIndex = column.tickets.findIndex(
+    (ticket) => ticket.id === movingId,
+  );
+  if (fromIndex >= 0 && fromIndex < index) index--;
+  return { columnId: column.id, index };
+}

package/src/project-board/types.ts

@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { TokensChartCardProps } from '../chart-cards/TokensChartCard';
+
+export type TicketSubtask = { id: string; title: string; done: boolean };
+export type TicketComment = {
+  id: string;
+  author: string;
+  body: string;
+  time: string;
+};
+export type ProjectMember = {
+  id: string;
+  name: string;
+  avatar?: string;
+  initials: string;
+};
+export type TicketPriority = 'Low' | 'Medium' | 'High' | 'Urgent';
+export type BoardSort = 'manual' | 'priority' | 'title';
+export type ProjectTicket = {
+  id: string;
+  code: string;
+  area: string;
+  title: string;
+  since: string;
+  description?: string;
+  subtasks?: TicketSubtask[];
+  comments?: TicketComment[];
+  isFavorite?: boolean;
+  createdBy?: string;
+  priority: TicketPriority;
+  project: string;
+  assignees: string[];
+  resources?: { label: string; href: string }[];
+  tokenUsage?: Pick<
+    TokensChartCardProps,
+    'data' | 'headline' | 'delta' | 'startLabel' | 'endLabel'
+  >;
+};
+export type ProjectColumn = {
+  id: string;
+  title: string;
+  limit: number;
+  tickets: ProjectTicket[];
+};
+export type NewProjectTicket = Pick<
+  ProjectTicket,
+  'title' | 'priority' | 'project' | 'assignees'
+> & {
+  description: string;
+  columnId: string;
+};
+
+export interface ProjectBoardProps {
+  onMenuClick?: () => void;
+  title?: string;
+  teamName?: string;
+  ownerName?: string;
+  /** Product notification center or other header actions. */
+  headerActions?: ReactNode;
+  onInboxClick?: () => void;
+  /** Starting data is copied on mount; mutations never change the caller's objects. */
+  initialColumns?: readonly ProjectColumn[];
+  members?: Readonly<Record<string, ProjectMember>>;
+  projects?: readonly string[];
+  currentUserId?: string;
+  /** Called for create, property edits, comments, sorting and completed moves. */
+  onColumnsChange?: (columns: ProjectColumn[]) => void;
+  onTicketOpen?: (ticket: ProjectTicket) => void;
+  /** Use a product-specific route and clipboard implementation on native. */
+  onCopyTicketLink?: (ticket: ProjectTicket) => void | Promise<void>;
+  onCopyTicketId?: (code: string) => void | Promise<void>;
+  initialTicketId?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+  accessibilityLabel?: string;
+  testID?: string;
+}