solid-panes 4.4.2-1 → 4.4.2-3

package/dist/mainPage/header.js

@@ -1,203 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HELP_MENU_LIST = void 0;
-exports.createHeader = createHeader;
-exports.refreshHeader = refreshHeader;
-var _solidLogic = require("solid-logic");
-var _solidUi = require("solid-ui");
-require("solid-ui/components/header");
-var _help = _interopRequireDefault(require("../icons/help.svg?raw"));
-var _person = _interopRequireDefault(require("../icons/person.svg?raw"));
-var _signOut = _interopRequireDefault(require("../icons/signOut.svg?raw"));
-var _personInCircle = _interopRequireDefault(require("../icons/personInCircle.svg?raw"));
-var _downArrow = _interopRequireDefault(require("../icons/downArrow.svg?raw"));
-var _signUp = _interopRequireDefault(require("../icons/signUp.svg?raw"));
-var _iconHelper = require("../icons/iconHelper");
-var _menu = require("./menu");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * menu icons
-*/
-const HELP_MENU_ICON = (0, _iconHelper.createUiIcon)(_help.default, 'Help Icon', '#ffffff');
-const LOGIN_ICON = (0, _iconHelper.createUiIcon)(_person.default, 'LogIn Icon', '#ffffff');
-const SIGNUP_ICON = (0, _iconHelper.createUiIcon)(_signUp.default, 'SignUp Icon', '#ffffff');
-const LOGOUT_ICON = (0, _iconHelper.createUiIcon)(_signOut.default, 'LogOut Icon', '#000000');
-const DEFAULT_AVATAR_ICON = (0, _iconHelper.createUiIcon)(_personInCircle.default, 'Default Avatar Icon', '#6A7282');
-const DOWN_ARROW_ICON = (0, _iconHelper.createUiIcon)(_downArrow.default, 'Down Arrow Icon', '#ffffff');
-const SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg';
-/**
- * menu elements
-*/
-const SIGN_IN_MENU_ITEM = 'Log In';
-const SIGN_OUT_MENU_ITEM = 'Log Out';
-const SIGN_UP_MENU_ITEM = 'Sign Up';
-const SIGN_UP__MENU_LINK = 'https://solidproject.org/get_a_pod';
-
-// data structure extracted for solid-ui-header binding
-const HELP_MENU_LIST = exports.HELP_MENU_LIST = [{
-  label: 'User guide',
-  url: 'https://solidos.github.io/userguide/',
-  target: '_blank'
-}, {
-  label: 'Report a problem',
-  url: 'https://github.com/solidos/solidos/issues',
-  target: '_blank'
-}];
-const HEADER_MOBILE_STYLE_ID = 'solid-ui-header-mobile-style';
-function ensureMobileHeaderStyles() {
-  if (document.getElementById(HEADER_MOBILE_STYLE_ID)) return;
-  const style = document.createElement('style');
-  style.id = HEADER_MOBILE_STYLE_ID;
-  style.textContent = `
-    solid-ui-header[layout="mobile"]::part(logo) {
-      display: none !important;
-    }
-  `;
-  document.head.appendChild(style);
-}
-async function createHeader(store, outliner) {
-  ensureMobileHeaderStyles();
-  const header = document.querySelector('solid-ui-header') || document.createElement('solid-ui-header');
-  const isNewHeader = !header.isConnected;
-  if (!header.id) {
-    header.id = 'mainSolidUiHeader';
-  }
-  header.__solidPanesOutliner = outliner;
-
-  // ensure it is in DOM (before MainContent for consistency)
-  const main = document.getElementById('MainContent');
-  if (!header.isConnected) {
-    if (main && main.parentNode) {
-      main.parentNode.insertBefore(header, main);
-    } else {
-      document.body.prepend(header);
-    }
-  }
-  await refreshHeader(outliner, header);
-  if (isNewHeader) {
-    header.__solidPanesListenersAttached = false;
-  }
-  attachHeaderListeners(header);
-  return header;
-}
-function attachHeaderListeners(header) {
-  if (header.__solidPanesListenersAttached) return;
-  const refreshCurrentHeader = async () => {
-    const outliner = header.__solidPanesOutliner;
-    if (!outliner) return;
-    await refreshHeader(outliner, header);
-  };
-  _solidLogic.authSession.events.on('login', refreshCurrentHeader);
-  _solidLogic.authSession.events.on('logout', refreshCurrentHeader);
-  _solidLogic.authSession.events.on('sessionRestore', refreshCurrentHeader);
-  header.addEventListener('auth-action-select', async e => {
-    const outliner = header.__solidPanesOutliner;
-    if (!outliner) return;
-    const detail = e.detail;
-    if (detail?.role === 'login') {
-      await refreshCurrentHeader();
-      // Do not auto-open the profile pane after login.
-      // outliner.showDashboard({ pane: 'profile' })
-    }
-  });
-  header.addEventListener('signup-success', async () => {
-    // do nothing
-  });
-  header.addEventListener('account-menu-select', async e => {
-    const outliner = header.__solidPanesOutliner;
-    if (!outliner) return;
-    const detail = e.detail;
-    if (detail?.action === 'logout') {
-      await refreshCurrentHeader();
-      // Do not navigate to the profile after logout.
-    } else if (detail?.action === 'show-profile') {
-      // TODO see if this can be consolidated
-      const currentUser = _solidLogic.authn.currentUser();
-      if (currentUser) {
-        outliner.showDashboard(currentUser, {
-          pane: 'profile'
-        });
-        (0, _menu.setActiveMenuPane)('profile');
-      }
-    }
-  });
-  header.__solidPanesListenersAttached = true;
-}
-async function refreshHeader(outliner, headerElement) {
-  ensureMobileHeaderStyles();
-  const headerOptions = setHeaderOptions(outliner);
-  const header = headerElement || document.querySelector('solid-ui-header');
-  if (!header) return null;
-  header.theme = headerOptions.theme;
-  header.layout = headerOptions.layout;
-  header.brandLink = headerOptions.brandLink;
-  header.logo = headerOptions.layout === 'desktop' ? headerOptions.logo : '';
-  header.helpIcon = headerOptions.helpIcon;
-  header.helpMenuList = headerOptions.helpMenuList;
-  header.authState = headerOptions.authState;
-  header.loginAction = headerOptions.loginAction;
-  header.signUpAction = headerOptions.signUpAction;
-  header.accountMenu = await setUserMenu();
-  header.logoutLabel = headerOptions.logoutLabel;
-  header.accountIcon = headerOptions.accountIcon;
-  header.accountAvatar = headerOptions.accountAvatar;
-  header.accountAvatarFallback = headerOptions.accountAvatarFallback;
-  header.loginIcon = headerOptions.loginIcon;
-  header.signUpIcon = headerOptions.signUpIcon;
-  header.logoutIcon = headerOptions.logoutIcon;
-  return header;
-}
-function setHeaderOptions(outliner) {
-  const currentUser = _solidLogic.authn.currentUser();
-  const isAuthenticated = !!currentUser;
-  const authState = isAuthenticated ? 'logged-in' : 'logged-out';
-  const layout = outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop';
-  const theme = outliner.context?.environment?.theme === 'dark' ? 'dark' : 'light';
-  const headerOptions = {
-    logo: SOLID_ICON_URL,
-    helpIcon: HELP_MENU_ICON,
-    helpMenuList: HELP_MENU_LIST,
-    layout,
-    theme,
-    brandLink: '/',
-    authState,
-    loginAction: {
-      label: SIGN_IN_MENU_ITEM
-    },
-    signUpAction: {
-      label: SIGN_UP_MENU_ITEM,
-      url: SIGN_UP__MENU_LINK
-    },
-    logoutLabel: SIGN_OUT_MENU_ITEM,
-    accountIcon: isAuthenticated ? DOWN_ARROW_ICON : '',
-    accountAvatar: isAuthenticated ? _solidUi.widgets.findImage(currentUser) : undefined,
-    accountAvatarFallback: DEFAULT_AVATAR_ICON,
-    loginIcon: LOGIN_ICON,
-    signUpIcon: SIGNUP_ICON,
-    logoutIcon: LOGOUT_ICON
-  };
-  return headerOptions;
-}
-async function setUserMenu() {
-  const me = _solidLogic.authn.currentUser();
-  if (!me) {
-    return [];
-  }
-  try {
-    await _solidLogic.store.fetcher.load(me.doc());
-  } catch (err) {
-    console.error('Unable to load user profile', err);
-  }
-  const accountMenu = [{
-    label: _solidUi.utils.label(me),
-    avatar: _solidUi.widgets.findImage(me),
-    webid: me.value,
-    action: 'show-profile'
-  }
-  // TODO add all my available accounts
-  ];
-  return accountMenu;
-}

package/dist/mainPage/index.js

@@ -1,78 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.initMainPage = initMainPage;
-Object.defineProperty(exports, "refreshHeader", {
-  enumerable: true,
-  get: function () {
-    return _header.refreshHeader;
-  }
-});
-exports.refreshUI = refreshUI;
-Object.defineProperty(exports, "updateMenuLayout", {
-  enumerable: true,
-  get: function () {
-    return _menu.refreshMenu;
-  }
-});
-var _index = require("../index");
-var _header = require("./header");
-var _footer = require("./footer");
-var _menu = require("./menu");
-/*   Main Page
- **
- **  This code is called in mashlib and renders the header and footer of the Databrowser.
- */
-
-// Symbol used to stash the last render-relevant env snapshot on the outliner
-// so refreshUI can skip a full GotoSubject re-render when nothing changed.
-const LAST_RENDER_ENV_KEY = '__lastRenderEnvSignature';
-function renderEnvSignature(env) {
-  if (!env) return '';
-  return [env.layout, env.theme, env.inputMode].join('|');
-}
-function ensureMainContent() {
-  let main = document.getElementById('MainContent');
-  if (!main) {
-    main = document.createElement('main');
-    main.id = 'MainContent';
-    main.setAttribute('role', 'main');
-    main.setAttribute('tabindex', '-1');
-    main.setAttribute('aria-live', 'polite');
-    document.body.appendChild(main);
-  }
-  return main;
-}
-async function initMainPage(store, uri, environment) {
-  ensureMainContent();
-  const outliner = (0, _index.getOutliner)(document, environment);
-  outliner[LAST_RENDER_ENV_KEY] = renderEnvSignature(environment);
-  uri = uri || window.location.href;
-  const subject = typeof uri === 'string' ? store.sym(uri) : uri;
-  outliner.GotoSubject(subject, true, undefined, true, undefined);
-  const header = await (0, _header.createHeader)(store, outliner);
-  const menu = (0, _menu.createLeftSideMenu)(subject, outliner);
-  const footer = menu.then(() => (0, _footer.createFooter)(store));
-  return Promise.all([header, menu, footer]);
-}
-async function refreshUI(outliner) {
-  const store = outliner?.context?.session?.store;
-  const paneRegistry = outliner?.context?.session?.paneRegistry;
-  const subjectUri = window.document.location.href;
-  const paneName = window.history.state?.paneName;
-  const pane = paneName ? paneRegistry?.byName?.(paneName) : undefined;
-
-  // Only re-run GotoSubject (full pane re-render) when render-relevant
-  // environment fields actually changed since the last render.
-  const currentSignature = renderEnvSignature(outliner?.context?.environment);
-  const previousSignature = outliner?.[LAST_RENDER_ENV_KEY] ?? '';
-  const envChanged = currentSignature !== previousSignature;
-  if (envChanged && store && typeof outliner?.GotoSubject === 'function') {
-    outliner.GotoSubject(store.sym(subjectUri), true, pane, true, undefined);
-    outliner[LAST_RENDER_ENV_KEY] = currentSignature;
-  }
-  await (0, _header.refreshHeader)(outliner);
-  (0, _menu.refreshMenu)(outliner.context.environment?.layout === 'mobile' ? 'mobile' : 'desktop');
-}

package/dist/mainPage/menu.css

@@ -1,243 +0,0 @@
-.menu-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.app-nav.mobile-hidden .menu-content,
-.app-nav.mobile-visible .menu-content {
-  padding-top: 0.75rem;
-}
-
-.menu-footer {
-  width: 100%;
-  padding: 1rem;
-  border-top: 1px solid var(--color-border, #d1d1d1);
-  font-size: 0.875rem;
-  color: var(--color-text-muted, #555);
-  line-height: 1.4;
-  background: inherit;
-}
-
-.app-nav.collapsed .menu-footer {
-  display: none;
-  text-align: center;
-  padding: 0.75rem 0;
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2xs, 0.625rem);
-  border: 0;
-  border-radius: var(--border-radius-sm, 0.2rem);
-  padding: 0.5rem var(--spacing-xs, 0.75rem);
-  background: transparent;
-  color: var(--color-text-heading, #000000);
-  text-decoration: none;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-}
-
-.menu-toggle-icon {
-  width: 30px;
-  height: 30px;
-}
-
-.menu-item-icon {
-  width: var(--icon-xxs, 1rem);
-  height: var(--icon-xxs, 1rem);
-  flex: 0 0 var(--icon-xxs, 1rem);
-  object-fit: contain;
-}
-
-.menu-item-label {
-  min-width: 0;
-}
-
-.menu-item:hover,
-.menu-item:focus {
-  background: var(--color-header-menu-item-hover, #e6dcff);
-}
-
-.menu-item-active,
-.menu-item-active:hover,
-.menu-item-active:focus {
-  background: var(--color-header-menu-item-selected, #cbb9ff);
-  color: var(--color-header-menu-item-text-selected, #7c4cff);
-}
-
-.menu-toggle {
-  position: fixed;
-  top: 0.5rem;
-  left: 1rem;
-  z-index: 300;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  min-width: var(--icon-md, 2.5rem);
-  height: var(--icon-md, 2.5rem);
-  padding: 0 0.625rem;
-  border: 1px solid var(--color-border);
-  background: var(--color-menu-bg, #ffffff);
-  color: var(--color-text);
-  border-radius: var(--border-radius-sm, 0.2rem);
-  margin: 0;
-}
-
-.menu-toggle-label {
-  font-size: 1.2rem;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 10rem;
-}
-
-.menu-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 100;
-}
-
-.app-nav {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: min(18rem, 320px);
-  display: grid;
-  grid-template-rows: 1fr auto;
-  overflow: hidden;
-  background: var(--color-menu-bg, #ffffff);
-  border-right: 1px solid var(--color-border);
-  z-index: 10;
-}
-
-.app-nav.mobile-hidden,
-.app-nav.mobile-visible {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: min(80vw, 320px);
-  height: 100vh;
-  min-height: 100vh;
-  transform: translateX(-100%);
-  transition: transform 0.25s ease-in-out;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-menu-bg, #ffffff);
-  border-right: none;
-  box-shadow: none;
-  overflow: hidden;
-  padding-top: 3.75rem;
-}
-
-.app-nav.mobile-hidden .menu-content,
-.app-nav.mobile-visible .menu-content {
-  flex: 1;
-  min-height: 0;
-}
-
-.app-nav.mobile-visible {
-  transform: translateX(0);
-  visibility: visible;
-  background: var(--color-menu-bg, #ffffff);
-}
-
-.menu-header {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  align-items: center;
-  justify-content: flex-start;
-  background-color: #42345a !important;
-  color: #ffffff;
-  font-weight: 600;
-  min-height: 3.75rem;
-  height: 3.75rem;
-  box-sizing: border-box;
-  width: 100%;
-  z-index: 1000;
-  border-right: none;
-  box-shadow: none;
-}
-
-.app-nav.mobile-hidden .menu-header,
-.app-nav.mobile-visible .menu-header {
-  display: flex;
-}
-
-.menu-header-title {
-  font-size: 1.25rem;
-  color: #ffffff;
-}
-
-.menu-close {
-  border: none;
-  background: transparent;
-  color: #ffffff;
-  font-size: 1.25rem;
-  cursor: pointer;
-  padding-left: 1.25rem;
-  line-height: 1;
-}
-
-.menu-close:hover,
-.menu-close:focus {
-  opacity: 0.85;
-}
-
-.app-nav.collapsed {
-  width: 4.5rem;
-  min-width: 4.5rem;
-}
-
-.app-nav.collapsed .menu-content {
-  gap: 0.25rem;
-  align-items: center;
-}
-
-.app-nav.collapsed .menu-item {
-  justify-content: center;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.app-nav.collapsed .menu-item-label {
-  display: none;
-}
-
-.menu-collapse {
-  position: fixed;
-  left: 3rem;
-  bottom: 8rem;
-  z-index: 320;
-  width: 1.25rem;
-  height: 1.25rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--color-border);
-  border-radius: 999px;
-  color: var(--color-text);
-  font-size: 1.3rem;
-  line-height: 1;
-  cursor: pointer;
-  box-shadow: 0 1px 4px rgba(124,77,255,0.12);
-}
-
-@media (max-width: 768px) {
-  .menu-collapse {
-    display: none;
-  }
-}