@jackuait/blok 0.16.1 → 0.18.0

package/src/components/icons/index.ts

@@ -108,6 +108,13 @@ export const IconPlus = `
 </svg>
 `;
 
+// Minus/Remove icon
+export const IconMinus = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M4.5 10h11" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 // Chevron Down icon
 export const IconChevronDown = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
@@ -765,6 +772,105 @@ export const IconExpandFullscreen = `
 </svg>
 `;
 
+// Exit fullscreen — arrows pulling inward (matches IconExpandFullscreen)
+export const IconPlayerFullscreenExit = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M16.5 7.5h-4v-4M3.5 12.5h4v4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m12.5 7.5 4-4M7.5 12.5l-4 4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;
+
+// Media play — filled triangle
+export const IconPlayerPlay = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M6.5 4.7v10.6a.6.6 0 0 0 .92.5l8.2-5.3a.6.6 0 0 0 0-1l-8.2-5.3a.6.6 0 0 0-.92.5Z" fill="currentColor"/>
+</svg>
+`;
+
+// Media pause — two filled bars
+export const IconPlayerPause = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <rect x="5.75" y="4.5" width="3" height="11" rx="1" fill="currentColor"/>
+  <rect x="11.25" y="4.5" width="3" height="11" rx="1" fill="currentColor"/>
+</svg>
+`;
+
+// Media rewind — two filled triangles pointing left
+export const IconPlayerBackward = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M17 5.5v9a.6.6 0 0 1-.92.5l-6.3-4.5a.6.6 0 0 1 0-1L16.08 5a.6.6 0 0 1 .92.5Z" fill="currentColor"/>
+  <path d="M10 5.5v9a.6.6 0 0 1-.92.5l-6.3-4.5a.6.6 0 0 1 0-1L9.08 5a.6.6 0 0 1 .92.5Z" fill="currentColor"/>
+</svg>
+`;
+
+// Media fast-forward — two filled triangles
+export const IconPlayerForward = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M3 5.5v9a.6.6 0 0 0 .92.5l6.3-4.5a.6.6 0 0 0 0-1L3.92 5a.6.6 0 0 0-.92.5Z" fill="currentColor"/>
+  <path d="M10 5.5v9a.6.6 0 0 0 .92.5l6.3-4.5a.6.6 0 0 0 0-1L10.92 5a.6.6 0 0 0-.92.5Z" fill="currentColor"/>
+</svg>
+`;
+
+// Volume on — speaker + sound waves
+export const IconPlayerVolume = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M4 7.5h2.5L10 4.5v11L6.5 12.5H4a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5Z" fill="currentColor"/>
+  <path d="M12.5 7.75a3 3 0 0 1 0 4.5M14.5 5.5a6 6 0 0 1 0 9" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;
+
+// Volume muted — speaker + cross
+export const IconPlayerVolumeMute = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M4 7.5h2.5L10 4.5v11L6.5 12.5H4a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5Z" fill="currentColor"/>
+  <path d="m13 8 4 4M17 8l-4 4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;
+
+// Player settings — sliders / tune (three adjustable tracks with knobs)
+export const IconPlayerSettings = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M3 6h7.5M15.5 6H17M3 10h2.5M10.5 10H17M3 14h5.5M13.5 14H17" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <circle cx="13" cy="6" r="2" stroke="currentColor" stroke-width="1.25"/>
+  <circle cx="8" cy="10" r="2" stroke="currentColor" stroke-width="1.25"/>
+  <circle cx="11" cy="14" r="2" stroke="currentColor" stroke-width="1.25"/>
+</svg>
+`;
+
+// Player picture-in-picture — frame with an inset mini frame
+export const IconPlayerPip = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <rect x="3" y="4.5" width="14" height="11" rx="1.5" stroke="currentColor" stroke-width="1.25"/>
+  <rect x="10" y="9.5" width="5.5" height="4.5" rx="1" fill="currentColor"/>
+</svg>
+`;
+
+// Player theater — wide cinema screen
+export const IconPlayerTheater = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <rect x="2.5" y="6" width="15" height="8" rx="1.5" stroke="currentColor" stroke-width="1.25"/>
+</svg>
+`;
+
+// Player speed — tachometer gauge (arc + needle + hub) for the playback-speed row
+export const IconPlayerSpeed = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M5.4 15.4a6.5 6.5 0 1 1 9.2 0" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10 10.8 13.1 7.7" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <circle cx="10" cy="10.8" r="1" fill="currentColor"/>
+</svg>
+`;
+
+// Player loop — repeat glyph (two opposing arrowheads tracing a loop)
+export const IconPlayerLoop = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M4 12V9a2.5 2.5 0 0 1 2.5-2.5H14.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12.5 4.5 15 6.5l-2.5 2" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16 8v3a2.5 2.5 0 0 1-2.5 2.5H5.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M7.5 15.5 5 13.5l2.5-2" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 // Download — arrow into tray
 export const IconDownload = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">

package/src/components/modules/paste/handlers/pattern-handler.ts

@@ -62,9 +62,10 @@ export class PatternHandler extends BasePasteHandler implements PasteHandler {
       return false;
     }
 
-    // Notion-style menu: on a URL paste, offer the view choice instead of
-    // auto-claiming. Opt-in (linkPaste.menu); requires a collapsed caret.
-    if (this.isLinkMenuEnabled() && isHttpUrl(data) && !this.hasSelection()) {
+    // Notion-style menu: a URL paste always offers the view choice (Plain /
+    // Bookmark / Embed) instead of auto-claiming. Requires a collapsed caret;
+    // a selection keeps the native "hyperlink the selection" behavior.
+    if (isHttpUrl(data) && !this.hasSelection()) {
       this.openLinkPasteMenu(data);
 
       return true;
@@ -99,10 +100,6 @@ export class PatternHandler extends BasePasteHandler implements PasteHandler {
     Caret.setToBlock(insertedBlock, Caret.positions.END);
   }
 
-  private isLinkMenuEnabled(): boolean {
-    return this.config?.linkPaste?.menu === true;
-  }
-
   private hasSelection(): boolean {
     const selection = window.getSelection();
 

package/src/components/utils/format-bytes.ts

@@ -0,0 +1,15 @@
+/**
+ * Render a byte count as a short, human-readable size (e.g. `512 B`, `2 KB`,
+ * `3.5 MB`, `2.0 GB`). Non-finite or non-positive inputs yield an empty string
+ * so callers can treat "no usable size" uniformly.
+ */
+export function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${Math.round(kb)} KB`;
+  const mb = kb / 1024;
+  if (mb < 1024) return mb < 10 ? `${mb.toFixed(1)} MB` : `${Math.round(mb)} MB`;
+  const gb = mb / 1024;
+  return gb < 10 ? `${gb.toFixed(1)} GB` : `${Math.round(gb)} GB`;
+}

package/src/components/utils/max-size.ts

@@ -0,0 +1,36 @@
+import type { MaxSizeConfig } from '../../../types/tools/max-size';
+
+/**
+ * Resolve the byte ceiling that applies to a file of the given MIME type.
+ *
+ * Object config is looked up by exact MIME type, then the `'*'` wildcard, then
+ * the supplied `fallback`. A plain number applies to everything; `undefined`
+ * config defers entirely to `fallback`.
+ */
+export function resolveMaxSize(
+  config: MaxSizeConfig | undefined,
+  mimeType: string,
+  fallback: number,
+): number {
+  if (config === undefined) return fallback;
+  if (typeof config === 'number') return config;
+
+  return config[mimeType] ?? config['*'] ?? fallback;
+}
+
+/**
+ * Pick a single number to show in the empty-state "max {size}" hint, before any
+ * file is chosen. A plain number is shown as-is; for per-type config the `'*'`
+ * wildcard wins, otherwise the most permissive (largest) cap. Returns
+ * `undefined` when there is nothing meaningful to show.
+ */
+export function pickDisplayMaxSize(config: MaxSizeConfig | undefined): number | undefined {
+  if (config === undefined) return undefined;
+  if (typeof config === 'number') return config;
+
+  if (config['*'] !== undefined) return config['*'];
+
+  const values = Object.values(config);
+
+  return values.length > 0 ? Math.max(...values) : undefined;
+}

package/src/components/utils/media-empty-state.ts

@@ -4,6 +4,8 @@ import {
   IconLinkCopy,
   IconUpload,
 } from '../icons';
+import { formatBytes } from './format-bytes';
+import { matchesMime } from './mime-match';
 
 /**
  * Shared "empty" uploader surface for media-style block tools (image, file):
@@ -77,7 +79,7 @@ function formatsLabel(types: readonly string[]): string {
   const seen = new Set<string>();
   const out: string[] = [];
   for (const t of types) {
-    if (t === '*' || t === '*/*' || !t.includes('/')) continue;
+    if (t === '*' || t === '*/*' || t.endsWith('/*') || !t.includes('/')) continue;
     const label = mimeToLabel(t);
     if (seen.has(label)) continue;
     seen.add(label);
@@ -86,17 +88,6 @@ function formatsLabel(types: readonly string[]): string {
   return out.join(' · ');
 }
 
-function formatBytes(bytes: number): string {
-  if (!Number.isFinite(bytes) || bytes <= 0) return '';
-  if (bytes < 1024) return `${bytes} B`;
-  const kb = bytes / 1024;
-  if (kb < 1024) return `${Math.round(kb)} KB`;
-  const mb = kb / 1024;
-  if (mb < 1024) return mb < 10 ? `${mb.toFixed(1)} MB` : `${Math.round(mb)} MB`;
-  const gb = mb / 1024;
-  return gb < 10 ? `${gb.toFixed(1)} GB` : `${Math.round(gb)} GB`;
-}
-
 export interface MediaEmptyStateElement extends HTMLElement {
   setError(message: string | null): void;
 }
@@ -429,7 +420,7 @@ export function renderMediaEmptyState(opts: MediaEmptyStateOptions): MediaEmptyS
     for (const item of Array.from(clip.items)) {
       if (item.kind !== 'file') continue;
       const file = item.getAsFile();
-      if (file && (!types.length || types.some((t) => file.type === t))) {
+      if (file && (!types.length || matchesMime(file.type, types))) {
         ev.preventDefault();
         opts.onFile(file);
         return;

package/src/components/utils/mime-match.ts

@@ -0,0 +1,22 @@
+/**
+ * Match a file's MIME type against a list of patterns. Patterns may be exact
+ * MIME types (`image/png`), family wildcards (`image/*`), or the universal
+ * wildcard (a bare `*`, or `*` followed by `/*`). Matching is case-insensitive.
+ *
+ * Used by the media tools to gate uploads/paste/drop: a permissive default like
+ * `['image/*']` accepts any image, while an explicit list restricts to it.
+ */
+export function matchesMime(fileType: string, patterns: readonly string[]): boolean {
+  const type = fileType.toLowerCase();
+
+  return patterns.some((raw) => {
+    const pattern = raw.toLowerCase();
+
+    if (pattern === '*' || pattern === '*/*') return true;
+    if (pattern.endsWith('/*')) {
+      return type.startsWith(pattern.slice(0, -1));
+    }
+
+    return type === pattern;
+  });
+}

package/src/components/utils/upload-error-message.ts

@@ -0,0 +1,43 @@
+import { formatBytes } from './format-bytes';
+
+export interface UploadErrorLike {
+  code: string;
+  detail?: string;
+}
+
+export interface UploadErrorMessageKeys {
+  /** i18n key for the "file too large" copy; interpolates {size} and {max}. */
+  tooLarge: string;
+  /** i18n key for every other (or unparseable) upload failure. */
+  generic: string;
+}
+
+// Matches the public `api.i18n.t(key)` signature; interpolation is done here.
+type Translate = (key: string) => string;
+
+// The uploaders encode FILE_TOO_LARGE detail as `${file.size} > ${maxSize}`.
+const TOO_LARGE_DETAIL = /^\s*(\d+)\s*>\s*(\d+)\s*$/;
+
+/**
+ * Turn an upload error into human-readable copy. FILE_TOO_LARGE becomes a
+ * specific message with both sizes formatted (e.g. "10.5 MB exceeds the 30 MB
+ * limit"); anything else — including a malformed detail — falls back to the
+ * generic message so raw error codes never reach the user.
+ */
+export function uploadErrorMessage(
+  error: UploadErrorLike,
+  t: Translate,
+  keys: UploadErrorMessageKeys,
+): string {
+  if (error.code === 'FILE_TOO_LARGE') {
+    const match = TOO_LARGE_DETAIL.exec(error.detail ?? '');
+
+    if (match) {
+      return t(keys.tooLarge)
+        .replace(/\{size\}/g, formatBytes(Number(match[1])))
+        .replace(/\{max\}/g, formatBytes(Number(match[2])));
+    }
+  }
+
+  return t(keys.generic);
+}