solid-panes 4.4.0 → 4.4.1

package/dist/internal/internalPane.d.ts

@@ -1,4 +1,5 @@
 import { PaneDefinition } from 'pane-registry';
+import './internalPane.css';
 declare const pane: PaneDefinition;
 export default pane;
 //# sourceMappingURL=internalPane.d.ts.map

package/dist/internal/internalPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internalPane.d.ts","sourceRoot":"","sources":["../../src/internal/internalPane.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,QAAA,MAAM,IAAI,EAAE,cAyOX,CAAA;AAiBD,eAAe,IAAI,CAAA"}
+{"version":3,"file":"internalPane.d.ts","sourceRoot":"","sources":["../../src/internal/internalPane.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,oBAAoB,CAAA;AAE3B,QAAA,MAAM,IAAI,EAAE,cAqOX,CAAA;AAiBD,eAAe,IAAI,CAAA"}

package/dist/internal/internalPane.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _solidUi = require("solid-ui");
 var _rdflib = require("rdflib");
+require("./internalPane.css");
 /*   Internal Pane
  **
  **  This outline pane contains the properties which are
@@ -31,8 +32,7 @@ const pane = {
       return view && view.predicates && !!(typeof view.predicates[pred.uri] !== 'undefined');
     }
     const div = dom.createElement('div');
-    div.setAttribute('class', 'internalPane');
-    div.setAttribute('style', 'background-color: #ddddff; padding: 0.5em; border-radius: 1em;');
+    div.classList.add('internalPane', 'internalPaneContent');
     function deleteRecursive(kb, folder) {
       const fetcher = kb.fetcher;
       if (!fetcher) {
@@ -70,8 +70,7 @@ const pane = {
     const isDocument = subject.uri && !subject.uri.includes('#');
     if (isDocument) {
       const controls = div.appendChild(dom.createElement('table'));
-      controls.style.width = '100%';
-      controls.style.margin = '1em';
+      controls.classList.add('internalPaneControls');
       const controlRow = controls.appendChild(dom.createElement('tr'));
       const deleteCell = controlRow.appendChild(dom.createElement('td'));
       const isFolder = subject.uri && subject.uri.endsWith('/') || store.holds(subject, _solidUi.ns.rdf('type'), _solidUi.ns.ldp('Container'));
@@ -96,8 +95,8 @@ const pane = {
             alert(str);
           });
         });
-        deleteButton.style = 'height: 2em;';
-        deleteButton.class = ''; // Remove hover hide
+        deleteButton.removeAttribute('class'); // Remove hover hide
+        deleteButton.classList.add('internalPaneDeleteButton');
         deleteCell.appendChild(deleteButton);
       }
       const refreshCell = controlRow.appendChild(dom.createElement('td'));

package/dist/mainPage/header.js

@@ -14,7 +14,7 @@ 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.png"));
+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 }; }
@@ -23,7 +23,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 */
 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 = _signup.default;
+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');

package/dist/mainPage/index.d.ts

@@ -1,8 +1,9 @@
 import { LiveStore, NamedNode } from 'rdflib';
+import type { RenderEnvironment } from 'pane-registry';
 import { OutlineManager } from '../index';
 export { refreshMenu as updateMenuLayout } from './menu';
 export { refreshHeader } from './header';
-export declare function initMainPage(store: LiveStore, uri?: string | NamedNode | null, environment?: any): Promise<[import("solid-ui/components/header").Header & {
+export declare function initMainPage(store: LiveStore, uri?: string | NamedNode | null, environment?: RenderEnvironment): Promise<[import("solid-ui/components/header").Header & {
     __solidPanesListenersAttached?: boolean;
     __solidPanesOutliner?: OutlineManager;
 }, void, HTMLElement & {

package/dist/mainPage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mainPage/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAe,cAAc,EAAE,MAAM,UAAU,CAAA;AAKtD,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAexC,wBAAsB,YAAY,CAChC,KAAK,EAAE,SAAS,EAChB,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,EAC/B,WAAW,CAAC,EAAE,GAAG;;;;;;;;;;IAYlB;AAED,wBAAsB,SAAS,CAAE,QAAQ,EAAE,cAAc,iBAGxD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mainPage/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAe,cAAc,EAAE,MAAM,UAAU,CAAA;AActD,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAexC,wBAAsB,YAAY,CAChC,KAAK,EAAE,SAAS,EAChB,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,EAC/B,WAAW,CAAC,EAAE,iBAAiB;;;;;;;;;;IAahC;AAED,wBAAsB,SAAS,CAAE,QAAQ,EAAE,cAAc,iBAoBxD"}

package/dist/mainPage/index.js

@@ -26,6 +26,13 @@ var _menu = require("./menu");
  **  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) {
@@ -41,6 +48,7 @@ function ensureMainContent() {
 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);
@@ -50,6 +58,21 @@ async function initMainPage(store, uri, environment) {
   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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/mainPage/menu.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AACnB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,EAAE,SAAS,EAAO,MAAM,QAAQ,CAAA;AAwPvC,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,KAAG,IAIrD,CAAA;AAeD,eAAO,MAAM,WAAW,GAAI,QAAQ,QAAQ,GAAG,SAAS,SAwCvD,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAU,SAAS,SAAS,EAAE,UAAU,cAAc,kBAsIpF,CAAA"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/mainPage/menu.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AACnB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,EAAE,SAAS,EAAO,MAAM,QAAQ,CAAA;AAkQvC,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,KAAG,IAIrD,CAAA;AAqBD,eAAO,MAAM,WAAW,GAAI,QAAQ,QAAQ,GAAG,SAAS,SAmDvD,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAU,SAAS,SAAS,EAAE,UAAU,cAAc,kBA2IpF,CAAA"}

package/dist/mainPage/menu.js

@@ -50,6 +50,15 @@ const applyMenuCollapsedState = navMenu => {
   updateCollapseButtonPosition(navMenu, collapseBtn);
 };
 const isLoggedIn = () => Boolean(_solidLogic.authSession?.info?.isLoggedIn);
+const setFooterVisibility = loggedIn => {
+  const footer = document.querySelector('solid-ui-footer');
+  if (!footer) return;
+  footer.style.display = loggedIn ? 'none' : '';
+};
+const isViewingOwnProfile = subject => {
+  const currentUser = _solidLogic.authn.currentUser();
+  return Boolean(currentUser && subject && currentUser.sameTerm(subject));
+};
 const ensureMenuSkeleton = () => {
   menuCollapsed = loadMenuCollapsedState();
   const root = document.querySelector('[role="main"]') || document.body;
@@ -60,7 +69,6 @@ const ensureMenuSkeleton = () => {
     navMenu.className = 'app-nav';
     navMenu.setAttribute('aria-label', 'App navigation');
     navMenu.hidden = true;
-    navMenu.style.display = 'none';
     const headerEl = document.createElement('div');
     headerEl.className = 'menu-header';
     const closeBtn = document.createElement('button');
@@ -226,7 +234,11 @@ const updateToggleLabel = activeItem => {
 const renderMenuItems = async (subject, outliner, container) => {
   const menuItems = await getMenuItems(subject, outliner);
   container.replaceChildren(...menuItems.map(createMenuButton));
-  setActiveMenuItem(container, container.dataset.activePaneName);
+  // If the user is logged in and viewing their own profile, select "Your profile"
+  // by default. This also surfaces "Your profile" at the top of the mobile view
+  // via the menu toggle label, which mirrors the active menu item.
+  const activePane = isViewingOwnProfile(subject) ? 'profile' : container.dataset.activePaneName;
+  setActiveMenuItem(container, activePane);
 };
 const refreshMenu = layout => {
   const navMenu = document.getElementById('NavMenu');
@@ -244,23 +256,33 @@ const refreshMenu = layout => {
     collapseBtn.style.display = 'none';
     overlay.hidden = true;
     overlay.style.display = 'none';
+    setFooterVisibility(false);
     return;
   }
+  setFooterVisibility(true);
   if (layout === 'mobile') {
     navMenu.classList.add('mobile-hidden');
     navMenu.classList.remove('mobile-visible');
     toggle.hidden = false;
+    toggle.style.display = '';
     collapseBtn.hidden = true;
+    collapseBtn.style.display = 'none';
     overlay.hidden = true;
+    overlay.style.display = 'none';
     navMenu.hidden = false;
+    navMenu.style.display = '';
     navMenu.classList.remove('collapsed');
     toggle.setAttribute('aria-expanded', 'false');
   } else {
     navMenu.classList.remove('mobile-hidden', 'mobile-visible');
     toggle.hidden = true;
+    toggle.style.display = 'none';
     collapseBtn.hidden = false;
+    collapseBtn.style.display = '';
     overlay.hidden = true;
+    overlay.style.display = 'none';
     navMenu.hidden = false;
+    navMenu.style.display = '';
     applyMenuCollapsedState(navMenu);
     updateCollapseButtonPosition(navMenu, collapseBtn);
     toggle.setAttribute('aria-expanded', 'false');
@@ -277,15 +299,19 @@ const createLeftSideMenu = async (subject, outliner) => {
     if (!navMenu || !menuToggle || !menuOverlay) return;
     navMenu.classList.remove('mobile-visible');
     navMenu.classList.add('mobile-hidden');
+    navMenu.style.display = '';
     menuToggle.setAttribute('aria-expanded', 'false');
     menuOverlay.hidden = true;
+    menuOverlay.style.display = 'none';
   };
   const openMobileMenu = () => {
     if (!navMenu || !menuToggle || !menuOverlay) return;
     navMenu.classList.remove('mobile-hidden');
     navMenu.classList.add('mobile-visible');
+    navMenu.style.display = '';
     menuToggle.setAttribute('aria-expanded', 'true');
     menuOverlay.hidden = false;
+    menuOverlay.style.display = '';
   };
   const collapseBtn = document.getElementById('MenuCollapseBtn');
   const expandDesktopMenu = () => {
@@ -338,6 +364,7 @@ const createLeftSideMenu = async (subject, outliner) => {
       menuOverlay.hidden = !loggedIn;
       menuOverlay.style.display = loggedIn ? '' : 'none';
     }
+    setFooterVisibility(loggedIn);
   };
   updateMenuVisibility();
   if (menuOverlay) {

package/dist/n3Pane.css

@@ -0,0 +1,49 @@
+.n3-pane {
+	padding: 1rem;
+	border-top: solid 1px var(--color-data-pane-border-top, black);
+	border-left: solid 1px var(--color-data-pane-border-top, black);
+	border-bottom: solid 1px var(--color-data-pane-border-side, #777);
+	border-right: solid 1px var(--color-data-pane-border-side, #777);
+	color: var(--color-text-blue, #004);
+	box-sizing: border-box;
+}
+
+.n3-pane__source {
+	overflow-x: auto;
+	max-width: 100%;
+	box-sizing: border-box;
+	font-family: monospace;
+	font-size: 120%;
+	margin: 0;
+	white-space: pre;
+}
+
+.n3-pane__line {
+	white-space: pre;
+}
+
+.n3-pane[data-layout='mobile'] .n3-pane__source {
+	overflow-wrap: anywhere;
+	word-break: break-word;
+	white-space: normal;
+}
+
+.n3-pane[data-layout='mobile'] .n3-pane__line {
+	white-space: pre-wrap;
+	padding-left: var(--n3-indent, 0);
+	text-indent: calc(-1 * var(--n3-indent, 0));
+}
+
+@media (max-width: 576px) {
+	.n3-pane__source {
+		overflow-wrap: anywhere;
+		word-break: break-word;
+		white-space: normal;
+	}
+
+	.n3-pane__line {
+		white-space: pre-wrap;
+		padding-left: var(--n3-indent, 0);
+		text-indent: calc(-1 * var(--n3-indent, 0));
+	}
+}

package/dist/n3Pane.d.ts

@@ -0,0 +1,13 @@
+import type { DataBrowserContext } from 'pane-registry';
+import type { NamedNode } from 'rdflib';
+import './n3Pane.css';
+type N3PaneLike = {
+    icon: string;
+    name: string;
+    audience: NamedNode[];
+    label: (subject: NamedNode, context: DataBrowserContext) => string | null;
+    render: (subject: NamedNode, context: DataBrowserContext) => HTMLDivElement;
+};
+export declare const n3Pane: N3PaneLike;
+export {};
+//# sourceMappingURL=n3Pane.d.ts.map

package/dist/n3Pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"n3Pane.d.ts","sourceRoot":"","sources":["../src/n3Pane.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAqB,MAAM,eAAe,CAAA;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAClD,OAAO,cAAc,CAAA;AAIrB,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,EAAE,CAAA;IACrB,KAAK,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,KAAK,MAAM,GAAG,IAAI,CAAA;IACzE,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,KAAK,cAAc,CAAA;CAC5E,CAAA;AAsBD,eAAO,MAAM,MAAM,EAAE,UAuEpB,CAAA"}

package/dist/n3Pane.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.n3Pane = void 0;
 var UI = _interopRequireWildcard(require("solid-ui"));
 var $rdf = _interopRequireWildcard(require("rdflib"));
+require("./n3Pane.css");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /*      Notation3 content Pane
  **
@@ -15,6 +16,24 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 
 const ns = UI.ns;
+function leadingIndentWidth(line) {
+  if (line.trim().length === 0) {
+    return 0;
+  }
+  let width = 0;
+  for (const character of line) {
+    if (character === ' ') {
+      width += 1;
+      continue;
+    }
+    if (character === '\t') {
+      width += 2;
+      continue;
+    }
+    break;
+  }
+  return Math.max(width, 2);
+}
 const n3Pane = exports.n3Pane = {
   icon: UI.icons.originalIconBase + 'w3c/n3_smaller.png',
   name: 'n3',
@@ -31,8 +50,13 @@ const n3Pane = exports.n3Pane = {
   render: function (subject, context) {
     const myDocument = context.dom;
     const kb = context.session.store;
+    function applyEnvironmentAttributes(element) {
+      const environment = context.environment ?? {};
+      element.dataset.layout = environment.layout ?? 'desktop';
+    }
     const div = myDocument.createElement('div');
-    div.setAttribute('class', 'n3Pane');
+    div.setAttribute('class', 'n3-pane');
+    applyEnvironmentAttributes(div);
     // Because of smushing etc, this will not be a copy of the original source
     // We could instead either fetch and re-parse the source,
     // or we could keep all the pre-smushed triples.
@@ -48,10 +72,17 @@ const n3Pane = exports.n3Pane = {
     sz.suggestNamespaces(kb.namespaces);
     sz.setBase(subject.uri);
     const str = sz.statementsToN3(sts);
-    const pre = myDocument.createElement('PRE');
-    pre.setAttribute('style', 'overflow-x: auto; max-width: 100%; box-sizing: border-box;');
-    pre.appendChild(myDocument.createTextNode(str));
-    div.appendChild(pre);
+    const source = myDocument.createElement('div');
+    source.classList.add('n3-pane__source');
+    str.split('\n').forEach(line => {
+      const lineElement = myDocument.createElement('div');
+      const indentWidth = leadingIndentWidth(line);
+      lineElement.classList.add('n3-pane__line');
+      lineElement.style.setProperty('--n3-indent', `${indentWidth}ch`);
+      lineElement.textContent = line.length > 0 ? line : ' ';
+      source.appendChild(lineElement);
+    });
+    div.appendChild(source);
     return div;
   }
 };

package/dist/outline/manager.js

@@ -1819,12 +1819,31 @@ function _default(context) {
     }
     if (subject.uri && !immediate && !UI.widgets.isAudio(subject) && !UI.widgets.isVideo(subject)) {
       const docUri = subject.doc() && subject.doc().uri ? subject.doc().uri : '' + subject.doc();
+      /* handle auth errors more gracefully. For now just display a friendlier message
+         perhaps we can have a different page that gets shown in the future */
+      const outlineAuthMessage = function (statusCode) {
+        const isRootResource = !!(subject && subject.uri && subject.site && subject.site().uri === subject.uri);
+        if (statusCode === 403) {
+          return isRootResource ? 'This root resource is not accessible with your current permissions. Try logging in with an authorized account or opening a public profile document.' : 'This resource is not accessible with your current permissions.';
+        }
+        return isRootResource ? 'This root resource is not publicly readable. Try logging in or opening a profile document.' : 'This resource is not publicly readable. Try logging in or opening a different public resource.';
+      };
+      const authErrorStatus = function (detail, errObj) {
+        const detailText = typeof detail === 'string' ? detail : String(detail || '');
+        const statusCode = errObj?.status || errObj?.response?.status;
+        if (statusCode === 401 || statusCode === 403) return statusCode;
+        if (detailText.includes('status: 403') || detailText.includes('status 403')) return 403;
+        if (detailText.includes('status: 401') || detailText.includes('status 401')) return 401;
+        return null;
+      };
       const appendOutlineError = function (detail, errObj) {
         if (p.querySelector && docUri) {
           const existing = p.querySelector('[data-outline-error-for="' + docUri + '"]');
           if (existing) return;
         }
-        const message = UI.widgets.errorMessageBlock(dom, detail, '#fee', errObj instanceof Error ? errObj : undefined);
+        const statusCode = authErrorStatus(detail, errObj);
+        const friendlyDetail = statusCode ? outlineAuthMessage(statusCode) : detail;
+        const message = UI.widgets.errorMessageBlock(dom, friendlyDetail, '#fee', errObj instanceof Error ? errObj : undefined);
         if (docUri) message.setAttribute('data-outline-error-for', docUri);
         p.appendChild(message);
       };

package/dist/pad/padPane.css

@@ -3,7 +3,7 @@
   min-width: 94%;
   margin-right: 3%;
   margin-left: 3%;
-  min-height: 13em;
+  min-height: 13rem;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -21,7 +21,7 @@
 }
 
 .pad-controls {
-  gap: 0.5em;
+  gap: 0.5rem;
   align-items: center;
 }
 
@@ -29,6 +29,10 @@
   flex: 1 1 auto;
 }
 
+.pad-new-instance-message {
+  font-size: 140%;
+}
+
 @media (max-width: 600px) {
   .pad-controls .pad-cell {
     flex: 1 1 100%;

package/dist/pad/padPane.js

@@ -299,7 +299,7 @@ const paneDef = {
         // give the user links to the new app
 
         const p = div.appendChild(dom.createElement('p'));
-        p.setAttribute('style', 'font-size: 140%;');
+        p.classList.add('pad-new-instance-message');
         p.innerHTML = 'Your <a href=\'' + newIndexDoc.uri + '\'><b>new notepad</b></a> is ready. ' + '<br/><br/><a href=\'' + newIndexDoc.uri + '\'>Go to new pad</a>';
       });
       agenda.shift()();

package/dist/registerPanes.js

@@ -17,9 +17,9 @@ var _period = _interopRequireDefault(require("./transaction/period.js"));
 var _meetingPane = _interopRequireDefault(require("meeting-pane"));
 var _tabbedPane = _interopRequireDefault(require("./tabbed/tabbedPane"));
 var _chatPane = require("chat-pane");
-var _schedulePane = require("./schedule/schedulePane.js");
+var _schedulePane = require("./schedule/schedulePane");
 var _tripPane = _interopRequireDefault(require("./trip/tripPane.js"));
-var _imagePane = require("./imagePane.js");
+var _imagePane = require("./imagePane");
 var _playlistPane = _interopRequireDefault(require("./playlist/playlistPane.js"));
 var _videoPane = _interopRequireDefault(require("./video/videoPane.js"));
 var _audioPane = _interopRequireDefault(require("./audio/audioPane.js"));
@@ -28,14 +28,14 @@ var _folderPane = _interopRequireDefault(require("folder-pane"));
 var _classInstancePane = require("./classInstancePane.js");
 var _slideshowPane = require("./slideshow/slideshowPane.js");
 var _socialPane = require("./social/socialPane");
-var _humanReadablePane = _interopRequireDefault(require("./humanReadablePane.js"));
-var _dataContentPane = require("./dataContentPane.js");
+var _humanReadablePane = _interopRequireDefault(require("./humanReadablePane"));
+var _dataContentPane = require("./dataContentPane");
 var _sourcePane = _interopRequireDefault(require("source-pane"));
-var _n3Pane = require("./n3Pane.js");
-var _RDFXMLPane = require("./RDFXMLPane.js");
-var _pane2 = require("./form/pane.js");
+var _n3Pane = require("./n3Pane");
+var _RDFXMLPane = require("./RDFXMLPane");
+var _pane2 = require("./form/pane");
 var _tableViewPane = require("./tableViewPane.js");
-var _defaultPane = require("./defaultPane.js");
+var _defaultPane = require("./defaultPane");
 var _pane3 = _interopRequireDefault(require("./ui/pane.js"));
 var _sharingPane = _interopRequireDefault(require("./sharing/sharingPane"));
 var _internalPane = _interopRequireDefault(require("./internal/internalPane"));