@kennofizet/apphub-frontend 0.1.0

package/src/modules/window-manager/utils/windowLayout.js

@@ -0,0 +1,236 @@
+import { safeParseJson, sanitizeWindowLayout } from '../../../utils/safeStorage.js'
+
+export const TASKBAR_HEIGHT = 48
+export const WINDOW_MIN_WIDTH = 280
+export const WINDOW_MIN_HEIGHT = 200
+const STORAGE_PREFIX = 'apphub-window-layout:'
+
+/** Measured from `.apphub-desktop__workarea` — not the browser viewport. */
+let desktopWorkArea = { width: 0, height: 0 }
+
+export function setDesktopWorkArea(area) {
+  desktopWorkArea = {
+    width: Math.max(0, area?.width ?? 0),
+    height: Math.max(0, area?.height ?? 0),
+  }
+}
+
+export function getWorkArea() {
+  if (desktopWorkArea.width > 0 && desktopWorkArea.height > 0) {
+    return { ...desktopWorkArea }
+  }
+  return {
+    width: window.innerWidth,
+    height: Math.max(200, window.innerHeight - TASKBAR_HEIGHT),
+  }
+}
+
+export function fullscreenBounds() {
+  const area = getWorkArea()
+  return { x: 0, y: 0, width: area.width, height: area.height }
+}
+
+export function centerWindow(width, height) {
+  const area = getWorkArea()
+  return {
+    x: Math.max(0, Math.round((area.width - width) / 2)),
+    y: Math.max(0, Math.round((area.height - height) / 2)),
+  }
+}
+
+export function clampWindowToWorkArea(win) {
+  const { width: areaW, height: areaH } = getWorkArea()
+  win.x = Math.min(Math.max(0, win.x), Math.max(0, areaW - win.width))
+  win.y = Math.min(Math.max(0, win.y), Math.max(0, areaH - win.height))
+}
+
+export function clampWindowDimensions(win) {
+  const area = getWorkArea()
+  const minW = Math.min(win.miniWidth ?? WINDOW_MIN_WIDTH, area.width)
+  const minH = Math.min(win.miniHeight ?? WINDOW_MIN_HEIGHT, area.height)
+
+  win.width = Math.max(minW, Math.min(area.width, win.width))
+  win.height = Math.max(minH, Math.min(area.height, win.height))
+  clampWindowToWorkArea(win)
+}
+
+/** @param {'n'|'s'|'e'|'w'|'ne'|'nw'|'se'|'sw'} edge */
+export function applyWindowResize(win, edge, dx, dy) {
+  const area = getWorkArea()
+  const minW = Math.min(win.miniWidth ?? WINDOW_MIN_WIDTH, area.width)
+  const minH = Math.min(win.miniHeight ?? WINDOW_MIN_HEIGHT, area.height)
+
+  let { x, y, width, height } = win
+  const right = x + width
+  const bottom = y + height
+
+  if (edge.includes('e')) width += dx
+  if (edge.includes('w')) {
+    x += dx
+    width -= dx
+  }
+  if (edge.includes('s')) height += dy
+  if (edge.includes('n')) {
+    y += dy
+    height -= dy
+  }
+
+  width = Math.max(minW, Math.min(area.width, width))
+  height = Math.max(minH, Math.min(area.height, height))
+
+  if (edge.includes('w')) x = right - width
+  if (edge.includes('n')) y = bottom - height
+
+  x = Math.max(0, Math.min(x, area.width - width))
+  y = Math.max(0, Math.min(y, area.height - height))
+
+  win.x = x
+  win.y = y
+  win.width = width
+  win.height = height
+}
+
+export function loadWindowLayout(layoutKey) {
+  if (!layoutKey || typeof layoutKey !== 'string' || layoutKey.length > 80) return null
+  try {
+    const raw = localStorage.getItem(STORAGE_PREFIX + layoutKey)
+    const parsed = safeParseJson(raw, 32 * 1024)
+    return parsed ? sanitizeWindowLayout(parsed) : null
+  } catch {
+    return null
+  }
+}
+
+export function saveWindowLayout(layoutKey, layout) {
+  if (!layoutKey) return
+  try {
+    localStorage.setItem(STORAGE_PREFIX + layoutKey, JSON.stringify(layout))
+  } catch {
+    /* ignore quota / private mode */
+  }
+}
+
+/**
+ * Resolve initial bounds for a new window (fullscreen default, or restored mini position).
+ */
+export function resolveOpenLayout(definition) {
+  const miniWidth = definition.miniWidth ?? definition.width ?? 720
+  const miniHeight = definition.miniHeight ?? definition.height ?? 480
+  const layoutKey = definition.layoutKey ?? null
+
+  if (!layoutKey) {
+    const pos = definition.x != null && definition.y != null
+      ? { x: definition.x, y: definition.y }
+      : {
+          x: 80 + (definition.offsetIndex ?? 0) * 28,
+          y: 60 + (definition.offsetIndex ?? 0) * 28,
+        }
+    return {
+      display: 'mini',
+      layoutKey: null,
+      miniWidth,
+      miniHeight,
+      width: definition.width ?? miniWidth,
+      height: definition.height ?? miniHeight,
+      ...pos,
+    }
+  }
+
+  const saved = loadWindowLayout(layoutKey)
+  const defaultDisplay = definition.defaultDisplay ?? 'fullscreen'
+
+  if (saved?.display === 'mini') {
+    const mini = saved.mini ?? saved
+    const width = mini.width ?? miniWidth
+    const height = mini.height ?? miniHeight
+    const hasPosition = mini.x != null && mini.y != null
+    const pos = hasPosition ? { x: mini.x, y: mini.y } : centerWindow(width, height)
+    return {
+      display: 'mini',
+      layoutKey,
+      miniWidth,
+      miniHeight,
+      width,
+      height,
+      ...pos,
+    }
+  }
+
+  if (saved?.display === 'fullscreen' || defaultDisplay === 'fullscreen') {
+    return {
+      display: 'fullscreen',
+      layoutKey,
+      miniWidth,
+      miniHeight,
+      ...fullscreenBounds(),
+    }
+  }
+
+  const pos = centerWindow(miniWidth, miniHeight)
+  return {
+    display: 'mini',
+    layoutKey,
+    miniWidth,
+    miniHeight,
+    width: miniWidth,
+    height: miniHeight,
+    ...pos,
+  }
+}
+
+function readMiniBounds(saved, fallback) {
+  const mini = saved?.mini ?? saved
+  return {
+    x: mini?.x ?? null,
+    y: mini?.y ?? null,
+    width: mini?.width ?? fallback.width,
+    height: mini?.height ?? fallback.height,
+  }
+}
+
+export function layoutSnapshot(win) {
+  const fallback = {
+    width: win.miniWidth ?? win.width,
+    height: win.miniHeight ?? win.height,
+  }
+
+  if (win.display === 'fullscreen') {
+    const existing = loadWindowLayout(win.layoutKey)
+    const mini = readMiniBounds(existing, fallback)
+    return {
+      display: 'fullscreen',
+      mini: {
+        x: mini.x,
+        y: mini.y,
+        width: mini.width,
+        height: mini.height,
+      },
+    }
+  }
+
+  return {
+    display: 'mini',
+    mini: {
+      x: win.x,
+      y: win.y,
+      width: win.width,
+      height: win.height,
+    },
+  }
+}
+
+export function miniBoundsFromStorage(layoutKey, win) {
+  const saved = loadWindowLayout(layoutKey)
+  const fallback = {
+    width: win.miniWidth ?? 820,
+    height: win.miniHeight ?? 520,
+  }
+  const mini = readMiniBounds(saved, fallback)
+  const hasPosition = mini.x != null && mini.y != null
+  const pos = hasPosition ? { x: mini.x, y: mini.y } : centerWindow(mini.width, mini.height)
+  return {
+    width: mini.width,
+    height: mini.height,
+    ...pos,
+  }
+}

package/src/modules/window-manager/utils/windowSnap.js

@@ -0,0 +1,146 @@
+import { centerWindow, fullscreenBounds, getWorkArea } from './windowLayout.js'
+
+/** @typedef {'left'|'right'|'up'|'down'} SnapDirection */
+
+/**
+ * Windows-style snap transitions (Ctrl+Alt+Arrow in browser — OS owns Win+Arrow).
+ * @returns {{ action: 'snap'|'fullscreen'|'restore'|'minimize'|'none', bounds?: object, snap?: string|null, display?: string }}
+ */
+export function computeSnapAction(win, direction) {
+  const area = getWorkArea()
+  const halfW = Math.floor(area.width / 2)
+  const halfH = Math.floor(area.height / 2)
+  const snap = win.snap ?? (win.display === 'fullscreen' ? 'fullscreen' : null)
+
+  if (direction === 'left') {
+    return {
+      action: 'snap',
+      bounds: { x: 0, y: 0, width: halfW, height: area.height },
+      snap: 'left',
+      display: 'mini',
+    }
+  }
+
+  if (direction === 'right') {
+    return {
+      action: 'snap',
+      bounds: { x: halfW, y: 0, width: area.width - halfW, height: area.height },
+      snap: 'right',
+      display: 'mini',
+    }
+  }
+
+  if (direction === 'up') {
+    if (snap === 'left') {
+      return {
+        action: 'snap',
+        bounds: { x: 0, y: 0, width: halfW, height: halfH },
+        snap: 'top-left',
+        display: 'mini',
+      }
+    }
+    if (snap === 'right') {
+      return {
+        action: 'snap',
+        bounds: { x: halfW, y: 0, width: area.width - halfW, height: halfH },
+        snap: 'top-right',
+        display: 'mini',
+      }
+    }
+    if (snap === 'bottom-left') {
+      return {
+        action: 'snap',
+        bounds: { x: 0, y: 0, width: halfW, height: halfH },
+        snap: 'top-left',
+        display: 'mini',
+      }
+    }
+    if (snap === 'bottom-right') {
+      return {
+        action: 'snap',
+        bounds: { x: halfW, y: 0, width: area.width - halfW, height: halfH },
+        snap: 'top-right',
+        display: 'mini',
+      }
+    }
+    if (snap === 'fullscreen') return { action: 'none' }
+    return { action: 'fullscreen' }
+  }
+
+  if (direction === 'down') {
+    if (snap === 'fullscreen') return { action: 'restore' }
+    if (snap === 'left') {
+      return {
+        action: 'snap',
+        bounds: { x: 0, y: halfH, width: halfW, height: area.height - halfH },
+        snap: 'bottom-left',
+        display: 'mini',
+      }
+    }
+    if (snap === 'right') {
+      return {
+        action: 'snap',
+        bounds: { x: halfW, y: halfH, width: area.width - halfW, height: area.height - halfH },
+        snap: 'bottom-right',
+        display: 'mini',
+      }
+    }
+    if (snap === 'top-left' || snap === 'top-right' || snap === 'bottom-left' || snap === 'bottom-right') {
+      return { action: 'restore' }
+    }
+    return { action: 'minimize' }
+  }
+
+  return { action: 'none' }
+}
+
+export function captureFloatingBounds(win) {
+  if (win.display === 'fullscreen') return
+  win.floatingBounds = {
+    x: win.x,
+    y: win.y,
+    width: win.width,
+    height: win.height,
+  }
+}
+
+export function defaultFloatingBounds(win) {
+  const width = win.miniWidth ?? 820
+  const height = win.miniHeight ?? 520
+  return { width, height, ...centerWindow(width, height) }
+}
+
+export function resolveRestoreBounds(win) {
+  if (win.floatingBounds) {
+    return { ...win.floatingBounds }
+  }
+  if (win.layoutKey) {
+    return null
+  }
+  return defaultFloatingBounds(win)
+}
+
+export function applyFullscreen(win) {
+  captureFloatingBounds(win)
+  Object.assign(win, fullscreenBounds())
+  win.display = 'fullscreen'
+  win.snap = 'fullscreen'
+}
+
+/** Recompute snap bounds when work area size changes. */
+export function getSnapBounds(snap) {
+  const area = getWorkArea()
+  const halfW = Math.floor(area.width / 2)
+  const halfH = Math.floor(area.height / 2)
+
+  const map = {
+    left: { x: 0, y: 0, width: halfW, height: area.height },
+    right: { x: halfW, y: 0, width: area.width - halfW, height: area.height },
+    'top-left': { x: 0, y: 0, width: halfW, height: halfH },
+    'top-right': { x: halfW, y: 0, width: area.width - halfW, height: halfH },
+    'bottom-left': { x: 0, y: halfH, width: halfW, height: area.height - halfH },
+    'bottom-right': { x: halfW, y: halfH, width: area.width - halfW, height: area.height - halfH },
+  }
+
+  return map[snap] ?? null
+}

package/src/utils/bootstrapCache.js

@@ -0,0 +1,47 @@
+const KEY_PREFIX = 'apphub-bootstrap:'
+
+function cacheKey(backendUrl) {
+  return KEY_PREFIX + String(backendUrl ?? '').replace(/\/$/, '')
+}
+
+/** @returns {{ savedAt: number, isDevUser: boolean, origins: object } | null} */
+export function loadBootstrapCache(backendUrl) {
+  if (typeof localStorage === 'undefined' || !backendUrl) return null
+  try {
+    const raw = localStorage.getItem(cacheKey(backendUrl))
+    if (!raw) return null
+    const parsed = JSON.parse(raw)
+    if (!parsed?.origins) return null
+    return parsed
+  } catch {
+    return null
+  }
+}
+
+/** @param {import('axios').AxiosResponse|{ data?: unknown }} bootstrapResponse */
+export function saveBootstrapCache(backendUrl, bootstrapResponse) {
+  if (typeof localStorage === 'undefined' || !backendUrl) return
+  const data = bootstrapResponse?.data?.data ?? bootstrapResponse?.data ?? {}
+  if (!data.origins) return
+  try {
+    localStorage.setItem(cacheKey(backendUrl), JSON.stringify({
+      savedAt: Date.now(),
+      isDevUser: data.is_dev_user === true,
+      origins: data.origins,
+    }))
+  } catch {
+    /* ignore quota */
+  }
+}
+
+/** Build axios-like bootstrap response from cache entry. */
+export function bootstrapResponseFromCache(entry) {
+  return {
+    data: {
+      data: {
+        is_dev_user: entry.isDevUser === true,
+        origins: entry.origins,
+      },
+    },
+  }
+}

package/src/utils/devOriginSettings.js

@@ -0,0 +1,22 @@
+const STORAGE_KEY = 'apphub-dev-friendly-origins'
+
+/** Default true — relaxed origin checks on localhost until dev turns off. */
+export function loadDevFriendlyOriginsPreference() {
+  if (typeof localStorage === 'undefined') return true
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (raw === null) return true
+    return raw !== '0' && raw !== 'false'
+  } catch {
+    return true
+  }
+}
+
+export function saveDevFriendlyOriginsPreference(enabled) {
+  if (typeof localStorage === 'undefined') return
+  try {
+    localStorage.setItem(STORAGE_KEY, enabled ? '1' : '0')
+  } catch {
+    /* ignore */
+  }
+}

package/src/utils/launchUrl.js

@@ -0,0 +1,111 @@
+import { resolveRuntimeApiBase } from './originSafety.js'
+
+const BLOCKED_PROTOCOLS = new Set(['javascript:', 'data:', 'blob:', 'file:'])
+
+export const RUNTIME_HOSTED = 'hosted'
+export const RUNTIME_IFRAME = 'iframe'
+
+/** Hub-served bundle under {runtimeBase}/apps/{slug}/runtime/ */
+export function isHubHostedRuntimeUrl(url, runtimeBaseOrOptions) {
+  const base = typeof runtimeBaseOrOptions === 'object'
+    ? resolveRuntimeApiBase(runtimeBaseOrOptions)
+    : String(runtimeBaseOrOptions ?? '').replace(/\/$/, '')
+
+  if (!base || !url || typeof url !== 'string') return false
+  try {
+    const parsed = new URL(url)
+    const baseParsed = new URL(base)
+    if (parsed.origin !== baseParsed.origin) return false
+    return /\/apps\/[^/]+\/runtime\//.test(parsed.pathname)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * @param {string} url
+ * @param {string[]} [allowedOrigins]
+ * @param {{ backendUrl?: string, runtimePublicUrl?: string, runtimeType?: string }} [options]
+ */
+export function isAllowedLaunchUrl(url, allowedOrigins = [], options = {}) {
+  if (!url || typeof url !== 'string') return false
+
+  if (options.runtimeType === RUNTIME_HOSTED || isHubHostedRuntimeUrl(url, options)) {
+    return isHubHostedRuntimeUrl(url, options)
+  }
+
+  let parsed
+  try {
+    parsed = new URL(url)
+  } catch {
+    return false
+  }
+
+  if (BLOCKED_PROTOCOLS.has(parsed.protocol)) return false
+
+  if (parsed.protocol === 'http:' && (parsed.hostname === 'localhost' || parsed.hostname === '127.0.0.1')) {
+    return true
+  }
+
+  if (parsed.protocol !== 'https:') return false
+
+  if (allowedOrigins.length > 0) {
+    const origin = parsed.origin
+    return allowedOrigins.some((entry) => {
+      try {
+        return new URL(entry).origin === origin
+      } catch {
+        return false
+      }
+    })
+  }
+
+  return true
+}
+
+/** @param {string} entryUrl */
+export function entryUrlOrigin(entryUrl) {
+  if (!entryUrl || typeof entryUrl !== 'string') return ''
+  try {
+    return new URL(entryUrl).origin
+  } catch {
+    return ''
+  }
+}
+
+/** Check catalog entry_url origin against host allowedRuntimeOrigins. */
+export function isEntryUrlAllowed(entryUrl, allowedOrigins = []) {
+  if (!entryUrl || typeof entryUrl !== 'string') return false
+  return isAllowedLaunchUrl(entryUrl, allowedOrigins)
+}
+
+export function resolveLaunchUrl(responseData) {
+  const data = responseData?.data ?? responseData
+  const base = data?.runtime_url ?? data?.entry_url ?? data?.launch?.url ?? ''
+  const token = data?.launch_token
+  if (!base) return ''
+  if (!token || typeof token !== 'string') return base
+
+  try {
+    const url = new URL(base)
+    url.searchParams.set('launch_token', token)
+    return url.toString()
+  } catch {
+    return base
+  }
+}
+
+/**
+ * Hosted apps use opaque iframe origin (no allow-same-origin) so publisher JS cannot read Hub localStorage.
+ * @param {string} runtimeType
+ * @param {{ hostedSandboxSameOrigin?: boolean }} [options]
+ */
+export function iframeSandboxAttrs(runtimeType, options = {}) {
+  if (runtimeType === RUNTIME_HOSTED) {
+    if (options.hostedSandboxSameOrigin === true) {
+      return 'allow-scripts allow-forms allow-popups allow-same-origin'
+    }
+    return 'allow-scripts allow-forms allow-popups'
+  }
+  return 'allow-scripts allow-forms allow-popups'
+}