{
  "id": "ticket-stub-gate",
  "name": "Gate Console",
  "theme": "ticket-stub",
  "category": "App Shell",
  "description": "A gate operator’s frame where the last scan fills the screen as a stub, because the operator needs to read one thing at a time and not a table of rows.",
  "layout": "A 200px lane rail, a large single-stub result pane, and a narrow scan log; the result pane shows one stub at whatever size the frame allows.",
  "modules": [
    {
      "key": "rail",
      "name": "Lane rail",
      "html": "\n<nav class=\"lr\"><span class=\"brand\">Gate 4</span>\n<ul><li class=\"on\"><a href=\"#\">Lane 1<span class=\"ok\">open</span></a></li><li><a href=\"#\">Lane 2<span class=\"ok\">open</span></a></li><li><a href=\"#\">Lane 3<span class=\"cl\">closed</span></a></li><li><a href=\"#\">Lane 4<span class=\"ok\">open</span></a></li></ul>\n<div class=\"ct2\"><span class=\"lb\">Admitted, this session</span><b class=\"n\">1,204</b></div>\n<div class=\"ct2\"><span class=\"lb\">Rejected</span><b class=\"n\">11</b></div></nav>"
    },
    {
      "key": "result",
      "name": "Scan result",
      "html": "\n<section class=\"rs\"><span class=\"lb\">Last scan · 19:04:22</span>\n<article class=\"stub big\" style=\"--px:70%\"><div class=\"lg\"><span class=\"pass\">Admit</span><h2>Marlowe Playhouse · A Number</h2><ul class=\"mt\"><li><span class=\"lb\">Holder</span><b>K. Oyelaran</b></li><li><span class=\"lb\">Row</span><b>A</b></li><li><span class=\"lb\">Seats</span><b>3, 4</b></li><li><span class=\"lb\">Entrance</span><b>B</b></li></ul><p class=\"nt\">Member ticket. Two seats on one reference — admit both together.</p></div>\n<div class=\"sm\"><span class=\"lb\">Reference</span><span class=\"cd\">MP7 2210 0034</span><div class=\"bars\" aria-hidden=\"true\"></div><span class=\"ok\">Valid</span></div></article>\n<div class=\"ac\"><button type=\"button\" class=\"pri\">Admit</button><button type=\"button\" class=\"sec\">Reject</button><button type=\"button\" class=\"sec\">Hold for supervisor</button></div></section>"
    },
    {
      "key": "log",
      "name": "Scan log",
      "html": "\n<aside class=\"sl\"><span class=\"lb\">Scans</span>\n<ol>\n  <li class=\"ok2\"><time>19:04</time><span class=\"cd\">MP7 2210 0034</span></li>\n  <li class=\"ok2\"><time>19:04</time><span class=\"cd\">MP7 2209 8871</span></li>\n  <li class=\"bad\"><time>19:03</time><span class=\"cd\">MP7 1904 2210</span><span class=\"rj\">Already used</span></li>\n  <li class=\"ok2\"><time>19:03</time><span class=\"cd\">MP7 2210 0019</span></li>\n  <li class=\"ok2\"><time>19:02</time><span class=\"cd\">MP7 2210 0018</span></li>\n  <li class=\"bad\"><time>19:01</time><span class=\"cd\">MP7 2208 4410</span><span class=\"rj\">Wrong date</span></li>\n</ol></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "ticket-stub-gate",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:46:02+09:00",
    "updatedAt": "2026-09-01T23:46:02+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/ticket-stub-gate.json",
  "structure": "A 200px lane rail, a large single-stub result pane, and a narrow scan log; the result pane shows one stub at whatever size the frame allows.",
  "html": "<div class=\"dz dz-ticket-stub-gate\" data-design=\"ticket-stub-gate\" data-theme=\"ticket-stub\">\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Lane rail\">\n<nav class=\"lr\"><span class=\"brand\">Gate 4</span>\n<ul><li class=\"on\"><a href=\"#\">Lane 1<span class=\"ok\">open</span></a></li><li><a href=\"#\">Lane 2<span class=\"ok\">open</span></a></li><li><a href=\"#\">Lane 3<span class=\"cl\">closed</span></a></li><li><a href=\"#\">Lane 4<span class=\"ok\">open</span></a></li></ul>\n<div class=\"ct2\"><span class=\"lb\">Admitted, this session</span><b class=\"n\">1,204</b></div>\n<div class=\"ct2\"><span class=\"lb\">Rejected</span><b class=\"n\">11</b></div></nav></section><section class=\"dz-mod\" data-mod=\"result\" aria-label=\"Scan result\">\n<section class=\"rs\"><span class=\"lb\">Last scan · 19:04:22</span>\n<article class=\"stub big\" style=\"--px:70%\"><div class=\"lg\"><span class=\"pass\">Admit</span><h2>Marlowe Playhouse · A Number</h2><ul class=\"mt\"><li><span class=\"lb\">Holder</span><b>K. Oyelaran</b></li><li><span class=\"lb\">Row</span><b>A</b></li><li><span class=\"lb\">Seats</span><b>3, 4</b></li><li><span class=\"lb\">Entrance</span><b>B</b></li></ul><p class=\"nt\">Member ticket. Two seats on one reference — admit both together.</p></div>\n<div class=\"sm\"><span class=\"lb\">Reference</span><span class=\"cd\">MP7 2210 0034</span><div class=\"bars\" aria-hidden=\"true\"></div><span class=\"ok\">Valid</span></div></article>\n<div class=\"ac\"><button type=\"button\" class=\"pri\">Admit</button><button type=\"button\" class=\"sec\">Reject</button><button type=\"button\" class=\"sec\">Hold for supervisor</button></div></section></section><section class=\"dz-mod\" data-mod=\"log\" aria-label=\"Scan log\">\n<aside class=\"sl\"><span class=\"lb\">Scans</span>\n<ol>\n  <li class=\"ok2\"><time>19:04</time><span class=\"cd\">MP7 2210 0034</span></li>\n  <li class=\"ok2\"><time>19:04</time><span class=\"cd\">MP7 2209 8871</span></li>\n  <li class=\"bad\"><time>19:03</time><span class=\"cd\">MP7 1904 2210</span><span class=\"rj\">Already used</span></li>\n  <li class=\"ok2\"><time>19:03</time><span class=\"cd\">MP7 2210 0019</span></li>\n  <li class=\"ok2\"><time>19:02</time><span class=\"cd\">MP7 2210 0018</span></li>\n  <li class=\"bad\"><time>19:01</time><span class=\"cd\">MP7 2208 4410</span><span class=\"rj\">Wrong date</span></li>\n</ol></aside></section>\n</div>",
  "css": "\n.dz-ticket-stub-gate { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 200px 1fr 260px; min-height: 620px; }\n.dz-ticket-stub-gate .lb { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-ticket-stub-gate .lr { border-right: 1px solid var(--border); padding: 20px 18px; }\n.dz-ticket-stub-gate .brand { font-family: var(--pv-display); font-weight: 600; font-size: 26px; display: block; margin-bottom: 20px; }\n.dz-ticket-stub-gate .lr ul { list-style: none; margin: 0 0 22px; padding: 0; }\n.dz-ticket-stub-gate .lr a { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; text-decoration: none; color: var(--foreground); font-size: 14px; border-bottom: 1px solid var(--border); }\n.dz-ticket-stub-gate .lr li.on a { color: var(--primary); font-weight: 600; }\n.dz-ticket-stub-gate .ok { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); color: var(--primary); }\n.dz-ticket-stub-gate .cl { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); }\n.dz-ticket-stub-gate .ct2 { margin-bottom: 14px; }\n.dz-ticket-stub-gate .n { font-family: var(--pv-mono); font-size: 26px; font-weight: 700; }\n.dz-ticket-stub-gate .rs { padding: 22px; border-right: 1px solid var(--border); }\n.dz-ticket-stub-gate .stub { display: grid; grid-template-columns: 70% 30%; border: 1px solid var(--border); border-radius: var(--pv-radius); background:\n  radial-gradient(circle 7px at var(--px) 0, transparent 98%, var(--card) 100%),\n  radial-gradient(circle 7px at var(--px) 100%, transparent 98%, var(--card) 100%),\n  var(--card); overflow: hidden; margin: 12px 0 18px; }\n.dz-ticket-stub-gate .big { border-color: var(--primary); border-width: 2px; }\n.dz-ticket-stub-gate .lg { padding: 22px; }\n.dz-ticket-stub-gate .pass { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); background: var(--primary); color: var(--primary-foreground); padding: 5px 12px; border-radius: var(--pv-radius-sm); display: inline-block; }\n.dz-ticket-stub-gate .stub h2 { font-family: var(--pv-display); font-weight: 600; font-size: 34px; margin: 12px 0 16px; }\n.dz-ticket-stub-gate .mt { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 16px; padding: 0; }\n.dz-ticket-stub-gate .mt b { font-family: var(--pv-mono); font-size: 17px; }\n.dz-ticket-stub-gate .nt { margin: 0; font-size: 13px; color: var(--muted-foreground); }\n.dz-ticket-stub-gate .sm { padding: 22px; border-left: 1px dashed var(--border); display: grid; align-content: start; gap: 8px; }\n.dz-ticket-stub-gate .cd { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .04em; }\n.dz-ticket-stub-gate .bars { height: 52px; background: repeating-linear-gradient(90deg, var(--foreground) 0 2px, transparent 2px 4px, var(--foreground) 4px 5px, transparent 5px 9px); }\n.dz-ticket-stub-gate .ac { display: flex; gap: 10px; }\n.dz-ticket-stub-gate button { font: inherit; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); padding: 14px 24px; border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-ticket-stub-gate .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-ticket-stub-gate .sec { background: transparent; color: var(--foreground); border: 1px solid var(--border); }\n.dz-ticket-stub-gate .sl { padding: 20px 18px; }\n.dz-ticket-stub-gate .sl ol { list-style: none; margin: 10px 0 0; padding: 0; }\n.dz-ticket-stub-gate .sl li { display: grid; gap: 3px; padding: 9px 0; border-bottom: 1px solid var(--border); }\n.dz-ticket-stub-gate .sl time { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); }\n.dz-ticket-stub-gate .sl .cd { font-size: 12px; }\n.dz-ticket-stub-gate .ok2 { border-left: 3px solid var(--primary); padding-left: 10px; }\n.dz-ticket-stub-gate .bad { border-left: 3px solid var(--destructive); padding-left: 10px; }\n.dz-ticket-stub-gate .rj { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); color: var(--destructive); }\n",
  "requiredTheme": "/api/v1/themes/ticket-stub.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Khand:wght@400;500;600;700&family=Asap:wght@400;500;600;700&family=Overpass+Mono:wght@400;500;600;700&display=swap"
}