{
 "title": "YT Player \u2014 Framework7 Swipe (light)",
 "brief": "Ad-free YouTube/worship player PWA. Framework7 iOS-style layout with swipe gestures, built on the app's own tokens.",
 "frame": "phone",
 "platform": "web",
 "paletteKey": "coral",
 "theme": {
  "dark": false,
  "bothModes": true,
  "contrast": "standard",
  "shape": "rounded",
  "font": "system",
  "emphasized": false,
  "motion": "expressive"
 },
 "frames": [
  {
   "id": "search",
   "name": "Search",
   "x": 0,
   "y": 0,
   "note": "Home + search results. Big title, rounded search field, results as an inset grouped list.",
   "swipe": {
    "left": "queue"
   }
  },
  {
   "id": "queue",
   "name": "Queue",
   "x": 492,
   "y": 0,
   "note": "Queued songs. Swipe a row left for Playlist/Remove (long swipe removes), right for Queue. Swipe sideways on empty space to change tab.",
   "swipe": {
    "right": "search"
   }
  },
  {
   "id": "player",
   "name": "Now playing",
   "x": 984,
   "y": 0,
   "note": "Video on top, Apple Music\u2013style transport, icon action row. Swipe down to collapse to the mini player.",
   "swipe": {
    "down": "queue"
   }
  },
  {
   "id": "upnext",
   "name": "Up next",
   "x": 1476,
   "y": 0,
   "note": "Bottom sheet opened by swiping up on the mini player. Half height, drag up for full, down to close."
  },
  {
   "id": "fullscreen",
   "name": "Fullscreen",
   "x": 1968,
   "y": 0,
   "note": "Edge-to-edge video (Fill by default). Minimal icon-only controls over a soft bottom gradient; auto-hide.",
   "bg": "inverseSurface"
  }
 ],
 "groups": [
  {
   "id": "g2",
   "x": 0,
   "y": 0,
   "axis": "x",
   "items": [
    {
     "id": "i1",
     "kind": "topAppBar",
     "label": "Search",
     "icon": "menu",
     "variant": "filled",
     "icon2": "directions_car",
     "note": "Translucent navbar; menu opens the sidebar (also left-edge swipe)."
    }
   ]
  },
  {
   "id": "g4",
   "x": 16,
   "y": 96,
   "axis": "x",
   "items": [
    {
     "id": "i3",
     "kind": "searchBar",
     "label": "Search YouTube",
     "icon": null,
     "variant": "filled",
     "icon2": "mic",
     "note": "Rounded F7 searchbar with inline mic; Enter searches."
    }
   ]
  },
  {
   "id": "g8",
   "x": 16,
   "y": 164,
   "axis": "x",
   "items": [
    {
     "id": "i5",
     "kind": "chip",
     "label": "lofi beats",
     "icon": null,
     "variant": "filled"
    },
    {
     "id": "i6",
     "kind": "chip",
     "label": "live news",
     "icon": null,
     "variant": "filled"
    },
    {
     "id": "i7",
     "kind": "chip",
     "label": "worship",
     "icon": null,
     "variant": "filled"
    }
   ]
  },
  {
   "id": "g10",
   "x": 16,
   "y": 212,
   "axis": "x",
   "items": [
    {
     "id": "i9",
     "kind": "text",
     "label": "Results",
     "icon": null,
     "variant": "filled",
     "size": 28,
     "bold": true
    }
   ]
  },
  {
   "id": "g15",
   "x": 16,
   "y": 260,
   "axis": "y",
   "items": [
    {
     "id": "i11",
     "kind": "listItem",
     "label": "Goodness of God",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Bethel Music \u00b7 5:12",
     "icon2": "more_horiz",
     "action": {
      "to": "player",
      "transition": "slide"
     }
    },
    {
     "id": "i12",
     "kind": "listItem",
     "label": "Way Maker",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Leeland \u00b7 3:12",
     "icon2": "more_horiz",
     "action": {
      "to": "player",
      "transition": "slide"
     }
    },
    {
     "id": "i13",
     "kind": "listItem",
     "label": "Build My Life",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Housefires \u00b7 6:04",
     "icon2": "more_horiz",
     "action": {
      "to": "player",
      "transition": "slide"
     }
    },
    {
     "id": "i14",
     "kind": "listItem",
     "label": "Graves Into Gardens",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Elevation \u00b7 6:41",
     "icon2": "more_horiz",
     "action": {
      "to": "player",
      "transition": "slide"
     }
    }
   ]
  },
  {
   "id": "g17",
   "x": 16,
   "y": 700,
   "axis": "x",
   "items": [
    {
     "id": "i16",
     "kind": "listItem",
     "label": "Way Maker",
     "icon": "music_note",
     "variant": "tonal",
     "supporting": "Leeland \u00b7 3:12",
     "icon2": "play_arrow",
     "action": {
      "to": "player",
      "transition": "slideUp"
     },
     "note": "Floating glass mini player. Tap opens the player, swipe left/right = next/previous, swipe up = Up next sheet."
    }
   ]
  },
  {
   "id": "g19",
   "x": 0,
   "y": 788,
   "axis": "x",
   "items": [
    {
     "id": "i18",
     "kind": "bottomNav",
     "label": "",
     "icon": null,
     "variant": "filled",
     "tabs": [
      {
       "icon": "search",
       "label": "Search"
      },
      {
       "icon": "queue_music",
       "label": "Queue"
      },
      {
       "icon": "history",
       "label": "History"
      },
      {
       "icon": "download_done",
       "label": "Saved"
      },
      {
       "icon": "more_horiz",
       "label": "More"
      }
     ],
     "selected": 0,
     "actions": {
      "tab:0": {
       "to": "search",
       "transition": "fade"
      },
      "tab:1": {
       "to": "queue",
       "transition": "fade"
      }
     },
     "note": "Translucent blurred tab bar; badge on Queue."
    }
   ]
  },
  {
   "id": "g21",
   "x": 492,
   "y": 0,
   "axis": "x",
   "items": [
    {
     "id": "i20",
     "kind": "topAppBar",
     "label": "Queue",
     "icon": "menu",
     "variant": "filled",
     "icon2": "checklist"
    }
   ]
  },
  {
   "id": "g24",
   "x": 508,
   "y": 96,
   "axis": "x",
   "items": [
    {
     "id": "i22",
     "kind": "button",
     "label": "Play queue",
     "icon": "play_arrow",
     "variant": "filled",
     "size": 182
    },
    {
     "id": "i23",
     "kind": "button",
     "label": "Clear",
     "icon": "clear_all",
     "variant": "tonal",
     "size": 182
    }
   ]
  },
  {
   "id": "g29",
   "x": 508,
   "y": 168,
   "axis": "y",
   "items": [
    {
     "id": "i25",
     "kind": "listItem",
     "label": "Way Maker",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Leeland \u00b7 3:12",
     "icon2": "drag_handle",
     "note": "Swipe right \u2192 Queue (accent action)."
    },
    {
     "id": "i26",
     "kind": "listItem",
     "label": "Build My Life",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Housefires \u00b7 6:04",
     "icon2": "drag_handle",
     "note": "Swipe left \u2192 Playlist + Remove pills."
    },
    {
     "id": "i27",
     "kind": "listItem",
     "label": "Graves Into Gardens",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Elevation \u00b7 6:41",
     "icon2": "drag_handle",
     "note": "Long swipe left removes the row."
    },
    {
     "id": "i28",
     "kind": "listItem",
     "label": "Goodness of God",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Bethel Music \u00b7 5:12",
     "icon2": "drag_handle",
     "note": ""
    }
   ]
  },
  {
   "id": "g32",
   "x": 508,
   "y": 480,
   "axis": "x",
   "items": [
    {
     "id": "i30",
     "kind": "button",
     "label": "Playlist",
     "icon": "playlist_add",
     "variant": "tonal"
    },
    {
     "id": "i31",
     "kind": "button",
     "label": "Remove",
     "icon": "delete",
     "variant": "filled"
    }
   ]
  },
  {
   "id": "g34",
   "x": 508,
   "y": 548,
   "axis": "x",
   "items": [
    {
     "id": "i33",
     "kind": "text",
     "label": "Swipe actions revealed (example row)",
     "icon": null,
     "variant": "filled",
     "size": 14
    }
   ]
  },
  {
   "id": "g36",
   "x": 508,
   "y": 700,
   "axis": "x",
   "items": [
    {
     "id": "i35",
     "kind": "listItem",
     "label": "Way Maker",
     "icon": "music_note",
     "variant": "tonal",
     "supporting": "Leeland \u00b7 3:12",
     "icon2": "play_arrow",
     "action": {
      "to": "player",
      "transition": "slideUp"
     },
     "note": "Floating glass mini player. Tap opens the player, swipe left/right = next/previous, swipe up = Up next sheet."
    }
   ]
  },
  {
   "id": "g38",
   "x": 492,
   "y": 788,
   "axis": "x",
   "items": [
    {
     "id": "i37",
     "kind": "bottomNav",
     "label": "",
     "icon": null,
     "variant": "filled",
     "tabs": [
      {
       "icon": "search",
       "label": "Search"
      },
      {
       "icon": "queue_music",
       "label": "Queue"
      },
      {
       "icon": "history",
       "label": "History"
      },
      {
       "icon": "download_done",
       "label": "Saved"
      },
      {
       "icon": "more_horiz",
       "label": "More"
      }
     ],
     "selected": 1,
     "actions": {
      "tab:0": {
       "to": "search",
       "transition": "fade"
      },
      "tab:1": {
       "to": "queue",
       "transition": "fade"
      }
     },
     "note": "Translucent blurred tab bar; badge on Queue."
    }
   ]
  },
  {
   "id": "g40",
   "x": 984,
   "y": 0,
   "axis": "x",
   "items": [
    {
     "id": "i39",
     "kind": "topAppBar",
     "label": "Now playing",
     "icon": "keyboard_arrow_down",
     "variant": "filled",
     "icon2": "more_horiz",
     "actions": {
      "icon": {
       "to": "back",
       "transition": "slideDown"
      }
     }
    }
   ]
  },
  {
   "id": "g42",
   "x": 984,
   "y": 88,
   "axis": "x",
   "items": [
    {
     "id": "i41",
     "kind": "image",
     "label": "",
     "icon": null,
     "variant": "filled",
     "size": 412,
     "note": "16:9 video stage; the fullscreen button opens Fullscreen."
    }
   ]
  },
  {
   "id": "g44",
   "x": 1000,
   "y": 320,
   "axis": "x",
   "items": [
    {
     "id": "i43",
     "kind": "text",
     "label": "Way Maker",
     "icon": null,
     "variant": "filled",
     "size": 24,
     "bold": true
    }
   ]
  },
  {
   "id": "g46",
   "x": 1000,
   "y": 356,
   "axis": "x",
   "items": [
    {
     "id": "i45",
     "kind": "text",
     "label": "Leeland",
     "icon": null,
     "variant": "filled",
     "size": 16
    }
   ]
  },
  {
   "id": "g48",
   "x": 1000,
   "y": 396,
   "axis": "x",
   "items": [
    {
     "id": "i47",
     "kind": "slider",
     "label": "",
     "icon": null,
     "variant": "filled",
     "value": 35,
     "note": "Thin seek track, accent fill."
    }
   ]
  },
  {
   "id": "g54",
   "x": 1048,
   "y": 456,
   "axis": "x",
   "items": [
    {
     "id": "i49",
     "kind": "iconButton",
     "label": "",
     "icon": "skip_previous",
     "variant": "text"
    },
    {
     "id": "i50",
     "kind": "iconButton",
     "label": "",
     "icon": "replay_10",
     "variant": "text"
    },
    {
     "id": "i51",
     "kind": "iconButton",
     "label": "",
     "icon": "play_arrow",
     "variant": "filled"
    },
    {
     "id": "i52",
     "kind": "iconButton",
     "label": "",
     "icon": "forward_10",
     "variant": "text"
    },
    {
     "id": "i53",
     "kind": "iconButton",
     "label": "",
     "icon": "skip_next",
     "variant": "text"
    }
   ]
  },
  {
   "id": "g61",
   "x": 1024,
   "y": 540,
   "axis": "x",
   "items": [
    {
     "id": "i55",
     "kind": "iconButton",
     "label": "",
     "icon": "playlist_add",
     "variant": "text"
    },
    {
     "id": "i56",
     "kind": "iconButton",
     "label": "",
     "icon": "download",
     "variant": "text"
    },
    {
     "id": "i57",
     "kind": "iconButton",
     "label": "",
     "icon": "lyrics",
     "variant": "text"
    },
    {
     "id": "i58",
     "kind": "iconButton",
     "label": "",
     "icon": "share",
     "variant": "text"
    },
    {
     "id": "i59",
     "kind": "iconButton",
     "label": "",
     "icon": "fullscreen",
     "variant": "text",
     "action": {
      "to": "fullscreen",
      "transition": "expand"
     }
    },
    {
     "id": "i60",
     "kind": "iconButton",
     "label": "",
     "icon": "more_horiz",
     "variant": "text"
    }
   ]
  },
  {
   "id": "g63",
   "x": 984,
   "y": 788,
   "axis": "x",
   "items": [
    {
     "id": "i62",
     "kind": "bottomNav",
     "label": "",
     "icon": null,
     "variant": "filled",
     "tabs": [
      {
       "icon": "search",
       "label": "Search"
      },
      {
       "icon": "queue_music",
       "label": "Queue"
      },
      {
       "icon": "history",
       "label": "History"
      },
      {
       "icon": "download_done",
       "label": "Saved"
      },
      {
       "icon": "more_horiz",
       "label": "More"
      }
     ],
     "selected": 1,
     "actions": {
      "tab:0": {
       "to": "search",
       "transition": "fade"
      },
      "tab:1": {
       "to": "queue",
       "transition": "fade"
      }
     },
     "note": "Translucent blurred tab bar; badge on Queue."
    }
   ]
  },
  {
   "id": "g65",
   "x": 1476,
   "y": 0,
   "axis": "x",
   "items": [
    {
     "id": "i64",
     "kind": "topAppBar",
     "label": "Queue",
     "icon": "menu",
     "variant": "filled"
    }
   ]
  },
  {
   "id": "g67",
   "x": 1476,
   "y": 380,
   "axis": "x",
   "items": [
    {
     "id": "i66",
     "kind": "box",
     "label": "",
     "icon": null,
     "variant": "filled",
     "size": 412,
     "size2": 512,
     "checked": true,
     "fill": "surfaceContainerHigh",
     "note": "F7 sheet with grab handle; backdrop tap closes."
    }
   ]
  },
  {
   "id": "g69",
   "x": 1492,
   "y": 404,
   "axis": "x",
   "items": [
    {
     "id": "i68",
     "kind": "text",
     "label": "Up next",
     "icon": null,
     "variant": "filled",
     "size": 20,
     "bold": true
    }
   ]
  },
  {
   "id": "g73",
   "x": 1492,
   "y": 448,
   "axis": "y",
   "items": [
    {
     "id": "i70",
     "kind": "listItem",
     "label": "Build My Life",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Housefires \u00b7 6:04",
     "action": {
      "to": "player",
      "transition": "fade"
     }
    },
    {
     "id": "i71",
     "kind": "listItem",
     "label": "Graves Into Gardens",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Elevation \u00b7 6:41",
     "action": {
      "to": "player",
      "transition": "fade"
     }
    },
    {
     "id": "i72",
     "kind": "listItem",
     "label": "Goodness of God",
     "icon": "smart_display",
     "variant": "filled",
     "supporting": "Bethel Music \u00b7 5:12",
     "action": {
      "to": "player",
      "transition": "fade"
     }
    }
   ]
  },
  {
   "id": "g75",
   "x": 1968,
   "y": 0,
   "axis": "x",
   "items": [
    {
     "id": "i74",
     "kind": "box",
     "label": "",
     "icon": null,
     "variant": "filled",
     "size": 412,
     "size2": 892,
     "fill": "inverseSurface",
     "note": "Video fills the screen (object-fit cover). Fit/Fill toggle in the controls."
    }
   ]
  },
  {
   "id": "g77",
   "x": 1984,
   "y": 24,
   "axis": "x",
   "items": [
    {
     "id": "i76",
     "kind": "text",
     "label": "Way Maker \u2014 Leeland",
     "icon": null,
     "variant": "filled",
     "size": 14
    }
   ]
  },
  {
   "id": "g79",
   "x": 2316,
   "y": 12,
   "axis": "x",
   "items": [
    {
     "id": "i78",
     "kind": "iconButton",
     "label": "",
     "icon": "fullscreen_exit",
     "variant": "text",
     "action": {
      "to": "player",
      "transition": "fade"
     }
    }
   ]
  },
  {
   "id": "g81",
   "x": 1984,
   "y": 790,
   "axis": "x",
   "items": [
    {
     "id": "i80",
     "kind": "slider",
     "label": "",
     "icon": null,
     "variant": "filled",
     "value": 35
    }
   ]
  },
  {
   "id": "g85",
   "x": 1984,
   "y": 828,
   "axis": "x",
   "items": [
    {
     "id": "i82",
     "kind": "iconButton",
     "label": "",
     "icon": "pause",
     "variant": "text"
    },
    {
     "id": "i83",
     "kind": "iconButton",
     "label": "",
     "icon": "screen_rotation",
     "variant": "text"
    },
    {
     "id": "i84",
     "kind": "iconButton",
     "label": "",
     "icon": "fit_screen",
     "variant": "text",
     "note": "Fit \u2194 Fill."
    }
   ]
  }
 ]
}