@jskit-ai/workspaces-web 0.1.14 → 0.1.16

package/src/client/lib/theme.js

@@ -0,0 +1,332 @@
+import { ThemeSymbol } from "vuetify/lib/composables/theme.js";
+import { resolveWorkspaceThemePalette } from "@jskit-ai/workspaces-core/shared/settings";
+
+const THEME_PREFERENCE_LIGHT = "light";
+const THEME_PREFERENCE_DARK = "dark";
+const THEME_PREFERENCE_SYSTEM = "system";
+const HEX_COLOR_PATTERN = /^#[0-9A-Fa-f]{6}$/;
+const WORKSPACE_THEME_NAME_LIGHT = "workspace-light";
+const WORKSPACE_THEME_NAME_DARK = "workspace-dark";
+
+function normalizeThemePreference(value) {
+  const normalized = String(value || "").trim().toLowerCase();
+  if (normalized === THEME_PREFERENCE_LIGHT || normalized === THEME_PREFERENCE_DARK) {
+    return normalized;
+  }
+  return THEME_PREFERENCE_SYSTEM;
+}
+
+function resolveSystemThemeName({ prefersDark } = {}) {
+  if (typeof prefersDark === "boolean") {
+    return prefersDark ? THEME_PREFERENCE_DARK : THEME_PREFERENCE_LIGHT;
+  }
+
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    const prefersDarkFromMedia = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return prefersDarkFromMedia ? THEME_PREFERENCE_DARK : THEME_PREFERENCE_LIGHT;
+  }
+
+  return THEME_PREFERENCE_LIGHT;
+}
+
+function resolveThemeNameForPreference(themePreference, options = {}) {
+  const normalizedPreference = normalizeThemePreference(themePreference);
+  if (normalizedPreference === THEME_PREFERENCE_DARK) {
+    return THEME_PREFERENCE_DARK;
+  }
+  if (normalizedPreference === THEME_PREFERENCE_LIGHT) {
+    return THEME_PREFERENCE_LIGHT;
+  }
+
+  return resolveSystemThemeName(options);
+}
+
+function resolveThemePreferenceStorage(options = {}) {
+  const customStorage = options && typeof options === "object" ? options.storage : null;
+  if (customStorage && typeof customStorage === "object") {
+    return customStorage;
+  }
+
+  if (typeof window !== "object" || !window) {
+    return null;
+  }
+
+  let storage = null;
+  try {
+    storage = window.localStorage;
+  } catch {
+    return null;
+  }
+  if (!storage || typeof storage !== "object") {
+    return null;
+  }
+  return storage;
+}
+
+function readPersistedThemePreference(options = {}) {
+  const storage = resolveThemePreferenceStorage(options);
+  if (!storage || typeof storage.getItem !== "function") {
+    return THEME_PREFERENCE_SYSTEM;
+  }
+
+  try {
+    const value = storage.getItem("jskit.themePreference");
+    return normalizeThemePreference(value);
+  } catch {
+    return THEME_PREFERENCE_SYSTEM;
+  }
+}
+
+function persistThemePreference(themePreference, options = {}) {
+  const storage = resolveThemePreferenceStorage(options);
+  if (!storage || typeof storage.setItem !== "function") {
+    return false;
+  }
+
+  const normalizedPreference = normalizeThemePreference(themePreference);
+  try {
+    storage.setItem("jskit.themePreference", normalizedPreference);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function resolveBootstrapThemePreference(payload = {}, options = {}) {
+  const source = payload && typeof payload === "object" ? payload : {};
+  const session = source.session && typeof source.session === "object" ? source.session : {};
+  if (session.authenticated === true) {
+    const userSettings = source.userSettings && typeof source.userSettings === "object" ? source.userSettings : {};
+    return normalizeThemePreference(userSettings.theme);
+  }
+
+  return readPersistedThemePreference(options);
+}
+
+function resolveBootstrapThemeName(payload = {}, options = {}) {
+  return resolveThemeNameForPreference(resolveBootstrapThemePreference(payload, options), options);
+}
+
+function persistBootstrapThemePreference(payload = {}, options = {}) {
+  const source = payload && typeof payload === "object" ? payload : {};
+  const session = source.session && typeof source.session === "object" ? source.session : {};
+  if (session.authenticated !== true) {
+    return false;
+  }
+
+  return persistThemePreference(resolveBootstrapThemePreference(payload, options), options);
+}
+
+function resolveVuetifyThemeController(vueApp) {
+  if (!vueApp || typeof vueApp !== "object") {
+    return null;
+  }
+
+  const provides = vueApp._context?.provides;
+  if (!provides || typeof provides !== "object") {
+    return null;
+  }
+
+  const themeController = provides[ThemeSymbol];
+  if (
+    !themeController ||
+    typeof themeController !== "object" ||
+    !themeController.global ||
+    !themeController.global.name
+  ) {
+    return null;
+  }
+
+  return themeController;
+}
+
+function setVuetifyThemeName(themeController, themeName) {
+  if (
+    !themeController ||
+    typeof themeController !== "object" ||
+    !themeController.global ||
+    !themeController.global.name
+  ) {
+    return false;
+  }
+
+  const normalizedThemeName = themeName === THEME_PREFERENCE_DARK ? THEME_PREFERENCE_DARK : THEME_PREFERENCE_LIGHT;
+  if (themeController.global.name.value === normalizedThemeName) {
+    return false;
+  }
+  themeController.global.name.value = normalizedThemeName;
+  return true;
+}
+
+function normalizeHexColor(value = "") {
+  const normalized = String(value || "").trim();
+  if (!HEX_COLOR_PATTERN.test(normalized)) {
+    return "";
+  }
+  return normalized.toUpperCase();
+}
+
+function hexColorToRgb(value = "") {
+  const normalized = normalizeHexColor(value);
+  if (!normalized) {
+    return "";
+  }
+
+  const red = Number.parseInt(normalized.slice(1, 3), 16);
+  const green = Number.parseInt(normalized.slice(3, 5), 16);
+  const blue = Number.parseInt(normalized.slice(5, 7), 16);
+  return `${red},${green},${blue}`;
+}
+
+function resolveVuetifyThemeDefinitions(themeController) {
+  if (!themeController || typeof themeController !== "object") {
+    return null;
+  }
+  const themes = themeController.themes?.value;
+  if (!themes || typeof themes !== "object") {
+    return null;
+  }
+  return themes;
+}
+
+function normalizeThemeColors(colors) {
+  const source = colors && typeof colors === "object" ? colors : {};
+  const normalized = {};
+  for (const [key, value] of Object.entries(source)) {
+    normalized[String(key)] = String(value);
+  }
+  return normalized;
+}
+
+function normalizeWorkspaceBaseThemeName(themeName = "") {
+  const normalized = String(themeName || "").trim().toLowerCase();
+  if (normalized === WORKSPACE_THEME_NAME_LIGHT) {
+    return THEME_PREFERENCE_LIGHT;
+  }
+  if (normalized === WORKSPACE_THEME_NAME_DARK) {
+    return THEME_PREFERENCE_DARK;
+  }
+  if (normalized === THEME_PREFERENCE_DARK) {
+    return THEME_PREFERENCE_DARK;
+  }
+  return THEME_PREFERENCE_LIGHT;
+}
+
+function areThemeColorsEqual(leftColors = {}, rightColors = {}) {
+  const leftEntries = Object.entries(leftColors);
+  const rightEntries = Object.entries(rightColors);
+  if (leftEntries.length !== rightEntries.length) {
+    return false;
+  }
+
+  for (const [key, value] of leftEntries) {
+    if (!Object.hasOwn(rightColors, key)) {
+      return false;
+    }
+    if (String(rightColors[key]) !== String(value)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function composeWorkspaceThemeDefinition(baseThemeDefinition, palette) {
+  const baseTheme = baseThemeDefinition && typeof baseThemeDefinition === "object" ? baseThemeDefinition : {};
+  const baseColors = normalizeThemeColors(baseTheme.colors);
+  return {
+    ...baseTheme,
+    colors: {
+      ...baseColors,
+      primary: palette.color,
+      secondary: palette.secondaryColor,
+      surface: palette.surfaceColor,
+      "surface-variant": palette.surfaceVariantColor
+    }
+  };
+}
+
+function upsertThemeDefinition(themeDefinitions, themeName, nextDefinition) {
+  const currentDefinition =
+    themeDefinitions[themeName] && typeof themeDefinitions[themeName] === "object" ? themeDefinitions[themeName] : null;
+  const currentColors = normalizeThemeColors(currentDefinition?.colors);
+  const nextColors = normalizeThemeColors(nextDefinition?.colors);
+  const sameDarkFlag = Boolean(currentDefinition?.dark) === Boolean(nextDefinition?.dark);
+  if (sameDarkFlag && areThemeColorsEqual(currentColors, nextColors)) {
+    return false;
+  }
+  themeDefinitions[themeName] = nextDefinition;
+  return true;
+}
+
+function setVuetifyPrimaryColorOverride(themeController, themeInput = null) {
+  if (
+    !themeController ||
+    typeof themeController !== "object" ||
+    !themeController.global ||
+    !themeController.global.name
+  ) {
+    return false;
+  }
+
+  const themeDefinitions = resolveVuetifyThemeDefinitions(themeController);
+  if (!themeDefinitions) {
+    return false;
+  }
+
+  const currentThemeName = String(themeController.global.name.value || "").trim();
+  const normalizedBaseThemeName = normalizeWorkspaceBaseThemeName(currentThemeName);
+  const normalizedThemeName =
+    normalizedBaseThemeName === THEME_PREFERENCE_DARK ? THEME_PREFERENCE_DARK : THEME_PREFERENCE_LIGHT;
+  const source = themeInput && typeof themeInput === "object" ? themeInput : null;
+
+  if (!source) {
+    if (currentThemeName === normalizedThemeName) {
+      return false;
+    }
+    themeController.global.name.value = normalizedThemeName;
+    return true;
+  }
+
+  const baseLightTheme =
+    themeDefinitions[THEME_PREFERENCE_LIGHT] && typeof themeDefinitions[THEME_PREFERENCE_LIGHT] === "object"
+      ? themeDefinitions[THEME_PREFERENCE_LIGHT]
+      : null;
+  const baseDarkTheme =
+    themeDefinitions[THEME_PREFERENCE_DARK] && typeof themeDefinitions[THEME_PREFERENCE_DARK] === "object"
+      ? themeDefinitions[THEME_PREFERENCE_DARK]
+      : null;
+  if (!baseLightTheme || !baseDarkTheme) {
+    return false;
+  }
+
+  const lightPalette = resolveWorkspaceThemePalette(source, { mode: THEME_PREFERENCE_LIGHT });
+  const darkPalette = resolveWorkspaceThemePalette(source, { mode: THEME_PREFERENCE_DARK });
+  const nextLightTheme = composeWorkspaceThemeDefinition(baseLightTheme, lightPalette);
+  const nextDarkTheme = composeWorkspaceThemeDefinition(baseDarkTheme, darkPalette);
+  const nextThemeName =
+    normalizedThemeName === THEME_PREFERENCE_DARK ? WORKSPACE_THEME_NAME_DARK : WORKSPACE_THEME_NAME_LIGHT;
+
+  let changed = false;
+  changed = upsertThemeDefinition(themeDefinitions, WORKSPACE_THEME_NAME_LIGHT, nextLightTheme) || changed;
+  changed = upsertThemeDefinition(themeDefinitions, WORKSPACE_THEME_NAME_DARK, nextDarkTheme) || changed;
+  if (themeController.global.name.value !== nextThemeName) {
+    themeController.global.name.value = nextThemeName;
+    changed = true;
+  }
+
+  return changed;
+}
+
+export {
+  hexColorToRgb,
+  normalizeThemePreference,
+  persistBootstrapThemePreference,
+  persistThemePreference,
+  readPersistedThemePreference,
+  resolveBootstrapThemePreference,
+  resolveThemeNameForPreference,
+  resolveBootstrapThemeName,
+  resolveVuetifyThemeController,
+  setVuetifyPrimaryColorOverride,
+  setVuetifyThemeName
+};

package/src/client/lib/workspaceLinkResolver.js

@@ -0,0 +1,207 @@
+import { unref } from "vue";
+import { resolveLinkPath } from "@jskit-ai/kernel/shared";
+import { normalizeSurfaceId } from "@jskit-ai/kernel/shared/surface/registry";
+import {
+  useWebPlacementContext,
+  resolveRuntimePathname,
+  resolveSurfaceDefinitionFromPlacementContext,
+  resolveSurfaceIdFromPlacementPathname,
+  resolveSurfaceRootPathFromPlacementContext
+} from "@jskit-ai/shell-web/client/placement";
+import {
+  resolveWorkspaceSurfaceIdFromPlacementPathname,
+  resolveSurfaceWorkspacePathFromPlacementContext,
+  extractWorkspaceSlugFromSurfacePathname
+} from "./workspaceSurfacePaths.js";
+import { surfaceRequiresWorkspaceFromPlacementContext } from "./workspaceSurfaceContext.js";
+import { parseWorkspacePathname } from "@jskit-ai/workspaces-core/shared/support/workspacePathModel";
+
+function resolveSurfaceBasePath(context = null, surface = "") {
+  const normalizedSurface = normalizeSurfaceId(surface);
+  if (!normalizedSurface) {
+    return "";
+  }
+
+  if (!resolveSurfaceDefinitionFromPlacementContext(context, normalizedSurface)) {
+    return "";
+  }
+
+  return resolveSurfaceRootPathFromPlacementContext(context, normalizedSurface);
+}
+
+function resolveWorkspaceSlugFromContextOrPath({
+  context = null,
+  surface = "",
+  workspaceSlug = "",
+  pathname = ""
+} = {}) {
+  const explicitWorkspaceSlug = String(workspaceSlug || "").trim();
+  if (explicitWorkspaceSlug) {
+    return explicitWorkspaceSlug;
+  }
+
+  const workspaceSlugFromContext = String(context?.workspace?.slug || "").trim();
+  if (workspaceSlugFromContext) {
+    return workspaceSlugFromContext;
+  }
+
+  const currentPathname = resolveRuntimePathname(pathname);
+  const workspaceSlugFromPath = String(parseWorkspacePathname(currentPathname)?.workspaceSlug || "").trim();
+  if (workspaceSlugFromPath) {
+    return workspaceSlugFromPath;
+  }
+
+  const normalizedSurface = normalizeSurfaceId(surface);
+  const workspaceSurfaceId = resolveWorkspaceSurfaceIdFromPlacementPathname(context, currentPathname);
+  const surfaceIdFromPath = workspaceSurfaceId || resolveSurfaceIdFromPlacementPathname(context, currentPathname);
+  const activeSurfaceId = normalizeSurfaceId(surfaceIdFromPath || normalizedSurface);
+  if (!activeSurfaceId) {
+    return "";
+  }
+
+  return String(extractWorkspaceSlugFromSurfacePathname(context, activeSurfaceId, currentPathname) || "").trim();
+}
+
+function resolveWorkspaceBasePath(context = null, surface = "", workspaceSlug = "") {
+  const normalizedSurface = normalizeSurfaceId(surface);
+  const normalizedWorkspaceSlug = String(workspaceSlug || "").trim();
+  if (!normalizedSurface || !normalizedWorkspaceSlug) {
+    return "";
+  }
+
+  if (!resolveSurfaceDefinitionFromPlacementContext(context, normalizedSurface)) {
+    return "";
+  }
+
+  if (!surfaceRequiresWorkspaceFromPlacementContext(context, normalizedSurface)) {
+    return resolveSurfaceBasePath(context, normalizedSurface);
+  }
+
+  return resolveSurfaceWorkspacePathFromPlacementContext(context, normalizedSurface, normalizedWorkspaceSlug, "/");
+}
+
+function resolveWorkspaceShellLinkPath({
+  context = null,
+  surface = "",
+  mode = "auto",
+  explicitTo = "",
+  relativePath = "/",
+  workspaceRelativePath = "",
+  surfaceRelativePath = "",
+  workspaceSlug = "",
+  pathname = ""
+} = {}) {
+  const explicitTarget = String(explicitTo || "").trim();
+  if (explicitTarget) {
+    return explicitTarget;
+  }
+
+  const normalizedSurface = normalizeSurfaceId(surface);
+  const normalizedMode = String(mode || "auto").trim().toLowerCase();
+  const hasSurfaceDefinition = Boolean(
+    normalizedSurface && resolveSurfaceDefinitionFromPlacementContext(context, normalizedSurface)
+  );
+  if (!hasSurfaceDefinition) {
+    return "";
+  }
+
+  const resolvedWorkspaceSlug = resolveWorkspaceSlugFromContextOrPath({
+    context,
+    surface: normalizedSurface,
+    workspaceSlug,
+    pathname
+  });
+
+  const nextWorkspaceRelativePath = String(workspaceRelativePath || "").trim() || String(relativePath || "").trim() || "/";
+  const nextSurfaceRelativePath = String(surfaceRelativePath || "").trim() || String(relativePath || "").trim() || "/";
+  const nextSurfaceBasePath = resolveSurfaceBasePath(context, normalizedSurface);
+
+  if (normalizedMode === "surface") {
+    return resolveLinkPath(nextSurfaceBasePath, nextSurfaceRelativePath);
+  }
+
+  if (normalizedMode === "workspace") {
+    if (!surfaceRequiresWorkspaceFromPlacementContext(context, normalizedSurface)) {
+      return resolveLinkPath(nextSurfaceBasePath, nextSurfaceRelativePath);
+    }
+    if (!resolvedWorkspaceSlug) {
+      return "";
+    }
+    const workspaceBasePath = resolveWorkspaceBasePath(context, normalizedSurface, resolvedWorkspaceSlug);
+    if (!workspaceBasePath) {
+      return "";
+    }
+    return resolveLinkPath(
+      workspaceBasePath,
+      nextWorkspaceRelativePath
+    );
+  }
+
+  if (surfaceRequiresWorkspaceFromPlacementContext(context, normalizedSurface)) {
+    if (!resolvedWorkspaceSlug) {
+      return "";
+    }
+    const workspaceBasePath = resolveWorkspaceBasePath(context, normalizedSurface, resolvedWorkspaceSlug);
+    if (!workspaceBasePath) {
+      return "";
+    }
+    return resolveLinkPath(
+      workspaceBasePath,
+      nextWorkspaceRelativePath
+    );
+  }
+
+  return resolveLinkPath(nextSurfaceBasePath, nextSurfaceRelativePath);
+}
+
+function useWorkspaceLinkResolver({ surface = "", workspaceSlug = "", pathname = "" } = {}) {
+  const { context: placementContext } = useWebPlacementContext();
+
+  function resolve(relativePath = "/", options = {}) {
+    return resolveWorkspaceShellLinkPath({
+      context: placementContext.value,
+      surface: String(unref(options.surface ?? surface) || ""),
+      workspaceSlug: String(unref(options.workspaceSlug ?? workspaceSlug) || ""),
+      pathname: String(unref(options.pathname ?? pathname) || ""),
+      mode: String(options.mode || "auto"),
+      explicitTo: options.explicitTo,
+      relativePath,
+      workspaceRelativePath: options.workspaceRelativePath,
+      surfaceRelativePath: options.surfaceRelativePath
+    });
+  }
+
+  function toSurface(relativePath = "/", options = {}) {
+    return resolve(relativePath, {
+      ...options,
+      mode: "surface"
+    });
+  }
+
+  function toWorkspace(relativePath = "/", options = {}) {
+    return resolve(relativePath, {
+      ...options,
+      mode: "workspace"
+    });
+  }
+
+  function toAuto(relativePath = "/", options = {}) {
+    return resolve(relativePath, {
+      ...options,
+      mode: "auto"
+    });
+  }
+
+  return Object.freeze({
+    resolve,
+    toSurface,
+    toWorkspace,
+    toAuto
+  });
+}
+
+export {
+  resolveWorkspaceSlugFromContextOrPath,
+  resolveWorkspaceShellLinkPath,
+  useWorkspaceLinkResolver
+};

package/src/client/lib/workspaceSurfaceContext.js

@@ -0,0 +1,82 @@
+import { normalizeSurfaceId } from "@jskit-ai/kernel/shared/surface";
+import {
+  readPlacementSurfaceConfig,
+  resolveSurfaceDefinitionFromPlacementContext
+} from "@jskit-ai/shell-web/client/placement";
+
+function listWorkspaceSurfaceIdsFromSurfaceConfig(surfaceConfig = null) {
+  return listSurfaceIdsFromSurfaceConfig(surfaceConfig, {
+    requiresWorkspace: true
+  });
+}
+
+function listNonWorkspaceSurfaceIdsFromSurfaceConfig(surfaceConfig = null) {
+  return listSurfaceIdsFromSurfaceConfig(surfaceConfig, {
+    requiresWorkspace: false
+  });
+}
+
+function listSurfaceIdsFromSurfaceConfig(surfaceConfig = null, { requiresWorkspace = null } = {}) {
+  const source = surfaceConfig && typeof surfaceConfig === "object" ? surfaceConfig : {};
+  const enabledSurfaceIds = Array.isArray(source.enabledSurfaceIds) ? source.enabledSurfaceIds : [];
+  const surfacesById = source.surfacesById && typeof source.surfacesById === "object" ? source.surfacesById : {};
+
+  const result = [];
+  for (const candidate of enabledSurfaceIds) {
+    const surfaceId = normalizeSurfaceId(candidate);
+    if (!surfaceId) {
+      continue;
+    }
+    const surfaceRequiresWorkspace = surfacesById[surfaceId]?.requiresWorkspace === true;
+    if (requiresWorkspace === true && !surfaceRequiresWorkspace) {
+      continue;
+    }
+    if (requiresWorkspace === false && surfaceRequiresWorkspace) {
+      continue;
+    }
+    result.push(surfaceId);
+  }
+  return result;
+}
+
+function surfaceRequiresWorkspaceFromPlacementContext(contextValue = null, surfaceId = "") {
+  return Boolean(resolveSurfaceDefinitionFromPlacementContext(contextValue, surfaceId)?.requiresWorkspace);
+}
+
+function firstAlternativeSurfaceId(surfaceIds = [], excludeSurfaceId = "") {
+  const normalizedExcludeSurfaceId = normalizeSurfaceId(excludeSurfaceId);
+  for (const candidate of Array.isArray(surfaceIds) ? surfaceIds : []) {
+    const surfaceId = normalizeSurfaceId(candidate);
+    if (!surfaceId || surfaceId === normalizedExcludeSurfaceId) {
+      continue;
+    }
+    return surfaceId;
+  }
+  return "";
+}
+
+function resolveSurfaceSwitchTargetsFromPlacementContext(contextValue = null, surfaceId = "") {
+  const surfaceConfig = readPlacementSurfaceConfig(contextValue);
+  const currentSurface = resolveSurfaceDefinitionFromPlacementContext(contextValue, surfaceId);
+  const currentSurfaceId = normalizeSurfaceId(currentSurface?.id);
+  const defaultSurfaceId = normalizeSurfaceId(surfaceConfig.defaultSurfaceId);
+  const defaultSurface = defaultSurfaceId ? surfaceConfig.surfacesById[defaultSurfaceId] || null : null;
+  const workspaceSurfaceIds = listWorkspaceSurfaceIdsFromSurfaceConfig(surfaceConfig);
+  const nonWorkspaceSurfaceIds = listNonWorkspaceSurfaceIdsFromSurfaceConfig(surfaceConfig);
+
+  return Object.freeze({
+    surfaceConfig,
+    currentSurfaceId,
+    currentSurface,
+    defaultSurfaceId,
+    defaultSurface,
+    workspaceSurfaceId: firstAlternativeSurfaceId(workspaceSurfaceIds, currentSurfaceId),
+    nonWorkspaceSurfaceId: firstAlternativeSurfaceId(nonWorkspaceSurfaceIds, currentSurfaceId)
+  });
+}
+
+export {
+  listWorkspaceSurfaceIdsFromSurfaceConfig,
+  surfaceRequiresWorkspaceFromPlacementContext,
+  resolveSurfaceSwitchTargetsFromPlacementContext
+};