@jackuait/blok 0.16.1 → 0.17.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,7 @@ import {
   IconLinkCopy,
   IconUpload,
 } from '../icons';
+import { formatBytes } from './format-bytes';
 
 /**
  * Shared "empty" uploader surface for media-style block tools (image, file):
@@ -86,17 +87,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;
 }

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);
+}

package/src/styles/colors.css

@@ -414,6 +414,37 @@
 
   /* Image error-state radius (slightly larger than --blok-radius-md). */
   --blok-radius-md-plus: 8px;
+
+  /* Video player custom controls — Notion-style minimal palette: white glyphs
+     on a subtle dark scrim, neutral progress fill, no coral. */
+  --blok-video-stage: #000000;
+  --blok-video-accent: #ffffff;
+  --blok-video-control-fg: #ffffff;
+  --blok-video-control-bg-hover: rgba(255, 255, 255, 0.1);
+  --blok-video-control-bg-active: rgba(255, 255, 255, 0.2);
+  --blok-video-time-fg: rgba(255, 255, 255, 0.8);
+  --blok-video-track: rgba(255, 255, 255, 0.2);
+  --blok-video-buffered: rgba(255, 255, 255, 0.35);
+  --blok-video-volume-track: rgba(0, 0, 0, 0.3);
+  --blok-video-thumb: #ffffff;
+  --blok-video-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --blok-video-burst-bg: rgba(0, 0, 0, 0.5);
+  --blok-video-burst-fg: #ffffff;
+  --blok-video-burst-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
+  --blok-video-burst-ring: rgba(255, 255, 255, 0.4);
+  /* Settings popover — near-opaque dark so video never bleeds through the text. */
+  --blok-video-menu-bg: rgba(22, 22, 22, 0.94);
+  --blok-video-menu-value-fg: rgba(255, 255, 255, 0.62);
+  /* Frosted-glass edge + resting glyph tint + selected-row wash. */
+  --blok-video-menu-border: rgba(255, 255, 255, 0.08);
+  --blok-video-menu-icon: rgba(255, 255, 255, 0.9);
+  --blok-video-menu-row-active: color-mix(in srgb, var(--blok-video-accent) 14%, transparent);
+  --blok-video-theater-scrim: rgba(0, 0, 0, 0.8);
+  --blok-video-theater-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
+  --blok-video-scrim-strong: rgba(0, 0, 0, 0.6);
+  --blok-video-scrim-mid: rgba(0, 0, 0, 0.2);
+  --blok-video-shadow-hover: 0 8px 24px -8px rgba(0, 0, 0, 0.18);
+  --blok-video-focus-ring: color-mix(in srgb, var(--blok-video-accent) 30%, transparent);
 }
 
 /* ─── Dark theme — system preference ────────────────── */

package/src/styles/keyframes.css

@@ -66,3 +66,11 @@
   60%  { background-color: var(--blok-selection); }
   100% { background-color: transparent; }
 }
+
+/* Soft nudge when a resizable block (image/video/embed) hits its minimum
+   width — shared by the resize-cue rules in resize-cue.css. */
+@keyframes blok-resize-recoil {
+  0%   { transform: translateX(0); }
+  50%  { transform: translateX(3px); }
+  100% { transform: translateX(0); }
+}

package/src/styles/main.css

@@ -357,10 +357,12 @@
 @import './database.css';
 @import './media-empty.css';
 @import './image.css';
+@import './video.css';
 @import './embed.css';
 @import './bookmark.css';
 @import './file.css';
 @import './columns.css';
+@import './resize-cue.css';
 
 /*
   Image tool — selectors audited by unit tests (no backdrop-filter regression,

package/src/styles/resize-cue.css

@@ -0,0 +1,26 @@
+/*
+  Shared resize floor cue. When a resizable block (image / video / embed) is
+  dragged to its minimum width, attachResizeHandle sets data-resize-blocked on
+  the figure (see image/resizer.ts). The figure gives a soft nudge and the
+  dragged handle turns neutral, signalling "can't shrink further".
+
+  Imported AFTER the per-tool stylesheets so the handle rule wins the cascade
+  over each tool's same-specificity [data-role="resize-handle"]:hover/:active
+  rules (the [data-edge] qualifier matches their specificity; later source
+  order breaks the tie).
+*/
+
+[data-resize-blocked="true"] {
+  animation: blok-resize-recoil 260ms ease-out;
+}
+[data-resize-blocked="true"] [data-role="resize-handle"][data-edge] {
+  background: var(--blok-handle-fg-default);
+  border-color: var(--blok-handle-fg-default);
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-resize-blocked="true"] {
+    animation: none;
+  }
+}