Edit Session State

Name

Also known as (comma separated)

Brief definition State valid for a session.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "sessionId", "type": "text", "label": "Session id", "default": "sess_8f2c" }, { "id": "itemCount", "type": "number", "label": "Items in cart", "default": 3, "min": 0, "max": 20, "step": 1 }, { "id": "status", "type": "select", "label": "Session status", "default": "active", "options": [ "active", "expired" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"sesst sesst--{{status}}\">\n <p class=\"sesst__id\">Session <code>{{sessionId}}</code> <span class=\"sesst__badge sesst__badge--active\" style=\"background:{{accent}};\">active</span><span class=\"sesst__badge sesst__badge--expired\">expired</span></p>\n <p class=\"sesst__cart\">Cart: <strong class=\"sesst__count-active\">{{itemCount}} items</strong><strong class=\"sesst__count-expired\">0 items &mdash; cleared</strong></p>\n <p class=\"sesst__note\">Session state lives only for this visit &mdash; it ends when the session does.</p>\n</div>\n<style>\n.sesst { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.sesst__id { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }\n.sesst__id code { font: 11px ui-monospace, monospace; }\n.sesst__badge { display: none; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #241430; }\n.sesst--active .sesst__badge--active { display: inline-block; }\n.sesst--expired .sesst__badge--expired { display: inline-block; background: #24143014; color: #24143099; }\n.sesst__cart { margin: 0 0 8px; font-size: 13px; }\n.sesst__count-active, .sesst__count-expired { display: none; }\n.sesst--active .sesst__count-active, .sesst--expired .sesst__count-expired { display: inline; }\n.sesst__note { margin: 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"sesttw sesttw--{{status}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-2.5 flex items-center gap-2\">Session <code class=\"font-mono text-[11px]\">{{sessionId}}</code> <span class=\"sesttw__badge-active hidden text-[10px] font-bold py-1 px-2.5 rounded-full\" style=\"background:{{accent}};\">active</span><span class=\"sesttw__badge-expired hidden text-[10px] font-bold py-1 px-2.5 rounded-full bg-[#24143014] text-[#24143099]\">expired</span></p>\n <p class=\"m-0 mb-2 text-[13px]\">Cart: <strong class=\"sesttw__count-active hidden\">{{itemCount}} items</strong><strong class=\"sesttw__count-expired hidden\">0 items &mdash; cleared</strong></p>\n <p class=\"m-0 text-[10px] text-[#24143099]\">Session state lives only for this visit &mdash; it ends when the session does.</p>\n</div>\n<style>\n.sesttw--active .sesttw__badge-active, .sesttw--active .sesttw__count-active { display: inline-block; }\n.sesttw--expired .sesttw__badge-expired, .sesttw--expired .sesttw__count-expired { display: inline-block; }\n</style>", "react": "export function SessionState({\n sessionId = \"{{sessionId}}\",\n itemCount = {{itemCount}},\n status = \"{{status}}\",\n accent = \"{{accent}}\",\n}) {\n const active = status === \"active\";\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 10px\", display: \"flex\", alignItems: \"center\", gap: 8 }}>\n Session <code style={{ fontFamily: \"ui-monospace, monospace\", fontSize: 11 }}>{sessionId}</code>\n <span style={{ fontSize: 10, fontWeight: 700, padding: \"3px 9px\", borderRadius: 999, color: active ? \"#241430\" : \"#24143099\", background: active ? accent : \"#24143014\" }}>{status}</span>\n </p>\n <p style={{ margin: \"0 0 8px\", fontSize: 13 }}>Cart: <strong>{active ? `${itemCount} items` : \"0 items \\u2014 cleared\"}</strong></p>\n <p style={{ margin: 0, fontSize: 10, color: \"#24143099\" }}>Session state lives only for this visit &mdash; it ends when the session does.</p>\n </div>\n );\n}" }