frappe-ui 1.0.0-beta.63 → 1.0.0-beta.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.63",
+  "version": "1.0.0-beta.64",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"

package/src/charts/areaChartOptions.test.ts

@@ -9,7 +9,7 @@ import type { AxisChartConfig } from './types'
 
 const tokens: ChartTokens = {
   categorical: ['#111111', '#222222', '#333333'],
-  sequential: ['#000011', '#000022', '#000033', '#000044', '#000055'],
+  sequential: ['#000011', '#000022', '#000033'],
   diverging: ['#001100', '#002200', '#003300'],
   axisLabel: 'ink-5',
   axisTitle: 'ink-7',
@@ -169,9 +169,8 @@ describe('area chart option', () => {
       build({
         fillOpacity: 0.5,
         series: [{ name: 'sales', fillOpacity: 0.25 }],
-        // A lone series takes the ramp's mid stop, hence the shifted blue.
       }).series[0].areaStyle.color.colorStops[0].color,
-    ).toBe('rgba(0, 0, 34, 0.25)')
+    ).toBe('rgba(0, 0, 17, 0.25)')
   })
 
   it('falls back to a flat fill for a color it cannot add alpha to', () => {

package/src/charts/barChartOptions.test.ts

@@ -7,8 +7,8 @@ import type { AxisChartConfig, AxisChartSeriesConfig } from './types'
 
 const tokens: ChartTokens = {
   categorical: ['#111111', '#222222', '#333333'],
-  // Five stops so the sequential pale-tail trim and even spacing are visible.
-  sequential: ['#000011', '#000022', '#000033', '#000044', '#000055'],
+  // Three stops so even spacing across the ramp is visible.
+  sequential: ['#000011', '#000022', '#000033'],
   diverging: ['#001100', '#002200', '#003300'],
   axisLabel: 'ink-5',
   axisTitle: 'ink-7',
@@ -70,13 +70,13 @@ describe('resolveSeriesColors', () => {
     ).toEqual({ sales: '#000011', refunds: 'red' })
   })
 
-  it('gives a lone sequential series a mid stop, not the darkest', () => {
+  it('gives a lone sequential series the darkest stop', () => {
     expect(colorsFor({ series: [{ name: 'sales' }] })).toEqual({
-      sales: '#000022',
+      sales: '#000011',
     })
   })
 
-  it('spaces sequential series out dark to light, skipping the palest stops', () => {
+  it('spaces sequential series out dark to light', () => {
     expect(Object.values(colorsFor({ series: named(3) }))).toEqual([
       '#000011',
       '#000022',
@@ -84,10 +84,10 @@ describe('resolveSeriesColors', () => {
     ])
   })
 
-  it('cycles the sequential ramp once there are more series than usable stops', () => {
-    const colors = colorsFor({ series: named(6) })
+  it('cycles the sequential ramp once there are more series than stops', () => {
+    const colors = colorsFor({ series: named(4) })
     expect(colors.a).toBe('#000011')
-    expect(colors.f).toBe(colors.a)
+    expect(colors.d).toBe(colors.a)
   })
 
   it('cycles the categorical ramp in series order', () => {

package/src/charts/chartColors.test.ts

@@ -25,9 +25,6 @@ const tokens: ChartTokens = {
   backdrop: '#ffffff',
 }
 
-/** The sequential ramp minus the two palest stops, as every chart reads it. */
-const USABLE_SEQUENTIAL = tokens.sequential.slice(0, 7)
-
 describe('chartColors: precedence', () => {
   it("draws in the caller's own colors when they passed a list", () => {
     expect(
@@ -56,7 +53,7 @@ describe('chartColors: precedence', () => {
     ).toEqual(tokens.categorical.slice(0, 2))
     expect(
       chartColors([], tokens, { fallback: 'sequential', count: 'ramp' }),
-    ).toEqual(USABLE_SEQUENTIAL)
+    ).toEqual(tokens.sequential)
   })
 })
 
@@ -90,6 +87,38 @@ describe('chartColors: one color per thing drawn', () => {
   })
 })
 
+describe('chartColors: how a sequential ramp is spent', () => {
+  const stops = (count: number) =>
+    chartColors('sequential', tokens, { fallback: 'sequential', count }).map(
+      (color) => tokens.sequential.indexOf(color) + 1,
+    )
+
+  it('gives a lone series the deep end', () => {
+    expect(stops(1)).toEqual([1])
+  })
+
+  it('keeps a small chart a prefix of the next size up', () => {
+    expect(stops(2)).toEqual([1, 4])
+    expect(stops(3)).toEqual([1, 4, 7])
+  })
+
+  it('stays inside the first seven stops up to seven series', () => {
+    expect(stops(4)).toEqual([1, 3, 5, 7])
+    expect(stops(5)).toEqual([1, 3, 4, 6, 7])
+    expect(stops(6)).toEqual([1, 2, 3, 5, 6, 7])
+    expect(stops(7)).toEqual([1, 2, 3, 4, 5, 6, 7])
+  })
+
+  it('reaches the pale stops only once the series outnumber the span', () => {
+    expect(stops(8)).toEqual([1, 2, 3, 4, 5, 6, 7, 8])
+    expect(stops(9)).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9])
+  })
+
+  it('cycles once there are more series than stops', () => {
+    expect(stops(10)).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 1])
+  })
+})
+
 describe('chartColors: the ramp itself', () => {
   it('gives the stops rather than a slot each', () => {
     expect(
@@ -97,16 +126,7 @@ describe('chartColors: the ramp itself', () => {
         fallback: 'sequential',
         count: 'ramp',
       }),
-    ).toEqual(USABLE_SEQUENTIAL)
-  })
-
-  it('trims the sequential stops that vanish against a card', () => {
-    const ramp = chartColors(undefined, tokens, {
-      fallback: 'sequential',
-      count: 'ramp',
-    })
-    expect(ramp).not.toContain('#f5f5f5')
-    expect(ramp).not.toContain('#e0e0e0')
+    ).toEqual(tokens.sequential)
   })
 
   it('takes a diverging ramp end to end', () => {
@@ -151,7 +171,7 @@ describe('chartColors: which end of the ramp leads', () => {
         count: 'ramp',
         deepEnd: 'last',
       }),
-    ).toEqual([...USABLE_SEQUENTIAL].reverse())
+    ).toEqual([...tokens.sequential].reverse())
   })
 
   it('leaves a categorical set alone, having no order to reverse', () => {

package/src/charts/comboChartOptions.test.ts

@@ -9,7 +9,7 @@ import type { AxisChartConfig, ChartMark } from './types'
 
 const tokens: ChartTokens = {
   categorical: ['#111111', '#222222', '#333333'],
-  sequential: ['#000011', '#000022', '#000033', '#000044', '#000055'],
+  sequential: ['#000011', '#000022', '#000033'],
   diverging: ['#001100', '#002200', '#003300'],
   axisLabel: 'ink-5',
   axisTitle: 'ink-7',

package/src/charts/donutChartOptions.test.ts

@@ -6,7 +6,7 @@ import type { DonutChartConfig } from './types'
 
 const tokens: ChartTokens = {
   categorical: ['#111111', '#222222', '#333333'],
-  sequential: ['#000011', '#000022', '#000033', '#000044', '#000055'],
+  sequential: ['#000011', '#000022', '#000033'],
   diverging: ['#001100', '#002200', '#003300'],
   axisLabel: 'ink-5',
   axisTitle: 'ink-7',

package/src/charts/heatmapOptions.test.ts

@@ -203,18 +203,10 @@ describe('buildHeatmapMatrix', () => {
 })
 
 describe('heatmapRampStops', () => {
-  it('reverses the sequential ramp and trims its palest stops', () => {
-    const stops = heatmapRampStops(config(), tokens)
-
-    expect(stops).toEqual([
-      '#cccccc',
-      '#aaaaaa',
-      '#8a8a8a',
-      '#5a5a5a',
-      '#3a3a3a',
-      '#1a1a1a',
-      '#0a0a0a',
-    ])
+  it('reverses the sequential ramp, palest first', () => {
+    expect(heatmapRampStops(config(), tokens)).toEqual(
+      [...tokens.sequential].reverse(),
+    )
   })
 
   it('takes the diverging ramp as authored, cool end first', () => {
@@ -347,7 +339,9 @@ describe('buildHeatmapOption', () => {
       const resting = cells[index].color
       const hovered = item.emphasis.itemStyle.color
       expect(hovered).toBe(hoverCellColor(resting))
-      expect(hexToOklch(hovered).l).toBeGreaterThan(hexToOklch(resting).l)
+      expect(hexToOklch(hovered).l).toBeGreaterThanOrEqual(
+        hexToOklch(resting).l,
+      )
     })
   })
 })

package/src/charts/lineChartOptions.test.ts

@@ -5,7 +5,7 @@ import type { AxisChartConfig } from './types'
 
 const tokens: ChartTokens = {
   categorical: ['#111111', '#222222', '#333333'],
-  sequential: ['#000011', '#000022', '#000033', '#000044', '#000055'],
+  sequential: ['#000011', '#000022', '#000033'],
   diverging: ['#001100', '#002200', '#003300'],
   axisLabel: 'ink-5',
   axisTitle: 'ink-7',

package/src/charts/style.css

@@ -25,7 +25,10 @@
      The red family sits at hue 17. It was authored at 5, a crimson, whose light
      partner lightens into a pink rather than into a warning — so anything
      reading the ramp for a status had to leave it. 17 keeps the family clear of
-     the amber at 75 while its light partner still reads as red. */
+     the amber at 75 while its light partner still reads as red. Its chroma
+     sits at 0.155, under the cap, because the eye weights red above every
+     other hue and at the cap a slice of it reads as an alert. Lower still and
+     it turns brown. */
   --chart-categorical-1: #2283c3;
   --chart-categorical-2: #84c5f9;
   --chart-categorical-3: #289e60;
@@ -34,8 +37,8 @@
   --chart-categorical-6: #bb9df1;
   --chart-categorical-7: #c98c28;
   --chart-categorical-8: #f5ca8e;
-  --chart-categorical-9: #bd2040;
-  --chart-categorical-10: #fc8e94;
+  --chart-categorical-9: #c54b58;
+  --chart-categorical-10: #fca0a4;
 
   --chart-sequential-1: #095895;
   --chart-sequential-2: #2283c3;
@@ -95,8 +98,8 @@
   --chart-categorical-6: #b294e7;
   --chart-categorical-7: #bf8319;
   --chart-categorical-8: #ebc085;
-  --chart-categorical-9: #b20e37;
-  --chart-categorical-10: #f2858b;
+  --chart-categorical-9: #ba4250;
+  --chart-categorical-10: #f2979b;
 
   --chart-sequential-1: #074677;
   --chart-sequential-2: #1b699c;

package/src/charts/tokens.ts

@@ -56,8 +56,8 @@ const LIGHT_CATEGORICAL = [
   '#bb9df1',
   '#c98c28',
   '#f5ca8e',
-  '#bd2040',
-  '#fc8e94',
+  '#c54b58',
+  '#fca0a4',
 ]
 
 const LIGHT_SEQUENTIAL = [
@@ -95,8 +95,8 @@ const DARK_CATEGORICAL = [
   '#b294e7',
   '#bf8319',
   '#ebc085',
-  '#b20e37',
-  '#f2858b',
+  '#ba4250',
+  '#f2979b',
 ]
 
 const DARK_SEQUENTIAL = [
@@ -277,10 +277,6 @@ export function pickSeriesColor(ramp: string[], index: number) {
   return ramp[index % ramp.length]
 }
 
-/** The two palest sequential stops vanish against a white card. */
-const SEQUENTIAL_TAIL_TRIM = 2
-/** A lone series reads best as one confident mid-blue, not the ramp's dark end. */
-const SEQUENTIAL_SOLO_INDEX = 1
 /**
  * Below this relative luminance a fill needs white text on top of it. It is the
  * crossover, not a taste call: white and the near-black inside-label ink
@@ -290,23 +286,57 @@ const SEQUENTIAL_SOLO_INDEX = 1
 const DARK_FILL_LUMINANCE = 0.22
 
 /**
- * `count` evenly spaced stops from a continuous ramp, so a stack reads as one
- * progression rather than n unrelated hues. Cycles instead once there are more
- * series than usable stops, where even spacing would hand out duplicates.
+ * How much of the sequential ramp a chart spends before it must widen. The
+ * last two stops of a nine-stop ramp are pale enough that a series in them is
+ * hard to read against a card, so a chart stays inside the first seven until
+ * it has more series than that.
  */
-function rampStops(ramp: string[], count: number, lastIndex: number): string[] {
-  if (count > lastIndex + 1) {
+const SEQUENTIAL_SPAN = 7
+/**
+ * The most stops apart two neighbouring series sit. Without it two series
+ * take the two ends of the span, and a third then recolors the second. With
+ * it a chart of one, two or three series is a prefix of the next.
+ */
+const SEQUENTIAL_MAX_STEP = 3
+
+/**
+ * `count` stops from the deep end of a sequential ramp: spread evenly over the
+ * first `SEQUENTIAL_SPAN` stops, never more than `SEQUENTIAL_MAX_STEP` apart,
+ * widening past the span only for a chart with more series than it holds.
+ * Cycles once there are more series than stops.
+ */
+function sequentialStops(ramp: string[], count: number): string[] {
+  if (count === 1) return [ramp[0]]
+  if (count > ramp.length) {
     return Array.from({ length: count }, (_, i) => pickSeriesColor(ramp, i))
   }
+  const lastIndex = Math.min(Math.max(SEQUENTIAL_SPAN, count), ramp.length) - 1
   return Array.from(
     { length: count },
-    (_, i) => ramp[Math.round((i * lastIndex) / (count - 1))],
+    (_, i) =>
+      ramp[
+        Math.min(
+          Math.round((i * lastIndex) / (count - 1)),
+          i * SEQUENTIAL_MAX_STEP,
+        )
+      ],
   )
 }
 
-/** The sequential ramp without the stops that vanish against a card. */
-function usableSequential(ramp: string[]) {
-  return ramp.slice(0, Math.max(1, ramp.length - SEQUENTIAL_TAIL_TRIM))
+/**
+ * `count` evenly spaced stops across the whole of a diverging ramp, which is
+ * read by its extremes. Cycles once there are more series than stops.
+ */
+function divergingStops(ramp: string[], count: number): string[] {
+  if (count === 1) return [ramp[0]]
+  if (count > ramp.length) {
+    return Array.from({ length: count }, (_, i) => pickSeriesColor(ramp, i))
+  }
+  const lastIndex = ramp.length - 1
+  return Array.from(
+    { length: count },
+    (_, i) => ramp[Math.round((i * lastIndex) / (count - 1))],
+  )
 }
 
 /**
@@ -328,16 +358,9 @@ export function paletteColors(
 
   const ramp = name === 'diverging' ? tokens.diverging : tokens.sequential
   if (!ramp.length) return cycle(tokens.categorical)
-
-  if (count === 1) {
-    if (name === 'diverging') return [ramp[0]]
-    return [ramp[Math.min(SEQUENTIAL_SOLO_INDEX, ramp.length - 1)]]
-  }
-
-  // A diverging ramp is read by its extremes, so it always spans end to end.
-  const lastIndex =
-    name === 'diverging' ? ramp.length - 1 : usableSequential(ramp).length - 1
-  return rampStops(ramp, count, lastIndex)
+  return name === 'diverging'
+    ? divergingStops(ramp, count)
+    : sequentialStops(ramp, count)
 }
 
 /**
@@ -347,10 +370,7 @@ export function paletteColors(
  */
 function namedRamp(name: ChartPaletteName, tokens: ChartTokens): string[] {
   if (name === 'categorical') return tokens.categorical
-  const ramp =
-    name === 'diverging'
-      ? tokens.diverging
-      : usableSequential(tokens.sequential)
+  const ramp = name === 'diverging' ? tokens.diverging : tokens.sequential
   return ramp.length ? ramp : tokens.categorical
 }
 

package/src/components/shared/slotReactivity.cy.ts

@@ -359,4 +359,40 @@ describe('slot-derived computeds follow the slots', () => {
     cy.get('[data-cy="toggle"]').click()
     cy.get('[data-cy="mark"]').should('not.exist')
   })
+
+  it('Pill does not reserve space for a conditional empty suffix', () => {
+    const Harness = defineComponent({
+      setup() {
+        const show = ref(false)
+        return () =>
+          h('div', [
+            h(
+              'button',
+              {
+                'data-cy': 'toggle',
+                onClick: () => (show.value = !show.value),
+              },
+              'Toggle',
+            ),
+            h(
+              Pill,
+              { label: 'Discussions' },
+              {
+                suffix: () =>
+                  show.value ? h('span', { 'data-cy': 'count' }, '2') : null,
+              },
+            ),
+          ])
+      },
+    })
+
+    cy.mount(Harness)
+    cy.get('[data-slot="tab-suffix"]')
+      .should('have.class', 'empty:hidden')
+      .and('not.be.visible')
+
+    cy.get('[data-cy="toggle"]').click()
+    cy.get('[data-slot="tab-suffix"]').should('be.visible')
+    cy.get('[data-cy="count"]').should('have.text', '2')
+  })
 })

package/src/components/shared/tabs/Pill.vue

@@ -104,7 +104,6 @@ const iconClass = computed(() => {
 function hasLabel(label: PillProps['label']) {
   return label !== undefined && label !== null && label !== ''
 }
-
 </script>
 
 <template>
@@ -115,7 +114,7 @@ function hasLabel(label: PillProps['label']) {
     <span
       v-if="$slots.prefix"
       data-slot="tab-prefix"
-      class="inline-flex items-center"
+      class="inline-flex items-center empty:hidden"
     >
       <slot name="prefix" />
     </span>
@@ -131,7 +130,7 @@ function hasLabel(label: PillProps['label']) {
     <span
       v-if="$slots.suffix"
       data-slot="tab-suffix"
-      class="inline-flex items-center"
+      class="inline-flex items-center empty:hidden"
     >
       <slot name="suffix" />
     </span>

package/src/molecules/editor/components/MediaNodeView.test.ts

@@ -158,6 +158,36 @@ describe('media node view in read mode', () => {
   })
 })
 
+describe('media node view native video fullscreen', () => {
+  it('hides editing chrome without restyling the inline container', async () => {
+    const ctx = mount(
+      '<p><video src="/files/clip.mp4" data-caption="Release demo"></video></p>',
+    )
+    await settle()
+
+    const video = ctx.root.querySelector('video') as HTMLVideoElement
+    const container = video.closest(
+      '[data-video-fullscreen-root]',
+    ) as HTMLElement
+    expect(captionInputs(ctx.root)).toHaveLength(1)
+
+    video.dispatchEvent(new Event('webkitbeginfullscreen'))
+    await settle()
+
+    expect(captionInputs(ctx.root)).toHaveLength(0)
+    expect(container.classList).not.toContain('bg-black')
+    expect(video.classList).toContain('rounded-4')
+    expect(video.classList).not.toContain('rounded-none')
+    expect(video.classList).not.toContain('size-full')
+
+    video.dispatchEvent(new Event('webkitendfullscreen'))
+    await settle()
+    expect(captionInputs(ctx.root)).toHaveLength(1)
+
+    ctx.app.unmount()
+  })
+})
+
 describe('media node view reuse', () => {
   it('does not carry a caption over to the next image', async () => {
     const ctx = mount(

package/src/molecules/editor/components/MediaNodeView.vue

@@ -54,22 +54,25 @@ const isEditable = useNodeViewEditable(editor)
 const isVideo = computed(() => props.node.type.name === 'video')
 
 /**
- * Whether THIS media is the fullscreen element.
+ * Whether THIS media is fullscreen through either browser API.
  *
  * The browser stretches the fullscreen element to the viewport with UA
  * `!important` rules, but everything inside it kept the committed pixel size:
  * the video stayed small at the top, its playback bar pinned under it, with a
  * black slab filling the rest of the screen. In fullscreen the media is
  * centered in the black field and the controls run along the bottom of the
- * screen — and the editing chrome (toolbar, resize handles, caption) is not
- * rendered at all, since none of it is actionable there.
+ * screen. iPhone instead moves the video into its native player and leaves the
+ * in-page container alone. Editing chrome (toolbar, resize handles, caption)
+ * is not rendered in either mode, since none of it is actionable there.
  */
 const isFullscreen = ref(false)
+const isStandardFullscreen = ref(false)
 
 function syncFullscreen(): void {
-  isFullscreen.value =
+  isStandardFullscreen.value =
     containerRef.value !== null &&
     document.fullscreenElement === containerRef.value
+  isFullscreen.value = isStandardFullscreen.value
 }
 
 onMounted(() => document.addEventListener('fullscreenchange', syncFullscreen))
@@ -311,7 +314,7 @@ function setVideoOptions(options: {
       ref="containerRef"
       class="group relative isolate overflow-hidden not-prose rounded-4"
       :class="
-        isFullscreen
+        isStandardFullscreen
           ? 'flex items-center justify-center bg-black'
           : containerClasses(node.attrs, selected)
       "
@@ -322,7 +325,8 @@ function setVideoOptions(options: {
         v-if="isUploaded || fileContent || node.attrs.loading"
         class="relative"
         :class="
-          isFullscreen && 'flex h-full w-full items-center justify-center'
+          isStandardFullscreen &&
+          'flex h-full w-full items-center justify-center'
         "
       >
         <img
@@ -356,7 +360,7 @@ function setVideoOptions(options: {
             // committed size the width/height attributes carry. `!outline-none`
             // drops the selected-node outline from `style.css`, which would
             // otherwise frame the video mid-screen.
-            isFullscreen &&
+            isStandardFullscreen &&
               'size-full rounded-none object-contain !outline-none',
           ]"
           :src="node.attrs.src || fileContent"
@@ -371,9 +375,10 @@ function setVideoOptions(options: {
 
         <VideoControls
           v-if="isVideo && isUploaded"
+          v-model:fullscreen="isFullscreen"
           :video-el="mediaRef as HTMLVideoElement | null"
           :hidden="isResizing"
-          :fullscreen="isFullscreen"
+          :standard-fullscreen="isStandardFullscreen"
         />
 
         <MediaToolbar

package/src/molecules/editor/components/VideoControls.test.ts

@@ -30,6 +30,7 @@ beforeEach(() => {
 
 afterEach(() => {
   vi.unstubAllGlobals()
+  Reflect.deleteProperty(document, 'fullscreenEnabled')
 })
 
 /** Run one animation frame, the way the browser would. */
@@ -39,15 +40,33 @@ async function paint() {
   await nextTick()
 }
 
-function mount(videoEl: HTMLVideoElement) {
+function mount(
+  videoEl: HTMLVideoElement,
+  options: {
+    fullscreen?: boolean
+    standardFullscreen?: boolean
+    onUpdateFullscreen?: (fullscreen: boolean) => void
+  } = {},
+) {
   const root = document.createElement('div')
   document.body.appendChild(root)
-  const app = createApp({ render: () => h(VideoControls, { videoEl }) })
+  const app = createApp({
+    render: () =>
+      h(VideoControls, {
+        videoEl,
+        fullscreen: options.fullscreen,
+        standardFullscreen: options.standardFullscreen,
+        'onUpdate:fullscreen': options.onUpdateFullscreen,
+      }),
+  })
   app.mount(root)
   return {
     root,
     fill: () => root.querySelector<HTMLElement>('[aria-label="Seek"] div div'),
     slider: () => root.querySelector<HTMLElement>('[aria-label="Seek"]'),
+    controls: () => root.firstElementChild as HTMLElement,
+    fullscreenButton: () =>
+      root.querySelector<HTMLButtonElement>('[aria-label="Fullscreen"]'),
     unmount: () => {
       app.unmount()
       root.remove()
@@ -117,3 +136,100 @@ describe('VideoControls playhead', () => {
     ctx.unmount()
   })
 })
+
+describe('VideoControls fullscreen', () => {
+  it('fullscreens the media wrapper with the standard API', () => {
+    const video = fakeVideo()
+    const wrapper = document.createElement('div')
+    wrapper.dataset.videoFullscreenRoot = ''
+    wrapper.appendChild(video)
+    const requestFullscreen = vi.fn(() => Promise.resolve())
+    Object.defineProperty(wrapper, 'requestFullscreen', {
+      value: requestFullscreen,
+    })
+    const ctx = mount(video)
+
+    ctx.fullscreenButton()?.click()
+
+    expect(requestFullscreen).toHaveBeenCalledOnce()
+    ctx.unmount()
+    wrapper.remove()
+  })
+
+  it('uses native video fullscreen when the standard API is disabled', () => {
+    const video = fakeVideo() as HTMLVideoElement & {
+      webkitSupportsFullscreen: boolean
+      webkitEnterFullscreen: () => void
+    }
+    const wrapper = document.createElement('div')
+    wrapper.dataset.videoFullscreenRoot = ''
+    wrapper.appendChild(video)
+    const requestFullscreen = vi.fn(() => Promise.resolve())
+    Object.defineProperty(wrapper, 'requestFullscreen', {
+      value: requestFullscreen,
+    })
+    Object.defineProperty(document, 'fullscreenEnabled', {
+      configurable: true,
+      value: false,
+    })
+    video.webkitSupportsFullscreen = true
+    video.webkitEnterFullscreen = vi.fn()
+    const ctx = mount(video)
+
+    ctx.fullscreenButton()?.click()
+
+    expect(requestFullscreen).not.toHaveBeenCalled()
+    expect(video.webkitEnterFullscreen).toHaveBeenCalledOnce()
+    ctx.unmount()
+    wrapper.remove()
+  })
+
+  it('handles a rejected standard fullscreen request', async () => {
+    const video = fakeVideo()
+    const requestFullscreen = vi.fn(() =>
+      Promise.reject(new DOMException('Fullscreen denied', 'NotAllowedError')),
+    )
+    Object.defineProperty(video, 'requestFullscreen', {
+      value: requestFullscreen,
+    })
+    const ctx = mount(video)
+
+    ctx.fullscreenButton()?.click()
+    await Promise.resolve()
+
+    expect(requestFullscreen).toHaveBeenCalledOnce()
+    ctx.unmount()
+  })
+
+  it('reports native WebKit fullscreen transitions', () => {
+    const video = fakeVideo()
+    const onUpdateFullscreen = vi.fn()
+    const ctx = mount(video, { onUpdateFullscreen })
+
+    video.dispatchEvent(new Event('webkitbeginfullscreen'))
+    video.dispatchEvent(new Event('webkitendfullscreen'))
+
+    expect(onUpdateFullscreen).toHaveBeenNthCalledWith(1, true)
+    expect(onUpdateFullscreen).toHaveBeenNthCalledWith(2, false)
+    ctx.unmount()
+  })
+
+  it('keeps inline spacing for native fullscreen', () => {
+    const native = mount(fakeVideo(), { fullscreen: true })
+
+    expect(native.controls().classList).toContain('rounded-b-4')
+    expect(native.controls().classList).not.toContain('px-6')
+    expect(
+      native.root.querySelector('[aria-label="Exit fullscreen"]'),
+    ).not.toBeNull()
+    native.unmount()
+
+    const standard = mount(fakeVideo(), {
+      fullscreen: true,
+      standardFullscreen: true,
+    })
+    expect(standard.controls().classList).toContain('px-6')
+    expect(standard.controls().classList).not.toContain('rounded-b-4')
+    standard.unmount()
+  })
+})

package/src/molecules/editor/components/VideoControls.vue

@@ -35,13 +35,24 @@ const props = defineProps<{
   videoEl: HTMLVideoElement | null
   /** Hidden entirely while true (e.g. during a resize drag). */
   hidden?: boolean
-  /**
-   * The media is the fullscreen element: the row spans the screen instead of a
-   * media box, so it drops the rounded corner and takes more breathing room.
-   */
-  fullscreen?: boolean
+  /** The wrapper uses the standard API and stretches this row to the screen. */
+  standardFullscreen?: boolean
 }>()
 
+/**
+ * Whether this video is fullscreen through either browser API. The node view
+ * writes standard Fullscreen API changes; WebKit native-player events write
+ * their changes here.
+ */
+const fullscreen = defineModel<boolean>('fullscreen', { default: false })
+
+type WebKitVideoElement = HTMLVideoElement & {
+  readonly webkitSupportsFullscreen?: boolean
+  readonly webkitDisplayingFullscreen?: boolean
+  webkitEnterFullscreen?: () => void
+  webkitExitFullscreen?: () => void
+}
+
 const playing = ref(false)
 const muted = ref(false)
 const currentTime = ref(0)
@@ -97,6 +108,16 @@ function bind(el: HTMLVideoElement) {
   on('loadedmetadata', () => (duration.value = el.duration || 0))
   on('durationchange', () => (duration.value = el.duration || 0))
   on('volumechange', () => (muted.value = el.muted))
+  // iPhone presents video through its native fullscreen player rather than
+  // the standard Fullscreen API, so `document.fullscreenElement` never moves.
+  // Write those transitions through the shared fullscreen model to keep the
+  // node view's editing chrome in sync with either implementation.
+  on('webkitbeginfullscreen', () => (fullscreen.value = true))
+  on('webkitendfullscreen', () => (fullscreen.value = false))
+
+  if ((el as WebKitVideoElement).webkitDisplayingFullscreen) {
+    fullscreen.value = true
+  }
 }
 
 function unbind(el: HTMLVideoElement) {
@@ -158,16 +179,67 @@ function toggleMute() {
   if (el) el.muted = !el.muted
 }
 
+function ignoreFullscreenRejection(promise: Promise<void> | undefined) {
+  // A fullscreen request can be refused by browser policy. It is an optional
+  // presentation affordance, so a rejection must not become an unhandled app
+  // error.
+  void promise?.catch(() => {})
+}
+
 function toggleFullscreen() {
   const el = props.videoEl
   if (!el) return
+  const webkitVideo = el as WebKitVideoElement
+
+  if (webkitVideo.webkitDisplayingFullscreen) {
+    try {
+      webkitVideo.webkitExitFullscreen?.()
+    } catch {
+      // The native player may already be leaving fullscreen.
+    }
+    return
+  }
+
   if (document.fullscreenElement) {
-    void document.exitFullscreen()
+    try {
+      ignoreFullscreenRejection(document.exitFullscreen?.())
+    } catch {
+      // Fullscreen state may have changed between the check and the request.
+    }
     return
   }
+
   // Fullscreen the wrapper so these controls stay visible over the video.
   const root = el.closest('[data-video-fullscreen-root]') ?? el
-  void (root as HTMLElement).requestFullscreen?.()
+  const requestFullscreen = (root as HTMLElement).requestFullscreen
+
+  // `fullscreenEnabled` is false on iPhone even though the video-specific
+  // WebKit API is available. Choose that path before making an asynchronous
+  // standard request: `webkitEnterFullscreen()` must run directly inside the
+  // click's user-activation window.
+  if (
+    typeof requestFullscreen === 'function' &&
+    document.fullscreenEnabled !== false
+  ) {
+    try {
+      ignoreFullscreenRejection(requestFullscreen.call(root))
+      return
+    } catch {
+      // A synchronous standard-API failure can still fall through to WebKit
+      // while this click retains user activation.
+    }
+  }
+
+  if (
+    webkitVideo.webkitSupportsFullscreen &&
+    typeof webkitVideo.webkitEnterFullscreen === 'function'
+  ) {
+    try {
+      webkitVideo.webkitEnterFullscreen()
+    } catch {
+      // Native fullscreen can be unavailable until media metadata is ready.
+    }
+  }
 }
 
 function timeFromPointer(event: PointerEvent): number {
@@ -267,7 +339,7 @@ const SCRIM =
     class="absolute inset-x-0 bottom-0 z-20 flex items-center gap-3 text-white transition-opacity [filter:drop-shadow(0_1px_2px_rgb(0_0_0/0.45))]"
     :style="{ backgroundImage: SCRIM }"
     :class="[
-      fullscreen ? 'px-6 pt-16 pb-6' : 'rounded-b-4 px-3.5 pt-12 pb-3',
+      standardFullscreen ? 'px-6 pt-16 pb-6' : 'rounded-b-4 px-3.5 pt-12 pb-3',
       playing && !scrubbing
         ? 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'
         : 'opacity-100',
@@ -367,14 +439,20 @@ const SCRIM =
       </button>
     </Tooltip>
 
-    <Tooltip text="Fullscreen" class="flex h-5">
+    <Tooltip
+      :text="fullscreen ? 'Exit fullscreen' : 'Fullscreen'"
+      class="flex h-5"
+    >
       <button
         type="button"
         class="opacity-90 transition-opacity hover:opacity-100"
-        aria-label="Fullscreen"
+        :aria-label="fullscreen ? 'Exit fullscreen' : 'Fullscreen'"
         @click="toggleFullscreen"
       >
-        <span class="lucide-maximize-2 size-5" />
+        <span
+          :class="fullscreen ? 'lucide-minimize-2' : 'lucide-maximize-2'"
+          class="size-5"
+        />
       </button>
     </Tooltip>
   </div>