@tuturuuu/ui 0.28.0 → 0.29.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [0.29.0](https://github.com/tutur3u/platform/compare/ui-v0.28.1...ui-v0.29.0) (2026-08-20)
+
+
+### Features
+
+* **editor:** add copy format menu ([389a6f0](https://github.com/tutur3u/platform/commit/389a6f02d822feef271409a9ab31e8fcbb6ef18e))
+
+
+### Bug Fixes
+
+* **editor:** contain toolbar overflow ([6bda614](https://github.com/tutur3u/platform/commit/6bda61416cbd2e4d4d4af7c7337d7b4e905274ef))
+* **editor:** keep copy menu in toolbar ([c9dd241](https://github.com/tutur3u/platform/commit/c9dd2416f7e1b397c3293445d0bd0564a48c6bda))
+* **editor:** preserve semantic rich paste ([bea67ca](https://github.com/tutur3u/platform/commit/bea67cac57b52b82a9ed4d7fd1a8a892cf4ceea4))
+* **editor:** preserve task clipboard structure ([2d05d86](https://github.com/tutur3u/platform/commit/2d05d8602f39975805944edfccb2e10818863413))
+* **tasks:** restore pasted image uploads ([3edef4e](https://github.com/tutur3u/platform/commit/3edef4e04a1fc6963904b7861d422f8db9d5b749))
+
+## [0.28.1](https://github.com/tutur3u/platform/compare/ui-v0.28.0...ui-v0.28.1) (2026-08-16)
+
+
+### Bug Fixes
+
+* **tasks:** preserve rich paste and responsive dialogs ([0a6c5a3](https://github.com/tutur3u/platform/commit/0a6c5a362f51b475c2e8fe984eb3569a46a878ee))
+
 ## [0.28.0](https://github.com/tutur3u/platform/compare/ui-v0.27.0...ui-v0.28.0) (2026-08-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -91,9 +91,9 @@
     "@tuturuuu/apis": "0.11.2",
     "@tuturuuu/hooks": "0.1.1",
     "@tuturuuu/icons": "0.1.0",
-    "@tuturuuu/internal-api": "0.31.0",
+    "@tuturuuu/internal-api": "0.31.1",
     "@tuturuuu/supabase": "0.5.0",
-    "@tuturuuu/utils": "0.25.1",
+    "@tuturuuu/utils": "0.25.3",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",

package/src/components/ui/calendar.tsx

@@ -189,7 +189,7 @@ function Calendar({
   };
 
   return (
-    <div className="space-y-4">
+    <div className="min-w-0 space-y-4">
       <div>
         <div className="mb-4 flex items-center justify-between gap-2 border-b px-2 pb-4">
           <button
@@ -318,21 +318,21 @@ function Calendar({
             root: 'bg-transparent',
             months: 'flex flex-col',
             month:
-              'space-y-4 max-w-[calc(100vw-4rem)] text-center p-2 font-semibold shrink-0',
+              'w-full min-w-0 max-w-[calc(100vw-4rem)] shrink-0 space-y-4 p-2 text-center font-semibold',
             month_caption: 'hidden',
             nav: 'hidden',
             button_next: 'hidden',
             button_previous: 'hidden',
             month_grid: 'w-full border-collapse',
             weeks: 'flex flex-col gap-1',
-            week: 'grid grid-cols-7 gap-1 mt-2',
-            weekdays: 'grid w-full grid-cols-7 gap-1 mb-2',
+            week: 'mt-2 grid grid-cols-7 gap-0.5 @[20rem]:gap-1',
+            weekdays: 'mb-2 grid w-full grid-cols-7 gap-0.5 @[20rem]:gap-1',
             weekday:
               'text-muted-foreground rounded-md font-normal text-[0.8rem] text-center',
-            day: 'text-center text-sm p-0 relative w-9',
+            day: 'relative min-w-0 p-0 text-center text-sm',
             day_button: cn(
               buttonVariants({ variant: 'ghost' }),
-              'h-9 w-full rounded-md p-0 font-normal transition-colors duration-300',
+              'aspect-square h-auto min-h-8 w-full rounded-md p-0 font-normal transition-colors duration-300',
               'aria-selected:bg-primary aria-selected:text-primary-foreground',
               'hover:bg-accent/50 hover:text-accent-foreground',
               'hover:aria-selected:bg-primary hover:aria-selected:text-primary-foreground'

package/src/components/ui/date-time-picker-layout.ts

@@ -0,0 +1,6 @@
+export const DATE_TIME_PICKER_LAYOUT_CLASS_NAMES = {
+  calendar: 'min-w-0 overflow-x-auto p-2',
+  container: '@container min-w-0 overflow-hidden',
+  layout: 'flex min-w-0 flex-col @[34rem]:flex-row',
+  time: 'flex min-w-0 flex-col gap-3 border-t p-3 @[34rem]:w-52 @[34rem]:shrink-0 @[34rem]:border-t-0 @[34rem]:border-l',
+} as const;

package/src/components/ui/date-time-picker.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { DATE_TIME_PICKER_LAYOUT_CLASS_NAMES } from './date-time-picker-layout';
+
+describe('DateTimePicker responsive layout', () => {
+  it('switches calendar and time controls from the picker container width', () => {
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.container).toContain(
+      '@container'
+    );
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.layout).toContain(
+      '@[34rem]:flex-row'
+    );
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.time).toContain(
+      '@[34rem]:border-l'
+    );
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.layout).not.toContain('sm:');
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.time).not.toContain('sm:');
+  });
+
+  it('contains narrow calendars instead of letting them escape the dialog', () => {
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.calendar).toContain('min-w-0');
+    expect(DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.calendar).toContain(
+      'overflow-x-auto'
+    );
+  });
+});

package/src/components/ui/date-time-picker.tsx

@@ -31,6 +31,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { DATE_TIME_PICKER_LAYOUT_CLASS_NAMES } from './date-time-picker-layout';
 import { Separator } from './separator';
 
 interface DateTimePickerProps {
@@ -63,7 +64,6 @@ interface DateTimePickerProps {
   };
 }
 
-// Utility to find the nearest scrollable parent
 function getScrollableParent(node: HTMLElement | null): HTMLElement | null {
   if (!node) return null;
   let parent = node.parentElement;
@@ -530,7 +530,7 @@ export function DateTimePicker({
       : undefined;
 
   const timeControl = showTimeSelect ? (
-    <div className="flex min-w-0 flex-col gap-3 border-t p-3 sm:w-52 sm:border-t-0 sm:border-l">
+    <div className={DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.time}>
       <div className="space-y-1">
         <div className="flex items-center gap-2 font-medium text-sm">
           <Clock className="h-4 w-4 text-muted-foreground" />
@@ -628,7 +628,7 @@ export function DateTimePicker({
 
   // Inline content (used both for inline mode and popover content)
   const pickerContent = (
-    <div className="overflow-hidden">
+    <div className={DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.container}>
       {date && (
         <div className="border-b bg-muted/30 px-3 py-2">
           <div className="flex min-w-0 items-center gap-2 text-sm">
@@ -646,8 +646,8 @@ export function DateTimePicker({
         </div>
       )}
 
-      <div className="flex flex-col sm:flex-row">
-        <div className="p-2">
+      <div className={DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.layout}>
+        <div className={DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.calendar}>
           <Calendar
             mode="single"
             selected={date}

package/src/components/ui/text-editor/__tests__/image-extension-clipboard.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest';
+import { __imageExtensionPrivate } from '../image-extension';
+
+describe('ImageExtension clipboard files', () => {
+  it('keeps images when screenshot clipboards advertise text and HTML', () => {
+    const imageFile = new File(['image'], 'screenshot.png', {
+      type: 'image/png',
+    });
+
+    const images = __imageExtensionPrivate.getClipboardImageFiles([
+      { type: 'text/plain', getAsFile: () => null } as DataTransferItem,
+      { type: 'text/html', getAsFile: () => null } as DataTransferItem,
+      {
+        type: 'image/png',
+        getAsFile: () => imageFile,
+      } as DataTransferItem,
+    ]);
+
+    expect(images).toEqual([imageFile]);
+  });
+
+  it('names an unnamed screenshot from its clipboard MIME type', () => {
+    const unnamedImage = new File(['image'], '', { type: 'image/png' });
+
+    const [image] = __imageExtensionPrivate.getClipboardImageFiles([
+      {
+        type: 'image/png',
+        getAsFile: () => unnamedImage,
+      } as DataTransferItem,
+    ]);
+
+    expect(image).toBeInstanceOf(File);
+    expect(image?.name).toBe('pasted-image.png');
+    expect(image?.type).toBe('image/png');
+    expect(image?.size).toBe(unnamedImage.size);
+  });
+
+  it('adds an extension to an extensionless clipboard filename', () => {
+    const extensionlessImage = new File(['image'], 'Screenshot', {
+      type: 'image/jpeg',
+    });
+
+    const [image] = __imageExtensionPrivate.getClipboardImageFiles([
+      {
+        type: 'image/jpeg',
+        getAsFile: () => extensionlessImage,
+      } as DataTransferItem,
+    ]);
+
+    expect(image?.name).toBe('Screenshot.jpg');
+    expect(image?.type).toBe('image/jpeg');
+  });
+
+  it('restores a missing file MIME type from the clipboard item', () => {
+    const imageWithoutType = new File(['image'], '', { type: '' });
+
+    const [image] = __imageExtensionPrivate.getClipboardImageFiles([
+      {
+        type: 'image/webp',
+        getAsFile: () => imageWithoutType,
+      } as DataTransferItem,
+    ]);
+
+    expect(image?.name).toBe('pasted-image.webp');
+    expect(image?.type).toBe('image/webp');
+  });
+
+  it('ignores non-image items and null image files without losing valid images', () => {
+    const imageFile = new File(['image'], 'capture.png', {
+      type: 'image/png',
+    });
+
+    const images = __imageExtensionPrivate.getClipboardImageFiles([
+      {
+        type: 'text/plain',
+        getAsFile: () => new File(['text'], 'note.txt'),
+      } as DataTransferItem,
+      { type: 'image/png', getAsFile: () => null } as DataTransferItem,
+      {
+        type: 'image/png',
+        getAsFile: () => imageFile,
+      } as DataTransferItem,
+    ]);
+
+    expect(images).toEqual([imageFile]);
+  });
+});

package/src/components/ui/text-editor/__tests__/inline-task-conversion.test.tsx

@@ -1,9 +1,11 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import type { Editor } from '@tiptap/react';
-import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Editor } from '@tiptap/core';
+import type { Editor as TiptapEditor } from '@tiptap/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { getEditorExtensions } from '../extensions';
 import { FixedToolbar } from '../tool-bar';
 
-function createEditorStub(): Editor {
+function createEditorStub(): TiptapEditor {
   const chain = {
     focus: vi.fn(() => chain),
     insertTable: vi.fn(() => chain),
@@ -26,9 +28,16 @@ function createEditorStub(): Editor {
   return {
     chain: vi.fn(() => chain),
     isActive: vi.fn(() => false),
-  } as unknown as Editor;
+  } as unknown as TiptapEditor;
 }
 
+const editors: Editor[] = [];
+
+afterEach(() => {
+  for (const editor of editors.splice(0)) editor.destroy();
+  vi.restoreAllMocks();
+});
+
 describe('inline task conversion toolbar', () => {
   it('delegates conversion to the provided callback', async () => {
     const onConvertToTask = vi.fn();
@@ -73,4 +82,106 @@ describe('inline task conversion toolbar', () => {
       screen.getByRole('button', { name: 'Liste ou titre repliable' })
     ).toBeInTheDocument();
   });
+
+  it('keeps every control in a scrollbar-free horizontal lane without shrinking', () => {
+    const { container } = render(
+      <FixedToolbar
+        editor={createEditorStub()}
+        leadingContent={<button type="button">99% left</button>}
+      />
+    );
+    const toolbar = container.firstElementChild;
+    const capacityButton = screen.getByRole('button', { name: '99% left' });
+    const boldButton = screen.getByRole('button', { name: 'Bold' });
+    const copyButton = screen.getByRole('button', { name: 'Copy content' });
+
+    expect(toolbar).toHaveClass(
+      '@container',
+      'flex-nowrap',
+      'max-w-full',
+      'overflow-x-auto',
+      'overflow-y-hidden',
+      'overscroll-x-contain',
+      'scrollbar-hide'
+    );
+    expect(toolbar).not.toHaveClass('flex-wrap');
+    expect(copyButton.closest('.ml-auto')).toBeNull();
+    expect(capacityButton.compareDocumentPosition(boldButton)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+    expect(copyButton).toHaveClass('h-8', 'w-8', 'shrink-0', 'rounded-md');
+    expect(boldButton).toHaveClass('h-8', 'w-8', 'shrink-0', 'rounded-md');
+  });
+
+  it('copies the full document in either Markdown or plain-text form', async () => {
+    const editor = new Editor({
+      extensions: getEditorExtensions(),
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'heading',
+            attrs: { level: 1 },
+            content: [{ type: 'text', text: 'Plan' }],
+          },
+          {
+            type: 'bulletList',
+            content: [
+              {
+                type: 'listItem',
+                content: [
+                  {
+                    type: 'paragraph',
+                    content: [
+                      {
+                        type: 'text',
+                        text: 'Ship it',
+                        marks: [{ type: 'bold' }],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    });
+    editors.push(editor);
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText },
+    });
+
+    render(<FixedToolbar editor={editor} />);
+
+    fireEvent.pointerDown(
+      await screen.findByRole('button', { name: 'Copy content' })
+    );
+    fireEvent.click(
+      await screen.findByRole('menuitem', { name: /Copy as Markdown/ })
+    );
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('menuitem', { name: /Copy as Markdown/ })
+      ).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(writeText).toHaveBeenLastCalledWith('# Plan\n\n- **Ship it**')
+    );
+
+    fireEvent.pointerDown(screen.getByRole('button', { name: 'Copy content' }));
+    fireEvent.click(
+      await screen.findByRole('menuitem', { name: /Copy as plain text/ })
+    );
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('menuitem', { name: /Copy as plain text/ })
+      ).not.toBeInTheDocument()
+    );
+    await waitFor(() =>
+      expect(writeText).toHaveBeenLastCalledWith('Plan\n\n• Ship it')
+    );
+  });
 });