${title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_108":109,"_110":111},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","plusjade","name","app-clarkview","path","render/pageShell.ts","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":-5,"_61":44,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/plusjade/app-clarkview/code/render/pageShell.ts","extension","id","3e81a767-fd49-4bf5-974e-c36740cc9698","pageShell.ts","fileId","4048f5e0-a760-11f1-b193-1607ee4eb77e","parentId","01a01c4d-2bf2-7199-84aa-8d4f0f0369a5","branchId","9635267c-e84d-4621-be8a-af9e5052d6d5","branchVersion",338,"latest",true,"createdAt",["D",1789500603120],"version",8,"fileType","script","content","// Shared semantic shell for every browser administration view.\n//\n// The stylesheet is mobile-first: the unqualified rules describe a phone in\n// portrait, and each `min-width` block adds back the wider-viewport layout.\n// Two consequences are load-bearing for the views. Resource tables stack\n// into labeled rows below 40em, which is why `dataTable.tsx` emits a\n// `data-label` and an explicit ARIA role on every cell — CSS drops the\n// native table roles the moment `display` changes. And every control clears\n// a 44px touch target with a 16px font, since anything smaller is both hard\n// to hit and triggers iOS Safari's zoom-on-focus.\n\nconst PAGE_STYLE = `\n /* Light values are the established palette; the dark set mirrors the same\n hierarchy rather than introducing a second visual language. */\n :root {\n color-scheme: light dark;\n --page: #fff;\n --ink: #1a1a1a;\n --ink-muted: #666;\n --accent: #2563eb;\n --accent-strong: #1d4ed8;\n --rule: #eee;\n --edge: #ddd;\n --field-edge: #ccc;\n --inset: #f6f6f6;\n --tap: 44px;\n }\n @media (prefers-color-scheme: dark) {\n :root {\n --page: #16181c;\n --ink: #e8e9ec;\n --ink-muted: #a1a5ae;\n --accent: #7aa7ff;\n --accent-strong: #a3c0ff;\n --rule: #26282e;\n --edge: #34373e;\n --field-edge: #4b4f58;\n --inset: #1c1f24;\n }\n }\n\n *, *::before, *::after { box-sizing: border-box; }\n\n body {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--page);\n color: var(--ink);\n line-height: 1.5;\n max-width: 40rem;\n margin: 0 auto;\n padding: 1rem 1rem 3rem;\n overflow-wrap: break-word;\n }\n main { min-width: 0; }\n @media (min-width: 40em) { body { padding: 2rem 1rem 4rem; } }\n\n h1 { font-size: clamp(1.4rem, 1.25rem + 0.8vw, 1.65rem); line-height: 1.2; margin: 0 0 1rem; }\n h2 { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.25; margin: 0 0 0.5rem; }\n h3 { font-size: 0.95rem; line-height: 1.3; margin: 1rem 0 0.4rem; }\n p { margin: 0.5rem 0 1rem; }\n ul, ol { margin: 0.5rem 0 1rem; padding-left: 1.25rem; }\n li { margin: 0.35rem 0; }\n a { color: var(--accent); }\n /* A paragraph holding nothing but a link is an action (\"+ Add source\"), so\n it gets a target taller than its text. */\n p:not(.breadcrumb) > a:only-child, li > a:first-child { display: inline-block; padding: 0.3rem 0; }\n code { font-family: ui-monospace, monospace; font-size: 0.85em; overflow-wrap: anywhere; }\n strong { overflow-wrap: anywhere; }\n :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n\n details { margin-top: 0.75rem; }\n summary { cursor: pointer; font-weight: 600; padding: 0.6rem 0; }\n dl.schema-fields { margin: 0.75rem 0 0; }\n dl.schema-fields > div { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }\n dl.schema-fields dt { font-weight: 600; }\n dl.schema-fields dd { margin: 0.25rem 0 0; }\n dl.schema-fields p { margin: 0.25rem 0; }\n .schema-detail { color: var(--ink-muted); font-size: 0.85rem; }\n section { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }\n pre {\n background: var(--inset);\n border: 1px solid var(--edge);\n border-radius: 6px;\n padding: 0.75rem;\n overflow-x: auto;\n font-size: 0.8rem;\n line-height: 1.5;\n }\n\n /* Navigation. Wrapping keeps every destination reachable on a narrow\n screen instead of pushing links off-screen. */\n header.global-header { margin: 0 0 1.5rem; border-bottom: 1px solid var(--edge); }\n header.global-header nav, nav.resource-nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }\n header.global-header a, nav.resource-nav a, .breadcrumb a {\n display: inline-flex;\n align-items: center;\n min-height: var(--tap);\n color: var(--accent);\n text-decoration: none;\n font-size: 0.95rem;\n }\n nav.resource-nav { margin: 0 0 1.5rem; border-bottom: 1px solid var(--edge); }\n nav.resource-nav a { border-bottom: 2px solid transparent; margin-bottom: -1px; }\n nav.resource-nav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }\n .breadcrumb { margin: 0; }\n .breadcrumb a { font-size: 0.9rem; }\n\n\n /* Fixed-width destinations leave a glimpse of the next device on phones. */\n header.global-header .home-link { gap: 0.5rem; color: var(--ink-muted); }\n header.global-header nav.device-gallery { display: block; }\n .device-gallery ul { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0.5rem 0.25rem 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }\n .device-gallery li { flex: 0 0 5rem; margin: 0; scroll-snap-align: start; }\n header.global-header .device-gallery a { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem; color: var(--ink-muted); text-align: center; font-size: 0.8rem; line-height: 1.3; }\n .device-avatar { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid var(--edge); border-radius: 50%; background: var(--inset); color: var(--ink); font-size: 1rem; font-weight: 600; }\n .device-name { width: 100%; overflow-wrap: anywhere; }\n .device-gallery a[aria-current] { color: var(--ink); font-weight: 600; }\n .device-gallery a[aria-current] .device-avatar { outline: 2px solid var(--accent); outline-offset: 3px; }\n .device-gallery a:hover .device-avatar { border-color: var(--accent); }\n\n /* Label/value metadata reads as an aligned two-column list on a phone and\n collapses to one inline run once there is room for it. */\n dl.device-meta { display: grid; grid-template-columns: minmax(5rem, auto) 1fr; gap: 0.35rem 0.75rem; margin: 1.25rem 0 1rem; }\n dl.device-meta > div { display: contents; }\n dl.device-meta dt { color: var(--ink-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }\n dl.device-meta dd { margin: 0; font-size: 0.85rem; }\n dl.device-meta dd.device-id { font-family: ui-monospace, monospace; }\n dl.device-meta ul { margin: 0; padding-left: 1.1rem; }\n @media (min-width: 40em) {\n dl.device-meta { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 1.25rem 0 0.5rem; }\n dl.device-meta > div { display: flex; gap: 0.35rem; }\n }\n\n /* Resource tables. Below 40em each row becomes a labeled record: the first\n cell is its title and every other cell prints its column name from\n data-label, so no operational column has to be dropped or scrolled to. */\n table.resource-index { width: 100%; border-collapse: collapse; margin-top: 1rem; }\n table.resource-index thead { display: none; }\n table.resource-index tr { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }\n table.resource-index td { display: grid; grid-template-columns: 7rem 1fr; gap: 0 0.75rem; padding: 0.15rem 0; font-size: 0.95rem; }\n table.resource-index td::before {\n content: attr(data-label);\n color: var(--ink-muted);\n font-size: 0.8rem;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n line-height: 1.6;\n }\n table.resource-index td:empty { display: none; }\n table.resource-index td:first-child { display: block; font-weight: 600; margin-bottom: 0.35rem; }\n table.resource-index td:first-child::before { content: none; }\n table.resource-index td:first-child a { display: inline-block; padding: 0.3rem 0; }\n /* Settings nested in a cell already sit in the value column, so they run as\n a plain label-then-value flow rather than indenting a second time. */\n table.resource-index td details { margin-top: 0; }\n table.resource-index td summary { padding: 0 0 0.4rem; }\n table.resource-index td .device-meta { display: block; margin: 0; }\n table.resource-index td .device-meta > div { display: block; margin-bottom: 0.35rem; }\n .resource-id { display: block; font-family: ui-monospace, monospace; font-size: 0.8rem; font-weight: 400; color: var(--ink-muted); overflow-wrap: anywhere; }\n @media (min-width: 40em) {\n table.resource-index thead { display: table-header-group; }\n table.resource-index tr { display: table-row; padding: 0; border-bottom: 0; }\n table.resource-index th, table.resource-index td {\n display: table-cell;\n text-align: left;\n padding: 0.5rem 0.6rem;\n border-bottom: 1px solid var(--rule);\n }\n table.resource-index th { color: var(--ink-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }\n table.resource-index td::before { content: none; }\n table.resource-index td:first-child { font-weight: inherit; margin-bottom: 0; }\n table.resource-index td:first-child a { padding: 0; }\n table.resource-index td .device-meta { display: flex; }\n table.resource-index td .device-meta > div { display: flex; margin-bottom: 0; }\n }\n\n /* Forms. Controls are full-width and thumb-sized by default; the 1rem font\n size is what keeps iOS Safari from zooming the page on focus. */\n fieldset { border: 1px solid var(--edge); border-radius: 6px; margin: 0 0 1rem; padding: 0.5rem 1rem 1rem; min-width: 0; }\n legend { font-weight: 600; padding: 0 0.25rem; }\n label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: var(--tap); margin: 0; }\n /* A text field's label sits above it so every field in a form starts at the\n same left edge; checkbox and color rows stay on one line. */\n label:has(input[type=\"text\"]), label:has(input[type=\"number\"]), label:has(select) {\n flex-direction: column;\n align-items: stretch;\n gap: 0.25rem;\n min-height: 0;\n margin-bottom: 0.75rem;\n }\n input[type=\"text\"], input[type=\"number\"], select {\n font: inherit;\n font-size: 1rem;\n min-height: var(--tap);\n max-width: 100%;\n padding: 0.5rem 0.65rem;\n border: 1px solid var(--field-edge);\n border-radius: 6px;\n background: var(--page);\n color: var(--ink);\n }\n input[type=\"text\"] { flex: 1 1 12rem; }\n input[type=\"number\"] { inline-size: 6rem; }\n select { flex: 1 1 14rem; }\n fieldset > input[type=\"text\"] { width: 100%; max-width: 24rem; }\n input[type=\"checkbox\"] { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--accent); }\n input[type=\"color\"] {\n inline-size: 3.25rem;\n block-size: 2.75rem;\n padding: 0.2rem;\n border: 1px solid var(--field-edge);\n border-radius: 6px;\n background: var(--page);\n }\n /* A checkbox fieldset is a selection list, so it gets as many columns as the\n viewport fits at a readable width — two on a phone, four in the full\n container — instead of one 70-row column. */\n fieldset:has(input[type=\"checkbox\"]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0 1rem; }\n button {\n font: inherit;\n font-size: 1rem;\n font-weight: 600;\n min-height: var(--tap);\n inline-size: 100%;\n padding: 0.65rem 1.25rem;\n border: none;\n border-radius: 6px;\n background: var(--accent);\n color: var(--page);\n cursor: pointer;\n }\n button:hover { background: var(--accent-strong); }\n @media (min-width: 40em) { button { inline-size: auto; } }\n`;\n\nconst PAGE_SCRIPT = `\n document.querySelectorAll(\"time[datetime]\").forEach(function (el) {\n var d = new Date(el.getAttribute(\"datetime\"));\n if (!isNaN(d.getTime())) el.textContent = d.toLocaleString();\n });\n`;\n\n\nexport const DEVICE_GALLERY_SLOT = \"\";\n\nexport function deviceGallery(devices: { id: number; name: string }[], pathname: string): string {\n const escape = (value: string) => value.replace(/[&<>\"']/g, (char) =>\n ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\", \"'\": \"'\" }[char]!));\n const currentId = /^\\/devices\\/(\\d+)(?:\\/|$)/.exec(pathname)?.[1];\n if (!devices.length) return \"\";\n return '

${escape(initials)}${escape(name)}

\";\n}\n\nexport function pageShell(title: string, body: string): string {\n return `\n\n\n\n\n${title}\n\n\n\n\n${body}\n\n\n`;\n}\n","deleted",false,"label",[47,24],"render","27c7d349-8dc0-4ddf-8288-3f5cab6fe8a0",["D",1787009561780],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","The main web app and server API for Clark View","imageUrl","userId","b0a8da26-58e7-4d19-8b5c-eedf487df9a9","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","5a10edca-919b-4a78-babb-71908f69af93","tursoName","27c7d3498dc04ddf82883f5cab6fe8a0","tursoHostname","27c7d3498dc04ddf82883f5cab6fe8a0-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789532458193],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_107":103},"org",{"_9":10,"_101":-5,"_102":103,"_58":59,"_104":105,"_106":44},"branch",{"_37":91,"_11":92,"_22":30,"_93":48,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":12,"_100":10},"isOwned",346,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yVHpab25kTlBTM3M3WmpCa3NMSTd5akVwWksuanBlZyJ9","tier","free","canRestrictVals","profileImageUrl","ctx",{"_84":-5,"_141":142,"_143":144,"_145":146,"_147":44,"_148":44,"_149":44,"_150":34,"_151":-5,"_152":-7,"_153":-7,"_154":65,"_155":44,"_156":44,"_157":-5,"_158":44,"_159":44,"_160":44,"_161":-5},"ENV",{"_112":113,"_114":115,"_116":92,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]