@linxin666/dsh-remote-web-ui 0.1.1

package/lib/types/routes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../../src/routes.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAChE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAC/D,OAAO,EAA0B,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAmDhG;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAOxE;AAKD,8CAA8C;AAC9C,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAiCV,gDAAgD;AAChD,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0B;IAElD;;OAEG;gBACS,OAAO,EAAE,cAAc;IAInC,4DAA4D;IAC5D,IAAI,CAAC,GAAG,EAAE,eAAe,EAAE,GAAG,EAAE,cAAc,GAAG,IAAI;IAiBrD,kEAAkE;IAClE,IAAI,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;IAYrC,wCAAwC;IACxC,IAAI,IAAI,IAAI,MAAM,CAEjB;CACF;AAED,6CAA6C;AAC7C,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,OAAO,EAAE,cAAc,CAAA;IACvB,0EAA0E;IAC1E,YAAY,EAAE,SAAS,MAAM,EAAE,CAAA;CAChC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,QAAQ,EAAE,CAgK3D"}

package/lib/types/tunnel.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Auto-tunnel manager: spawns a Cloudflare quick tunnel (`cloudflared
+ * tunnel --url <local>`) through the `cloudflared` npm package — its
+ * postinstall downloads the platform binary, so no user-side tooling is
+ * involved — surfaces the minted `https://xxx.trycloudflare.com` URL, and
+ * restarts the process after unexpected exits with exponential backoff.
+ *
+ * The cloudflared package's Tunnel is a thin spawn wrapper; this manager
+ * owns the lifecycle policy (binary readiness, URL timeout, restart
+ * backoff) around it. All seams — the tunnel factory, binary readiness,
+ * timers — are injectable so the whole lifecycle is unit-testable without
+ * a real binary or network.
+ */
+/** The observable tunnel lifecycle the settings/panel surfaces render. */
+export type TunnelPhase = 'stopped' | 'starting' | 'running' | 'failed';
+/** One tunnel status frame. */
+export interface TunnelInfo {
+    phase: TunnelPhase;
+    /** The minted public URL, once the tunnel reports it. */
+    url?: string;
+    /** Human-readable failure detail (binary install, URL timeout, spawn error). */
+    error?: string;
+}
+/** The tunnel handle subset this manager uses (the package's Tunnel fits). */
+export interface TunnelHandle {
+    on(event: string, listener: (...args: any[]) => void): unknown;
+    off(event: string, listener: (...args: any[]) => void): unknown;
+    stop(): boolean;
+}
+/** Injectable seams (defaults are the real cloudflared package + node timers). */
+export interface TunnelManagerOptions {
+    /** Spawn one quick tunnel toward the local target URL. */
+    factory?: (targetUrl: string) => TunnelHandle;
+    /** Make sure the cloudflared binary exists, downloading it when absent. */
+    ensureBinary?: () => Promise<void>;
+    /** Wait up to this long for the tunnel URL before failing the attempt. */
+    urlTimeoutMs?: number;
+    /** First restart delay after an unexpected failure (exponential base). */
+    restartBaseMs?: number;
+    /** Cap on the exponential restart delay. */
+    restartMaxMs?: number;
+    /** Timer source (injected in tests). */
+    timer?: {
+        setTimeout(fn: () => void, ms: number): unknown;
+        clearTimeout(t: unknown): void;
+    };
+}
+/**
+ * Own the lifecycle of one auto-tunnel: start/stop, URL surfacing, and
+ * crash-restart backoff.
+ */
+export declare class TunnelManager {
+    private readonly factory;
+    private readonly ensureBinary;
+    private readonly urlTimeoutMs;
+    private readonly restartBaseMs;
+    private readonly restartMaxMs;
+    private readonly timer;
+    private phase;
+    private url;
+    private error;
+    private targetUrl;
+    private handle;
+    private urlTimer;
+    private restartTimer;
+    private attempts;
+    private stopping;
+    private readonly urlListeners;
+    private readonly phaseListeners;
+    /**
+     * @param options - seams; defaults spawn the real quick tunnel.
+     */
+    constructor(options?: TunnelManagerOptions);
+    /** The current status frame. */
+    get info(): TunnelInfo;
+    /**
+     * Start (or keep) a quick tunnel toward `targetUrl`. Restarting with a
+     * different target tears the old tunnel down first; restarting with the
+     * same target while running is a no-op.
+     * @param targetUrl - the local URL to expose, e.g. `http://127.0.0.1:3080`.
+     */
+    start(targetUrl: string): void;
+    /** Stop the tunnel for good: no restarts, no state. */
+    stop(): void;
+    /** Alias of {@link stop} for plugin-effect disposal. */
+    dispose(): void;
+    /** Subscribe to minted tunnel URLs (fire-and-forget duplicates dropped). */
+    onUrl(listener: (url: string) => void): () => void;
+    /** Subscribe to every phase change. */
+    onPhase(listener: (info: TunnelInfo) => void): () => void;
+    private attempt;
+    private handleUrl;
+    private handleExit;
+    private fail;
+    /** Stop the current process and cancel every pending timer (no phase change). */
+    private teardown;
+    private setPhase;
+}
+//# sourceMappingURL=tunnel.d.ts.map

package/lib/types/tunnel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tunnel.d.ts","sourceRoot":"","sources":["../../src/tunnel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAKH,0EAA0E;AAC1E,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEvE,+BAA+B;AAC/B,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,WAAW,CAAA;IAClB,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,8EAA8E;AAC9E,MAAM,WAAW,YAAY;IAC3B,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG,OAAO,CAAA;IAC9D,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG,OAAO,CAAA;IAC/D,IAAI,IAAI,OAAO,CAAA;CAChB;AAED,kFAAkF;AAClF,MAAM,WAAW,oBAAoB;IACnC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,YAAY,CAAA;IAC7C,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAClC,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,wCAAwC;IACxC,KAAK,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;QAAC,YAAY,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;KAAE,CAAA;CAC5F;AAkBD;;;GAGG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAqC;IAC7D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAqB;IAClD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAQ;IACrC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAQ;IACtC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAQ;IACrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAqF;IAE3G,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,GAAG,CAAoB;IAC/B,OAAO,CAAC,KAAK,CAAoB;IACjC,OAAO,CAAC,SAAS,CAAoB;IACrC,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAI;IACpB,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAmC;IAChE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAwC;IAEvE;;OAEG;gBACS,OAAO,GAAE,oBAAyB;IAS9C,gCAAgC;IAChC,IAAI,IAAI,IAAI,UAAU,CAMrB;IAED;;;;;OAKG;IACH,KAAK,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAS9B,uDAAuD;IACvD,IAAI,IAAI,IAAI;IAOZ,wDAAwD;IACxD,OAAO,IAAI,IAAI;IAIf,4EAA4E;IAC5E,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI;IAKlD,uCAAuC;IACvC,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAAG,MAAM,IAAI;IAKzD,OAAO,CAAC,OAAO;IAoCf,OAAO,CAAC,SAAS;IAkBjB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,IAAI;IAqBZ,iFAAiF;IACjF,OAAO,CAAC,QAAQ;IAgBhB,OAAO,CAAC,QAAQ;CAWjB"}

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@linxin666/dsh-remote-web-ui",
+  "description": "Mobile remote control for the dsh web GUI: scan-to-pair QR entry beside the settings button, one-time pairing tokens, live device status, and revocable mobile sessions",
+  "version": "0.1.1",
+  "type": "module",
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0"
+  },
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./invariant": {
+      "types": "./lib/types/invariant.d.ts",
+      "default": "./lib/invariant.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/invariant.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts",
+    "lib/types/**/*.d.ts.map",
+    "src",
+    "cordis.patch.yml"
+  ],
+  "license": "BSD-3-Clause",
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-sidebar"
+      ],
+      "platform": "web"
+    }
+  },
+  "dependencies": {
+    "cloudflared": "^0.7.3",
+    "clsx": "^2.1.1",
+    "qrcode.react": "^4.2.0",
+    "schemastery": "^3.18.0",
+    "zod": "^4.4.3"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-sidebar": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-invariants": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-sidebar": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-host-apiproxy": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-invariants": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^22.20.0",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
+    "jsdom": "29.1.1",
+    "lightningcss": "^1.32.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsdown": "^0.22.2",
+    "typescript": "^6.0.3",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.1.8"
+  },
+  "scripts": {
+    "build": "tsc -b && tsdown",
+    "test": "vitest run",
+    "typecheck": "tsc -b --pretty false"
+  }
+}

package/src/client/PairFailedNotice.tsx

@@ -0,0 +1,33 @@
+/**
+ * One-time failed-pairing notice: a fixed toast rendered on the phone after
+ * a QR accept failed (invalid/used token or a network error). Mounted by
+ * the client apply with a plain React root — no slot machinery for a
+ * transient diagnostic.
+ */
+import { useEffect, useState } from 'react'
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import css from './remote.module.css'
+
+/** Notice props: localized copy. */
+export interface PairFailedNoticeProps {
+  t: TranslateNS<'remote'>
+}
+
+/**
+ * Render the failed-pair toast (auto-dismisses).
+ * @param props - localized copy.
+ * @returns the toast element.
+ */
+export function PairFailedNotice({ t }: PairFailedNoticeProps) {  const [visible, setVisible] = useState(true)
+  useEffect(() => {
+    const timer = window.setTimeout(() => { setVisible(false) }, 8000)
+    return () => { window.clearTimeout(timer) }
+  }, [])
+  if (!visible) return null
+  return (
+    <div className={css.notice} role="alert">
+      <p className={css.noticeTitle}>{t('pair.failed.title')}</p>
+      <p className={css.noticeDetail}>{t('pair.failed.detail')}</p>
+    </div>
+  )
+}

package/src/client/PhoneIcon.tsx

@@ -0,0 +1,31 @@
+/**
+ * Phone glyph for the sidebar remote-control trigger. Not part of the
+ * shared icon set (ui-primitives has no phone icon); matches the outline
+ * style with currentColor strokes.
+ */
+
+/** Icon props mirroring ui-primitives' IconProps. */
+export interface PhoneIconProps {
+  /** Glyph size in px (default 16). */
+  size?: number
+  /** Extra class for layout placement. */
+  className?: string
+}
+
+/**
+ * Render the phone icon.
+ * @param props - size and optional class.
+ * @returns the svg element.
+ */
+export function PhoneIcon({ size = 16, className }: PhoneIconProps) {
+  return (
+    <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path
+        d="M4.2 1.8h2.4l.9 2.4-1.5 1.1a7.4 7.4 0 0 0 4.7 4.7l1.1-1.5 2.4.9v2.4a.9.9 0 0 1-1 .9A11.4 11.4 0 0 1 3.3 2.8a.9.9 0 0 1 .9-1Z"
+        stroke="currentColor"
+        strokeWidth="1.3"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

package/src/client/PluginSettingsCard.tsx

@@ -0,0 +1,207 @@
+/**
+ * Shared chrome for the plugin settings card: a disclosure header naming the
+ * plugin and what its settings govern, the controls inside, and the save that
+ * writes them. Renders nothing while the namespace is unavailable — a
+ * deployment that does not compose the owning plugin should show no trace of
+ * it. Mirrors the official ui-plugin-config PluginCard in a self-contained
+ * slice (this package must not depend on a sibling UI package).
+ */
+
+import { useState, type ReactNode } from 'react'
+import type { CardShell } from './settings-form.ts'
+import type { SettingsCardKey } from './locales.ts'
+import css from './settings-card.module.css'
+
+/** Card chrome shared by every plugin settings card. */
+export interface PluginSettingsCardProps {
+  /** Locale reader for this card's copy. */
+  t: (key: SettingsCardKey) => string
+  /** Locale key of the plugin's name. */
+  titleKey: SettingsCardKey
+  /** Locale key of the line describing what this plugin's settings govern. */
+  descriptionKey: SettingsCardKey
+  /** The card's form state: availability, writability, and what a save would do. */
+  state: CardShell
+  /** Write every staged edit. */
+  onSave: () => void
+  /** Drop every staged edit. */
+  onDiscard: () => void
+  /** The plugin's controls. */
+  children: ReactNode
+}
+
+/**
+ * Render one plugin settings card.
+ * @param props - the plugin's copy keys, its form state, and its controls.
+ * @returns the card, or nothing when the namespace is unavailable.
+ */
+export function PluginSettingsCard(props: PluginSettingsCardProps) {
+  const [open, setOpen] = useState(false)
+  const { state } = props
+  if (!state.available) return null
+  const title = props.t(props.titleKey)
+  const blocked = !state.dirty || state.invalid || state.saving
+  return (
+    <li className={css.card}>
+      <button
+        type="button"
+        className={css.header}
+        aria-expanded={open}
+        aria-label={`${props.t(open ? 'settings.collapse' : 'settings.expand')}: ${title}`}
+        onClick={() => { setOpen(!open) }}
+      >
+        <span className={css.headText}>
+          <span className={css.name}>{title}</span>
+          <span className={css.description}>{props.t(props.descriptionKey)}</span>
+        </span>
+        {state.dirty ? <span className={css.pending}>{props.t('settings.unsaved')}</span> : null}
+        <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+      </button>
+      {open
+        ? (
+          <div className={css.body}>
+            {!state.writable ? <p className={css.readOnly} role="status">{props.t('settings.readOnly')}</p> : null}
+            {props.children}
+            <div className={css.footer}>
+              {state.failed ? <p className={css.failed} role="status">{props.t('settings.saveFailed')}</p> : null}
+              <button
+                type="button"
+                className={css.discard}
+                disabled={!state.dirty || state.saving}
+                onClick={props.onDiscard}
+              >
+                {props.t('settings.discard')}
+              </button>
+              <button
+                type="button"
+                className={css.save}
+                disabled={blocked}
+                onClick={props.onSave}
+              >
+                {props.t(!state.saving ? 'settings.save' : 'settings.saving')}
+              </button>
+            </div>
+          </div>
+        )
+        : null}
+    </li>
+  )
+}
+
+/** Props every field control needs regardless of its value type. */
+export interface FieldProps {
+  /** Stable id associating the label with its control. */
+  id: string
+  /** Visible label. */
+  label: string
+  /** One-line explanation rendered under the control. */
+  hint: string
+  /** Draft text this control renders. */
+  text: string
+  /** True when saving would leave a user-layer entry for this field. */
+  overridden: boolean
+  /** True when the draft is not a value this field accepts. */
+  invalid: boolean
+  /** Copy for the overridden badge. */
+  overriddenLabel: string
+  /** Copy for the reset control. */
+  resetLabel: string
+  /** Copy shown in place of the hint while the draft is invalid. */
+  invalidLabel: string
+  /** Disables every control (read-only document, or an unavailable namespace). */
+  disabled: boolean
+  /** Stage draft text. */
+  onEdit: (text: string) => void
+  /** Stage a clear so the field re-inherits the composition layer. */
+  onReset: () => void
+}
+
+/** A staged value field. `numeric` only hints the keypad: which drafts a field accepts is decided by its spec. */
+export function ValueField(props: FieldProps & {
+  /** Hints a numeric keypad without narrowing what the control accepts. */
+  numeric?: boolean
+  /** Placeholder shown while the draft is empty. */
+  placeholder?: string
+}) {
+  return (
+    <div className={css.field}>
+      <div className={css.head}>
+        <label className={css.label} htmlFor={props.id}>{props.label}</label>
+        {props.overridden
+          ? (
+            <span className={css.badges}>
+              <span className={css.badge}>{props.overriddenLabel}</span>
+              <button
+                type="button"
+                className={css.reset}
+                disabled={props.disabled}
+                onClick={props.onReset}
+              >
+                {props.resetLabel}
+              </button>
+            </span>
+          )
+          : null}
+      </div>
+      <input
+        id={props.id}
+        className={props.invalid ? css.inputInvalid : css.input}
+        type="text"
+        {...props.numeric === true ? { inputMode: 'numeric' as const } : {}}
+        {...props.invalid ? { 'aria-invalid': true } : {}}
+        value={props.text}
+        placeholder={props.placeholder ?? ''}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      />
+      <p className={props.invalid ? css.invalid : css.hint}>
+        {props.invalid ? props.invalidLabel : props.hint}
+      </p>
+    </div>
+  )
+}
+
+/** A staged boolean field: 继承 / 开 / 关. */
+export function BooleanField(props: FieldProps & {
+  /** Copy for the inherit option. */
+  inheritLabel: string
+  /** Copy for the on option. */
+  onLabel: string
+  /** Copy for the off option. */
+  offLabel: string
+}) {
+  return (
+    <div className={css.field}>
+      <div className={css.head}>
+        <label className={css.label} htmlFor={props.id}>{props.label}</label>
+        {props.overridden
+          ? (
+            <span className={css.badges}>
+              <span className={css.badge}>{props.overriddenLabel}</span>
+              <button
+                type="button"
+                className={css.reset}
+                disabled={props.disabled}
+                onClick={props.onReset}
+              >
+                {props.resetLabel}
+              </button>
+            </span>
+          )
+          : null}
+      </div>
+      <select
+        id={props.id}
+        className={css.select}
+        value={props.text}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      >
+        <option value="">{props.inheritLabel}</option>
+        <option value="true">{props.onLabel}</option>
+        <option value="false">{props.offLabel}</option>
+      </select>
+      <p className={css.hint}>{props.hint}</p>
+    </div>
+  )
+}