@tuturuuu/ui 0.28.0 → 0.28.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [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.28.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -93,7 +93,7 @@
     "@tuturuuu/icons": "0.1.0",
     "@tuturuuu/internal-api": "0.31.0",
     "@tuturuuu/supabase": "0.5.0",
-    "@tuturuuu/utils": "0.25.1",
+    "@tuturuuu/utils": "0.25.2",
     "@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,21 @@
+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]);
+  });
+});

package/src/components/ui/text-editor/__tests__/markdown-paste-extension.test.ts

@@ -1,7 +1,8 @@
 import { describe, expect, it } from 'vitest';
 import { __markdownPastePrivate } from '../markdown-paste-extension';
 
-const { markdownToHtml } = __markdownPastePrivate;
+const { markdownToHtml, looksLikeMarkdown, normalizePastedPlainText } =
+  __markdownPastePrivate;
 
 describe('markdownToHtml', () => {
   it('should convert headings', () => {
@@ -47,6 +48,27 @@ describe('markdownToHtml', () => {
     expect(html).toContain('<li><p>item 2</p></li>');
   });
 
+  it('normalizes copied visual bullets into structured list markers', () => {
+    const text = normalizePastedPlainText(
+      'Next steps\r\n• Draft the interview plan\r\n◦ Share it with the team'
+    );
+
+    expect(text).toBe(
+      'Next steps\n- Draft the interview plan\n- Share it with the team'
+    );
+    expect(looksLikeMarkdown(text)).toBe(true);
+    expect(markdownToHtml(text)).toContain(
+      '<ul><li><p>Draft the interview plan</p></li><li><p>Share it with the team</p></li></ul>'
+    );
+  });
+
+  it('normalizes copied visual checkboxes into task list markers', () => {
+    const text = normalizePastedPlainText('☐ Plan interviews\n☑ Invite team');
+
+    expect(text).toBe('- [ ] Plan interviews\n- [x] Invite team');
+    expect(markdownToHtml(text)).toContain('data-type="taskList"');
+  });
+
   it('should convert ordered lists', () => {
     const md = '1. first\n2. second';
     const html = markdownToHtml(md);
@@ -210,6 +232,12 @@ describe('markdownToHtml', () => {
     expect(html).toContain('<p>Hello world</p>');
   });
 
+  it('preserves intentional line breaks inside pasted paragraphs', () => {
+    const html = markdownToHtml('Line one\nLine two');
+
+    expect(html).toContain('<p>Line one<br>Line two</p>');
+  });
+
   it('should escape HTML in plain text', () => {
     const md = '<script>alert(1)</script>';
     const html = markdownToHtml(md);

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

@@ -85,9 +85,18 @@ function resolveUploadHandler({
   return configuredHandler;
 }
 
+function getClipboardImageFiles(
+  items: DataTransferItemList | DataTransferItem[]
+) {
+  return Array.from(items)
+    .map((item) => (item.type.startsWith('image/') ? item.getAsFile() : null))
+    .filter((file): file is File => file !== null);
+}
+
 export const __imageExtensionPrivate = {
   clearImageResizeUIFromNodeDom,
   getSelectedImagePos,
+  getClipboardImageFiles,
   resolveUploadHandler,
 };
 
@@ -437,23 +446,10 @@ export const CustomImage = (options: ImageOptions = {}) => {
                 if (!items) return false;
 
                 // Filter and collect image files
-                const images = Array.from(items)
-                  .map((item) =>
-                    item.type.startsWith('image/') ? item.getAsFile() : null
-                  )
-                  .filter((file): file is File => file !== null);
+                const images = getClipboardImageFiles(items);
 
                 if (images.length === 0) return false;
 
-                const hasTextOrHtml = Array.from(items).some(
-                  (item) =>
-                    item.type === 'text/plain' || item.type === 'text/html'
-                );
-
-                if (hasTextOrHtml) {
-                  return false;
-                }
-
                 const onImageUpload = getOnImageUpload();
                 if (!onImageUpload) {
                   event.preventDefault();

package/src/components/ui/text-editor/markdown-paste-extension.ts

@@ -27,6 +27,26 @@ const BLOCK_START_PATTERNS = [
   /^\s*\|/,
 ];
 
+const VISUAL_BULLET_PATTERN = /^(\s*)[•◦▪‣●]\s+/u;
+const VISUAL_CHECKBOX_PATTERN = /^(\s*)[☐☑☒]\s+/u;
+
+function normalizePastedPlainText(text: string): string {
+  return text
+    .replace(/\r\n?/g, '\n')
+    .split('\n')
+    .map((line) => {
+      const checkboxMatch = line.match(VISUAL_CHECKBOX_PATTERN);
+      if (checkboxMatch) {
+        const marker = line.trimStart().charAt(0);
+        const content = line.replace(VISUAL_CHECKBOX_PATTERN, '');
+        return `${checkboxMatch[1] ?? ''}- [${marker === '☐' ? ' ' : 'x'}] ${content}`;
+      }
+
+      return line.replace(VISUAL_BULLET_PATTERN, '$1- ');
+    })
+    .join('\n');
+}
+
 function isBlockStart(line: string): boolean {
   return BLOCK_START_PATTERNS.some((p) => p.test(line));
 }
@@ -496,7 +516,7 @@ function markdownToHtml(markdown: string): string {
       paraLines.push(lines[i]!);
       i++;
     }
-    result.push(`<p>${parseInline(paraLines.join(' '))}</p>`);
+    result.push(`<p>${paraLines.map(parseInline).join('<br>')}</p>`);
   }
 
   return result.join('\n');
@@ -539,6 +559,7 @@ function looksLikeMarkdown(text: string): boolean {
 export const __markdownPastePrivate = {
   markdownToHtml,
   looksLikeMarkdown,
+  normalizePastedPlainText,
 };
 
 const markdownPastePluginKey = new PluginKey('markdownPastePlugin');
@@ -569,7 +590,9 @@ export const MarkdownPaste = Extension.create({
                 return false;
               }
 
-              const text = clipboardData.getData('text/plain');
+              const text = normalizePastedPlainText(
+                clipboardData.getData('text/plain')
+              );
               if (!text || !looksLikeMarkdown(text)) {
                 return false;
               }