[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_107":108,"_109":110},"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/deviceHtml.tsx","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/deviceHtml.tsx","extension","id","b72744c9-3dc5-48e4-a698-ae057777ca09","deviceHtml.tsx","fileId","dbcd8bde-a706-11f1-ac24-1607ee4eb77e","parentId","01a01c4d-2bf2-7199-84aa-8d4f0f0369a5","branchId","9635267c-e84d-4621-be8a-af9e5052d6d5","branchVersion",346,"latest",true,"createdAt",["D",1789505418345],"version",29,"fileType","script","content","// Server-rendered device administration built on the device-centric model.\n\nimport React, { type ReactNode } from \"npm:react@18.2.0\";\nimport { renderToStaticMarkup } from \"npm:react-dom@18.2.0/server\";\nimport type { SettingsForm } from \"../lib/sourceSettings.ts\";\nimport { isRecord } from \"../lib/guards.ts\";\nimport { phase } from \"../lib/sourceContract.ts\";\nimport type {\n AvailableSource,\n DeviceDetail,\n DeviceSourceView,\n DeviceSummary,\n} from \"../lib/deviceStore.ts\";\nimport { SUPPORTED_WIDGET_TEMPLATES } from \"../lib/presentation.ts\";\nimport { titleCase } from \"../lib/text.ts\";\nimport { Cell, DataTable, Row } from \"./dataTable.tsx\";\nimport { pageShell } from \"./pageShell.ts\";\n\nexport type DevicePreviewItem = {\n id: string;\n mainText: string;\n subText: string;\n caption: string | null;\n emphasized: boolean;\n startsAt: number;\n expiresAt: number;\n};\n\ntype PreviewResult =\n | { ok: true; items: DevicePreviewItem[]; rawJson: string }\n | { ok: false; error: string };\n\nfunction documentMarkup(title: string, node: ReactNode): string {\n return pageShell(title, renderToStaticMarkup(

{node}

));\n}\n\nfunction Timestamp({ value }: { value: string }): React.ReactElement {\n return {value};\n}\n\nfunction humanize(key: string): string {\n return key\n .replace(/([a-z0-9])([A-Z])/g, \"$1 $2\")\n .replace(/[_-]+/g, \" \")\n .replace(/\\bId\\b/g, \"ID\")\n .replace(/^./, (letter) => letter.toUpperCase());\n}\n\nfunction stringArray(value: unknown): string[] {\n return Array.isArray(value)\n ? value.filter((item): item is string => typeof item === \"string\")\n : [];\n}\n\nfunction SettingValue({ value }: { value: unknown }): React.ReactElement {\n if (Array.isArray(value)) {\n if (value.length === 0) return None;\n return

;\n }\n if (isRecord(value)) return ;\n if (typeof value === \"boolean\") return {value ? \"Yes\" : \"No\"};\n if (value == null) return None;\n return {String(value)};\n}\n\nfunction Settings({ value }: { value: unknown }): React.ReactElement {\n if (!isRecord(value) || Object.keys(value).length === 0) return

No settings.

;\n return (\n

{humanize(key)}

\n );\n}\n\ntype DeviceNavActive = \"preview\" | \"sources\" | \"presentation\" | \"settings\";\n\nfunction DeviceNav({ id, active }: { id: number; active: DeviceNavActive }): React.ReactElement {\n const tabs = [\n [\"preview\", \"Feed\", \"\"],\n [\"sources\", \"Sources\", \"/sources\"],\n [\"presentation\", \"Presentation\", \"/presentation\"],\n [\"settings\", \"Settings\", \"/settings\"],\n ] as const;\n return (\n \n );\n}\n\nexport function SourceSettingsFields({form,settings}: {\n form: SettingsForm; settings: unknown;\n}): React.ReactElement {\n const values = isRecord(settings) ? settings : {};\n return <>\n \n {form.fields.length === 0 &&

No per-device settings.

}\n {form.fields.map(field => {\n const value = Object.hasOwn(values,field.key) ? values[field.key] : field.default;\n if (field.type === \"boolean\") return

\n {field.title}\n {\" \"}{field.title}\n {field.description &&

{field.description}

}\n

;\n const selected = stringArray(value);\n const missing = selected.filter(v => !field.choices.some(c => c.const === v));\n const groups = [...new Set(field.choices.map(c => c[\"x-group\"] ?? \"\"))];\n return

\n {field.title}\n {field.description &&

{field.description}

}\n {groups.map(group =>

\n {group || \"Choices\"}\n {field.choices.filter(c => (c[\"x-group\"] ?? \"\") === group).map(choice =>\n {\" \"}{choice.title}\n )}\n

)}\n {missing.length > 0 &&

Unavailable selections\n

Uncheck these unavailable values before saving.

\n {missing.map(value => {\" \"}{value})}\n

}\n

;\n })}\n ;\n}\n\nexport function deviceIndexDocument(devices: DeviceSummary[]): string {\n return documentMarkup(\n \"Widget favorites — Devices\",\n <>\n

Devices

\n {devices.length === 0\n ?

No devices yet.

\n : (\n \n {devices.map((device) => (\n \n \n {device.name}\n {device.installId}\n \n {device.sourceCount}\n \n \n ))}\n \n )}\n ,\n );\n}\n\nexport function deviceSettingsDocument(\n device: DeviceDetail,\n saved = false,\n): string {\n return documentMarkup(\n `Widget favorites — ${device.name}`,\n <>\n \n {saved &&

Saved.

}\n \n\n

Device: {device.installId}
Sources: {device.sourceCount}
Created
Updated

\n\n\n\n

Merge

\n If this device replaces one that was reinstalled, its install can take over\n the older device instead.\n

Merge into another device

\n ,\n );\n}\n\nexport function deviceSourcesDocument(device: DeviceDetail): string {\n return documentMarkup(\n `Widget favorites — Sources for ${device.name}`,\n <>\n \n

Live sources contribute to the feed. Disabled sources retain their saved settings.

+ Add source

\n {device.sources.length === 0\n ?

No sources assigned.

\n : (\n \n {device.sources.map((source) => (\n \n \n \n {source.name}\n \n Assignment {source.assignmentId}\n \n {source.enabled ? \"Live\" : \"Disabled\"}\n \n \n \n ))}\n \n )}\n ,\n );\n}\n\nexport function deviceMergeDocument(\n device: DeviceDetail,\n candidates: DeviceSummary[],\n error?: string,\n): string {\n return documentMarkup(\n `Widget favorites — Merge ${device.name}`,\n <>\n \n

Merge into another device

\n Use this after reinstalling the app: pairing created this device, and the\n configuration you want still belongs to the device it replaces.\n

\n This install ({device.installId}) moves onto the device you choose, which keeps its\n name, sources, presentation and page. This device is deleted, along with\n its {device.sourceCount} assigned {device.sourceCount === 1 ? \"source\" : \"sources\"} and\n its presentation. The replaced device stops receiving notifications.\n

\n {error &&

{error}

}\n {candidates.length === 0\n ?

No other device exists to merge into.

\n : (\n \n )}\n ,\n );\n}\n\nexport function devicePresentationDocument(\n device: DeviceDetail,\n saved = false,\n): string {\n const { presentation } = device;\n return documentMarkup(\n `Widget favorites — Presentation for ${device.name}`,\n <>\n \n

Control which items this device shows and how its widget looks.

\n {saved &&

Saved.

}\n

\n Item visibility\n Hide expired items\n

Hide items when their source-provided time window expires, across all assigned sources.

When unchecked, keep all items returned by your sources.

\n Layout template\n

Beacon is the current template. Standard v1 is deprecated.

\n \n Template{\" \"}\n \n \n

\n Root surface\n

WidgetKit selects the matching value for the device appearance.

\n \n Light Mode{\" \"}\n \n {presentation.rootSurface.light}\n \n \n Dark Mode{\" \"}\n \n {presentation.rootSurface.dark}\n \n

\n \n

\n ,\n );\n}\n\nexport function deviceSourceNewDocument(\n device: DeviceDetail,\n available: AvailableSource[],\n selected: AvailableSource | null,\n form: SettingsForm,\n): string {\n return documentMarkup(\n `Widget favorites — Add source to ${device.name}`,\n <>\n \n

Add source

\n {available.length === 0\n ?

Every available source is already attached.

\n : (\n <>\n

\n \n {source.name}\n {\" — \"}{source.description}\n

\n {selected && (\n

\n \n

\n Feed participation\n Live\n Disabled\n

Choose Disabled to configure and preview this source before including it in the feed.

\n \n \n \n )}\n \n )}\n ,\n );\n}\n\nexport function deviceSourceEditDocument(\n device: DeviceDetail,\n source: DeviceSourceView,\n form: SettingsForm | null,\n saved = false,\n preview?: PreviewResult,\n settingsError?: string,\n): string {\n return documentMarkup(\n `Widget favorites — ${source.name} for ${device.name}`,\n <>\n \n

{source.name}

{source.description}

{source.enabled ? \"Live\" : \"Disabled\"} — {source.enabled\n ? \"Included in this device’s feed. Saving settings affects future widget refreshes.\"\n : \"Excluded from this device’s feed and reminders. Saved settings are retained.\"}

\n {saved &&

Saved.

}\n \n

Settings

\n {settingsError &&

{settingsError}

}\n {form &&

\n \n \n }\n

Source preview

Results from this source only, using saved settings and this device’s presentation rules.\n Unsaved changes are not shown. Previewing does not change whether the source is live.

\n \n {preview && }\n

Remove source

This removes the assignment from this device. It does not delete the source or its data.

\n \n

\n ,\n );\n}\n\nfunction Preview({ result }: { result: PreviewResult }): React.ReactElement {\n if (!result.ok) return

Couldn't load results: {result.error}

;\n return (\n <>\n {result.items.length === 0\n ?

No items returned after applying this device's presentation rules.

\n : (\n \n {result.items.map((item) => {\n const when = new Date(item.startsAt * 1000).toISOString();\n return (\n \n \n {/* Derived state, for diagnosing what a device sees right now. The\n expiry bound itself is an estimate and is deliberately not shown,\n here or anywhere else. */}\n {phase(item, Math.floor(Date.now() / 1000))}\n {item.mainText}\n {item.subText}\n {item.caption ?? \"\"}\n {item.emphasized ? \"Yes\" : \"\"}\n \n );\n })}\n \n )}\n

Raw response

{result.rawJson}

\n \n );\n}\n\nfunction FeedContext({ device }: { device: DeviceDetail }): React.ReactElement {\n return <>\n

{device.tzOffsetSeconds == null\n ? \"The device has not reported a timezone yet; source default timezones apply.\"\n : \"Using the device’s last reported timezone offset.\"}

\n {device.presentation.intradayFilter &&

Hide expired items is enabled.

}\n ;\n}\n\nexport function devicePreviewDocument(\n device: DeviceDetail,\n result: PreviewResult,\n): string {\n return documentMarkup(\n `Widget favorites — Feed ${device.name}`,\n <>\n \n

Includes all live sources, using this device’s settings and presentation rules.\n This is what the server sends when the widget refreshes.

\n \n {device.sources.some(source => source.enabled)\n ?

Combining {device.sources.filter(source => source.enabled).map(source => source.name).join(\", \")}.

\n :

No live sources. Add or enable a source to populate this device’s feed.

}\n \n ,\n );\n}\n\nexport function deviceNotFoundDocument(): string {\n return documentMarkup(\n \"Widget favorites — Device not found\",\n <>\n

Device not found

No device exists with that internal ID.

\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,"_106":102},"org",{"_9":10,"_100":-5,"_101":102,"_58":59,"_103":104,"_105":44},"branch",{"_37":32,"_11":91,"_22":30,"_92":48,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":12,"_99":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yVHpab25kTlBTM3M3WmpCa3NMSTd5akVwWksuanBlZyJ9","tier","free","canRestrictVals","profileImageUrl","ctx",{"_84":-5,"_140":141,"_142":143,"_144":145,"_146":44,"_147":44,"_148":44,"_149":34,"_150":-5,"_151":-7,"_152":-7,"_153":65,"_154":44,"_155":44,"_156":-5,"_157":44,"_158":44,"_159":44,"_160":-5},"ENV",{"_111":112,"_113":114,"_115":91,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139},"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"]