@tuturuuu/ui 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [0.9.0](https://github.com/tutur3u/platform/compare/ui-v0.8.0...ui-v0.9.0) (2026-06-24)
+
+
+### Features
+
+* **calendar:** add configurable two-way sync ([76078d8](https://github.com/tutur3u/platform/commit/76078d865618b4970b430b08f0db7a1a8c30ffcb))
+* **inventory:** surface storefront checkout sales ([c8e813c](https://github.com/tutur3u/platform/commit/c8e813caa23e7e77e94aa94c9f0059b95cd5ba1c))
+* **storefront:** simplify cart and checkout ([a2d17e1](https://github.com/tutur3u/platform/commit/a2d17e1a024e11ffb76cbaa1a99e8f26a5a43aa0))
+* **task-boards:** improve public board sharing UX ([930ceb4](https://github.com/tutur3u/platform/commit/930ceb49ef72fad22e3f412c2ff5648fd6b3c417))
+* **tasks:** add board creation to task picker ([da82857](https://github.com/tutur3u/platform/commit/da828579f57ac65537fc538fb20692783c2b7751))
+* **tasks:** add board-centered tasks entry ([cfb0dd6](https://github.com/tutur3u/platform/commit/cfb0dd689924f91f2b9b848e82c0feab89f62ab0))
+* **tasks:** add deadline column controls ([524c621](https://github.com/tutur3u/platform/commit/524c62117dab6984ff0116e010341694ead6f8b5))
+* **tasks:** add public board sharing ([b5a4a07](https://github.com/tutur3u/platform/commit/b5a4a0796dab947e8dca3970d6aa136a4863dd35))
+* **tasks:** add shareable kanban task plans ([2de4e58](https://github.com/tutur3u/platform/commit/2de4e5819673e11b01cdc1f21c317f33dc196f56))
+* **tasks:** compact kanban planner and share dialog ([381aa91](https://github.com/tutur3u/platform/commit/381aa91433aaed2936b04d34c44f13f364befe21))
+* **tasks:** consolidate board task settings ([b1d720a](https://github.com/tutur3u/platform/commit/b1d720ac865406d6dd0b2477c5ba04e336de9929))
+* **ui:** add theme-aware editor colors ([fde3ae9](https://github.com/tutur3u/platform/commit/fde3ae9930e1573b6a7273c95f90f41767e72c58))
+
+
+### Bug Fixes
+
+* **calendar:** improve synced event rendering ([9bc2bee](https://github.com/tutur3u/platform/commit/9bc2beea78fe21ccd3deb5040b63a1ae4ff39aa7))
+* **calendar:** preserve events across week navigation ([aa60471](https://github.com/tutur3u/platform/commit/aa604715f132f4ed4476dd4df3795f53848c360b))
+* **calendar:** stabilize optimistic event sync ([fda22e1](https://github.com/tutur3u/platform/commit/fda22e1eebec28e04af0b8a2ab22d0f148c0565d))
+* **ci:** address remaining PR check failures ([7eb56d5](https://github.com/tutur3u/platform/commit/7eb56d51d8d14f6e2dd22c2d4c3514a560847333))
+* **tanstack:** harden public shell migration ([849c133](https://github.com/tutur3u/platform/commit/849c1334da613437dc673a8396a373ffc7767583))
+* **task-boards:** align board picker icon styling ([c145770](https://github.com/tutur3u/platform/commit/c145770c0d4cf43a96db9df2fd9f14696e4b84ad))
+* **task-boards:** clean up board header icons ([16673be](https://github.com/tutur3u/platform/commit/16673be22ba40205e09134e6db8225edb7db841a))
+* **tasks:** polish board activity and history diffs ([cdc1c2c](https://github.com/tutur3u/platform/commit/cdc1c2cbdcc283ee30e959435b70f03e84b999de))
+* **tasks:** polish board filters planner and settings loading ([2396419](https://github.com/tutur3u/platform/commit/239641941a08e243d1295231c8e2d1089902897f))
+* **tasks:** polish board header settings and share ux ([fd78ac5](https://github.com/tutur3u/platform/commit/fd78ac5e5632e8897d8e124ec8c5abd26acc820b))
+* **tasks:** polish board toolbar settings and activity ([e1966bb](https://github.com/tutur3u/platform/commit/e1966bb68d4900e4d5d187153f3a8942727f2127))
+* **tasks:** polish board views and loading ([0b60957](https://github.com/tutur3u/platform/commit/0b6095726b6c1aaae4f794ba6cfecde4d46f0db9))
+* **tasks:** polish task board loading and defaults ([7c215d3](https://github.com/tutur3u/platform/commit/7c215d3ea6b0b710247069f8616d4b7b1029147f))
+* **tasks:** refine board settings and toolbar pickers ([bec77e3](https://github.com/tutur3u/platform/commit/bec77e30804bb0ff0657831e564e8dd8efeb8722))
+* **tasks:** refresh kanban special columns ([3317e1d](https://github.com/tutur3u/platform/commit/3317e1d80890afa05a4d10840131b8f2d77910ec))
+* **tasks:** update board header icons ([7f79c06](https://github.com/tutur3u/platform/commit/7f79c06e4a854c1489db30a6265b6aa24583cc86))
+* **ui:** stabilize fullscreen dialog surfaces ([138bc7b](https://github.com/tutur3u/platform/commit/138bc7b7761151007bb097aa15350d72a92dd638))
+* **web:** prevent dashboard runtime loops ([e02ae70](https://github.com/tutur3u/platform/commit/e02ae701e6905a47b7d96d51624b0a301cb1405f))
+
 ## [0.8.0](https://github.com/tutur3u/platform/compare/ui-v0.7.0...ui-v0.8.0) (2026-06-17)
 
 

package/biome.json

@@ -1,5 +1,5 @@
 {
   "root": false,
-  "$schema": "https://biomejs.dev/schemas/2.5.0/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.5.1/schema.json",
   "extends": "//"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
     "ui": "bunx shadcn-ui@latest",
     "test": "vitest run",
     "test:watch": "vitest",
-    "type-check": "tsgo --project tsconfig.typecheck.json"
+    "type-check": "tsc --project tsconfig.typecheck.json"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -24,71 +24,73 @@
     "@hookform/resolvers": "^5.4.0",
     "@json-render/core": "^0.19.0",
     "@json-render/react": "^0.19.0",
-    "@radix-ui/react-accordion": "^1.2.13",
-    "@radix-ui/react-alert-dialog": "^1.1.16",
-    "@radix-ui/react-aspect-ratio": "^1.1.9",
-    "@radix-ui/react-avatar": "^1.1.12",
-    "@radix-ui/react-checkbox": "^1.3.4",
-    "@radix-ui/react-collapsible": "^1.1.13",
-    "@radix-ui/react-context-menu": "^2.3.0",
-    "@radix-ui/react-dialog": "^1.1.16",
-    "@radix-ui/react-dropdown-menu": "^2.1.17",
-    "@radix-ui/react-hover-card": "^1.1.16",
-    "@radix-ui/react-label": "^2.1.9",
-    "@radix-ui/react-menubar": "^1.1.17",
-    "@radix-ui/react-navigation-menu": "^1.2.15",
-    "@radix-ui/react-popover": "^1.1.16",
-    "@radix-ui/react-progress": "^1.1.9",
-    "@radix-ui/react-radio-group": "^1.4.0",
-    "@radix-ui/react-scroll-area": "^1.2.11",
-    "@radix-ui/react-select": "^2.3.0",
-    "@radix-ui/react-separator": "^1.1.9",
-    "@radix-ui/react-slider": "^1.4.0",
-    "@radix-ui/react-slot": "^1.2.5",
-    "@radix-ui/react-switch": "^1.3.0",
-    "@radix-ui/react-tabs": "^1.1.14",
-    "@radix-ui/react-toast": "^1.2.16",
-    "@radix-ui/react-toggle": "^1.1.11",
-    "@radix-ui/react-toggle-group": "^1.1.12",
-    "@radix-ui/react-tooltip": "^1.2.9",
+    "@radix-ui/react-accordion": "^1.2.14",
+    "@radix-ui/react-alert-dialog": "^1.1.17",
+    "@radix-ui/react-aspect-ratio": "^1.1.10",
+    "@radix-ui/react-avatar": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.3.5",
+    "@radix-ui/react-collapsible": "^1.1.14",
+    "@radix-ui/react-context-menu": "^2.3.1",
+    "@radix-ui/react-dialog": "^1.1.17",
+    "@radix-ui/react-dropdown-menu": "^2.1.18",
+    "@radix-ui/react-hover-card": "^1.1.17",
+    "@radix-ui/react-label": "^2.1.10",
+    "@radix-ui/react-menubar": "^1.1.18",
+    "@radix-ui/react-navigation-menu": "^1.2.16",
+    "@radix-ui/react-popover": "^1.1.17",
+    "@radix-ui/react-progress": "^1.1.10",
+    "@radix-ui/react-radio-group": "^1.4.1",
+    "@radix-ui/react-scroll-area": "^1.2.12",
+    "@radix-ui/react-select": "^2.3.1",
+    "@radix-ui/react-separator": "^1.1.10",
+    "@radix-ui/react-slider": "^1.4.1",
+    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-switch": "^1.3.1",
+    "@radix-ui/react-tabs": "^1.1.15",
+    "@radix-ui/react-toast": "^1.2.17",
+    "@radix-ui/react-toggle": "^1.1.12",
+    "@radix-ui/react-toggle-group": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.10",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
     "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-pacer": "^0.22.1",
-    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-query": "^5.101.1",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.2",
-    "@tiptap/core": "3.26.1",
-    "@tiptap/extension-collaboration": "3.26.1",
-    "@tiptap/extension-collaboration-caret": "3.26.1",
-    "@tiptap/extension-drag-handle-react": "3.26.1",
-    "@tiptap/extension-highlight": "3.26.1",
-    "@tiptap/extension-horizontal-rule": "3.26.1",
-    "@tiptap/extension-image": "3.26.1",
-    "@tiptap/extension-link": "3.26.1",
-    "@tiptap/extension-list": "3.26.1",
-    "@tiptap/extension-placeholder": "3.26.1",
-    "@tiptap/extension-strike": "3.26.1",
-    "@tiptap/extension-subscript": "3.26.1",
-    "@tiptap/extension-superscript": "3.26.1",
-    "@tiptap/extension-table": "3.26.1",
-    "@tiptap/extension-table-cell": "3.26.1",
-    "@tiptap/extension-table-header": "3.26.1",
-    "@tiptap/extension-table-row": "3.26.1",
-    "@tiptap/extension-text-align": "3.26.1",
-    "@tiptap/extension-youtube": "3.26.1",
-    "@tiptap/pm": "3.26.1",
-    "@tiptap/react": "3.26.1",
-    "@tiptap/starter-kit": "3.26.1",
+    "@tanstack/react-virtual": "^3.14.3",
+    "@tiptap/core": "3.27.1",
+    "@tiptap/extension-collaboration": "3.27.1",
+    "@tiptap/extension-collaboration-caret": "3.27.1",
+    "@tiptap/extension-color": "3.27.1",
+    "@tiptap/extension-drag-handle-react": "3.27.1",
+    "@tiptap/extension-highlight": "3.27.1",
+    "@tiptap/extension-horizontal-rule": "3.27.1",
+    "@tiptap/extension-image": "3.27.1",
+    "@tiptap/extension-link": "3.27.1",
+    "@tiptap/extension-list": "3.27.1",
+    "@tiptap/extension-placeholder": "3.27.1",
+    "@tiptap/extension-strike": "3.27.1",
+    "@tiptap/extension-subscript": "3.27.1",
+    "@tiptap/extension-superscript": "3.27.1",
+    "@tiptap/extension-table": "3.27.1",
+    "@tiptap/extension-table-cell": "3.27.1",
+    "@tiptap/extension-table-header": "3.27.1",
+    "@tiptap/extension-table-row": "3.27.1",
+    "@tiptap/extension-text-align": "3.27.1",
+    "@tiptap/extension-text-style": "3.27.1",
+    "@tiptap/extension-youtube": "3.27.1",
+    "@tiptap/pm": "3.27.1",
+    "@tiptap/react": "3.27.1",
+    "@tiptap/starter-kit": "3.27.1",
     "@tuturuuu/ai": "0.2.2",
-    "@tuturuuu/apis": "0.5.0",
+    "@tuturuuu/apis": "0.6.0",
     "@tuturuuu/hooks": "0.0.2",
     "@tuturuuu/icons": "0.0.6",
-    "@tuturuuu/internal-api": "0.9.0",
-    "@tuturuuu/supabase": "0.3.4",
-    "@tuturuuu/utils": "0.8.0",
+    "@tuturuuu/internal-api": "0.10.0",
+    "@tuturuuu/supabase": "0.4.0",
+    "@tuturuuu/utils": "0.9.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -100,14 +102,14 @@
     "debug": "^4.4.3",
     "embla-carousel-react": "^8.6.0",
     "eventemitter3": "^5.0.4",
-    "framer-motion": "^12.40.0",
+    "framer-motion": "^12.41.0",
     "gsap": "^3.15.0",
-    "html2canvas-pro": "^2.0.2",
+    "html2canvas-pro": "^2.1.1",
     "input-otp": "^1.4.2",
     "katex": "^0.17.0",
     "lodash": "4.18.1",
     "moment": "^2.30.1",
-    "motion": "^12.40.0",
+    "motion": "^12.41.0",
     "next": "^16.2.9",
     "next-intl": "^4.13.0",
     "next-themes": "^0.4.6",
@@ -119,14 +121,14 @@
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.7",
     "react-dropzone": "^15.0.0",
-    "react-hook-form": "^7.79.0",
+    "react-hook-form": "^7.80.0",
     "react-markdown": "^10.1.0",
     "react-papaparse": "^4.4.0",
     "react-pdf": "^10.4.1",
-    "react-resizable": "^4.0.1",
+    "react-resizable": "^4.0.2",
     "react-resizable-panels": "^4.11.0",
     "react-syntax-highlighter": "^16.1.1",
-    "recharts": "3.8.1",
+    "recharts": "3.9.0",
     "sonner": "^2.0.7",
     "streamdown": "^2.5.0",
     "tailwind-scrollbar": "^4.0.2",
@@ -143,32 +145,32 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.1",
     "@tailwindcss/typography": "^0.5.20",
-    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-query": "^5.101.1",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.10.0",
+    "@tuturuuu/types": "0.11.0",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.24",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-resizable": "^4.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^11.0.0",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.3",
     "autoprefixer": "^10.5.0",
     "jsdom": "^29.1.1",
     "postcss": "^8.5.14",
     "postcss-load-config": "^6.0.1",
     "tailwindcss": "^4.3.1",
-    "typescript": "^6.0.3",
-    "uuid": "^14.0.0",
-    "vitest": "^4.1.8"
+    "typescript": "7.0.1-rc",
+    "uuid": "^14.0.1",
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-query": "^5.101.1",
     "@tanstack/react-table": "^8.21.3"
   },
   "exports": {

package/src/components/ui/accordion.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDownIcon } from '@tuturuuu/icons';
+import { ChevronDownIcon } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
 

package/src/components/ui/breadcrumb.tsx

@@ -1,5 +1,5 @@
 import { Slot } from '@radix-ui/react-slot';
-import { ChevronRight, MoreHorizontal } from '@tuturuuu/icons';
+import { ChevronRight, MoreHorizontal } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
 

package/src/components/ui/calendar-app/calendar-page-shell.tsx

@@ -5,6 +5,7 @@ import type {
 } from '@tuturuuu/types';
 import { CalendarSyncProvider } from '@tuturuuu/ui/hooks/use-calendar-sync';
 import { TaskDialogWrapper } from '@tuturuuu/ui/tu-do/shared/task-dialog-wrapper';
+import type { ExtendedWorkspaceTask } from '../time-tracker/types';
 import { CalendarClientPage } from './calendar-client-page';
 import TasksSidebar from './components/tasks-sidebar';
 
@@ -14,6 +15,7 @@ interface CalendarPageShellProps {
   experimentalGoogleToken?: WorkspaceCalendarGoogleTokenClient | null;
   isPersonalWorkspace: boolean;
   locale: string;
+  smartSchedulingTasks?: ExtendedWorkspaceTask[];
   userId: string;
   workspace: Workspace;
 }
@@ -24,6 +26,7 @@ export function CalendarPageShell({
   experimentalGoogleToken,
   isPersonalWorkspace,
   locale,
+  smartSchedulingTasks = [],
   userId,
   workspace,
 }: CalendarPageShellProps) {
@@ -48,6 +51,7 @@ export function CalendarPageShell({
               resolvedWsId={workspace.id}
               locale={locale}
               userId={userId}
+              tasks={smartSchedulingTasks}
             />
           )}
         </div>

package/src/components/ui/calendar-app/components/calendar-connections-settings-content.tsx

@@ -48,6 +48,13 @@ import { Separator } from '../../separator';
 import { Switch } from '../../switch';
 import type { CalendarConnectionsManagerState } from './use-calendar-connections-manager';
 
+function isWritableProviderAccess(accessRole?: string | null) {
+  if (!accessRole) return true;
+  return ['owner', 'writer', 'write', 'editor'].includes(
+    accessRole.toLowerCase()
+  );
+}
+
 export function CalendarConnectionsSettingsContent({
   state,
   className,
@@ -75,13 +82,26 @@ export function CalendarConnectionsSettingsContent({
     setNewCalendarName,
     setShowCreateCalendarDialog,
     showCreateCalendarDialog,
+    syncPreferencesData,
+    syncPreferencesMutation,
     systemCalendars,
     t,
     togglingIds,
     togglingTuturuuuIds,
     toggleAccountExpanded,
     toggleWorkspaceCalendarMutation,
+    updateConnectionSyncSettingsMutation,
   } = state;
+  const externalSyncOptions =
+    syncPreferencesData?.options.filter(
+      (option) => option.provider !== 'tuturuuu'
+    ) ?? [];
+  const syncSettingsUnavailable =
+    syncPreferencesData?.settingsAvailable === false;
+  const syncSettingsDisabled =
+    !syncPreferencesData ||
+    syncSettingsUnavailable ||
+    syncPreferencesMutation.isPending;
 
   return (
     <div className={className ? `space-y-4 ${className}` : 'space-y-4'}>
@@ -128,6 +148,126 @@ export function CalendarConnectionsSettingsContent({
           </Select>
         </div>
 
+        <div className="space-y-3 rounded-md border p-3">
+          <div>
+            <h4 className="font-medium text-sm">
+              {t('two_way_sync') || 'Two-way sync'}
+            </h4>
+            <p className="text-muted-foreground text-xs">
+              {t('two_way_sync_desc') ||
+                'Control how Tuturuuu imports provider changes and mirrors native events outward.'}
+            </p>
+          </div>
+
+          {syncSettingsUnavailable && (
+            <p className="rounded-md bg-muted px-3 py-2 text-muted-foreground text-xs">
+              {t('calendar_sync_settings_unavailable') ||
+                'Sync controls will be available after the latest calendar migration is applied.'}
+            </p>
+          )}
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between gap-3">
+              <div className="min-w-0">
+                <p className="font-medium text-sm">
+                  {t('import_external_changes') || 'Import external changes'}
+                </p>
+                <p className="text-muted-foreground text-xs">
+                  {t('import_external_changes_desc') ||
+                    'Bring Google and Outlook event changes into Tuturuuu.'}
+                </p>
+              </div>
+              <Switch
+                checked={syncPreferencesData?.inboundSyncEnabled ?? true}
+                onCheckedChange={(checked) =>
+                  syncPreferencesMutation.mutate({
+                    inboundSyncEnabled: checked,
+                  })
+                }
+                disabled={syncSettingsDisabled}
+              />
+            </div>
+
+            <div className="flex items-center justify-between gap-3">
+              <div className="min-w-0">
+                <p className="font-medium text-sm">
+                  {t('sync_tuturuuu_events_outward') ||
+                    'Sync Tuturuuu events outward'}
+                </p>
+                <p className="text-muted-foreground text-xs">
+                  {t('sync_tuturuuu_events_outward_desc') ||
+                    'Mirror native Tuturuuu event creates and edits to a connected provider calendar.'}
+                </p>
+              </div>
+              <Switch
+                checked={syncPreferencesData?.outboundSyncEnabled ?? false}
+                onCheckedChange={(checked) =>
+                  syncPreferencesMutation.mutate({
+                    outboundSyncEnabled: checked,
+                  })
+                }
+                disabled={
+                  syncSettingsDisabled || externalSyncOptions.length === 0
+                }
+              />
+            </div>
+          </div>
+
+          <Select
+            value={syncPreferencesData?.defaultOutboundConnectionId ?? 'none'}
+            onValueChange={(value) =>
+              syncPreferencesMutation.mutate({
+                defaultOutboundConnectionId: value === 'none' ? null : value,
+              })
+            }
+            disabled={syncSettingsDisabled || externalSyncOptions.length === 0}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue
+                placeholder={
+                  t('choose_outbound_calendar') || 'Choose outbound calendar'
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="none">
+                {t('no_outbound_calendar') || 'No outbound calendar'}
+              </SelectItem>
+              {externalSyncOptions.map((option) => (
+                <SelectItem key={option.id} value={option.connectionId}>
+                  <div className="flex min-w-0 items-center gap-2">
+                    <span
+                      className="h-2.5 w-2.5 shrink-0 rounded-full"
+                      style={{
+                        backgroundColor: option.color ?? undefined,
+                      }}
+                    />
+                    <span className="truncate">{option.label}</span>
+                    <Badge variant="secondary" className="capitalize">
+                      {option.provider}
+                    </Badge>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <div className="flex items-center justify-between gap-3 rounded-md bg-muted/40 px-3 py-2">
+            <div className="min-w-0">
+              <p className="font-medium text-xs">
+                {t('conflict_policy') || 'Conflict policy'}
+              </p>
+              <p className="text-muted-foreground text-xs">
+                {t('latest_write_wins_desc') ||
+                  'When both sides changed, the most recently written event wins.'}
+              </p>
+            </div>
+            <Badge variant="outline">
+              {t('latest_write_wins') || 'Latest write wins'}
+            </Badge>
+          </div>
+        </div>
+
         {/* Tuturuuu Calendars Section */}
         <div className="space-y-3">
           <div className="flex items-center justify-between">
@@ -370,40 +510,106 @@ export function CalendarConnectionsSettingsContent({
                 <Separator />
                 <div className="space-y-2 p-3">
                   {(calendarsByAccount[account.id] || []).length > 0 ? (
-                    (calendarsByAccount[account.id] || []).map((cal) => (
-                      <div
-                        key={cal.id}
-                        className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
-                      >
-                        <div className="flex min-w-0 flex-1 items-center gap-2">
-                          <div
-                            className="h-3 w-3 shrink-0 rounded-full"
-                            style={{
-                              backgroundColor: cal.color || '#4285f4',
-                            }}
-                          />
-                          <span
-                            className="line-clamp-1 break-all text-sm"
-                            title={cal.calendar_name}
-                          >
-                            {cal.calendar_name}
-                          </span>
+                    (calendarsByAccount[account.id] || []).map((cal) => {
+                      const syncControlsDisabled =
+                        !cal.connectionExists ||
+                        !cal.is_enabled ||
+                        syncSettingsDisabled ||
+                        updateConnectionSyncSettingsMutation.isPending;
+                      const canWriteToProvider = isWritableProviderAccess(
+                        cal.accessRole
+                      );
+
+                      return (
+                        <div
+                          key={cal.id}
+                          className="rounded-md px-2 py-1.5 hover:bg-muted/50"
+                        >
+                          <div className="flex items-center justify-between gap-2">
+                            <div className="flex min-w-0 flex-1 items-center gap-2">
+                              <div
+                                className="h-3 w-3 shrink-0 rounded-full"
+                                style={{
+                                  backgroundColor: cal.color || '#4285f4',
+                                }}
+                              />
+                              <span
+                                className="line-clamp-1 break-all text-sm"
+                                title={cal.calendar_name}
+                              >
+                                {cal.calendar_name}
+                              </span>
+                            </div>
+                            <Switch
+                              checked={cal.is_enabled}
+                              onCheckedChange={() =>
+                                handleToggle(cal.id, cal.is_enabled, {
+                                  calendar_id: cal.calendar_id,
+                                  calendar_name: cal.calendar_name,
+                                  color: cal.color,
+                                  connectionExists: cal.connectionExists,
+                                  accountId: cal.accountId,
+                                  accessRole: cal.accessRole,
+                                })
+                              }
+                              disabled={togglingIds.has(cal.id)}
+                            />
+                          </div>
+
+                          {cal.connectionExists && (
+                            <div className="mt-2 grid grid-cols-3 gap-2 pl-5">
+                              <label className="flex items-center justify-between gap-2 rounded-md bg-muted/40 px-2 py-1 text-muted-foreground text-xs">
+                                <span>{t('import') || 'Import'}</span>
+                                <Switch
+                                  checked={cal.syncInboundEnabled}
+                                  onCheckedChange={(checked) =>
+                                    updateConnectionSyncSettingsMutation.mutate(
+                                      {
+                                        id: cal.id,
+                                        syncInboundEnabled: checked,
+                                      }
+                                    )
+                                  }
+                                  disabled={syncControlsDisabled}
+                                />
+                              </label>
+                              <label className="flex items-center justify-between gap-2 rounded-md bg-muted/40 px-2 py-1 text-muted-foreground text-xs">
+                                <span>{t('send') || 'Send'}</span>
+                                <Switch
+                                  checked={cal.syncOutboundEnabled}
+                                  onCheckedChange={(checked) =>
+                                    updateConnectionSyncSettingsMutation.mutate(
+                                      {
+                                        id: cal.id,
+                                        syncOutboundEnabled: checked,
+                                      }
+                                    )
+                                  }
+                                  disabled={
+                                    syncControlsDisabled || !canWriteToProvider
+                                  }
+                                />
+                              </label>
+                              <label className="flex items-center justify-between gap-2 rounded-md bg-muted/40 px-2 py-1 text-muted-foreground text-xs">
+                                <span>{t('deletes') || 'Deletes'}</span>
+                                <Switch
+                                  checked={cal.syncDeleteEnabled}
+                                  onCheckedChange={(checked) =>
+                                    updateConnectionSyncSettingsMutation.mutate(
+                                      {
+                                        id: cal.id,
+                                        syncDeleteEnabled: checked,
+                                      }
+                                    )
+                                  }
+                                  disabled={syncControlsDisabled}
+                                />
+                              </label>
+                            </div>
+                          )}
                         </div>
-                        <Switch
-                          checked={cal.is_enabled}
-                          onCheckedChange={() =>
-                            handleToggle(cal.id, cal.is_enabled, {
-                              calendar_id: cal.calendar_id,
-                              calendar_name: cal.calendar_name,
-                              color: cal.color,
-                              connectionExists: cal.connectionExists,
-                              accountId: cal.accountId,
-                            })
-                          }
-                          disabled={togglingIds.has(cal.id)}
-                        />
-                      </div>
-                    ))
+                      );
+                    })
                   ) : (
                     <p className="py-2 text-center text-muted-foreground text-xs">
                       {t('no_calendars_found')}