smarthome.exchange/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add catalog package

Browse Source
This commit is contained in:
Jürgen Kunz
2026-05-05 12:03:46 +00:00
commit 30946ce94e
17 changed files with 804 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts_web/elements/shx-console-shell.ts
+179
View File
@@ -0,0 +1,179 @@
import { DeesElement, html, customElement, css } from '@design.estate/dees-element';
import { shxDemoAgents, shxDemoApprovals, shxDemoDevices } from '../demo/demo-data.js';
import { shxElementStyles } from './tokens.js';
import './shx-badge.js';
import './shx-card.js';
import './shx-icon.js';
declare global {
interface HTMLElementTagNameMap {
'shx-console-shell': ShxConsoleShell;
}
}
@customElement('shx-console-shell')
export class ShxConsoleShell extends DeesElement {
public static demo = () => html`<shx-console-shell></shx-console-shell>`;
public static demoGroups = ['smarthome.exchange full pages'];
public static styles = [
...shxElementStyles,
css`
:host {
display: block;
min-height: 100vh;
background: var(--shx-bg);
color: var(--shx-fg);
}
.shell {
display: grid;
grid-template-columns: 230px 1fr;
min-height: 100vh;
}
aside {
border-right: 1px solid var(--shx-border-soft);
background: var(--shx-card);
padding: 16px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font: 800 14px/1 var(--shx-display);
}
.nav {
display: grid;
gap: 4px;
}
.nav div {
padding: 8px 10px;
border-radius: 7px;
color: var(--shx-fg-3);
font-size: 13px;
}
.nav div:first-child {
background: var(--shx-accent-soft);
color: var(--shx-accent);
}
main {
padding: 18px;
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
h1 {
margin: 0;
font: 800 24px/1 var(--shx-display);
letter-spacing: -0.03em;
}
.grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 14px;
}
.list {
display: grid;
gap: 8px;
}
.row {
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px;
border: 1px solid var(--shx-border-soft);
border-radius: 8px;
background: var(--shx-card-2);
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.name {
font-weight: 700;
}
.sub {
margin-top: 2px;
color: var(--shx-fg-3);
font-size: 12px;
}
@media (max-width: 860px) {
.shell, .grid {
grid-template-columns: 1fr;
}
aside {
border-right: none;
border-bottom: 1px solid var(--shx-border-soft);
}
}
`,
];
public render() {
return html`
<div class="shell">
<aside>
<div class="brand"><shx-icon></shx-icon> smarthome.exchange</div>
<div class="nav">
<div>Now</div>
<div>Agents</div>
<div>Schedule</div>
<div>Devices</div>
<div>Activity</div>
</div>
</aside>
<main>
<div class="top">
<h1>Birch Lane</h1>
<shx-badge>hub online · 12ms</shx-badge>
</div>
<div class="grid">
<shx-card>
<h2>Agents</h2>
<div class="list">
${shxDemoAgents.map((agentArg) => html`
<div class="row">
<span class="dot" style="background:${agentArg.color}"></span>
<div><div class="name">${agentArg.name}</div><div class="sub">${agentArg.latest}</div></div>
<shx-badge>${agentArg.mode}</shx-badge>
</div>
`)}
</div>
</shx-card>
<div class="list">
<shx-card>
<h2>Pending approvals</h2>
<div class="list">
${shxDemoApprovals.map((approvalArg) => html`
<div class="row">
<span class="dot" style="background:var(--shx-amber)"></span>
<div><div class="name">${approvalArg.title}</div><div class="sub">${approvalArg.reason}</div></div>
<shx-badge>${Math.round(approvalArg.confidence * 100)}%</shx-badge>
</div>
`)}
</div>
</shx-card>
<shx-card>
<h2>Devices</h2>
<div class="list">
${shxDemoDevices.map((deviceArg) => html`
<div class="row">
<span class="dot" style="background:var(--shx-green)"></span>
<div><div class="name">${deviceArg.name}</div><div class="sub">${deviceArg.room} · ${deviceArg.state}</div></div>
<shx-badge>${deviceArg.agent}</shx-badge>
</div>
`)}
</div>
</shx-card>
</div>
</div>
</main>
</div>
`;
}
}