@rightkit/system-ui 0.0.0-stage → 0.1.0

package/dist/views/settingsKit.d.ts

@@ -0,0 +1,14 @@
+/**
+ * the host app's own pieces of the Settings look. Groups, rows, items, sections, the search provider and
+ * the search state (`useSettingsSearch`) are @rightkit/settings-ui; this file keeps only what
+ * settings-ui does not draw.
+ */
+/** Under a Permissions row: what switched-on features need it. Nothing when the notch does not say. */
+export declare function NeedsLine({ needs }: {
+    needs?: string[];
+}): import("react").JSX.Element | null;
+/** The browser's key event as a shortcut ("ctrl+opt+left"), or null when it
+ *  names no key or has no modifier. Matches the names in WindowShortcut.swift. */
+export declare function windowShortcutFrom(e: KeyboardEvent): string | null;
+/** The "Open <section>" button's text while searching. */
+export declare const openSectionLabel: (title: string) => string;

package/dist/views/settingsKit.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * the host app's own pieces of the Settings look. Groups, rows, items, sections, the search provider and
+ * the search state (`useSettingsSearch`) are @rightkit/settings-ui; this file keeps only what
+ * settings-ui does not draw.
+ */
+/** Under a Permissions row: what switched-on features need it. Nothing when the notch does not say. */
+export function NeedsLine({ needs }) {
+    if (!needs)
+        return null;
+    return (_jsx("div", { className: "ck-sub ck-foot ck-needs", children: needs.length > 0 ? `Needed for: ${needs.join(" · ")}` : "Not needed by anything you have on" }));
+}
+/** The browser's key event as a shortcut ("ctrl+opt+left"), or null when it
+ *  names no key or has no modifier. Matches the names in WindowShortcut.swift. */
+export function windowShortcutFrom(e) {
+    const names = {
+        ArrowLeft: "left", ArrowRight: "right", ArrowUp: "up", ArrowDown: "down",
+        Enter: "return", NumpadEnter: "return", Space: "space", Backspace: "delete", Tab: "tab",
+        Minus: "-", Equal: "=", BracketLeft: "[", BracketRight: "]", Comma: ",", Period: ".",
+        Slash: "/", Semicolon: ";", Quote: "'", Backslash: "\\", Backquote: "`",
+    };
+    let key = names[e.code] ?? "";
+    if (!key) {
+        const match = /^(?:Key|Digit)([A-Z0-9])$/.exec(e.code);
+        key = match ? match[1].toLowerCase() : "";
+    }
+    if (!key)
+        return null;
+    const mods = [];
+    if (e.ctrlKey)
+        mods.push("ctrl");
+    if (e.altKey)
+        mods.push("opt");
+    if (e.shiftKey)
+        mods.push("shift");
+    if (e.metaKey)
+        mods.push("cmd");
+    if (mods.length === 0)
+        return null;
+    return [...mods, key].join("+");
+}
+/** The "Open <section>" button's text while searching. */
+export const openSectionLabel = (title) => `Open ${title}`;

package/dist/views/storage.css

@@ -0,0 +1,121 @@
+/* Storage: one volume line, one workspace. Tokens come from styles.css and the app shell. */
+.view.st { gap: 10px; overflow: hidden; flex-wrap: nowrap; }
+.st > * { flex: none; min-width: 0; }
+.st :focus-visible { outline: 2px solid var(--rk-focus, var(--rk-accent)); outline-offset: 2px; }
+.st .num { min-width: 0; text-align: left; }
+
+.st-volume { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border: 1px solid var(--rk-hairline); border-radius: 12px; background: var(--rk-fill-2); }
+.st-volume-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
+.st-volume-icon { flex: none; color: var(--rk-accent); }
+.st-select { flex: 1 1 160px; min-width: 0; max-width: 340px; }
+.st-free { display: inline-flex; flex-wrap: wrap; gap: 0 4px; align-items: baseline; font-variant-numeric: tabular-nums; }
+.st-net-label { flex: none; padding: 0 6px; border-radius: 999px; background: var(--rk-fill-2); color: var(--rk-ink-2); font-size: 11px; line-height: 18px; }
+.st-volume-line > button { margin-left: auto; flex: none; }
+.st-volume .bar { flex: none; width: 100%; background: var(--rk-plane); }
+.st-volume-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 18px; }
+
+.st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 28px; font-size: 12px; }
+.st-meta-text { color: var(--rk-ink-2); }
+.st-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 2px 0 10px; min-height: 28px; border: 1px solid var(--rk-hairline); border-radius: 8px; background: var(--rk-fill-2); font-size: 12px; color: var(--rk-ink-2); }
+.st-chip-name { overflow-wrap: anywhere; color: var(--rk-ink); }
+
+
+.st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+
+
+.st-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: auto; scroll-padding: 10px; border-radius: 8px; }
+.st-scroll > * { flex: none; }
+
+.st-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--rk-hairline); border-radius: 12px; background: var(--rk-fill-2); }
+.st-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding-bottom: 4px; }
+.st-card-head > div { min-width: 0; }
+.st-h { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; line-height: 1.35; font-weight: 650; color: var(--rk-ink); overflow-wrap: anywhere; }
+.st-h svg { flex: none; color: var(--rk-accent); }
+.st-sub { margin: 0; font-size: 12px; color: var(--rk-ink-2); overflow-wrap: anywhere; }
+.st-card .finding { grid-template-columns: 16px minmax(0, 1fr) auto auto; padding: 6px 0; }
+
+.st-finding { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 4px 0; border-top: 1px solid var(--rk-hairline); }
+.st-disclose { display: flex; align-items: flex-start; gap: 6px; min-width: 0; min-height: 36px; padding: 2px 4px 2px 0; border-radius: 6px; color: var(--rk-ink); font: inherit; text-align: left; }
+.st-disclose > svg { flex: none; margin-top: 3px; color: var(--rk-ink-2); }
+.st-finding-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.st-finding-title { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; overflow-wrap: anywhere; }
+.st-reason { font-size: 12px; color: var(--rk-ink-2); overflow-wrap: anywhere; }
+.st-measure { display: flex; align-items: center; gap: 10px; }
+.st-measure .st-size { min-width: 64px; text-align: right; }
+.st-size { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--rk-ink); white-space: nowrap; }
+.st-sub-items { grid-column: 1 / -1; display: flex; flex-direction: column; padding-left: 20px; }
+.st-sub-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 4px 0; border-top: 1px dashed var(--rk-hairline); }
+.st-sub-item:first-child { border-top: 0; }
+.st-sub-item .st-size { font-weight: 400; color: var(--rk-ink-2); }
+.st-path { font-size: 12px; color: var(--rk-ink-2); overflow-wrap: anywhere; word-break: break-word; }
+.st-more-btn { align-self: flex-start; }
+
+.st-notes { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--rk-hairline); }
+.st-notes-head { font-size: 12px; font-weight: 600; color: var(--rk-ink-2); }
+.st-note { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 12px; color: var(--rk-ink-2); }
+.st-note > svg { margin-top: 2px; }
+.st-note-text { overflow-wrap: anywhere; }
+.st-note-size { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+.st-crumbs { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; font-size: 12px; }
+.st-crumbs > span { display: inline-flex; align-items: center; }
+.st-crumb-sep { flex: none; color: var(--rk-ink-3); }
+.st-search { width: 100%; box-sizing: border-box; height: 30px; flex: none; }
+.st-coverage { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--rk-ink-3); }
+
+.st-treemap { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--rk-plane); }
+.st-treemap text { paint-order: stroke; stroke: rgba(0, 0, 0, 0.6); stroke-width: 2.5px; stroke-linejoin: round; }
+
+.st-list { display: flex; flex-direction: column; }
+.st-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px 64px 28px; align-items: center; gap: 10px; min-height: 36px; padding: 4px 4px; border-top: 1px solid var(--rk-hairline); }
+.st-row.clickable { cursor: pointer; }
+.st-row.clickable:hover { background: var(--rk-plane); }
+.st-row:focus-visible { outline-offset: -2px; }
+.st-name { display: flex; align-items: flex-start; gap: 6px; min-width: 0; overflow-wrap: anywhere; color: var(--rk-ink); }
+.st-name > svg { flex: none; margin-top: 2px; color: var(--rk-ink-3); }
+.st-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
+.st-pct { text-align: right; font-size: 12px; color: var(--rk-ink-2); font-variant-numeric: tabular-nums; }
+.st-row .bar { flex: none; min-width: 0; background: var(--rk-plane); }
+
+.st-changes { display: flex; flex-direction: column; }
+.st-change { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 36px; padding: 4px; border-top: 1px solid var(--rk-hairline); color: var(--rk-ink); font: inherit; text-align: left; }
+.st-change:hover:not(:disabled) { background: var(--rk-plane); }
+.st-change span:first-child { overflow-wrap: anywhere; }
+.st-delta { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
+.st-delta.up { color: var(--rk-warn); }
+.st-delta.down { color: var(--rk-ok); }
+
+@media (max-width: 860px) {
+  .view.st { gap: 8px; padding: 10px 12px; }
+  .st-card { padding: 8px 10px; }
+  .st-row { grid-template-columns: minmax(0, 1fr) 64px 34px 60px 28px; gap: 8px; }
+  .st-split { flex-direction: column; }
+  .st-inspector { position: static; flex: none; width: 100%; box-sizing: border-box; }
+}
+@media (forced-colors: active) {
+  .st-card, .st-volume, .st-chip, .st-inspector { border-color: CanvasText; }
+  .st-row[aria-current="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
+  .st :focus-visible { outline-color: Highlight; }
+}
+
+/* Filters above the list: Kind, Size, the clear action and the count. */
+.st-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
+.st-filters .st-select { flex: 0 0 auto; width: auto; min-width: 128px; max-width: 100%; }
+.st-count { margin-left: auto; font-size: 12px; color: var(--rk-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* The list beside the inspector; below it on narrow widths. */
+.st-split { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
+.st-split-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0; }
+.st-row.selected { background: var(--rk-plane); box-shadow: inset 2px 0 0 var(--rk-accent); }
+.st-inspector { position: sticky; top: 0; display: flex; flex: 0 0 280px; flex-direction: column; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--rk-hairline); border-radius: 12px; background: var(--rk-plane); }
+.st-inspector-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-width: 0; }
+.st-inspector-title { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 14px; font-weight: 650; color: var(--rk-ink); overflow-wrap: anywhere; }
+.st-inspector-title svg { flex: none; margin-top: 2px; color: var(--rk-accent); }
+.st-inspector-path-line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
+.st-inspector-path { display: block; max-width: 100%; font-size: 12px; color: var(--rk-ink-2); overflow-wrap: anywhere; word-break: break-word; user-select: text; -webkit-user-select: text; cursor: text; }
+.st-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12px; }
+.st-facts dt { color: var(--rk-ink-2); }
+.st-facts dd { margin: 0; min-width: 0; color: var(--rk-ink); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
+.st-inspector-actions { display: flex; flex-wrap: wrap; gap: 6px; }
+.st-preview-image { display: block; max-width: 100%; max-height: 200px; width: auto; height: auto; object-fit: contain; border: 1px solid var(--rk-hairline); border-radius: 8px; }
+.st-help { margin: 0; font-size: 11px; line-height: 1.4; color: var(--rk-ink-2); overflow-wrap: anywhere; }

package/dist/views/storageEstimate.d.ts

@@ -0,0 +1,6 @@
+/** Wording for a size the scan could not prove would be freed. Same text as Cleanup's estimate note. */
+export declare const ESTIMATE = "An estimate from allocated size on disk, not file size. Hard links and clones can make the real gain smaller.";
+/** Any removal figure is allocated size, so it is an upper bound; a partial scan reads as a floor. */
+export declare const upTo: (n: number, partial?: boolean) => string;
+/** Items in the Trash keep their space until the Trash is emptied. */
+export declare const trashFreesNothing: (trash: string) => string;

package/dist/views/storageEstimate.js

@@ -0,0 +1,7 @@
+import { bytes } from "../api.js";
+/** Wording for a size the scan could not prove would be freed. Same text as Cleanup's estimate note. */
+export const ESTIMATE = "An estimate from allocated size on disk, not file size. Hard links and clones can make the real gain smaller.";
+/** Any removal figure is allocated size, so it is an upper bound; a partial scan reads as a floor. */
+export const upTo = (n, partial = false) => `${partial ? "≥ " : "up to "}${bytes(n)}`;
+/** Items in the Trash keep their space until the Trash is emptied. */
+export const trashFreesNothing = (trash) => `Items moved to the ${trash} free no space until the ${trash} is emptied.`;

package/dist/visible.d.ts

@@ -0,0 +1,3 @@
+/** `setInterval` that skips its ticks while the hub's window is hidden and runs once when it is shown again. */
+export declare function visibleInterval(tick: () => void, ms: number): number;
+export declare function clearVisibleInterval(id: number | null | undefined): void;

package/dist/visible.js

@@ -0,0 +1,42 @@
+import { listen } from "@tauri-apps/api/event";
+// The hub keeps running with its window closed (it serves the notch), and this page keeps
+// running with it. Refreshing a page nobody can see kept the web view and the hub at about
+// one percent of a core between them. The hub says when its window is hidden or shown
+// (`hub-visibility`); until it says anything the page counts as shown, and any input in the
+// page counts as shown too, so a missed event cannot leave a visible page frozen.
+let shown = true;
+const wakers = new Map();
+function setShown(next) {
+    if (shown === next)
+        return;
+    shown = next;
+    if (next)
+        for (const wake of [...wakers.values()])
+            wake();
+}
+try {
+    void listen("hub-visibility", (event) => setShown(event.payload === true)).catch(() => { });
+}
+catch {
+    // Outside the hub (a test page) there is nobody to say; the page stays shown.
+}
+if (typeof window !== "undefined") {
+    for (const name of ["focus", "pointerdown", "pointermove", "keydown"]) {
+        window.addEventListener(name, () => setShown(true), { passive: true, capture: true });
+    }
+}
+/** `setInterval` that skips its ticks while the hub's window is hidden and runs once when it is shown again. */
+export function visibleInterval(tick, ms) {
+    const id = setInterval(() => {
+        if (shown)
+            tick();
+    }, ms);
+    wakers.set(id, tick);
+    return id;
+}
+export function clearVisibleInterval(id) {
+    if (id == null)
+        return;
+    clearInterval(id);
+    wakers.delete(id);
+}

package/package.json

@@ -1,6 +1,113 @@
 {
   "name": "@rightkit/system-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "System monitor views (activity, storage, cleanup, duplicates, drive health, apps, chat) and chart helpers for desktop utility apps.",
+  "license": "MIT OR Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./activityLease": {
+      "types": "./dist/activityLease.d.ts",
+      "import": "./dist/activityLease.js"
+    },
+    "./api": {
+      "types": "./dist/api.d.ts",
+      "import": "./dist/api.js"
+    },
+    "./components/Chart": {
+      "types": "./dist/components/Chart.d.ts",
+      "import": "./dist/components/Chart.js"
+    },
+    "./lib/qr": {
+      "types": "./dist/lib/qr.d.ts",
+      "import": "./dist/lib/qr.js"
+    },
+    "./metrics": {
+      "types": "./dist/metrics.d.ts",
+      "import": "./dist/metrics.js"
+    },
+    "./onboarding/gate": {
+      "types": "./dist/onboarding/gate.d.ts",
+      "import": "./dist/onboarding/gate.js"
+    },
+    "./views/LauncherSettings": {
+      "types": "./dist/views/LauncherSettings.d.ts",
+      "import": "./dist/views/LauncherSettings.js"
+    },
+    "./views/NearbySettings": {
+      "types": "./dist/views/NearbySettings.d.ts",
+      "import": "./dist/views/NearbySettings.js"
+    },
+    "./views/Storage": {
+      "types": "./dist/views/Storage.d.ts",
+      "import": "./dist/views/Storage.js"
+    },
+    "./views/membrane.css": "./dist/views/membrane.css",
+    "./views/monitor.css": "./dist/views/monitor.css",
+    "./views/settings.css": "./dist/views/settings.css",
+    "./views/settingsKit": {
+      "types": "./dist/views/settingsKit.d.ts",
+      "import": "./dist/views/settingsKit.js"
+    },
+    "./visible": {
+      "types": "./dist/visible.d.ts",
+      "import": "./dist/visible.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE-MIT",
+    "LICENSE-APACHE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@rightkit/legal-ui": "^0.4.1",
+    "@rightkit/logs": "^0.1.6",
+    "@rightkit/onboarding": "^0.6.3",
+    "@rightkit/platform-ui": "^0.4.0",
+    "@rightkit/react-shell": "^0.7.2",
+    "@rightkit/settings-ui": "^0.7.0",
+    "@rightkit/tauri": "^0.3.0",
+    "@rightkit/tauri-shell": "^0.1.3",
+    "@tauri-apps/api": "2.12.4",
+    "lucide-react": "^1.57.0"
+  },
+  "peerDependencies": {
+    "react": ">=18 <21"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.5"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bogusyogi/rightkit.git",
+    "directory": "packages/system-ui"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/copy-assets.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "pnpm --filter \"@rightkit/system-ui^...\" run build && vitest run"
+  }
 }