+ 
+ 
+ 
+ 
+ 
+ 
+ 
import { onMount } from 'svelte';
import { sleep } from '🍎/helpers/sleep';
+ import { get_app_icon_path } from '🍎/configs/apps/app-icons.config.ts';
import type { AppID } from '🍎/state/apps.svelte.ts';
import { preferences } from '🍎/state/preferences.svelte.ts';
import { spring } from '🍎/state/spring.svelte.ts';
@@ -93,7 +94,7 @@
{:else}
{app.title}
+
-
App Installer
-Install and launch bundled proxy apps.
+Install proxy apps and run them inside an embedded app container.
- {#each installables as app}
+ {#each default_installables as app}
{/each}
+
+
+ {#if proxy_installs.length}
+ Install Custom Proxy App
+
+
+
+
+
+ {#if install_error}
+ {install_error}
+ {/if} +
+ {#each proxy_installs as app}
+
+
+ {/each}
+
+ {/if}
+ {#if active_proxy && active_srcdoc}
+
+ {/if}
{:else if is_settings}
{app.title}
+ +
+
+
+ Settings
@@ -137,10 +248,11 @@
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: flex-start;
align-items: center;
gap: 1rem;
padding: 2rem;
+ overflow: auto;
}
img {
@@ -167,6 +279,13 @@
margin-bottom: 0.75rem;
}
+ .meta {
+ font-size: 0.8rem;
+ margin-bottom: 0.75rem;
+ opacity: 0.7;
+ word-break: break-all;
+ }
+
.actions {
display: flex;
gap: 0.5rem;
@@ -184,6 +303,75 @@
opacity: 0.6;
}
+ input {
+ padding: 0.5rem 0.8rem;
+ border-radius: 0.5rem;
+ border: 1px solid hsla(var(--system-color-dark-hsl), 0.2);
+ background: hsla(var(--system-color-light-hsl), 0.8);
+ }
+
+ .custom-install {
+ width: min(720px, 100%);
+ border: 1px solid hsla(var(--system-color-dark-hsl), 0.15);
+ border-radius: 0.75rem;
+ padding: 1rem;
+ }
+
+ .custom-install h2 {
+ font-size: 1rem;
+ margin-bottom: 0.75rem;
+ }
+
+ .form-row {
+ display: grid;
+ grid-template-columns: 1fr 2fr auto;
+ gap: 0.5rem;
+ }
+
+ .error {
+ margin-top: 0.5rem;
+ color: #cc2f2f;
+ font-size: 0.8rem;
+ }
+
+ .installed-list {
+ margin-top: 0.5rem;
+ }
+
+ .embed-container {
+ width: min(100%, 960px);
+ height: min(60vh, 720px);
+ border: 1px solid hsla(var(--system-color-dark-hsl), 0.2);
+ border-radius: 0.75rem;
+ overflow: hidden;
+ background: #000;
+ display: grid;
+ grid-template-rows: auto 1fr;
+ }
+
+ .embed-toolbar {
+ font-size: 0.8rem;
+ padding: 0.5rem 0.75rem;
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ border-bottom: 1px solid hsla(var(--system-color-dark-hsl), 0.2);
+ }
+
+ .embed-toolbar span {
+ opacity: 0.7;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1;
+ }
+
+ iframe {
+ width: 100%;
+ height: 100%;
+ border: 0;
+ }
+
.settings-grid {
grid-template-columns: 1fr;
max-width: 520px;
From 673583e17b8ca305db25ee9e308171bcd7c49f7a Mon Sep 17 00:00:00 2001
From: Fishydo <163475744+Fishydo@users.noreply.github.com>
Date: Fri, 10 Apr 2026 13:02:37 -0400
Subject: [PATCH 09/11] Support offline app loading and docked proxy app
installs
---
src/components/Desktop/Window/Window.svelte | 4 +-
.../Desktop/Window/WindowsArea.svelte | 16 ++--
src/components/Dock/Dock.svelte | 13 ++-
src/components/Dock/DockItem.svelte | 4 +-
src/components/apps/AppNexus.svelte | 30 +++----
src/components/apps/AppStore/AppStore.svelte | 68 ++++++++++------
src/configs/apps/app-icons.config.ts | 7 +-
src/configs/apps/runtime-apps.ts | 28 +++++++
src/state/apps.svelte.ts | 14 +++-
src/state/proxy-apps.svelte.ts | 80 +++++++++++++++++++
10 files changed, 204 insertions(+), 60 deletions(-)
create mode 100644 src/configs/apps/runtime-apps.ts
create mode 100644 src/state/proxy-apps.svelte.ts
diff --git a/src/components/Desktop/Window/Window.svelte b/src/components/Desktop/Window/Window.svelte
index 3187fc43..8080db39 100644
--- a/src/components/Desktop/Window/Window.svelte
+++ b/src/components/Desktop/Window/Window.svelte
@@ -13,7 +13,7 @@
import { onMount, untrack } from 'svelte';
import { sineInOut } from 'svelte/easing';
import { elevation } from '🍎/actions';
- import { apps_config } from '🍎/configs/apps/apps-config.ts';
+ import { get_runtime_app_config } from '🍎/configs/apps/runtime-apps.ts';
import { rand_int } from '🍎/helpers/random.ts';
import { sleep } from '🍎/helpers/sleep';
import { apps, type AppID } from '🍎/state/apps.svelte.ts';
@@ -31,7 +31,7 @@
let windowEl = $state();
- const { height, width } = apps_config[app_id];
+ const { height, width } = get_runtime_app_config(app_id);
const remModifier = +height * 1.2 >= window.innerHeight ? 24 : 16;
diff --git a/src/components/Desktop/Window/WindowsArea.svelte b/src/components/Desktop/Window/WindowsArea.svelte
index 5e398e48..a93b4434 100644
--- a/src/components/Desktop/Window/WindowsArea.svelte
+++ b/src/components/Desktop/Window/WindowsArea.svelte
@@ -1,7 +1,13 @@
- {#each Object.keys(apps_config) as app_id}
- {#if apps.open[app_id] && apps_config[app_id].should_open_window}
- {#await import('./Window.svelte') then { default: Window }}
-
diff --git a/src/components/Dock/Dock.svelte b/src/components/Dock/Dock.svelte
index e4db7ec1..af263cf3 100644
--- a/src/components/Dock/Dock.svelte
+++ b/src/components/Dock/Dock.svelte
@@ -2,12 +2,13 @@
{#if app_id === 'calendar'}
- {#await import('./Calendar/Calendar.svelte') then { default: Calendar }}
- >({});
let custom_title = $state('');
let custom_url = $state('');
let install_error = $state('');
- let proxy_installs = $state([]);
let active_proxy = $state(null);
let active_srcdoc = $state(null);
+ const selected_proxy_install = $derived(
+ is_proxy_app_id(app_id) ? get_proxy_install_from_id(app_id) ?? null : null,
+ );
function normalize_url(input: string): string | null {
const maybe_url = input.trim();
@@ -67,18 +71,16 @@
return with_base.replace('', `${startup_script}`);
}
- function save_installs() {
- localStorage.setItem(PROXY_INSTALL_KEY, JSON.stringify(proxy_installs));
- }
-
function add_install(install: ProxyInstall) {
- if (proxy_installs.some((app) => app.title === install.title || app.target_url === install.target_url)) {
+ if (proxy_apps.installs.some((app) => app.title === install.title || app.target_url === install.target_url)) {
return;
}
- proxy_installs = [...proxy_installs, install];
+ add_proxy_install({
+ title: install.title,
+ target_url: install.target_url,
+ });
current_installations[install.title] = true;
- save_installs();
}
function install_default_app(install: ProxyInstall) {
@@ -95,6 +97,7 @@
}
add_install({
+ id: '',
title: custom_title.trim() || new URL(normalized_url).hostname,
target_url: normalized_url,
});
@@ -113,22 +116,37 @@
active_srcdoc = null;
}
- onMount(() => {
- const saved_installs_raw = localStorage.getItem(PROXY_INSTALL_KEY);
- const saved_installs = saved_installs_raw ? (JSON.parse(saved_installs_raw) as ProxyInstall[]) : [];
+ $effect(() => {
+ if (!selected_proxy_install) return;
+ open_proxy_app(selected_proxy_install);
+ });
- proxy_installs = saved_installs;
+ onMount(() => {
+ load_proxy_installs();
+ const saved_installs = proxy_apps.installs;
for (const app of default_installables) {
current_installations[app.title] = saved_installs.some((saved) => saved.title === app.title);
}
+
+ if (selected_proxy_install) {
+ open_proxy_app(selected_proxy_install);
+ }
});
- {#if is_app_installer}
+ {#if selected_proxy_install && active_srcdoc}
+
+ {:else if is_app_installer}
App Installer
Install proxy apps and run them inside an embedded app container.
@@ -156,9 +174,9 @@
- {#if proxy_installs.length}
+ {#if proxy_apps.installs.length}
{install_error}
{/if}
- {#each proxy_installs as app}
+ {#each proxy_apps.installs as app}
= {
+const app_icon_path_map: Record = {
wallpapers: '/app-icons/wallpapers/256.webp',
finder: '/app-icons/finder/256.webp',
vscode: '/app-icons/vscode/256.webp',
@@ -13,4 +11,5 @@ const app_icon_path_map: Record = {
vercel: '/app-icons/vercel/256.webp',
};
-export const get_app_icon_path = (app_id: AppID) => app_icon_path_map[app_id];
+export const get_app_icon_path = (app_id: string) =>
+ app_icon_path_map[app_id] ?? app_icon_path_map.appstore;
diff --git a/src/configs/apps/runtime-apps.ts b/src/configs/apps/runtime-apps.ts
new file mode 100644
index 00000000..991fbe44
--- /dev/null
+++ b/src/configs/apps/runtime-apps.ts
@@ -0,0 +1,28 @@
+import { apps_config } from './apps-config';
+import { type AppConfig, create_app_config } from '🍎/helpers/create-app-config';
+import { get_proxy_install_from_id, proxy_apps } from '🍎/state/proxy-apps.svelte';
+
+const fallback_config = create_app_config({
+ title: 'App',
+});
+
+export function get_runtime_app_ids(): string[] {
+ return [...Object.keys(apps_config), ...proxy_apps.installs.map((app) => app.id)];
+}
+
+export function get_runtime_app_config(app_id: string): AppConfig {
+ const config = (apps_config as Record)[app_id];
+ if (config) return config;
+
+ const proxy_install = get_proxy_install_from_id(app_id);
+ if (proxy_install) {
+ return create_app_config({
+ title: proxy_install.title,
+ resizable: true,
+ height: 640,
+ width: 960,
+ });
+ }
+
+ return fallback_config;
+}
diff --git a/src/state/apps.svelte.ts b/src/state/apps.svelte.ts
index 9f7f9856..7fd4aec8 100644
--- a/src/state/apps.svelte.ts
+++ b/src/state/apps.svelte.ts
@@ -1,6 +1,16 @@
-import type { apps_config } from '🍎/configs/apps/apps-config';
+export type CoreAppID =
+ | 'wallpapers'
+ | 'finder'
+ | 'vscode'
+ | 'calculator'
+ | 'appstore'
+ | 'calendar'
+ | 'system-preferences'
+ | 'purus-twitter'
+ | 'view-source'
+ | 'vercel';
-export type AppID = keyof typeof apps_config;
+export type AppID = CoreAppID | string;
export const apps = $state({
open: {
diff --git a/src/state/proxy-apps.svelte.ts b/src/state/proxy-apps.svelte.ts
new file mode 100644
index 00000000..3055d36c
--- /dev/null
+++ b/src/state/proxy-apps.svelte.ts
@@ -0,0 +1,80 @@
+export type ProxyInstall = {
+ id: string;
+ title: string;
+ target_url: string;
+};
+
+export const PROXY_INSTALL_KEY = 'macos:proxy-installs';
+export const PROXY_APP_PREFIX = 'proxy:';
+
+function slugify(value: string): string {
+ return value
+ .toLowerCase()
+ .trim()
+ .replace(/[^a-z0-9]+/g, '-')
+ .replace(/^-+|-+$/g, '');
+}
+
+function create_proxy_id(title: string, target_url: string): string {
+ const title_slug = slugify(title);
+ const host_slug = (() => {
+ try {
+ return slugify(new URL(target_url).hostname);
+ } catch {
+ return 'site';
+ }
+ })();
+
+ return `${PROXY_APP_PREFIX}${title_slug || host_slug || 'app'}`;
+}
+
+function normalize_install(install: Omit & { id?: string }): ProxyInstall {
+ return {
+ ...install,
+ id: install.id || create_proxy_id(install.title, install.target_url),
+ };
+}
+
+export const proxy_apps = $state({
+ installs: [] as ProxyInstall[],
+ loaded: false,
+});
+
+export function load_proxy_installs() {
+ if (proxy_apps.loaded || typeof window === 'undefined') return;
+
+ const saved_installs_raw = localStorage.getItem(PROXY_INSTALL_KEY);
+ const saved_installs = saved_installs_raw
+ ? ((JSON.parse(saved_installs_raw) as Array & { id?: string }>).map(
+ normalize_install,
+ ) as ProxyInstall[])
+ : [];
+
+ proxy_apps.installs = saved_installs;
+ proxy_apps.loaded = true;
+}
+
+export function save_proxy_installs() {
+ if (typeof window === 'undefined') return;
+ localStorage.setItem(PROXY_INSTALL_KEY, JSON.stringify(proxy_apps.installs));
+}
+
+export function add_proxy_install(install: Omit) {
+ const normalized = normalize_install(install);
+ const exists = proxy_apps.installs.some(
+ (app) => app.id === normalized.id || app.title === normalized.title || app.target_url === normalized.target_url,
+ );
+
+ if (exists) return;
+
+ proxy_apps.installs = [...proxy_apps.installs, normalized];
+ save_proxy_installs();
+}
+
+export function is_proxy_app_id(app_id: string): boolean {
+ return app_id.startsWith(PROXY_APP_PREFIX);
+}
+
+export function get_proxy_install_from_id(app_id: string): ProxyInstall | undefined {
+ return proxy_apps.installs.find((app) => app.id === app_id);
+}
From 133cc3dfbab29d46253503c07f548bbc336571e0 Mon Sep 17 00:00:00 2001
From: Fishydo <163475744+Fishydo@users.noreply.github.com>
Date: Fri, 10 Apr 2026 13:17:08 -0400
Subject: [PATCH 10/11] Improve proxy app launching and wisp settings
management
---
src/components/apps/AppStore/AppStore.svelte | 141 +++++++++++++++++++
1 file changed, 141 insertions(+)
diff --git a/src/components/apps/AppStore/AppStore.svelte b/src/components/apps/AppStore/AppStore.svelte
index 2a4df788..55783443 100644
--- a/src/components/apps/AppStore/AppStore.svelte
+++ b/src/components/apps/AppStore/AppStore.svelte
@@ -6,6 +6,7 @@
import { preferences } from '🍎/state/preferences.svelte.ts';
import { spring } from '🍎/state/spring.svelte.ts';
import { should_show_notch } from '🍎/state/menubar.svelte.ts';
+ import { apps } from '🍎/state/apps.svelte.ts';
import {
add_proxy_install,
get_proxy_install_from_id,
@@ -47,6 +48,11 @@
let install_error = $state('');
let active_proxy = $state(null);
let active_srcdoc = $state(null);
+ let proxy_wisp = $state('');
+ let custom_wisp = $state('');
+ let custom_wisp_error = $state('');
+ let custom_wisps = $state([]);
+ let proxy_autoswitch = $state(true);
const selected_proxy_install = $derived(
is_proxy_app_id(app_id) ? get_proxy_install_from_id(app_id) ?? null : null,
);
@@ -64,6 +70,18 @@
}
}
+ function normalize_wisp_url(input: string): string | null {
+ const maybe_url = input.trim();
+ if (!maybe_url) return null;
+
+ try {
+ const parsed = new URL(maybe_url);
+ return parsed.protocol === 'wss:' ? parsed.toString() : null;
+ } catch {
+ return null;
+ }
+ }
+
function create_embed_srcdoc(target_url: string): string {
const base_href = `${window.location.origin}${base_url}staticsjv2/`;
const startup_script = `