@carlesandres/house 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -6,6 +6,15 @@ The publish workflow (`.github/workflows/publish.yml`) runs on the `release: pub
 
 ## [Unreleased]
 
+## [0.8.0] — 2026-08-30
+
+### Added
+
+- `@house/options` specs may declare `footer: { icon, activate? }` so House can derive clickable footer controls from the catalog; wrap's `W` indicator now comes from that opt-in instead of a hard-coded Browser entry.
+- Footer `T` and `O` controls cycle theme and File Navigator browse order one step forward (with a short notice), so multi-value options are adjustable without leaving the keyboard-or-click chrome.
+- Choice footer controls show a declared short abbreviation of the current value (for example `op` / `re`) instead of a fixed letter, so the chip itself reflects state between Activate clicks.
+
+
 ## [0.7.0] — 2026-08-30
 
 ### Added
@@ -433,7 +442,8 @@ The v1 MVP, published as `@carlesandres/openmdr` on npm.
 
 Search, stdin, URL fetching, cross-file link following, `$EDITOR` hand-off, syntax highlighting, persistent config, OS-appearance auto-detect, single-binary distribution (issue [#2](https://github.com/carlesandres/openmdr/issues/2)), Homebrew tap. All tracked.
 
-[Unreleased]: https://github.com/carlesandres/house/compare/v0.7.0...HEAD
+[Unreleased]: https://github.com/carlesandres/house/compare/v0.8.0...HEAD
+[0.8.0]: https://github.com/carlesandres/house/compare/v0.7.0...v0.8.0
 [0.7.0]: https://github.com/carlesandres/house/compare/v0.6.0...v0.7.0
 [0.6.0]: https://github.com/carlesandres/house/compare/v0.5.2...v0.6.0
 [0.5.2]: https://github.com/carlesandres/house/compare/v0.5.1...v0.5.2

package/dist/index.js

@@ -3066,7 +3066,7 @@ import { useState as useState6 } from "react";
 // package.json
 var package_default = {
   name: "@carlesandres/house",
-  version: "0.7.0",
+  version: "0.8.0",
   description: "TUI-first markdown reader on opentui",
   type: "module",
   license: "MIT",
@@ -3162,6 +3162,279 @@ var package_default = {
 // src/Browser.tsx
 import { join as join4 } from "path";
 import { SyntaxStyle } from "@opentui/core";
+
+// ../../packages/options/src/footer.ts
+var footerActivate = (spec) => {
+  if (spec.footer?.activate !== undefined)
+    return spec.footer.activate;
+  if (spec.type === "boolean")
+    return "toggle";
+  if (spec.type === "string" && spec.choices !== undefined && spec.choices.length > 0) {
+    return "cycle";
+  }
+  return;
+};
+var footerKeys = (specs) => {
+  const keys = [];
+  for (const key of Object.keys(specs)) {
+    if (specs[key]?.footer !== undefined)
+      keys.push(key);
+  }
+  return keys;
+};
+var nextFooterValue = (spec, current) => {
+  const activate = footerActivate(spec);
+  if (activate === "toggle") {
+    if (spec.type !== "boolean") {
+      throw new Error('footer activate "toggle" requires a boolean option');
+    }
+    return !current;
+  }
+  if (activate === "cycle") {
+    if (spec.type !== "string" || spec.choices === undefined || spec.choices.length === 0) {
+      throw new Error('footer activate "cycle" requires a string option with choices');
+    }
+    const choices = spec.choices;
+    const currentIndex = choices.indexOf(current);
+    const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % choices.length;
+    return choices[nextIndex];
+  }
+  throw new Error("option has no footer activate strategy");
+};
+var footerControlActive = (spec, value) => {
+  if (spec.type === "boolean")
+    return Boolean(value);
+  return true;
+};
+var footerControlGlyph = (spec, value) => {
+  const footer = spec.footer;
+  if (footer === undefined) {
+    throw new Error("footerControlGlyph requires a footer-opted spec");
+  }
+  if (typeof value === "string" && footer.labels !== undefined) {
+    const label = footer.labels[value];
+    if (label !== undefined && label.length > 0)
+      return label;
+  }
+  return footer.icon;
+};
+var validateFooterSpecs = (specs) => {
+  for (const key of Object.keys(specs)) {
+    const spec = specs[key];
+    const footer = spec.footer;
+    if (footer === undefined)
+      continue;
+    if (footer.icon.length === 0) {
+      throw new Error(`option ${JSON.stringify(key)}: footer.icon must be non-empty`);
+    }
+    const activate = footerActivate(spec);
+    if (activate === undefined) {
+      throw new Error(`option ${JSON.stringify(key)}: footer requires activate "toggle" or "cycle" ` + "(booleans toggle; strings with choices cycle; other types need an explicit strategy)");
+    }
+    if (activate === "toggle" && spec.type !== "boolean") {
+      throw new Error(`option ${JSON.stringify(key)}: footer activate "toggle" requires type "boolean"`);
+    }
+    if (activate === "cycle") {
+      if (spec.type !== "string" || spec.choices === undefined || spec.choices.length === 0) {
+        throw new Error(`option ${JSON.stringify(key)}: footer activate "cycle" requires string choices`);
+      }
+      const labels = footer.labels;
+      if (labels === undefined) {
+        throw new Error(`option ${JSON.stringify(key)}: footer.labels is required for choice options`);
+      }
+      for (const choice of spec.choices) {
+        const label = labels[choice];
+        if (label === undefined || label.length === 0) {
+          throw new Error(`option ${JSON.stringify(key)}: footer.labels missing entry for ${JSON.stringify(choice)}`);
+        }
+      }
+    }
+  }
+};
+
+// ../../packages/options/src/decode.ts
+var isPresent = (value) => value !== undefined && value !== null;
+var stringifyReceived = (value) => {
+  if (typeof value === "string")
+    return JSON.stringify(value);
+  if (typeof value === "number" || typeof value === "boolean")
+    return JSON.stringify(value);
+  if (value === null)
+    return "null";
+  return typeof value;
+};
+var formatResolveError = (error, filePath) => {
+  if (error.layer === "file") {
+    const where = filePath === undefined ? "" : ` in ${filePath}`;
+    return `invalid value for ${error.key}${where}: ${error.message}`;
+  }
+  return `${error.key}: ${error.message}, got ${stringifyReceived(error.received)}`;
+};
+var fail = (key, layer, message, received) => ({
+  key,
+  layer,
+  message,
+  received
+});
+var booleanMessage = "expected true or false";
+var numberMessage = (spec) => {
+  if (spec.integer === true && spec.min === 1 && spec.max === undefined) {
+    return "expected a positive integer";
+  }
+  if (spec.integer === true)
+    return "expected an integer";
+  return "expected a number";
+};
+var inRange = (value, spec) => {
+  if (spec.min !== undefined && value < spec.min)
+    return false;
+  if (spec.max !== undefined && value > spec.max)
+    return false;
+  if (spec.integer === true && !Number.isSafeInteger(value))
+    return false;
+  if (!Number.isFinite(value))
+    return false;
+  return true;
+};
+var decodeBoolean = (key, layer, value) => {
+  if (layer === "env") {
+    if (value === "true")
+      return { ok: true, value: true };
+    if (value === "false")
+      return { ok: true, value: false };
+    return { ok: false, error: fail(key, layer, booleanMessage, value) };
+  }
+  if (typeof value === "boolean")
+    return { ok: true, value };
+  return { ok: false, error: fail(key, layer, booleanMessage, value) };
+};
+var decodeNumber = (key, layer, value, spec) => {
+  const message = numberMessage(spec);
+  if (layer === "env") {
+    if (typeof value !== "string" || !/^-?\d+(\.\d+)?$/.test(value)) {
+      return { ok: false, error: fail(key, layer, message, value) };
+    }
+    if (spec.integer === true && !/^-?\d+$/.test(value)) {
+      return { ok: false, error: fail(key, layer, message, value) };
+    }
+    const parsed = spec.integer === true ? Number.parseInt(value, 10) : Number.parseFloat(value);
+    if (!inRange(parsed, spec))
+      return { ok: false, error: fail(key, layer, message, value) };
+    return { ok: true, value: parsed };
+  }
+  if (typeof value !== "number" || !inRange(value, spec)) {
+    return { ok: false, error: fail(key, layer, message, value) };
+  }
+  return { ok: true, value };
+};
+var decodeString = (key, layer, value, spec) => {
+  if (typeof value !== "string") {
+    const message = spec.choices === undefined ? "expected a string" : `expected one of ${spec.choices.join(", ")}`;
+    return { ok: false, error: fail(key, layer, message, value) };
+  }
+  if (spec.choices !== undefined && !spec.choices.includes(value)) {
+    return {
+      ok: false,
+      error: fail(key, layer, `expected one of ${spec.choices.join(", ")}`, value)
+    };
+  }
+  return { ok: true, value };
+};
+var decodeValue = (key, spec, layer, value) => {
+  if (spec.type === "boolean")
+    return decodeBoolean(key, layer, value);
+  if (spec.type === "number")
+    return decodeNumber(key, layer, value, spec);
+  return decodeString(key, layer, value, spec);
+};
+
+// ../../packages/options/src/resolve.ts
+var LAYERS = ["cli", "env", "file"];
+var resolveOptions = (specs, layers = {}) => {
+  const values = {};
+  for (const key of Object.keys(specs)) {
+    const spec = specs[key];
+    let found = false;
+    for (const layer of LAYERS) {
+      const source = layers[layer];
+      if (source === undefined)
+        continue;
+      const raw = source[key];
+      if (!isPresent(raw))
+        continue;
+      const decoded = decodeValue(key, spec, layer, raw);
+      if (!decoded.ok)
+        return decoded;
+      values[key] = decoded.value;
+      found = true;
+      break;
+    }
+    if (!found)
+      values[key] = spec.default;
+  }
+  return { ok: true, value: values };
+};
+var catalogDefaults = (specs) => {
+  const values = {};
+  for (const key of Object.keys(specs))
+    values[key] = specs[key].default;
+  return values;
+};
+
+// ../../packages/options/src/session.ts
+var persistPolicy = (persist) => persist ?? "session";
+var createSession = (specs, values, options = {}) => {
+  let snapshot = values;
+  const listeners = new Set;
+  const get = (key) => snapshot[key];
+  const set = async (key, value) => {
+    const spec = specs[key];
+    if (spec === undefined) {
+      throw new Error(`unknown option ${JSON.stringify(key)}`);
+    }
+    const decoded = decodeValue(key, spec, "cli", value);
+    if (!decoded.ok) {
+      throw new Error(`${decoded.error.key}: ${decoded.error.message}`);
+    }
+    if (Object.is(snapshot[key], decoded.value))
+      return;
+    snapshot = { ...snapshot, [key]: decoded.value };
+    for (const listener of listeners)
+      listener(snapshot);
+    if (persistPolicy(spec.persist) === "file" && options.persist !== undefined) {
+      await options.persist({
+        key,
+        value: decoded.value,
+        values: snapshot
+      });
+    }
+  };
+  return {
+    get,
+    set,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    get values() {
+      return snapshot;
+    }
+  };
+};
+
+// ../../packages/options/src/define.ts
+var defineOptions = (specs) => {
+  validateFooterSpecs(specs);
+  return {
+    specs,
+    defaults: catalogDefaults(specs),
+    resolve: (layers) => resolveOptions(specs, layers),
+    createSession: (values, options) => createSession(specs, values, options)
+  };
+};
+// src/Browser.tsx
 import { useKeyboard, useRenderer, useTerminalDimensions as useTerminalDimensions2 } from "@opentui/react";
 import { useAtomValue, useAtomSet } from "@effect/atom-react";
 import { Effect as Effect3 } from "effect";
@@ -4090,7 +4363,7 @@ var BRAND = "\u2302";
 var BRAND_NAME = "house";
 
 // src/Footer.tsx
-import stringWidth from "string-width";
+import stringWidth2 from "string-width";
 
 // src/keymap/displayKey.ts
 var displayKey = (raw) => {
@@ -4145,7 +4418,9 @@ var Spinner = ({
 };
 
 // src/StatusIndicator.tsx
+import stringWidth from "string-width";
 import { jsxDEV as jsxDEV5 } from "@opentui/react/jsx-dev-runtime";
+var statusIndicatorWidth = (icon) => 2 + Math.max(1, stringWidth(icon));
 var statusIndicatorFg = (variant) => {
   switch (variant) {
     case "info":
@@ -4164,18 +4439,20 @@ var StatusIndicator = ({
   active = true,
   onMouseUp
 }) => {
+  const glyph = icon.toLocaleUpperCase();
   const activeColor = statusIndicatorFg(variant);
   const backgroundColor = active ? activeColor : colors.backgroundElement;
+  const width = statusIndicatorWidth(glyph);
   return /* @__PURE__ */ jsxDEV5("box", {
     ...onMouseUp === undefined ? {} : { onMouseUp },
     style: {
-      width: 3,
+      width,
       height: 1,
       flexDirection: "row",
       backgroundColor
     },
     children: /* @__PURE__ */ jsxDEV5("text", {
-      content: ` ${icon} `,
+      content: ` ${glyph} `,
       wrapMode: "none",
       style: {
         fg: active ? colors.backgroundPanel : colors.textMuted,
@@ -4191,7 +4468,7 @@ import { jsxDEV as jsxDEV6 } from "@opentui/react/jsx-dev-runtime";
 var FOOTER_HEIGHT = 1;
 var normalizeStatusLine = (status) => status.replace(/\s+/g, " ").trim();
 var HINT_SEPARATOR = "  ";
-var hintWidth = (h) => stringWidth(h.key) + 1 + stringWidth(h.label);
+var hintWidth = (h) => stringWidth2(h.key) + 1 + stringWidth2(h.label);
 var formatHint = (b) => {
   if (!b.hint)
     return null;
@@ -4218,6 +4495,8 @@ var fitHints = (hints, width) => {
   return [{ key: first.key.slice(0, width), label: "" }];
 };
 var STATUS_SEPARATOR = " \xB7 ";
+var INDICATOR_SEPARATOR = " ";
+var INDICATOR_SEPARATOR_WIDTH = 1;
 var NON_WARNING_STATUS_PREFIX_WIDTH = 2;
 var isPartialDiscoveryWarning = (status) => status?.startsWith("scan incomplete:") ?? false;
 var Footer = ({
@@ -4265,7 +4544,9 @@ var Footer = ({
     ] : [],
     ...indicators
   ];
-  const indicatorBudget = Math.min(usableWidth, renderedIndicators.length * 3);
+  const indicatorWidths = renderedIndicators.map((indicator) => statusIndicatorWidth(indicator.icon));
+  const indicatorSeparatorBudget = renderedIndicators.length > 1 ? (renderedIndicators.length - 1) * INDICATOR_SEPARATOR_WIDTH : 0;
+  const indicatorBudget = Math.min(usableWidth, indicatorWidths.reduce((sum, width2) => sum + width2, 0) + indicatorSeparatorBudget);
   const hasContentAfterIndicators = notice !== null || status !== null || hints.length > 0;
   const indicatorContentGapBudget = renderedIndicators.length > 0 && hasContentAfterIndicators && indicatorBudget < usableWidth ? 1 : 0;
   const contentBudget = Math.max(0, usableWidth - indicatorBudget - indicatorContentGapBudget);
@@ -4277,9 +4558,21 @@ var Footer = ({
   const statusContent = status ? status.slice(0, Math.max(0, statusBudget - statusChromeWidth)) : "";
   const statusSeparatorContent = status ? STATUS_SEPARATOR.slice(0, Math.max(0, statusBudget - nonWarningStatusPrefixBudget - statusContent.length)) : "";
   const noticeContent = notice ? notice.length > contentBudget ? notice.slice(0, contentBudget) : notice : null;
-  const renderIndicators = () => renderedIndicators.map(({ id, ...props }) => /* @__PURE__ */ jsxDEV6(StatusIndicator, {
-    ...props
-  }, id, false, undefined, this));
+  const renderIndicators = () => renderedIndicators.flatMap(({ id, ...props }, index) => {
+    const chip = /* @__PURE__ */ jsxDEV6(StatusIndicator, {
+      ...props
+    }, id, false, undefined, this);
+    if (index === 0)
+      return [chip];
+    return [
+      /* @__PURE__ */ jsxDEV6("text", {
+        content: INDICATOR_SEPARATOR,
+        wrapMode: "none",
+        style: { fg: colors.textMuted }
+      }, `indicator-sep-${id}`, false, undefined, this),
+      chip
+    ];
+  });
   const renderIndicatorContentGap = () => indicatorContentGapBudget > 0 ? /* @__PURE__ */ jsxDEV6("text", {
     content: " ",
     wrapMode: "none",
@@ -12742,192 +13035,72 @@ var map = loadBundledThemes();
 var themeDefinitions = [...map.values()];
 var getThemeDefinition = (id) => map.get(id);
 
-// ../../packages/options/src/decode.ts
-var isPresent = (value) => value !== undefined && value !== null;
-var stringifyReceived = (value) => {
-  if (typeof value === "string")
-    return JSON.stringify(value);
-  if (typeof value === "number" || typeof value === "boolean")
-    return JSON.stringify(value);
-  if (value === null)
-    return "null";
-  return typeof value;
-};
-var formatResolveError = (error, filePath) => {
-  if (error.layer === "file") {
-    const where = filePath === undefined ? "" : ` in ${filePath}`;
-    return `invalid value for ${error.key}${where}: ${error.message}`;
-  }
-  return `${error.key}: ${error.message}, got ${stringifyReceived(error.received)}`;
-};
-var fail = (key, layer, message, received) => ({
-  key,
-  layer,
-  message,
-  received
-});
-var booleanMessage = "expected true or false";
-var numberMessage = (spec) => {
-  if (spec.integer === true && spec.min === 1 && spec.max === undefined) {
-    return "expected a positive integer";
-  }
-  if (spec.integer === true)
-    return "expected an integer";
-  return "expected a number";
-};
-var inRange = (value, spec) => {
-  if (spec.min !== undefined && value < spec.min)
-    return false;
-  if (spec.max !== undefined && value > spec.max)
-    return false;
-  if (spec.integer === true && !Number.isSafeInteger(value))
-    return false;
-  if (!Number.isFinite(value))
-    return false;
-  return true;
-};
-var decodeBoolean = (key, layer, value) => {
-  if (layer === "env") {
-    if (value === "true")
-      return { ok: true, value: true };
-    if (value === "false")
-      return { ok: true, value: false };
-    return { ok: false, error: fail(key, layer, booleanMessage, value) };
-  }
-  if (typeof value === "boolean")
-    return { ok: true, value };
-  return { ok: false, error: fail(key, layer, booleanMessage, value) };
-};
-var decodeNumber = (key, layer, value, spec) => {
-  const message = numberMessage(spec);
-  if (layer === "env") {
-    if (typeof value !== "string" || !/^-?\d+(\.\d+)?$/.test(value)) {
-      return { ok: false, error: fail(key, layer, message, value) };
-    }
-    if (spec.integer === true && !/^-?\d+$/.test(value)) {
-      return { ok: false, error: fail(key, layer, message, value) };
-    }
-    const parsed = spec.integer === true ? Number.parseInt(value, 10) : Number.parseFloat(value);
-    if (!inRange(parsed, spec))
-      return { ok: false, error: fail(key, layer, message, value) };
-    return { ok: true, value: parsed };
-  }
-  if (typeof value !== "number" || !inRange(value, spec)) {
-    return { ok: false, error: fail(key, layer, message, value) };
-  }
-  return { ok: true, value };
-};
-var decodeString = (key, layer, value, spec) => {
-  if (typeof value !== "string") {
-    const message = spec.choices === undefined ? "expected a string" : `expected one of ${spec.choices.join(", ")}`;
-    return { ok: false, error: fail(key, layer, message, value) };
-  }
-  if (spec.choices !== undefined && !spec.choices.includes(value)) {
-    return {
-      ok: false,
-      error: fail(key, layer, `expected one of ${spec.choices.join(", ")}`, value)
-    };
+// src/config/footerControls.ts
+var footerControlsFromSession = (options, session, handlers = {}) => {
+  const controls = [];
+  for (const key of footerKeys(options.specs)) {
+    const spec = options.specs[key];
+    const footer = spec.footer;
+    if (footer === undefined)
+      continue;
+    const value = session.get(key);
+    const handler = handlers[key];
+    controls.push({
+      id: key,
+      icon: footerControlGlyph(spec, value),
+      variant: "info",
+      active: handler?.active ?? footerControlActive(spec, value),
+      onMouseUp: () => {
+        if (handler?.onActivate !== undefined) {
+          handler.onActivate();
+          return;
+        }
+        const current = session.get(key);
+        session.set(key, nextFooterValue(spec, current));
+      }
+    });
   }
-  return { ok: true, value };
-};
-var decodeValue = (key, spec, layer, value) => {
-  if (spec.type === "boolean")
-    return decodeBoolean(key, layer, value);
-  if (spec.type === "number")
-    return decodeNumber(key, layer, value, spec);
-  return decodeString(key, layer, value, spec);
+  return controls;
 };
 
-// ../../packages/options/src/resolve.ts
-var LAYERS = ["cli", "env", "file"];
-var resolveOptions = (specs, layers = {}) => {
-  const values = {};
-  for (const key of Object.keys(specs)) {
-    const spec = specs[key];
-    let found = false;
-    for (const layer of LAYERS) {
-      const source = layers[layer];
-      if (source === undefined)
-        continue;
-      const raw = source[key];
-      if (!isPresent(raw))
-        continue;
-      const decoded = decodeValue(key, spec, layer, raw);
-      if (!decoded.ok)
-        return decoded;
-      values[key] = decoded.value;
-      found = true;
-      break;
+// src/config/footerLabels.ts
+var uniqueFooterLabels = (ids) => {
+  const used = new Set;
+  const out = {};
+  for (const id of ids) {
+    const compact = id.replace(/[^a-zA-Z0-9]+/g, "").toLowerCase();
+    const source = compact.length > 0 ? compact : "x";
+    let label = source.slice(0, 2).padEnd(2, "x");
+    let offset = 2;
+    while (used.has(label)) {
+      const next = source[offset];
+      if (next !== undefined) {
+        label = `${source[0]}${next}`;
+        offset += 1;
+      } else {
+        label = `${source[0]}${used.size % 10}`;
+        offset += 1;
+        if (offset > source.length + 20) {
+          throw new Error(`unable to allocate unique footer label for ${JSON.stringify(id)}`);
+        }
+      }
     }
-    if (!found)
-      values[key] = spec.default;
+    used.add(label);
+    out[id] = label;
   }
-  return { ok: true, value: values };
-};
-var catalogDefaults = (specs) => {
-  const values = {};
-  for (const key of Object.keys(specs))
-    values[key] = specs[key].default;
-  return values;
-};
-
-// ../../packages/options/src/session.ts
-var persistPolicy = (persist) => persist ?? "session";
-var createSession = (specs, values, options = {}) => {
-  let snapshot = values;
-  const listeners = new Set;
-  const get = (key) => snapshot[key];
-  const set = async (key, value) => {
-    const spec = specs[key];
-    if (spec === undefined) {
-      throw new Error(`unknown option ${JSON.stringify(key)}`);
-    }
-    const decoded = decodeValue(key, spec, "cli", value);
-    if (!decoded.ok) {
-      throw new Error(`${decoded.error.key}: ${decoded.error.message}`);
-    }
-    if (Object.is(snapshot[key], decoded.value))
-      return;
-    snapshot = { ...snapshot, [key]: decoded.value };
-    for (const listener of listeners)
-      listener(snapshot);
-    if (persistPolicy(spec.persist) === "file" && options.persist !== undefined) {
-      await options.persist({
-        key,
-        value: decoded.value,
-        values: snapshot
-      });
-    }
-  };
-  return {
-    get,
-    set,
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    get values() {
-      return snapshot;
-    }
-  };
+  return out;
 };
 
-// ../../packages/options/src/define.ts
-var defineOptions = (specs) => ({
-  specs,
-  defaults: catalogDefaults(specs),
-  resolve: (layers) => resolveOptions(specs, layers),
-  createSession: (values, options) => createSession(specs, values, options)
-});
 // src/config/options.ts
 var FILE_NAVIGATOR_ORDERS = ["tree", "recently-modified"];
+var themeIds = themeDefinitions.map((theme) => theme.id);
+var themeFooterLabels = uniqueFooterLabels(themeIds);
 var houseOptions = defineOptions({
   wrap: {
     type: "boolean",
     default: false,
-    persist: "session"
+    persist: "session",
+    footer: { icon: "W" }
   },
   width: {
     type: "number",
@@ -12939,7 +13112,8 @@ var houseOptions = defineOptions({
     type: "string",
     default: "opencode",
     persist: "file",
-    choices: themeDefinitions.map((theme) => theme.id)
+    choices: themeIds,
+    footer: { icon: "T", labels: themeFooterLabels }
   },
   tone: {
     type: "string",
@@ -12960,7 +13134,15 @@ var houseOptions = defineOptions({
   order: {
     type: "string",
     default: "recently-modified",
-    choices: FILE_NAVIGATOR_ORDERS
+    choices: FILE_NAVIGATOR_ORDERS,
+    persist: "session",
+    footer: {
+      icon: "O",
+      labels: {
+        tree: "tr",
+        "recently-modified": "re"
+      }
+    }
   }
 });
 
@@ -13297,6 +13479,7 @@ var persistHouseOption = async (event, path) => {
 
 // src/Browser.tsx
 import { jsxDEV as jsxDEV13 } from "@opentui/react/jsx-dev-runtime";
+var asFileNavigatorOrder = (value) => typeof value === "string" && FILE_NAVIGATOR_ORDERS.includes(value) ? value : "recently-modified";
 var defaultReadFile = (path) => Effect3.runPromise(readFileText(path));
 var defaultDiscoveryPolicy = {
   revision: "house-markdown",
@@ -13378,15 +13561,17 @@ var Browser = ({
       wrap: initialWrap,
       width: wrapWidth,
       theme: theme.id,
-      tone: theme.tone
+      tone: theme.tone,
+      order: asFileNavigatorOrder(order)
     }, { persist: persistHouseOption });
   }
   const wrapEnabled = useSyncExternalStore(optionsSession.current.subscribe, () => optionsSession.current.get("wrap"));
+  const browseOrder = useSyncExternalStore(optionsSession.current.subscribe, () => asFileNavigatorOrder(optionsSession.current.get("order")));
   const toggleWrap = () => {
     const session = optionsSession.current;
     if (session === null)
       return;
-    session.set("wrap", !session.get("wrap"));
+    session.set("wrap", nextFooterValue(houseOptions.specs.wrap, session.get("wrap")));
   };
   const [loaded, setLoaded] = useState4(null);
   const [error, setError] = useState4(null);
@@ -13606,6 +13791,14 @@ var Browser = ({
     rememberAppearance(session.set("theme", next.id));
     pushFooterNotice(`theme: ${next.name}`);
   };
+  const cycleOrder = () => {
+    const session = optionsSession.current;
+    if (session === null)
+      return;
+    const next = nextFooterValue(houseOptions.specs.order, session.get("order"));
+    session.set("order", next);
+    pushFooterNotice(`order: ${next}`);
+  };
   const toggleTone = () => {
     const session = optionsSession.current;
     if (session === null)
@@ -14326,15 +14519,11 @@ var Browser = ({
     width,
     notice: footerNotice?.text ?? null,
     discoveryStatus: effectiveDiscoveryStatus,
-    indicators: [
-      {
-        id: "wrap",
-        icon: "W",
-        variant: "info",
-        active: wrapEnabled,
-        onMouseUp: toggleWrap
-      }
-    ],
+    indicators: optionsSession.current === null ? [] : footerControlsFromSession(houseOptions, optionsSession.current, {
+      wrap: { onActivate: toggleWrap },
+      theme: { onActivate: () => cycleTheme(1) },
+      order: { onActivate: cycleOrder }
+    }),
     ...discoverySpinnerIntervalMs === undefined ? {} : { discoverySpinnerIntervalMs },
     ...discoverySpinnerInitialFrameIndex === undefined ? {} : { discoverySpinnerInitialFrameIndex },
     ...discoverySpinnerRegisterTick === undefined ? {} : { discoverySpinnerRegisterTick },
@@ -14369,7 +14558,7 @@ var Browser = ({
             root,
             policy,
             watch: watch2,
-            order,
+            order: browseOrder,
             debounceMs: filterDebounceMs,
             navigatorRef,
             snapshot: liveSnapshot,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carlesandres/house",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"description": "TUI-first markdown reader on opentui",
 	"type": "module",
 	"license": "MIT",
@@ -62,10 +62,10 @@
 		"version:set": "bun run dev/set-version.ts"
 	},
 	"optionalDependencies": {
-		"@carlesandres/house-darwin-arm64": "0.7.0",
-		"@carlesandres/house-darwin-x64": "0.7.0",
-		"@carlesandres/house-linux-arm64": "0.7.0",
-		"@carlesandres/house-linux-x64": "0.7.0"
+		"@carlesandres/house-darwin-arm64": "0.8.0",
+		"@carlesandres/house-darwin-x64": "0.8.0",
+		"@carlesandres/house-linux-arm64": "0.8.0",
+		"@carlesandres/house-linux-x64": "0.8.0"
 	},
 	"dependencies": {
 		"@effect/atom-react": "4.0.0-beta.60",