solid-ui 2.6.1-05fb7cc → 2.6.1-07db096

package/dist/widgets/buttons.js

@@ -1,99 +1,23 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.index = exports.personTR = exports.iconForClass = void 0;
-exports.complain = complain;
-exports.clearElement = clearElement;
-exports.extractLogURI = extractLogURI;
-exports.shortDate = shortDate;
-exports.formatDateTime = formatDateTime;
-exports.timestamp = timestamp;
-exports.shortTime = shortTime;
-exports.setName = setName;
-exports.imagesOf = imagesOf;
-exports.findImageFromURI = findImageFromURI;
-exports.findImage = findImage;
-exports.setImage = setImage;
-exports.faviconOrDefault = faviconOrDefault;
-exports.deleteButtonWithCheck = deleteButtonWithCheck;
-exports.button = button;
-exports.cancelButton = cancelButton;
-exports.continueButton = continueButton;
-exports.askName = askName;
-exports.renderAsRow = renderAsRow;
-exports.createNameDiv = createNameDiv;
-exports.createLinkDiv = createLinkDiv;
-exports.renderAsDiv = renderAsDiv;
-exports.refreshTree = refreshTree;
-exports.attachmentList = attachmentList;
-exports.openHrefInOutlineMode = openHrefInOutlineMode;
-exports.defaultAnnotationStore = defaultAnnotationStore;
-exports.allClassURIs = allClassURIs;
-exports.propertyTriage = propertyTriage;
-exports.linkButton = linkButton;
-exports.removeButton = removeButton;
-exports.selectorPanel = selectorPanel;
-exports.selectorPanelRefresh = selectorPanelRefresh;
-exports.addStyleSheet = addStyleSheet;
-exports.isAudio = isAudio;
-exports.isVideo = isVideo;
-exports.isImage = isImage;
-exports.fileUploadButtonDiv = fileUploadButtonDiv;
 /*  Buttons
 */
-const rdflib_1 = require("rdflib");
-const iconBase_1 = require("../iconBase");
-const ns_1 = __importDefault(require("../ns"));
-const style_1 = require("../style");
-const debug = __importStar(require("../debug"));
-const log_1 = require("../log");
-const dragAndDrop_1 = require("./dragAndDrop");
-const solid_logic_1 = require("solid-logic");
-const utils = __importStar(require("../utils"));
-const error_1 = require("./error");
-const widgetHelpers_1 = require("./widgetHelpers");
-const iconLinks_1 = require("./buttons/iconLinks");
+import { st, sym, uri, Util } from 'rdflib';
+import { icons } from '../iconBase';
+import ns from '../ns';
+import { style } from '../style';
+import * as debug from '../debug';
+import { info } from '../log';
+import { uploadFiles, makeDraggable, makeDropTarget } from './dragAndDrop';
+import { store } from 'solid-logic';
+import * as utils from '../utils';
+import { errorMessageBlock } from './error';
+import { addClickListenerToElement, createImageDiv, wrapDivInATR } from './widgetHelpers';
+import { linkIcon, createLinkForURI } from './buttons/iconLinks';
 /**
  * UI Widgets such as buttons
  * @packageDocumentation
  */
 /* global alert */
-const { iconBase } = iconBase_1.icons;
+const { iconBase } = icons;
 const cancelIconURI = iconBase + 'noun_1180156.svg'; // black X
 const checkIconURI = iconBase + 'noun_1180158.svg'; // green checkmark; Continue
 function getStatusArea(context) {
@@ -118,20 +42,20 @@ function getStatusArea(context) {
 /**
  * Display an error message block
  */
-function complain(context, err) {
+export function complain(context, err) {
     if (!err)
         return; // only if error
     const ele = getStatusArea(context);
     debug.log('Complaint: ' + err);
     if (ele)
-        ele.appendChild((0, error_1.errorMessageBlock)((context && context.dom) || document, err));
+        ele.appendChild(errorMessageBlock((context && context.dom) || document, err));
     else
         alert(err);
 }
 /**
  * Remove all the children of an HTML element
  */
-function clearElement(ele) {
+export function clearElement(ele) {
     while (ele.firstChild) {
         ele.removeChild(ele.firstChild);
     }
@@ -140,7 +64,7 @@ function clearElement(ele) {
 /**
  * To figure out the log URI from the full URI used to invoke the reasoner
  */
-function extractLogURI(fullURI) {
+export function extractLogURI(fullURI) {
     const logPos = fullURI.search(/logFile=/);
     const rulPos = fullURI.search(/&rulesFile=/);
     return fullURI.substring(logPos + 8, rulPos);
@@ -151,7 +75,7 @@ function extractLogURI(fullURI) {
  * @@@ TODO This needs to be changed to local time
  * @param noTime Return a string like 'Feb 19' even if it's today.
  */
-function shortDate(str, noTime) {
+export function shortDate(str, noTime) {
     if (!str)
         return '???';
     const month = [
@@ -192,7 +116,7 @@ function shortDate(str, noTime) {
  * @param format  for instance '{FullYear}-{Month}-{Date}T{Hours}:{Minutes}:{Seconds}.{Milliseconds}'
  * @returns for instance '2000-01-15T23:14:23.002'
  */
-function formatDateTime(date, format) {
+export function formatDateTime(date, format) {
     return format
         .split('{')
         .map(function (s) {
@@ -209,29 +133,29 @@ function formatDateTime(date, format) {
  * Get a string representation of the current time
  * @returns for instance '2000-01-15T23:14:23.002'
  */
-function timestamp() {
+export function timestamp() {
     return formatDateTime(new Date(), '{FullYear}-{Month}-{Date}T{Hours}:{Minutes}:{Seconds}.{Milliseconds}');
 }
 /**
  * Get a short string representation of the current time
  * @returns for instance '23:14:23.002'
  */
-function shortTime() {
+export function shortTime() {
     return formatDateTime(new Date(), '{Hours}:{Minutes}:{Seconds}.{Milliseconds}');
 }
 // ///////////////////// Handy UX widgets
 /**
  * Sets the best name we have and looks up a better one
  */
-function setName(element, x) {
-    const kb = solid_logic_1.store;
+export function setName(element, x) {
+    const kb = store;
     const findName = function (x) {
-        const name = kb.any(x, ns_1.default.vcard('fn')) ||
-            kb.any(x, ns_1.default.foaf('name')) ||
-            kb.any(x, ns_1.default.vcard('organization-name'));
+        const name = kb.any(x, ns.vcard('fn')) ||
+            kb.any(x, ns.foaf('name')) ||
+            kb.any(x, ns.vcard('organization-name'));
         return name ? name.value : null;
     };
-    const name = x.sameTerm(ns_1.default.foaf('Agent')) ? 'Everyone' : findName(x);
+    const name = x.sameTerm(ns.foaf('Agent')) ? 'Everyone' : findName(x);
     element.textContent = name || utils.label(x);
     if (!name && x.uri) {
         if (!kb.fetcher) {
@@ -260,19 +184,19 @@ function setName(element, x) {
  *          * ns.foaf('depiction')
 
  */
-function imagesOf(x, kb) {
+export function imagesOf(x, kb) {
     return kb
-        .each(x, ns_1.default.sioc('avatar'))
-        .concat(kb.each(x, ns_1.default.foaf('img')))
-        .concat(kb.each(x, ns_1.default.vcard('logo')))
-        .concat(kb.each(x, ns_1.default.vcard('hasPhoto')))
-        .concat(kb.each(x, ns_1.default.vcard('photo')))
-        .concat(kb.each(x, ns_1.default.foaf('depiction')));
+        .each(x, ns.sioc('avatar'))
+        .concat(kb.each(x, ns.foaf('img')))
+        .concat(kb.each(x, ns.vcard('logo')))
+        .concat(kb.each(x, ns.vcard('hasPhoto')))
+        .concat(kb.each(x, ns.vcard('photo')))
+        .concat(kb.each(x, ns.foaf('depiction')));
 }
 /**
  * Best logo or avatar or photo etc to represent someone or some group etc
  */
-exports.iconForClass = {
+export const iconForClass = {
     // Potentially extendable by other apps, panes, etc
     // Relative URIs to the iconBase
     'solid:AppProviderClass': 'noun_144.svg', //  @@ classs name should not contain 'Class'
@@ -321,7 +245,7 @@ function tempSite(x) {
 /**
  * Find an image for this thing as a class
  */
-function findImageFromURI(x) {
+export function findImageFromURI(x) {
     const iconDir = iconBase;
     // Special cases from URI scheme:
     if (typeof x !== 'string' && x.uri) {
@@ -366,18 +290,18 @@ function findImageFromURI(x) {
  *          * ns.vcard('photo')
  *          * ns.foaf('depiction')
  */
-function findImage(thing) {
-    const kb = solid_logic_1.store;
+export function findImage(thing) {
+    const kb = store;
     const iconDir = iconBase;
-    if (thing.sameTerm(ns_1.default.foaf('Agent')) || thing.sameTerm(ns_1.default.rdf('Resource'))) {
+    if (thing.sameTerm(ns.foaf('Agent')) || thing.sameTerm(ns.rdf('Resource'))) {
         return iconDir + 'noun_98053.svg'; // Globe
     }
-    const image = kb.any(thing, ns_1.default.sioc('avatar')) ||
-        kb.any(thing, ns_1.default.foaf('img')) ||
-        kb.any(thing, ns_1.default.vcard('logo')) ||
-        kb.any(thing, ns_1.default.vcard('hasPhoto')) ||
-        kb.any(thing, ns_1.default.vcard('photo')) ||
-        kb.any(thing, ns_1.default.foaf('depiction'));
+    const image = kb.any(thing, ns.sioc('avatar')) ||
+        kb.any(thing, ns.foaf('img')) ||
+        kb.any(thing, ns.vcard('logo')) ||
+        kb.any(thing, ns.vcard('hasPhoto')) ||
+        kb.any(thing, ns.vcard('photo')) ||
+        kb.any(thing, ns.foaf('depiction'));
     return image ? image.uri : null;
 }
 /**
@@ -387,7 +311,7 @@ function findImage(thing) {
  * Sets src AND STYLE of the image.
  */
 function trySetImage(element, thing, iconForClassMap) {
-    const kb = solid_logic_1.store;
+    const kb = store;
     const explitImage = findImage(thing);
     if (explitImage) {
         element.setAttribute('src', explitImage);
@@ -397,7 +321,7 @@ function trySetImage(element, thing, iconForClassMap) {
     const typeIcon = iconForClassMap[thing.uri];
     if (typeIcon) {
         element.setAttribute('src', typeIcon);
-        element.style = style_1.style.classIconStyle;
+        element.style = style.classIconStyle;
         // element.style.border = '0.1em solid green;'
         // element.style.backgroundColor = '#eeffee' // pale green
         return true;
@@ -421,14 +345,14 @@ function trySetImage(element, thing, iconForClassMap) {
 /**
  * ToDo: Also add icons for *properties* like  home, work, email, range, domain, comment,
  */
-function setImage(element, thing) {
-    const kb = solid_logic_1.store;
+export function setImage(element, thing) {
+    const kb = store;
     const iconForClassMap = {};
-    for (const k in exports.iconForClass) {
+    for (const k in iconForClass) {
         const pref = k.split(':')[0];
         const id = k.split(':')[1];
-        const theClass = ns_1.default[pref](id);
-        iconForClassMap[theClass.uri] = rdflib_1.uri.join(exports.iconForClass[k], iconBase);
+        const theClass = ns[pref](id);
+        iconForClassMap[theClass.uri] = uri.join(iconForClass[k], iconBase);
     }
     const happy = trySetImage(element, thing, iconForClassMap);
     if (!happy && thing.uri) {
@@ -444,9 +368,9 @@ function setImage(element, thing) {
 }
 // If a web page, then a favicon, with a fallback to ???
 // See, e.g., http://stackoverflow.com/questions/980855/inputting-a-default-image
-function faviconOrDefault(dom, x) {
+export function faviconOrDefault(dom, x) {
     const image = dom.createElement('img');
-    image.style = style_1.style.iconStyle;
+    image.style = style.iconStyle;
     const isOrigin = function (x) {
         if (!x.uri)
             return false;
@@ -478,7 +402,7 @@ function renderDeleteConfirmPopup(dom, refererenceElement, prompt, deleteFunctio
         deleteFunction();
     }
     const popup = dom.createElement('div');
-    popup.style = style_1.style.confirmPopupStyle;
+    popup.style = style.confirmPopupStyle;
     popup.style.position = 'absolute';
     popup.style.top = '-1em'; // try leaving original button clear
     popup.style.display = 'grid';
@@ -494,16 +418,16 @@ function renderDeleteConfirmPopup(dom, refererenceElement, prompt, deleteFunctio
     xButton.style.gridColumn = '1';
     xButton.style.gridRow = '2';
     const cancelPrompt = popup.appendChild(dom.createElement('button'));
-    cancelPrompt.style = style_1.style.buttonStyle;
+    cancelPrompt.style = style.buttonStyle;
     cancelPrompt.style.gridRow = '2';
     cancelPrompt.style.gridColumn = '2';
     cancelPrompt.textContent = 'Cancel'; // @@ I18n
-    const affirmIcon = button(dom, iconBase_1.icons.iconBase + 'noun_925021.svg', 'Delete it'); // trashcan
+    const affirmIcon = button(dom, icons.iconBase + 'noun_925021.svg', 'Delete it'); // trashcan
     popup.appendChild(affirmIcon);
     affirmIcon.style.gridRow = '1';
     affirmIcon.style.gridColumn = '1';
     const sureButtonElt = popup.appendChild(dom.createElement('button'));
-    sureButtonElt.style = style_1.style.buttonStyle;
+    sureButtonElt.style = style.buttonStyle;
     sureButtonElt.style.gridRow = '1';
     sureButtonElt.style.gridColumn = '2';
     sureButtonElt.textContent = prompt;
@@ -518,7 +442,7 @@ function renderDeleteConfirmPopup(dom, refererenceElement, prompt, deleteFunctio
  * Delete button with a check you really mean it
  * @@ Supress check if command key held down?
  */
-function deleteButtonWithCheck(dom, container, noun, deleteFunction) {
+export function deleteButtonWithCheck(dom, container, noun, deleteFunction) {
     function createPopup() {
         const refererenceElement = dom.createElement('div');
         container.insertBefore(refererenceElement, deleteButton);
@@ -528,7 +452,7 @@ function deleteButtonWithCheck(dom, container, noun, deleteFunction) {
     const minusIconURI = iconBase + 'noun_2188_red.svg'; // white minus in red #cc0000 circle
     const deleteButton = dom.createElement('img');
     deleteButton.setAttribute('src', minusIconURI);
-    deleteButton.setAttribute('style', style_1.style.smallButtonStyle); // @@tsc - would set deleteButton.style
+    deleteButton.setAttribute('style', style.smallButtonStyle); // @@tsc - would set deleteButton.style
     deleteButton.style.float = 'right'; // Historically this has alwaus floated right
     const prompt = 'Remove this ' + noun;
     deleteButton.title = prompt;
@@ -549,7 +473,7 @@ function deleteButtonWithCheck(dom, container, noun, deleteFunction) {
  *
  * @returns <dDomElement> - the button
  */
-function button(dom, iconURI, text, handler, options = { buttonColor: 'Primary', needsBorder: false }) {
+export function button(dom, iconURI, text, handler, options = { buttonColor: 'Primary', needsBorder: false }) {
     const button = dom.createElement('button');
     button.setAttribute('type', 'button');
     // button.innerHTML = text  // later, user preferences may make text preferred for some
@@ -558,60 +482,60 @@ function button(dom, iconURI, text, handler, options = { buttonColor: 'Primary',
         img.setAttribute('src', iconURI);
         img.setAttribute('style', 'width: 2em; height: 2em;'); // trial and error. 2em disappears
         img.title = text;
-        button.setAttribute('style', style_1.style.buttonStyle);
+        button.setAttribute('style', style.buttonStyle);
     }
     else {
         button.textContent = text.toLocaleUpperCase();
         button.onmouseover = function () {
             if (options.buttonColor === 'Secondary') {
                 if (options.needsBorder) {
-                    button.setAttribute('style', style_1.style.secondaryButtonNoBorderHover);
+                    button.setAttribute('style', style.secondaryButtonNoBorderHover);
                 }
                 else {
-                    button.setAttribute('style', style_1.style.secondaryButtonHover);
+                    button.setAttribute('style', style.secondaryButtonHover);
                 }
             }
             else {
                 if (options.needsBorder) {
-                    button.setAttribute('style', style_1.style.primaryButtonNoBorderHover);
+                    button.setAttribute('style', style.primaryButtonNoBorderHover);
                 }
                 else {
-                    button.setAttribute('style', style_1.style.primaryButtonHover);
+                    button.setAttribute('style', style.primaryButtonHover);
                 }
             }
         };
         button.onmouseout = function () {
             if (options.buttonColor === 'Secondary') {
                 if (options.needsBorder) {
-                    button.setAttribute('style', style_1.style.secondaryButtonNoBorder);
+                    button.setAttribute('style', style.secondaryButtonNoBorder);
                 }
                 else {
-                    button.setAttribute('style', style_1.style.secondaryButton);
+                    button.setAttribute('style', style.secondaryButton);
                 }
             }
             else {
                 if (options.needsBorder) {
-                    button.setAttribute('style', style_1.style.primaryButtonNoBorder);
+                    button.setAttribute('style', style.primaryButtonNoBorder);
                 }
                 else {
-                    button.setAttribute('style', style_1.style.primaryButton);
+                    button.setAttribute('style', style.primaryButton);
                 }
             }
         };
         if (options.buttonColor === 'Secondary') {
             if (options.needsBorder) {
-                button.setAttribute('style', style_1.style.secondaryButtonNoBorder);
+                button.setAttribute('style', style.secondaryButtonNoBorder);
             }
             else {
-                button.setAttribute('style', style_1.style.secondaryButton);
+                button.setAttribute('style', style.secondaryButton);
             }
         }
         else {
             if (options.needsBorder) {
-                button.setAttribute('style', style_1.style.primaryButtonNoBorder);
+                button.setAttribute('style', style.primaryButtonNoBorder);
             }
             else {
-                button.setAttribute('style', style_1.style.primaryButton);
+                button.setAttribute('style', style.primaryButton);
             }
         }
     }
@@ -627,7 +551,7 @@ function button(dom, iconURI, text, handler, options = { buttonColor: 'Primary',
  *
  * @returns <dDomElement> - the button
  */
-function cancelButton(dom, handler) {
+export function cancelButton(dom, handler) {
     const b = button(dom, cancelIconURI, 'Cancel', handler);
     if (b.firstChild) { // sigh for tsc
         b.firstChild.style.opacity = '0.3'; // Black X is too harsh: current language is grey X
@@ -641,7 +565,7 @@ function cancelButton(dom, handler) {
  *
  * @returns <dDomElement> - the button
  */
-function continueButton(dom, handler) {
+export function continueButton(dom, handler) {
     return button(dom, checkIconURI, 'Continue', handler);
 }
 /* Grab a name for a new thing
@@ -650,11 +574,11 @@ function continueButton(dom, handler) {
  * @params theClass  Misspelt to avoid clashing with the JavaScript keyword
  * @returns: a promise of (a name or null if cancelled)
  */
-function askName(dom, kb, container, predicate, theClass, noun) {
+export function askName(dom, kb, container, predicate, theClass, noun) {
     return new Promise(function (resolve, _reject) {
         const form = dom.createElement('div'); // form is broken as HTML behaviour can resurface on js error
         // classLabel = utils.label(ns.vcard('Individual'))
-        predicate = predicate || ns_1.default.foaf('name'); // eg 'name' in user's language
+        predicate = predicate || ns.foaf('name'); // eg 'name' in user's language
         noun = noun || (theClass ? utils.label(theClass) : '  '); // eg 'folder' in users's language
         const prompt = noun + ' ' + utils.label(predicate) + ': ';
         form.appendChild(dom.createElement('p')).textContent = prompt;
@@ -662,7 +586,7 @@ function askName(dom, kb, container, predicate, theClass, noun) {
         namefield.setAttribute('type', 'text');
         namefield.setAttribute('size', '100');
         namefield.setAttribute('maxLength', '2048'); // No arbitrary limits
-        namefield.setAttribute('style', style_1.style.textInputStyle);
+        namefield.setAttribute('style', style.textInputStyle);
         namefield.select(); // focus next user input
         form.appendChild(namefield);
         container.appendChild(form);
@@ -692,8 +616,8 @@ function askName(dom, kb, container, predicate, theClass, noun) {
  *
  * pred is unused param at the moment
  */
-exports.personTR = renderAsRow; // The legacy name is used in a lot of places
-function renderAsRow(dom, pred, obj, options) {
+export const personTR = renderAsRow; // The legacy name is used in a lot of places
+export function renderAsRow(dom, pred, obj, options) {
     const tr = dom.createElement('tr');
     options = options || {};
     // tr.predObj = [pred.uri, obj.uri]   moved to acl-control
@@ -718,14 +642,14 @@ function renderAsRow(dom, pred, obj, options) {
     if (obj.uri) {
         // blank nodes need not apply
         if (options.link !== false) {
-            const anchor = td3.appendChild((0, iconLinks_1.linkIcon)(dom, obj));
+            const anchor = td3.appendChild(linkIcon(dom, obj));
             anchor.classList.add('HoverControlHide');
             td3.appendChild(dom.createElement('br'));
         }
         if (options.draggable !== false) {
             // default is on
             image.setAttribute('draggable', 'false'); // Stop the image being dragged instead - just the TR
-            (0, dragAndDrop_1.makeDraggable)(tr, obj);
+            makeDraggable(tr, obj);
         }
     }
     ;
@@ -738,7 +662,7 @@ function renderAsRow(dom, pred, obj, options) {
 *  from buttons
 *  @internal exporting this only for unit tests
 */
-function createNameDiv(dom, div, title, obj) {
+export function createNameDiv(dom, div, title, obj) {
     const nameDiv = div.appendChild(dom.createElement('div'));
     if (title) {
         nameDiv.textContent = title;
@@ -753,38 +677,38 @@ function createNameDiv(dom, div, title, obj) {
 *  from buttons
 * @internal exporting this only for unit tests
 */
-function createLinkDiv(dom, div, obj, options) {
+export function createLinkDiv(dom, div, obj, options) {
     const linkDiv = div.appendChild(dom.createElement('div'));
-    linkDiv.setAttribute('style', style_1.style.linkDivStyle);
+    linkDiv.setAttribute('style', style.linkDivStyle);
     if (options.deleteFunction) {
         deleteButtonWithCheck(dom, linkDiv, options.noun || 'one', options.deleteFunction);
     }
     if (obj.uri) {
         // blank nodes need not apply
         if (options.link !== false) {
-            (0, iconLinks_1.createLinkForURI)(dom, linkDiv, obj);
+            createLinkForURI(dom, linkDiv, obj);
         }
-        (0, dragAndDrop_1.makeDraggable)(div, obj);
+        makeDraggable(div, obj);
     }
 }
 /**
  * A Div to represent a draggable person, etc in a list
  * configurable to add an onClick listener
  */
-function renderAsDiv(dom, obj, options) {
+export function renderAsDiv(dom, obj, options) {
     const div = dom.createElement('div');
-    div.setAttribute('style', style_1.style.renderAsDivStyle);
+    div.setAttribute('style', style.renderAsDivStyle);
     options = options || {};
     const image = options.image || faviconOrDefault(dom, obj);
-    (0, widgetHelpers_1.createImageDiv)(dom, div, image);
+    createImageDiv(dom, div, image);
     createNameDiv(dom, div, options.title, obj);
     createLinkDiv(dom, div, obj, options);
     if (options.clickable && options.onClickFunction) {
-        (0, widgetHelpers_1.addClickListenerToElement)(div, options.onClickFunction);
+        addClickListenerToElement(div, options.onClickFunction);
     }
     // to be compatible with the SolidOS table layout
     if (options.wrapInATR) {
-        const tr = (0, widgetHelpers_1.wrapDivInATR)(dom, div, obj);
+        const tr = wrapDivInATR(dom, div, obj);
         return tr;
     }
     return div;
@@ -792,7 +716,7 @@ function renderAsDiv(dom, obj, options) {
 /**
  * Refresh a DOM tree recursively
  */
-function refreshTree(root) {
+export function refreshTree(root) {
     if (root.refresh) {
         root.refresh();
         return;
@@ -807,13 +731,13 @@ function refreshTree(root) {
  * to a meeting.
  * Accepts dropping URLs onto it to add attachments to it.
  */
-function attachmentList(dom, subject, div, options = {}) {
+export function attachmentList(dom, subject, div, options = {}) {
     // options = options || {}
     const deleteAttachment = function (target) {
         if (!kb.updater) {
             throw new Error('kb has no updater');
         }
-        kb.updater.update((0, rdflib_1.st)(subject, predicate, target, doc), [], function (uri, ok, errorBody, _xhr) {
+        kb.updater.update(st(subject, predicate, target, doc), [], function (uri, ok, errorBody, _xhr) {
             if (ok) {
                 refresh();
             }
@@ -830,7 +754,7 @@ function attachmentList(dom, subject, div, options = {}) {
                 deleteAttachment(theTarget);
             };
         }
-        return (0, exports.personTR)(dom, predicate, target, opt);
+        return personTR(dom, predicate, target, opt);
     }
     const refresh = function () {
         const things = kb.each(subject, predicate);
@@ -840,9 +764,9 @@ function attachmentList(dom, subject, div, options = {}) {
     function droppedURIHandler(uris) {
         const ins = [];
         uris.forEach(function (u) {
-            const target = (0, rdflib_1.sym)(u); // Attachment needs text label to disinguish I think not icon.
+            const target = sym(u); // Attachment needs text label to disinguish I think not icon.
             debug.log('Dropped on attachemnt ' + u); // icon was: iconBase + 'noun_25830.svg'
-            ins.push((0, rdflib_1.st)(subject, predicate, target, doc));
+            ins.push(st(subject, predicate, target, doc));
         });
         if (!kb.updater) {
             throw new Error('kb has no updater');
@@ -857,10 +781,11 @@ function attachmentList(dom, subject, div, options = {}) {
         });
     }
     function droppedFileHandler(files) {
-        (0, dragAndDrop_1.uploadFiles)(kb.fetcher, files, options.uploadFolder?.uri, // Files
-        options.uploadFolder?.uri, // Pictures
+        var _a, _b;
+        uploadFiles(kb.fetcher, files, (_a = options.uploadFolder) === null || _a === void 0 ? void 0 : _a.uri, // Files
+        (_b = options.uploadFolder) === null || _b === void 0 ? void 0 : _b.uri, // Pictures
         function (theFile, destURI) {
-            const ins = [(0, rdflib_1.st)(subject, predicate, kb.sym(destURI), doc)];
+            const ins = [st(subject, predicate, kb.sym(destURI), doc)];
             if (!kb.updater) {
                 throw new Error('kb has no updater');
             }
@@ -880,9 +805,9 @@ function attachmentList(dom, subject, div, options = {}) {
     const modify = options.modify;
     const promptIcon = options.promptIcon || iconBase + 'noun_748003.svg'; //    target
     // const promptIcon = options.promptIcon || (iconBase + 'noun_25830.svg') //  paperclip
-    const predicate = options.predicate || ns_1.default.wf('attachment');
+    const predicate = options.predicate || ns.wf('attachment');
     const noun = options.noun || 'attachment';
-    const kb = solid_logic_1.store;
+    const kb = store;
     const attachmentOuter = div.appendChild(dom.createElement('table'));
     attachmentOuter.setAttribute('style', 'margin-top: 1em; margin-bottom: 1em;');
     const attachmentOne = attachmentOuter.appendChild(dom.createElement('tr'));
@@ -900,8 +825,8 @@ function attachmentList(dom, subject, div, options = {}) {
         // paperclip.style = buttonStyle // @@ needed?  default has white background
         attachmentLeft.appendChild(paperclip);
         const fhandler = options.uploadFolder ? droppedFileHandler : null;
-        (0, dragAndDrop_1.makeDropTarget)(paperclip, droppedURIHandler, fhandler); // beware missing the wire of the paparclip!
-        (0, dragAndDrop_1.makeDropTarget)(attachmentLeft, droppedURIHandler, fhandler); // just the outer won't do it
+        makeDropTarget(paperclip, droppedURIHandler, fhandler); // beware missing the wire of the paparclip!
+        makeDropTarget(attachmentLeft, droppedURIHandler, fhandler); // just the outer won't do it
         if (options.uploadFolder) { // Addd an explicit file upload button as well
             const buttonDiv = fileUploadButtonDiv(dom, droppedFileHandler);
             attachmentLeft.appendChild(buttonDiv);
@@ -917,7 +842,7 @@ function attachmentList(dom, subject, div, options = {}) {
  * Note that native links have constraints in Firefox, they
  * don't work with local files for instance (2011)
  */
-function openHrefInOutlineMode(e) {
+export function openHrefInOutlineMode(e) {
     e.preventDefault();
     e.stopPropagation();
     const target = utils.getTarget(e);
@@ -929,14 +854,14 @@ function openHrefInOutlineMode(e) {
         // @@ TODO Remove the use of document as a global object
         // TODO fix dependency cycle to solid-panes by calling outlineManager
         ;
-        dom.outlineManager.GotoSubject(solid_logic_1.store.sym(uri), true, undefined, true, undefined);
+        dom.outlineManager.GotoSubject(store.sym(uri), true, undefined, true, undefined);
     }
     else if (window && window.panes && window.panes.getOutliner) {
         // @@ TODO Remove the use of window as a global object
         ;
         window.panes
             .getOutliner()
-            .GotoSubject(solid_logic_1.store.sym(uri), true, undefined, true, undefined);
+            .GotoSubject(store.sym(uri), true, undefined, true, undefined);
     }
     else {
         debug.log('ERROR: Can\'t access outline manager in this config');
@@ -948,7 +873,7 @@ function openHrefInOutlineMode(e) {
  *
  * @@ Todo: make it a personal preference.
  */
-function defaultAnnotationStore(subject) {
+export function defaultAnnotationStore(subject) {
     if (subject.uri === undefined)
         return undefined;
     let s = subject.uri;
@@ -965,31 +890,31 @@ function defaultAnnotationStore(subject) {
             return undefined;
         s = s.slice(0, slash);
     }
-    return solid_logic_1.store.sym('http://tabulator.org/wiki/annnotation/' + s);
+    return store.sym('http://tabulator.org/wiki/annnotation/' + s);
 }
 /**
  * Retrieve all RDF class URIs from solid-ui's RDF store
  * @returns an object `ret` such that `Object.keys(ret)` is
  * the list of all class URIs.
  */
-function allClassURIs() {
+export function allClassURIs() {
     const set = {};
-    solid_logic_1.store
-        .statementsMatching(undefined, ns_1.default.rdf('type'), undefined)
+    store
+        .statementsMatching(undefined, ns.rdf('type'), undefined)
         .forEach(function (st) {
         if (st.object.value)
             set[st.object.value] = true;
     });
-    solid_logic_1.store
-        .statementsMatching(undefined, ns_1.default.rdfs('subClassOf'), undefined)
+    store
+        .statementsMatching(undefined, ns.rdfs('subClassOf'), undefined)
         .forEach(function (st) {
         if (st.object.value)
             set[st.object.value] = true;
         if (st.subject.value)
             set[st.subject.value] = true;
     });
-    solid_logic_1.store
-        .each(undefined, ns_1.default.rdf('type'), ns_1.default.rdfs('Class'))
+    store
+        .each(undefined, ns.rdf('type'), ns.rdfs('Class'))
         .forEach(function (c) {
         if (c.value)
             set[c.value] = true;
@@ -1007,7 +932,7 @@ function allClassURIs() {
  * TODO: move to diff module? Not really a button.
  * @param {Store} kb The quadstore to be searched.
  */
-function propertyTriage(kb) {
+export function propertyTriage(kb) {
     const possibleProperties = {};
     // if (possibleProperties === undefined) possibleProperties = {}
     // const kb = store
@@ -1028,7 +953,7 @@ function propertyTriage(kb) {
             no++;
         }
     } // If nothing discovered, then could be either:
-    const ps = kb.each(undefined, ns_1.default.rdf('type'), ns_1.default.rdf('Property'));
+    const ps = kb.each(undefined, ns.rdf('type'), ns.rdf('Property'));
     for (let i = 0; i < ps.length; i++) {
         const p = ps[i].toNT();
         if (!op[p] && !dp[p]) {
@@ -1039,7 +964,7 @@ function propertyTriage(kb) {
     }
     possibleProperties.op = op;
     possibleProperties.dp = dp;
-    (0, log_1.info)(`propertyTriage: ${no} non-lit, ${nd} literal. ${nu} unknown.`);
+    info(`propertyTriage: ${no} non-lit, ${nd} literal. ${nu} unknown.`);
     return possibleProperties;
 }
 /**
@@ -1048,7 +973,7 @@ function propertyTriage(kb) {
 /**
  * A button for jumping
  */
-function linkButton(dom, object) {
+export function linkButton(dom, object) {
     const b = dom.createElement('button');
     b.setAttribute('type', 'button');
     b.textContent = 'Goto ' + utils.label(object);
@@ -1063,7 +988,7 @@ function linkButton(dom, object) {
 /**
  * A button to remove some other element from the page
  */
-function removeButton(dom, element) {
+export function removeButton(dom, element) {
     const b = dom.createElement('button');
     b.setAttribute('type', 'button');
     b.textContent = '✕'; // MULTIPLICATION X
@@ -1108,10 +1033,10 @@ buttons.headerButtons = function (dom, kb, name, words) {
 //
 //   @param inverse means this is the object rather than the subject
 //
-function selectorPanel(dom, kb, type, predicate, inverse, possible, options, callbackFunction, linkCallback) {
+export function selectorPanel(dom, kb, type, predicate, inverse, possible, options, callbackFunction, linkCallback) {
     return selectorPanelRefresh(dom.createElement('div'), dom, kb, type, predicate, inverse, possible, options, callbackFunction, linkCallback);
 }
-function selectorPanelRefresh(list, dom, kb, type, predicate, inverse, possible, options, callbackFunction, linkCallback) {
+export function selectorPanelRefresh(list, dom, kb, type, predicate, inverse, possible, options, callbackFunction, linkCallback) {
     const style0 = 'border: 0.1em solid #ddd; border-bottom: none; width: 95%; height: 2em; padding: 0.5em;';
     let selected = null;
     list.innerHTML = '';
@@ -1128,7 +1053,7 @@ function selectorPanelRefresh(list, dom, kb, type, predicate, inverse, possible,
             image.setAttribute('src', options.connectIcon || iconBase + 'noun_25830.svg');
             image.setAttribute('title', already.length ? already.length : 'attach');
         };
-        const f = exports.index.twoLine.widgetForClass(type);
+        const f = index.twoLine.widgetForClass(type);
         // eslint-disable-next-line prefer-const
         item = f(dom, x);
         item.setAttribute('style', style0);
@@ -1178,7 +1103,7 @@ function selectorPanelRefresh(list, dom, kb, type, predicate, inverse, possible,
 //
 //      Small compact views of things
 //
-exports.index = {};
+export let index = {};
 // ///////////////////////////////////////////////////////////////////////////
 // We need these for anything which is a subject of an attachment.
 //
@@ -1194,17 +1119,17 @@ function twoLineDefault(dom, x) {
  * @param c The RDF class for which we want a widget generator function
  */
 function twoLineWidgetForClass(c) {
-    let widget = exports.index.twoLine[c.uri];
-    const kb = solid_logic_1.store;
+    let widget = index.twoLine[c.uri];
+    const kb = store;
     if (widget)
         return widget;
     const sup = kb.findSuperClassesNT(c);
     for (const cl in sup) {
-        widget = exports.index.twoLine[kb.fromNT(cl).uri];
+        widget = index.twoLine[kb.fromNT(cl).uri];
         if (widget)
             return widget;
     }
-    return exports.index.twoLine[''];
+    return index.twoLine[''];
 }
 /**
  * Display a transaction
@@ -1216,7 +1141,7 @@ function twoLineWidgetForClass(c) {
 function twoLineTransaction(dom, x) {
     let failed = '';
     const enc = function (p) {
-        const y = solid_logic_1.store.any(x, ns_1.default.qu(p));
+        const y = store.any(x, ns.qu(p));
         if (!y)
             failed += '@@ No value for ' + p + '! ';
         return y ? utils.escapeForXML(y.value) : '?'; // @@@@
@@ -1247,24 +1172,24 @@ function twoLineTransaction(dom, x) {
  */
 function twoLineTrip(dom, x) {
     const enc = function (p) {
-        const y = solid_logic_1.store.any(x, p);
+        const y = store.any(x, p);
         return y ? utils.escapeForXML(y.value) : '?';
     };
     const box = dom.createElement('table');
     box.innerHTML = `
     <tr>
-      <td colspan="2">${enc(ns_1.default.dc('title'))}</td>
+      <td colspan="2">${enc(ns.dc('title'))}</td>
     </tr>
     <tr style="color: #777">
-      <td>${enc(ns_1.default.cal('dtstart'))}</td>
-      <td>${enc(ns_1.default.cal('dtend'))}</td>
+      <td>${enc(ns.cal('dtstart'))}</td>
+      <td>${enc(ns.cal('dtend'))}</td>
     </tr>`;
     return box;
 }
 /**
  * Stick a stylesheet link the document if not already there
  */
-function addStyleSheet(dom, href) {
+export function addStyleSheet(dom, href) {
     const links = dom.querySelectorAll('link');
     for (let i = 0; i < links.length; i++) {
         if ((links[i].getAttribute('rel') || '') === 'stylesheet' &&
@@ -1280,16 +1205,16 @@ function addStyleSheet(dom, href) {
 }
 // Figure (or guess) whether this is an image, etc
 //
-function isAudio(file) {
+export function isAudio(file) {
     return isImage(file, 'audio');
 }
-function isVideo(file) {
+export function isVideo(file) {
     return isImage(file, 'video');
 }
 /**
  *
  */
-function isImage(file, kind) {
+export function isImage(file, kind) {
     const dcCLasses = {
         audio: 'http://purl.org/dc/dcmitype/Sound',
         image: 'http://purl.org/dc/dcmitype/Image',
@@ -1298,10 +1223,10 @@ function isImage(file, kind) {
     const what = kind || 'image';
     // See https://github.com/linkeddata/rdflib.js/blob/e367d5088c/src/formula.ts#L554
     //
-    const typeURIs = solid_logic_1.store.findTypeURIs(file);
+    const typeURIs = store.findTypeURIs(file);
     // See https://github.com/linkeddata/rdflib.js/blob/d5000f/src/utils-js.js#L14
     // e.g.'http://www.w3.org/ns/iana/media-types/audio'
-    const prefix = rdflib_1.Util.mediaTypeClass(what + '/*').uri.split('*')[0];
+    const prefix = Util.mediaTypeClass(what + '/*').uri.split('*')[0];
     for (const t in typeURIs) {
         if (t.startsWith(prefix))
             return true;
@@ -1318,7 +1243,7 @@ function isImage(file, kind) {
  * The input is hidden, as it is uglky - the user clicks on the nice icons and fires the input.
  */
 // See https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
-function fileUploadButtonDiv(dom, droppedFileHandler) {
+export function fileUploadButtonDiv(dom, droppedFileHandler) {
     const div = dom.createElement('div');
     const input = div.appendChild(dom.createElement('input'));
     input.setAttribute('type', 'file');
@@ -1339,10 +1264,10 @@ function fileUploadButtonDiv(dom, droppedFileHandler) {
     const buttonElt = div.appendChild(button(dom, iconBase + 'noun_Upload_76574_000000.svg', 'Upload files', _event => {
         input.click();
     }));
-    (0, dragAndDrop_1.makeDropTarget)(buttonElt, null, droppedFileHandler); // Can also just drop on button
+    makeDropTarget(buttonElt, null, droppedFileHandler); // Can also just drop on button
     return div;
 }
-exports.index = {
+index = {
     line: { // Approx 80em
     },
     twoLine: {