diff --git a/eslint.config.mjs b/eslint.config.mjs
index fe8d3973..3645a165 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -16,6 +16,7 @@ export default [
       'dist/**',
       'lib/**',
       'examples/**',
+      'src/stories/**',
       '*.js'
     ],
   },
diff --git a/eslint.config.mjs.auth-v2 b/eslint.config.mjs.auth-v2
new file mode 100644
index 00000000..92305f79
--- /dev/null
+++ b/eslint.config.mjs.auth-v2
@@ -0,0 +1,74 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import typescriptEslintRecommended from "@typescript-eslint/eslint-plugin/configs/recommended"; // Import the recommended config
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import promise from 'eslint-plugin-promise';
+import promiseRecommended from 'eslint-plugin-promise/recommended'; // Import promise config
+import n from 'eslint-plugin-n';
+import nRecommendedTs from 'eslint-plugin-n/configs/recommended-typescript';
+import importPlugin from 'eslint-plugin-import'; // Import import plugin
+import importRecommended from 'eslint-plugin-import/config/recommended'; // Import import config
+
+export default [
+    {
+        ignores: ["**/dist"],
+    },
+    {
+        plugins: {
+            "@typescript-eslint": typescriptEslint,
+            promise: promise,
+            n: n,
+            import: importPlugin, // Add import plugin
+        },
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                Atomics: "readonly",
+                SharedArrayBuffer: "readonly",
+            },
+            parser: tsParser,
+        },
+        files: ["src/**/*", "test/**/*"],
+    },
+    // spread the configuration files into the final config
+    typescriptEslintRecommended,
+    promiseRecommended,
+    nRecommendedTs,
+    importRecommended, // Add import config
+    {
+        rules: {
+            "no-unused-vars": ["warn", {
+                argsIgnorePattern: "^_",
+                varsIgnorePattern: "^_",
+            }],
+            "@typescript-eslint/no-unused-vars": ["warn", {
+                argsIgnorePattern: "^_",
+                varsIgnorePattern: "^_",
+            }],
+            "promise/param-names": "error",
+            "n/no-callback-literal": "error",
+            // Remove rules added by the extends and not needed
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off",
+            "no-var": "warn",
+            "n/no-unsupported-features/es-syntax": "off",
+            // import rules
+            'import/no-unresolved': 'off', // Because of the types conflict
+            'import/named': 'warn',
+            'import/default': 'warn',
+            'import/namespace': 'warn',
+            'import/no-absolute-path': 'warn',
+            'import/no-dynamic-require': 'warn',
+            'import/no-webpack-loader-syntax': 'warn',
+            'import/no-self-import': 'warn',
+            'import/no-useless-path-segments': 'warn',
+            'import/export': 'warn',
+            'import/no-named-as-default': 'warn',
+            'import/no-named-as-default-member': 'warn',
+            'import/no-deprecated': 'warn',
+            'import/no-extraneous-dependencies': 'warn',
+            'import/no-mutable-exports': 'warn'
+        },
+    }
+];
diff --git a/package-lock.json b/package-lock.json
index 113ad99a..6ac3d74d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,31 +1,31 @@
 {
   "name": "solid-ui",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "solid-ui",
-      "version": "3.0.1",
+      "version": "3.0.2",
       "license": "MIT",
       "dependencies": {
         "@noble/curves": "^2.0.1",
         "@noble/hashes": "^2.0.1",
         "escape-html": "^1.0.3",
         "mime-types": "^3.0.2",
-        "pane-registry": "^3.0.0",
+        "pane-registry": "^3.0.1",
         "solid-namespace": "^0.5.4",
         "uuid": "^13.0.0"
       },
       "devDependencies": {
-        "@babel/cli": "^7.28.3",
-        "@babel/core": "^7.28.3",
-        "@babel/plugin-transform-runtime": "^7.28.3",
-        "@babel/preset-env": "^7.28.0",
-        "@babel/preset-typescript": "^7.27.1",
-        "@babel/runtime": "^7.28.2",
-        "@eslint/js": "^9.32.0",
-        "@mdx-js/react": "^3.1.0",
+        "@babel/cli": "^7.28.6",
+        "@babel/core": "^7.28.6",
+        "@babel/plugin-transform-runtime": "^7.28.5",
+        "@babel/preset-env": "^7.28.6",
+        "@babel/preset-typescript": "^7.28.5",
+        "@babel/runtime": "^7.28.6",
+        "@eslint/js": "^9.39.2",
+        "@mdx-js/react": "^3.1.1",
         "@storybook/addon-actions": "8.6.15",
         "@storybook/addon-docs": "8.6.15",
         "@storybook/addon-essentials": "8.6.15",
@@ -38,34 +38,34 @@
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^30.0.0",
         "@types/jsdom": "^27.0.0",
-        "@types/node": "^25.0.3",
-        "@typescript-eslint/parser": "^8.48.1",
-        "babel-jest": "^30.1.2",
+        "@types/node": "^25.0.10",
+        "@typescript-eslint/parser": "^8.53.1",
+        "babel-jest": "^30.2.0",
         "babel-loader": "^10.0.0",
-        "eslint": "^9.32.0",
+        "eslint": "^9.39.2",
         "eslint-import-resolver-typescript": "^4.4.4",
         "eslint-plugin-import": "^2.32.0",
-        "eslint-plugin-jest": "^29.2.1",
-        "eslint-plugin-n": "^17.21.3",
+        "eslint-plugin-jest": "^29.12.1",
+        "eslint-plugin-n": "^17.23.2",
         "eslint-plugin-promise": "^7.2.1",
-        "get-random-values": "^4.0.0",
+        "get-random-values": "^4.1.1",
         "globals": "^17.1.0",
         "isomorphic-fetch": "^3.0.0",
         "jest": "^30.2.0",
-        "jest-environment-jsdom": "^30.0.5",
+        "jest-environment-jsdom": "^30.2.0",
         "jsdom": "^27.4.0",
         "neostandard": "^0.12.2",
         "nock": "^15.0.0",
-        "rdflib": "^2.3.0",
+        "rdflib": "^2.3.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-is": "^17.0.2",
-        "solid-logic": "^4.0.1",
+        "solid-logic": "^4.0.2",
         "storybook": "8.6.15",
-        "terser-webpack-plugin": "^5.3.15",
-        "typedoc": "^0.28.9",
-        "typescript": "^5.9.2",
-        "webpack": "^5.103.0",
+        "terser-webpack-plugin": "^5.3.16",
+        "typedoc": "^0.28.16",
+        "typescript": "^5.9.3",
+        "webpack": "^5.104.1",
         "webpack-cli": "^6.0.1"
       },
       "optionalDependencies": {
@@ -13761,13 +13761,13 @@
       "license": "BlueOak-1.0.0"
     },
     "node_modules/pane-registry": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pane-registry/-/pane-registry-3.0.0.tgz",
-      "integrity": "sha512-eNgtBtUx2f/3yem+CruYbMh7ULJ6oOvYoeswtQ5P/ippXgDbhZsl95xrahUJ6dPWi0TRzSDSHQ4SL3/G8eZOhQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/pane-registry/-/pane-registry-3.0.1.tgz",
+      "integrity": "sha512-kcAcMGMBL8NAipfErxv+UlqUn7vfkY0TPFl+NyCbOPuUqaVkhNp3G/NSPAvBM/p3MytAxbR0N9fEqfHL0312BQ==",
       "license": "MIT",
       "peerDependencies": {
-        "rdflib": "^2.3.0",
-        "solid-logic": "^4.0.0"
+        "rdflib": "^2.3.5",
+        "solid-logic": "^4.0.2"
       }
     },
     "node_modules/param-case": {
@@ -15030,16 +15030,19 @@
       }
     },
     "node_modules/solid-logic": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/solid-logic/-/solid-logic-4.0.1.tgz",
-      "integrity": "sha512-srCwjX171dUQKN9Pp12lBD4mghRrbSvLfPFmeYP3TezAd5yGleb1ojcbMeN15RVSJQHrPqZDh9TiBUXZo3knLw==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/solid-logic/-/solid-logic-4.0.2.tgz",
+      "integrity": "sha512-B87MiOkYEyIN0lVFbqzHh//qrjg+T4Tvo+McmsTXVSPLgctdQbxPOqjSlrRwVSsUgPdY+XlU61cJco4xdY/YZg==",
       "license": "MIT",
       "dependencies": {
         "@inrupt/solid-client-authn-browser": "^3.1.0",
         "solid-namespace": "^0.5.4"
       },
+      "engines": {
+        "node": ">=18"
+      },
       "peerDependencies": {
-        "rdflib": "^2.3.0"
+        "rdflib": "^2.3.5"
       }
     },
     "node_modules/solid-namespace": {
diff --git a/package.json b/package.json
index 5f7aca09..a2c4e042 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "solid-ui",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "UI library for Solid applications",
   "main": "dist/solid-ui.js",
   "types": "dist/index.d.ts",
@@ -69,7 +69,7 @@
     "@noble/hashes": "^2.0.1",
     "escape-html": "^1.0.3",
     "mime-types": "^3.0.2",
-    "pane-registry": "^3.0.0",
+    "pane-registry": "^3.0.1",
     "solid-namespace": "^0.5.4",
     "uuid": "^13.0.0"
   },
@@ -78,14 +78,14 @@
     "solid-logic": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.3",
-    "@babel/plugin-transform-runtime": "^7.28.3",
-    "@babel/preset-env": "^7.28.0",
-    "@babel/preset-typescript": "^7.27.1",
-    "@babel/runtime": "^7.28.2",
-    "@eslint/js": "^9.32.0",
-    "@mdx-js/react": "^3.1.0",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.28.6",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.6",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/runtime": "^7.28.6",
+    "@eslint/js": "^9.39.2",
+    "@mdx-js/react": "^3.1.1",
     "@storybook/addon-actions": "8.6.15",
     "@storybook/addon-docs": "8.6.15",
     "@storybook/addon-essentials": "8.6.15",
@@ -98,34 +98,34 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^30.0.0",
     "@types/jsdom": "^27.0.0",
-    "@types/node": "^25.0.3",
-    "@typescript-eslint/parser": "^8.48.1",
-    "babel-jest": "^30.1.2",
+    "@types/node": "^25.0.10",
+    "@typescript-eslint/parser": "^8.53.1",
+    "babel-jest": "^30.2.0",
     "babel-loader": "^10.0.0",
-    "eslint": "^9.32.0",
+    "eslint": "^9.39.2",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jest": "^29.2.1",
-    "eslint-plugin-n": "^17.21.3",
+    "eslint-plugin-jest": "^29.12.1",
+    "eslint-plugin-n": "^17.23.2",
     "eslint-plugin-promise": "^7.2.1",
-    "get-random-values": "^4.0.0",
+    "get-random-values": "^4.1.1",
     "globals": "^17.1.0",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.0.5",
+    "jest-environment-jsdom": "^30.2.0",
     "jsdom": "^27.4.0",
     "neostandard": "^0.12.2",
     "nock": "^15.0.0",
-    "rdflib": "^2.3.0",
+    "rdflib": "^2.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
-    "solid-logic": "^4.0.1",
+    "solid-logic": "^4.0.2",
     "storybook": "8.6.15",
-    "terser-webpack-plugin": "^5.3.15",
-    "typedoc": "^0.28.9",
-    "typescript": "^5.9.2",
-    "webpack": "^5.103.0",
+    "terser-webpack-plugin": "^5.3.16",
+    "typedoc": "^0.28.16",
+    "typescript": "^5.9.3",
+    "webpack": "^5.104.1",
     "webpack-cli": "^6.0.1"
   },
   "optionalDependencies": {
diff --git a/src/stories/Buttons.stories.js b/src/stories/Buttons.stories.js
index 00dee629..38783fdc 100644
--- a/src/stories/Buttons.stories.js
+++ b/src/stories/Buttons.stories.js
@@ -1,129 +1,129 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions'
 
 export default {
-  title: "Buttons",
-};
+  title: 'Buttons',
+}
 
 export const Primary = {
   render: () =>
-    UI.widgets.button(document, undefined, "Primary", action("clicked")),
-  name: "Primary",
-};
+    UI.widgets.button(document, undefined, 'Primary', action('clicked')),
+  name: 'Primary',
+}
 
 export const Secondary = {
   render: () =>
-    UI.widgets.button(document, undefined, "Secondary", action("clicked"), {
-      buttonColor: "Secondary",
+    UI.widgets.button(document, undefined, 'Secondary', action('clicked'), {
+      buttonColor: 'Secondary',
     }),
 
-  name: "Secondary",
-};
+  name: 'Secondary',
+}
 
 export const PrimaryNeedsBorder = {
   render: () =>
-    UI.widgets.button(document, undefined, "Secondary", action("clicked"), {
+    UI.widgets.button(document, undefined, 'Secondary', action('clicked'), {
       needsBorder: true,
     }),
 
-  name: "Primary (needs border)",
-};
+  name: 'Primary (needs border)',
+}
 
 export const SecondaryNeedsBorder = {
   render: () =>
-    UI.widgets.button(document, undefined, "Secondary", action("clicked"), {
-      buttonColor: "Secondary",
+    UI.widgets.button(document, undefined, 'Secondary', action('clicked'), {
+      buttonColor: 'Secondary',
       needsBorder: true,
     }),
 
-  name: "Secondary (needs border)",
-};
+  name: 'Secondary (needs border)',
+}
 
 export const ContinueButton = {
-  render: () => UI.widgets.continueButton(document, action("clicked")),
-  name: "Continue button",
-};
+  render: () => UI.widgets.continueButton(document, action('clicked')),
+  name: 'Continue button',
+}
 
 export const CancelButton = {
-  render: () => UI.widgets.cancelButton(document, action("clicked")),
-  name: "Cancel button",
-};
+  render: () => UI.widgets.cancelButton(document, action('clicked')),
+  name: 'Cancel button',
+}
 
 export const DeleteButton = {
   render: () => {
-    const div = document.createElement("div");
+    const div = document.createElement('div')
     const result = UI.widgets.deleteButtonWithCheck(
       document,
       div,
-      "something",
-      action("deleted"),
-    );
-    return div;
+      'something',
+      action('deleted')
+    )
+    return div
   },
 
-  name: "Delete button",
-};
+  name: 'Delete button',
+}
 
 export const ButtonWithIcon = {
   render: () =>
     UI.widgets.button(
       document,
-      "https://solidproject.org/assets/img/solid-emblem.svg",
-      "test",
-      action("clicked!"),
+      'https://solidproject.org/assets/img/solid-emblem.svg',
+      'test',
+      action('clicked!')
     ),
 
-  name: "Button with icon",
-};
+  name: 'Button with icon',
+}
 
 export const FileUploadButton = {
-  render: () => UI.widgets.fileUploadButtonDiv(document, action("uploaded")),
-  name: "File upload button",
-};
+  render: () => UI.widgets.fileUploadButtonDiv(document, action('uploaded')),
+  name: 'File upload button',
+}
 
 export const LinkButton = {
   render: () => {
     document.outlineManager = {
-      GotoSubject: action("go to subject"),
-    };
+      GotoSubject: action('go to subject'),
+    }
 
     return UI.widgets.linkButton(
       document,
-      $rdf.namedNode("http://example.com/"),
-    );
+      $rdf.namedNode('http://example.com/')
+    )
   },
 
-  name: "Link button",
-};
+  name: 'Link button',
+}
 
 export const LinkIcon = {
   render: () =>
-    UI.widgets.linkIcon(document, $rdf.namedNode("https://solidproject.org/")),
-  name: "Link icon",
-};
+    UI.widgets.linkIcon(document, $rdf.namedNode('https://solidproject.org/')),
+  name: 'Link icon',
+}
 
 export const LinkCustomIcon = {
   render: () =>
     UI.widgets.linkIcon(
       document,
-      $rdf.namedNode("https://solidproject.org/"),
-      "https://solidproject.org/favicon.ico",
+      $rdf.namedNode('https://solidproject.org/'),
+      'https://solidproject.org/favicon.ico'
     ),
 
-  name: "Link custom icon",
-};
+  name: 'Link custom icon',
+}
 
 export const RemoveButton = {
   render: () => {
-    const div = document.createElement("div");
-    const p = document.createElement("p");
-    p.appendChild(document.createTextNode("click x to remove me"));
-    const button = UI.widgets.removeButton(document, p);
-    div.appendChild(p);
-    div.appendChild(button);
-    return div;
+    const div = document.createElement('div')
+    const p = document.createElement('p')
+    p.appendChild(document.createTextNode('click x to remove me'))
+    const button = UI.widgets.removeButton(document, p)
+    div.appendChild(p)
+    div.appendChild(button)
+    return div
   },
 
-  name: "Remove button",
-};
+  name: 'Remove button',
+}
diff --git a/src/stories/DateTime.stories.js b/src/stories/DateTime.stories.js
index 04989567..7d70dc1d 100644
--- a/src/stories/DateTime.stories.js
+++ b/src/stories/DateTime.stories.js
@@ -1,56 +1,56 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
 export default {
-  title: "Date & Time",
-};
+  title: 'Date & Time',
+}
 
 export const FormatDateTime = {
   render: () =>
     UI.widgets.formatDateTime(
       new Date(),
-      "{FullYear}-{Month}-{Date}T{Hours}:{Minutes}:{Seconds}.{Milliseconds}",
+      '{FullYear}-{Month}-{Date}T{Hours}:{Minutes}:{Seconds}.{Milliseconds}'
     ),
 
-  name: "formatDateTime",
-};
+  name: 'formatDateTime',
+}
 
 export const FormatDateTimeDate = {
-  render: () => UI.widgets.formatDateTime(new Date(), "{Date}.{Month}.{Year}"),
-  name: "formatDateTime date",
-};
+  render: () => UI.widgets.formatDateTime(new Date(), '{Date}.{Month}.{Year}'),
+  name: 'formatDateTime date',
+}
 
 export const FormatDateTimeTime = {
   render: () =>
-    UI.widgets.formatDateTime(new Date(), "{Hours}:{Minutes}:{Seconds}"),
-  name: "formatDateTime time",
-};
+    UI.widgets.formatDateTime(new Date(), '{Hours}:{Minutes}:{Seconds}'),
+  name: 'formatDateTime time',
+}
 
 export const ShortDateNotTodayWithoutTime = {
-  render: () => UI.widgets.shortDate("2020-01-01T15:43", true),
-  name: "shortDate (not today & without time)",
-};
+  render: () => UI.widgets.shortDate('2020-01-01T15:43', true),
+  name: 'shortDate (not today & without time)',
+}
 
 export const ShortDateWithTimeButNotToday = {
-  render: () => UI.widgets.shortDate("2020-01-01T15:43", false),
-  name: "shortDate (with time, but not today)",
-};
+  render: () => UI.widgets.shortDate('2020-01-01T15:43', false),
+  name: 'shortDate (with time, but not today)',
+}
 
 export const ShortDateTodayWithoutTime = {
   render: () => UI.widgets.shortDate(new Date().toISOString(), true),
-  name: "shortDate (today & without time)",
-};
+  name: 'shortDate (today & without time)',
+}
 
 export const ShortDateTodayWithTime = {
   render: () => UI.widgets.shortDate(new Date().toISOString(), false),
-  name: "shortDate (today & with time)",
-};
+  name: 'shortDate (today & with time)',
+}
 
 export const ShortTime = {
   render: () => UI.widgets.shortTime(),
-  name: "shortTime",
-};
+  name: 'shortTime',
+}
 
 export const Timestamp = {
   render: () => UI.widgets.timestamp(),
-  name: "timestamp",
-};
+  name: 'timestamp',
+}
diff --git a/src/stories/Display.stories.js b/src/stories/Display.stories.js
index b0da1c99..c99e1451 100644
--- a/src/stories/Display.stories.js
+++ b/src/stories/Display.stories.js
@@ -1,43 +1,43 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
 export default {
-  title: "Display",
-};
+  title: 'Display',
+}
 
 export const Complain = {
   render: () => {
-    const div = document.createElement("div");
+    const div = document.createElement('div')
 
     UI.widgets.complain(
       {
         div,
         dom: document,
       },
-      "not good!",
-    );
+      'not good!'
+    )
 
-    return div;
+    return div
   },
 
-  name: "complain",
-};
+  name: 'complain',
+}
 
 export const ErrorMessageBlock = {
   render: () => {
-    return UI.widgets.errorMessageBlock(document, "my error message", "#f0f");
+    return UI.widgets.errorMessageBlock(document, 'my error message', '#f0f')
   },
 
-  name: "errorMessageBlock",
-};
+  name: 'errorMessageBlock',
+}
 
 export const SetName = {
   render: () => {
-    const div = document.createElement("div");
-    const jane = $rdf.namedNode("https://jane.example/person/card#me");
-    SolidLogic.store.add(jane, UI.ns.foaf("name"), "Jane Doe");
-    UI.widgets.setName(div, jane);
-    return div;
+    const div = document.createElement('div')
+    const jane = $rdf.namedNode('https://jane.example/person/card#me')
+    SolidLogic.store.add(jane, UI.ns.foaf('name'), 'Jane Doe')
+    UI.widgets.setName(div, jane)
+    return div
   },
 
-  name: "setName",
-};
+  name: 'setName',
+}
diff --git a/src/stories/DomManipulation.stories.js b/src/stories/DomManipulation.stories.js
index 9a5a27b4..8bd276d1 100644
--- a/src/stories/DomManipulation.stories.js
+++ b/src/stories/DomManipulation.stories.js
@@ -1,66 +1,66 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
 export default {
-  title: "DOM manipulation",
-};
+  title: 'DOM manipulation',
+}
 
 export const AddStyleSheet = {
   render: () => {
     UI.widgets.addStyleSheet(
       document,
-      "https://linkeddata.github.io/tabulator-firefox/content/tabbedtab.css",
-    );
+      'https://linkeddata.github.io/tabulator-firefox/content/tabbedtab.css'
+    )
   },
 
-  name: "addStyleSheet",
-  withSource: "open",
+  name: 'addStyleSheet',
+  withSource: 'open',
 
   decorators: [
     (Story) => {
-      Story();
-      const html = document.querySelector("link").outerHTML;
-      const pre = document.createElement("pre");
-      const text = document.createTextNode(html);
-      pre.appendChild(text);
-      return pre;
+      Story()
+      const html = document.querySelector('link').outerHTML
+      const pre = document.createElement('pre')
+      const text = document.createTextNode(html)
+      pre.appendChild(text)
+      return pre
     },
   ],
-};
+}
 
 export const ClearElement = {
   render: () => {
-    let counter = 0;
-    const div = document.createElement("p");
+    let counter = 0
+    const div = document.createElement('p')
 
     setInterval(() => {
       if (counter++ % 2 === 0) {
-        const text = document.createTextNode("Now you see me");
-        div.appendChild(text);
+        const text = document.createTextNode('Now you see me')
+        div.appendChild(text)
       } else {
-        UI.widgets.clearElement(div);
+        UI.widgets.clearElement(div)
       }
-    }, 1000);
+    }, 1000)
 
-    return div;
+    return div
   },
 
-  name: "clearElement",
-};
+  name: 'clearElement',
+}
 
 export const RefreshTree = {
   render: () => {
     setInterval(() => {
-      UI.widgets.refreshTree(document.body);
-    }, 1000);
+      UI.widgets.refreshTree(document.body)
+    }, 1000)
 
-    const refreshable = document.createElement("p");
+    const refreshable = document.createElement('p')
 
     refreshable.refresh = () => {
-      refreshable.innerText = new Date().getTime();
-    };
+      refreshable.innerText = new Date().getTime()
+    }
 
-    return refreshable;
+    return refreshable
   },
 
-  name: "refreshTree",
-};
+  name: 'refreshTree',
+}
diff --git a/src/stories/DragAndDrop.stories.js b/src/stories/DragAndDrop.stories.js
index 4a2c4ca0..9b7294b9 100644
--- a/src/stories/DragAndDrop.stories.js
+++ b/src/stories/DragAndDrop.stories.js
@@ -1,68 +1,68 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions'
 
 export default {
-  title: "Drag & Drop",
-};
+  title: 'Drag & Drop',
+}
 
 export const Draggable = {
   render: () => {
-    const dragElement = document.createElement("div");
-    dragElement.appendChild(document.createTextNode("Drag me to the target!"));
-    const uri = new $rdf.NamedNode("https://exampleuser.inrupt.net");
-    UI.widgets.makeDraggable(dragElement, uri);
-    return dragElement;
+    const dragElement = document.createElement('div')
+    dragElement.appendChild(document.createTextNode('Drag me to the target!'))
+    const uri = new $rdf.NamedNode('https://exampleuser.inrupt.net')
+    UI.widgets.makeDraggable(dragElement, uri)
+    return dragElement
   },
 
-  name: "Draggable",
-};
+  name: 'Draggable',
+}
 
 export const DropTarget = {
   render: () => {
-    const target = document.createElement("div");
+    const target = document.createElement('div')
     target.style =
-      "padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px";
+      'padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px'
     target.appendChild(
-      document.createTextNode("Drop things (URIs, files, ...) here"),
-    );
+      document.createTextNode('Drop things (URIs, files, ...) here')
+    )
     UI.widgets.makeDropTarget(
       target,
-      action("dropped uri"),
-      action("dropped file"),
-    );
-    return target;
+      action('dropped uri'),
+      action('dropped file')
+    )
+    return target
   },
 
-  name: "Drop Target",
-};
+  name: 'Drop Target',
+}
 
 export const UploadFiles = {
   render: ({ fileBase, pictureBase }) => {
-    const target = document.createElement("div");
+    const target = document.createElement('div')
     target.style =
-      "padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px";
+      'padding: 1em; text-align:center; border: 1px solid black; width: 100px; height: 100px'
     target.appendChild(
-      document.createTextNode("Drop a file (document, picture, ...) here"),
-    );
+      document.createTextNode('Drop a file (document, picture, ...) here')
+    )
 
-    UI.widgets.makeDropTarget(target, action("dropped uri"), (files) => {
+    UI.widgets.makeDropTarget(target, action('dropped uri'), (files) => {
       UI.widgets.uploadFiles(
         SolidLogic.store.fetcher,
         files,
         fileBase,
         pictureBase,
-        action("file uploaded successfully"),
-      );
-    });
+        action('file uploaded successfully')
+      )
+    })
 
-    return target;
+    return target
   },
 
-  name: "Upload Files",
+  name: 'Upload Files',
 
   args: {
-    fileBase: "https://pod.example/Files",
-    pictureBase: "https://pod.example/Pictures",
+    fileBase: 'https://pod.example/Files',
+    pictureBase: 'https://pod.example/Pictures',
   },
-};
+}
diff --git a/src/stories/Events.stories.js b/src/stories/Events.stories.js
index cd373337..c222f99a 100644
--- a/src/stories/Events.stories.js
+++ b/src/stories/Events.stories.js
@@ -1,28 +1,28 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions'
 
 export default {
-  title: "Events",
-};
+  title: 'Events',
+}
 
 export const OpenHrefInOutlineMode = {
   render: () => {
     document.outlineManager = {
-      GotoSubject: action("go to subject"),
-    };
+      GotoSubject: action('go to subject'),
+    }
 
-    const anchor = document.createElement("a");
-    anchor.setAttribute("href", "http://example.com");
+    const anchor = document.createElement('a')
+    anchor.setAttribute('href', 'http://example.com')
 
     anchor.onclick = (e) => {
-      UI.widgets.openHrefInOutlineMode(e);
-      return false;
-    };
+      UI.widgets.openHrefInOutlineMode(e)
+      return false
+    }
 
-    anchor.appendChild(document.createTextNode("click me"));
-    return anchor;
+    anchor.appendChild(document.createTextNode('click me'))
+    return anchor
   },
 
-  name: "openHrefInOutlineMode",
-};
+  name: 'openHrefInOutlineMode',
+}
diff --git a/src/stories/Header.stories.js b/src/stories/Header.stories.js
index 1485a144..87824d47 100644
--- a/src/stories/Header.stories.js
+++ b/src/stories/Header.stories.js
@@ -1,20 +1,20 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
 const headerDecorator = (Story) => {
-  setTimeout(() => Story(), 1);
-  return '<div>The above <code>div<code> with ID "PageHeader" is replaced by the header component</div>';
-};
+  setTimeout(() => Story(), 1)
+  return '<div>The above <code>div<code> with ID "PageHeader" is replaced by the header component</div>'
+}
 
 export default {
-  title: "Header",
-};
+  title: 'Header',
+}
 
 export const Header = {
   render: () => {
-    const options = {};
-    UI.initHeader(SolidLogic.store, options);
+    const options = {}
+    UI.initHeader(SolidLogic.store, options)
   },
 
-  name: "header",
+  name: 'header',
   decorators: [headerDecorator],
-};
+}
diff --git a/src/stories/Images.stories.js b/src/stories/Images.stories.js
index 2fd4a237..13582196 100644
--- a/src/stories/Images.stories.js
+++ b/src/stories/Images.stories.js
@@ -1,110 +1,110 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
-import { rawJsonDecorator } from "./decorators";
+import { rawJsonDecorator } from './decorators'
 
 const imageDecorator = (Story) => {
-  const result = Story();
+  const result = Story()
   return `
             <div>Returns:</div>
             <pre>${result}</pre>
             <p>Preview:</p>
             <img src="${result}" width="80" />
-`;
-};
+`
+}
 
 export default {
-  title: "Images",
-};
+  title: 'Images',
+}
 
 export const ForFoafAgent = {
-  render: () => UI.widgets.findImage(UI.ns.foaf("Agent")),
-  name: "for foaf:Agent",
+  render: () => UI.widgets.findImage(UI.ns.foaf('Agent')),
+  name: 'for foaf:Agent',
   decorators: [imageDecorator],
-};
+}
 
 export const ForRdfResource = {
-  render: () => UI.widgets.findImage(UI.ns.rdf("Resource")),
-  name: "for rdf:Resource",
+  render: () => UI.widgets.findImage(UI.ns.rdf('Resource')),
+  name: 'for rdf:Resource',
   decorators: [imageDecorator],
-};
+}
 
 export const WithVcardHasPhoto = {
   render: () => {
-    const person = $rdf.namedNode("https://person.example/1#me");
-    const photo = $rdf.namedNode("https://michielbdejong.com/img/me.jpg");
-    SolidLogic.store.add(person, UI.ns.vcard("hasPhoto"), photo);
-    return UI.widgets.findImage(person);
+    const person = $rdf.namedNode('https://person.example/1#me')
+    const photo = $rdf.namedNode('https://michielbdejong.com/img/me.jpg')
+    SolidLogic.store.add(person, UI.ns.vcard('hasPhoto'), photo)
+    return UI.widgets.findImage(person)
   },
 
-  name: "with vcard:hasPhoto",
+  name: 'with vcard:hasPhoto',
   decorators: [imageDecorator],
-};
+}
 
 export const WithFoafImg = {
   render: () => {
-    const person = $rdf.namedNode("https://person.example/2#me");
-    const photo = $rdf.namedNode("https://michielbdejong.com/img/me.jpg");
-    SolidLogic.store.add(person, UI.ns.foaf("img"), photo);
-    return UI.widgets.findImage(person);
+    const person = $rdf.namedNode('https://person.example/2#me')
+    const photo = $rdf.namedNode('https://michielbdejong.com/img/me.jpg')
+    SolidLogic.store.add(person, UI.ns.foaf('img'), photo)
+    return UI.widgets.findImage(person)
   },
 
-  name: "with foaf:img",
+  name: 'with foaf:img',
   decorators: [imageDecorator],
-};
+}
 
 export const WithoutFavicon = {
   render: () =>
-    UI.widgets.findImageFromURI($rdf.namedNode("https://example.com/")),
-  name: "without favicon",
+    UI.widgets.findImageFromURI($rdf.namedNode('https://example.com/')),
+  name: 'without favicon',
   decorators: [imageDecorator],
-};
+}
 
 export const Favicon = {
   render: () =>
     UI.widgets.findImageFromURI(
-      $rdf.namedNode("https://solidproject.org/some/file.html"),
+      $rdf.namedNode('https://solidproject.org/some/file.html')
     ),
-  name: "favicon",
+  name: 'favicon',
   decorators: [imageDecorator],
-};
+}
 
 export const MessageId = {
-  render: () => UI.widgets.findImageFromURI($rdf.namedNode("mid:example")),
-  name: "Message-ID",
+  render: () => UI.widgets.findImageFromURI($rdf.namedNode('mid:example')),
+  name: 'Message-ID',
   decorators: [imageDecorator],
-};
+}
 
 export const EMail = {
   render: () =>
-    UI.widgets.findImageFromURI($rdf.namedNode("mailto:user@mail.example")),
-  name: "E-Mail",
+    UI.widgets.findImageFromURI($rdf.namedNode('mailto:user@mail.example')),
+  name: 'E-Mail',
   decorators: [imageDecorator],
-};
+}
 
 export const ImagesOf = {
   render: () => {
-    const store = $rdf.graph();
-    const thing = $rdf.namedNode("http://thing.example/resource#it");
-    const avatar = $rdf.namedNode("https://pod.example/image1.png");
-    const image = $rdf.namedNode("https://pod.example/image2.jpg");
-    store.add(thing, UI.ns.sioc("avatar"), avatar);
-    store.add(thing, UI.ns.foaf("img"), image);
-    return UI.widgets.imagesOf(thing, store);
+    const store = $rdf.graph()
+    const thing = $rdf.namedNode('http://thing.example/resource#it')
+    const avatar = $rdf.namedNode('https://pod.example/image1.png')
+    const image = $rdf.namedNode('https://pod.example/image2.jpg')
+    store.add(thing, UI.ns.sioc('avatar'), avatar)
+    store.add(thing, UI.ns.foaf('img'), image)
+    return UI.widgets.imagesOf(thing, store)
   },
 
-  name: "imagesOf",
+  name: 'imagesOf',
   decorators: [rawJsonDecorator],
-};
+}
 
 export const SetImage = {
   render: () => {
-    const myTrip = $rdf.namedNode("http://example.com/#trip");
-    $rdf.graph().add(myTrip, UI.ns.rdf("type"), UI.ns.trip("Trip"));
-    const img = document.createElement("img");
-    img.setAttribute("style", "height:50px;width:50px;");
-    UI.widgets.setImage(img, myTrip);
-    return img;
+    const myTrip = $rdf.namedNode('http://example.com/#trip')
+    $rdf.graph().add(myTrip, UI.ns.rdf('type'), UI.ns.trip('Trip'))
+    const img = document.createElement('img')
+    img.setAttribute('style', 'height:50px;width:50px;')
+    UI.widgets.setImage(img, myTrip)
+    return img
   },
 
-  name: "setImage",
-};
+  name: 'setImage',
+}
diff --git a/src/stories/Interactive.stories.js b/src/stories/Interactive.stories.js
index 180c52cf..3aa6e387 100644
--- a/src/stories/Interactive.stories.js
+++ b/src/stories/Interactive.stories.js
@@ -1,90 +1,90 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions'
 
 export default {
-  title: "Interactive",
-};
+  title: 'Interactive',
+}
 
 export const AskName = {
   render: () => {
-    const div = document.createElement("div");
+    const div = document.createElement('div')
     UI.widgets
       .askName(document, SolidLogic.store, div)
-      .then((name) => window.alert(`You picked "${name}"`));
-    return div;
+      .then((name) => window.alert(`You picked "${name}"`))
+    return div
   },
 
-  name: "Ask name",
-};
+  name: 'Ask name',
+}
 
 export const AttachmentList = {
   render: () => {
-    const div = document.createElement("div");
+    const div = document.createElement('div')
 
     SolidLogic.store.add(
       $rdf.namedNode(
-        "https://example-user.inrupt.net/public/some-message.ttl#this",
+        'https://example-user.inrupt.net/public/some-message.ttl#this'
       ),
-      UI.ns.wf("attachment"),
-      $rdf.namedNode("http://example.com/#some-attachment"),
-    );
+      UI.ns.wf('attachment'),
+      $rdf.namedNode('http://example.com/#some-attachment')
+    )
 
     UI.widgets.attachmentList(
       document,
       $rdf.namedNode(
-        "https://example-user.inrupt.net/public/some-message.ttl" + "#this",
+        'https://example-user.inrupt.net/public/some-message.ttl' + '#this'
       ),
-      div,
-    );
+      div
+    )
 
-    return div;
+    return div
   },
 
-  name: "Attachment list",
-};
+  name: 'Attachment list',
+}
 
 export const PersonTr = {
   render: () => {
     const michiel = $rdf.namedNode(
-      "https://michielbdejong.inrupt.net/profile/card#me",
-    );
-    return UI.widgets.personTR(document, null, michiel);
+      'https://michielbdejong.inrupt.net/profile/card#me'
+    )
+    return UI.widgets.personTR(document, null, michiel)
   },
 
-  name: "Person TR",
-};
+  name: 'Person TR',
+}
 
 export const RenderAsDiv = {
   render: () => {
     const michiel = $rdf.namedNode(
-      "https://michielbdejong.inrupt.net/profile/card#me",
-    );
+      'https://michielbdejong.inrupt.net/profile/card#me'
+    )
 
     const options = {
       wrapInATR: true,
-    };
+    }
 
-    return UI.widgets.renderAsDiv(document, michiel, options);
+    return UI.widgets.renderAsDiv(document, michiel, options)
   },
 
-  name: "Render As DIV",
-};
+  name: 'Render As DIV',
+}
 
 export const SelectorPanel = {
   render: () => {
-    const kb = $rdf.graph();
-    const type = $rdf.namedNode("http://example.com/#type");
-    const predicate = $rdf.namedNode("http://example.com/#pred");
-    const inverse = false;
+    const kb = $rdf.graph()
+    const type = $rdf.namedNode('http://example.com/#type')
+    const predicate = $rdf.namedNode('http://example.com/#pred')
+    const inverse = false
 
     const possible = [
-      $rdf.namedNode("http://example.com/#blue"),
-      $rdf.namedNode("http://example.com/#green"),
-      $rdf.namedNode("http://example.com/#yellow"),
-    ];
+      $rdf.namedNode('http://example.com/#blue'),
+      $rdf.namedNode('http://example.com/#green'),
+      $rdf.namedNode('http://example.com/#yellow'),
+    ]
 
-    const options = {};
+    const options = {}
 
     return UI.widgets.selectorPanel(
       document,
@@ -94,29 +94,29 @@ export const SelectorPanel = {
       inverse,
       possible,
       options,
-      action("selection"),
-      action("link clicked"),
-    );
+      action('selection'),
+      action('link clicked')
+    )
   },
 
-  name: "selectorPanel",
-};
+  name: 'selectorPanel',
+}
 
 export const SelectorPanelRefresh = {
   render: () => {
-    const list = document.createElement("div");
-    const kb = $rdf.graph();
-    const type = $rdf.namedNode("http://example.com/#type");
-    const predicate = $rdf.namedNode("http://example.com/#pred");
-    const inverse = false;
+    const list = document.createElement('div')
+    const kb = $rdf.graph()
+    const type = $rdf.namedNode('http://example.com/#type')
+    const predicate = $rdf.namedNode('http://example.com/#pred')
+    const inverse = false
 
     const possible = [
-      $rdf.namedNode("http://example.com/#blue"),
-      $rdf.namedNode("http://example.com/#green"),
-      $rdf.namedNode("http://example.com/#yellow"),
-    ];
+      $rdf.namedNode('http://example.com/#blue'),
+      $rdf.namedNode('http://example.com/#green'),
+      $rdf.namedNode('http://example.com/#yellow'),
+    ]
 
-    const options = {};
+    const options = {}
 
     return UI.widgets.selectorPanelRefresh(
       list,
@@ -127,10 +127,10 @@ export const SelectorPanelRefresh = {
       inverse,
       possible,
       options,
-      action("selection"),
-      action("link clicked"),
-    );
+      action('selection'),
+      action('link clicked')
+    )
   },
 
-  name: "selectorPanelRefresh",
-};
+  name: 'selectorPanelRefresh',
+}
diff --git a/src/stories/Log.stories.js b/src/stories/Log.stories.js
index e54e3402..9a732f17 100644
--- a/src/stories/Log.stories.js
+++ b/src/stories/Log.stories.js
@@ -1,143 +1,143 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
 const buttonDecorator = (Story, { args }) => {
-  const button = document.createElement("button");
-  button.innerText = args.buttonLabel;
-  button.addEventListener("click", () => Story());
-  return button;
-};
+  const button = document.createElement('button')
+  button.innerText = args.buttonLabel
+  button.addEventListener('click', () => Story())
+  return button
+}
 
 export default {
-  title: "Log",
-};
+  title: 'Log',
+}
 
 export const SimpleMessage = {
-  render: () => UI.log.msg("A simple message"),
-  name: "simple message",
+  render: () => UI.log.msg('A simple message'),
+  name: 'simple message',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Add a message",
+    buttonLabel: 'Add a message',
   },
-};
+}
 
 export const WarningMessage = {
-  render: () => UI.log.warn("A warning message"),
-  name: "warning message",
+  render: () => UI.log.warn('A warning message'),
+  name: 'warning message',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Add a warning",
+    buttonLabel: 'Add a warning',
   },
-};
+}
 
 export const DebugMessage = {
-  render: () => UI.log.debug("A debugging message"),
-  name: "debug message",
+  render: () => UI.log.debug('A debugging message'),
+  name: 'debug message',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Add a debugging message",
+    buttonLabel: 'Add a debugging message',
   },
-};
+}
 
 export const InfoMessage = {
-  render: () => UI.log.info("An info message"),
-  name: "info message",
+  render: () => UI.log.info('An info message'),
+  name: 'info message',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Add an info message",
+    buttonLabel: 'Add an info message',
   },
-};
+}
 
 export const ErrorMessage = {
-  render: () => UI.log.error("An error message"),
-  name: "error message",
+  render: () => UI.log.error('An error message'),
+  name: 'error message',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Add an error message",
+    buttonLabel: 'Add an error message',
   },
-};
+}
 
 export const SuccessMessage = {
-  render: () => UI.log.success("A success message"),
-  name: "success message",
+  render: () => UI.log.success('A success message'),
+  name: 'success message',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Add a success message",
+    buttonLabel: 'Add a success message',
   },
-};
+}
 
 export const AlertMessage = {
-  render: () => UI.log.alert("An alert message"),
-  name: "alert message",
+  render: () => UI.log.alert('An alert message'),
+  name: 'alert message',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Trigger an alert message",
+    buttonLabel: 'Trigger an alert message',
   },
-};
+}
 
 export const ClearMessages = {
   render: () => UI.log.clear(),
-  name: "clear messages",
+  name: 'clear messages',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Clear status area",
+    buttonLabel: 'Clear status area',
   },
-};
+}
 
 export const SetLevel = {
   render: () => {
-    const div = document.createElement("div");
-    const input = document.createElement("input");
-    input.type = "text";
-    input.inputmode = "numeric";
-    input.pattern = "[0-9]*";
-    input.value = 7;
-    div.appendChild(input);
-    const button = document.createElement("button");
-    button.innerText = "Set level";
-    button.addEventListener("click", () =>
-      UI.log.setLevel(parseInt(input.value, 10)),
-    );
-    div.appendChild(button);
-    return div;
+    const div = document.createElement('div')
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.inputmode = 'numeric'
+    input.pattern = '[0-9]*'
+    input.value = 7
+    div.appendChild(input)
+    const button = document.createElement('button')
+    button.innerText = 'Set level'
+    button.addEventListener('click', () =>
+      UI.log.setLevel(parseInt(input.value, 10))
+    )
+    div.appendChild(button)
+    return div
   },
 
-  name: "set level",
-};
+  name: 'set level',
+}
 
 export const DumpHtml = {
   render: () => UI.log.dumpHTML(),
-  name: "dump html",
+  name: 'dump html',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Dump HTML",
+    buttonLabel: 'Dump HTML',
   },
-};
+}
 
 export const LogAscending = {
   render: () => UI.log.logAscending(),
-  name: "log ascending",
+  name: 'log ascending',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Log ascending",
+    buttonLabel: 'Log ascending',
   },
-};
+}
 
 export const LogDescending = {
   render: () => UI.log.logDescending(),
-  name: "log descending",
+  name: 'log descending',
   decorators: [buttonDecorator],
 
   args: {
-    buttonLabel: "Log descending",
+    buttonLabel: 'Log descending',
   },
-};
+}
diff --git a/src/stories/Matrix.stories.js b/src/stories/Matrix.stories.js
index b3b1490d..9f2b5e59 100644
--- a/src/stories/Matrix.stories.js
+++ b/src/stories/Matrix.stories.js
@@ -1,15 +1,15 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
 export default {
-  title: "Matrix",
-};
+  title: 'Matrix',
+}
 
 export const ForQuery = {
   render: () => {
-    const testDocURI = "https://pod.example/";
-    const testDoc = $rdf.sym(testDocURI);
-    const kb = SolidLogic.store;
-    kb.removeMany(undefined, undefined, undefined, testDoc);
+    const testDocURI = 'https://pod.example/'
+    const testDoc = $rdf.sym(testDocURI)
+    const kb = SolidLogic.store
+    kb.removeMany(undefined, undefined, undefined, testDoc)
 
     const turtle = `@prefix :  <#>.
 @prefix foaf:  <http://xmlns.com/foaf/0.1/>.
@@ -29,34 +29,34 @@ export const ForQuery = {
 :r2 dc:author :a2;
     sched:cell
           [ sched:availabilty sched:Maybe; cal:dtstart "2015-01-01" ] .
-`;
+`
 
-    $rdf.parse(turtle, kb, testDocURI, "text/turtle");
-    const SCHED = $rdf.Namespace("http://www.w3.org/ns/pim/schedule#");
-    const DC = $rdf.Namespace("http://purl.org/dc/elements/1.1/");
-    const ICAL = $rdf.Namespace("http://www.w3.org/2002/12/cal/ical#");
-    const invitation = kb.sym(`${testDocURI}#event1`);
-    var query = new $rdf.Query("Responses");
+    $rdf.parse(turtle, kb, testDocURI, 'text/turtle')
+    const SCHED = $rdf.Namespace('http://www.w3.org/ns/pim/schedule#')
+    const DC = $rdf.Namespace('http://purl.org/dc/elements/1.1/')
+    const ICAL = $rdf.Namespace('http://www.w3.org/2002/12/cal/ical#')
+    const invitation = kb.sym(`${testDocURI}#event1`)
+    const query = new $rdf.Query('Responses')
 
     const variables = {
-      time: $rdf.variable("time"),
-      author: $rdf.variable("author"),
-      availabilty: $rdf.variable("value"),
-      response: $rdf.variable("response"),
-      cell: $rdf.variable("cell"),
-    };
+      time: $rdf.variable('time'),
+      author: $rdf.variable('author'),
+      availabilty: $rdf.variable('value'),
+      response: $rdf.variable('response'),
+      cell: $rdf.variable('cell'),
+    }
 
-    query.pat.add(invitation, SCHED("response"), variables.response);
-    query.pat.add(variables.response, DC("author"), variables.author);
-    query.pat.add(variables.response, SCHED("cell"), variables.cell);
-    query.pat.add(variables.cell, SCHED("availabilty"), variables.availabilty);
-    query.pat.add(variables.cell, ICAL("dtstart"), variables.time);
+    query.pat.add(invitation, SCHED('response'), variables.response)
+    query.pat.add(variables.response, DC('author'), variables.author)
+    query.pat.add(variables.response, SCHED('cell'), variables.cell)
+    query.pat.add(variables.cell, SCHED('availabilty'), variables.availabilty)
+    query.pat.add(variables.cell, ICAL('dtstart'), variables.time)
 
     const options = {
       cellFunction: (cell, x, y, value) => {
-        cell.textContent = value ? UI.utils.label(value) : "-";
+        cell.textContent = value ? UI.utils.label(value) : '-'
       },
-    };
+    }
 
     return UI.matrix.matrixForQuery(
       document,
@@ -65,9 +65,9 @@ export const ForQuery = {
       variables.author,
       variables.availabilty,
       options,
-      function () {},
-    );
+      function () {}
+    )
   },
 
-  name: "for query",
-};
+  name: 'for query',
+}
diff --git a/src/stories/MediaTypes.stories.js b/src/stories/MediaTypes.stories.js
index e7b3a1d8..b85d6e02 100644
--- a/src/stories/MediaTypes.stories.js
+++ b/src/stories/MediaTypes.stories.js
@@ -1,52 +1,52 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
-import { rawJsonDecorator } from "./decorators";
+import { rawJsonDecorator } from './decorators'
 
 export default {
-  title: "Media Types",
-};
+  title: 'Media Types',
+}
 
 export const IsAudio = {
   render: () => {
-    const type = $rdf.namedNode("http://www.w3.org/ns/iana/media-types/audio/");
+    const type = $rdf.namedNode('http://www.w3.org/ns/iana/media-types/audio/')
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/audio.mpeg"),
-      UI.ns.rdf("type"),
-      type,
-    );
-    return UI.widgets.isAudio($rdf.namedNode("http://example.com/audio.mpeg"));
+      $rdf.namedNode('http://example.com/audio.mpeg'),
+      UI.ns.rdf('type'),
+      type
+    )
+    return UI.widgets.isAudio($rdf.namedNode('http://example.com/audio.mpeg'))
   },
 
-  name: "isAudio",
+  name: 'isAudio',
   decorators: [rawJsonDecorator],
-};
+}
 
 export const IsVideo = {
   render: () => {
-    const type = $rdf.namedNode("http://www.w3.org/ns/iana/media-types/video/");
+    const type = $rdf.namedNode('http://www.w3.org/ns/iana/media-types/video/')
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/video.mov"),
-      UI.ns.rdf("type"),
-      type,
-    );
-    return UI.widgets.isVideo($rdf.namedNode("http://example.com/video.mov"));
+      $rdf.namedNode('http://example.com/video.mov'),
+      UI.ns.rdf('type'),
+      type
+    )
+    return UI.widgets.isVideo($rdf.namedNode('http://example.com/video.mov'))
   },
 
-  name: "isVideo",
+  name: 'isVideo',
   decorators: [rawJsonDecorator],
-};
+}
 
 export const IsImage = {
   render: () => {
-    const type = $rdf.namedNode("http://www.w3.org/ns/iana/media-types/image/");
+    const type = $rdf.namedNode('http://www.w3.org/ns/iana/media-types/image/')
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/image.jpeg"),
-      UI.ns.rdf("type"),
-      type,
-    );
-    return UI.widgets.isImage($rdf.namedNode("http://example.com/image.jpeg"));
+      $rdf.namedNode('http://example.com/image.jpeg'),
+      UI.ns.rdf('type'),
+      type
+    )
+    return UI.widgets.isImage($rdf.namedNode('http://example.com/image.jpeg'))
   },
 
-  name: "isImage",
+  name: 'isImage',
   decorators: [rawJsonDecorator],
-};
+}
diff --git a/src/stories/Notepad.stories.js b/src/stories/Notepad.stories.js
index f90f8edf..6ed95dd2 100644
--- a/src/stories/Notepad.stories.js
+++ b/src/stories/Notepad.stories.js
@@ -1,43 +1,42 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
-import { rawJsonDecorator } from "./decorators";
 
 export default {
-  title: "Notepad",
-};
+  title: 'Notepad',
+}
 
 export const Notepad = {
   render: () => {
     const pad = $rdf.namedNode(
-      "https://example-user.inrupt.net/public/example-notepad/index.ttl#this",
-    );
+      'https://example-user.inrupt.net/public/example-notepad/index.ttl#this'
+    )
     const me = new $rdf.NamedNode(
-      "https://example-user.inrupt.net/profile/card#me",
-    );
-    const subject = SolidLogic.store.sym("https://test.test#");
-    const options = {};
-    return UI.pad.notepad(document, pad.doc(), subject, me, options);
+      'https://example-user.inrupt.net/profile/card#me'
+    )
+    const subject = SolidLogic.store.sym('https://test.test#')
+    const options = {}
+    return UI.pad.notepad(document, pad.doc(), subject, me, options)
   },
 
-  name: "notepad",
-};
+  name: 'notepad',
+}
 
 export const ManageParticipation = {
   render: () => {
     const me = new $rdf.NamedNode(
-      "https://example-user.inrupt.net/profile/card#me",
-    );
-    const structure = document.createElement("div");
-    const container = document.createElement("div");
-    const subject = SolidLogic.store.sym("https://test.test#");
+      'https://example-user.inrupt.net/profile/card#me'
+    )
+    const structure = document.createElement('div')
+    const container = document.createElement('div')
+    const subject = SolidLogic.store.sym('https://test.test#')
 
     const pad = $rdf.namedNode(
-      "https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this",
-    );
+      'https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this'
+    )
 
     const options = {
       statusArea: container,
-    };
+    }
 
     return UI.pad.manageParticipation(
       document,
@@ -45,112 +44,112 @@ export const ManageParticipation = {
       pad.doc(),
       subject,
       me,
-      options,
-    );
+      options
+    )
   },
 
-  name: "manageParticipation",
-};
+  name: 'manageParticipation',
+}
 
 export const NotepadToHtml = {
   render: () => {
-    const div = document.createElement("div");
-    const kb = SolidLogic.store;
-    const fetcher = $rdf.fetcher(kb);
+    const div = document.createElement('div')
+    const kb = SolidLogic.store
+    const fetcher = $rdf.fetcher(kb)
 
     const pad = $rdf.namedNode(
-      "https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this",
-    );
+      'https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this'
+    )
 
     fetcher.load(pad.doc()).then(() => {
-      const htmlStr = UI.pad.notepadToHTML(pad, kb);
-      div.appendChild(document.createTextNode(htmlStr));
-    });
+      const htmlStr = UI.pad.notepadToHTML(pad, kb)
+      div.appendChild(document.createTextNode(htmlStr))
+    })
 
-    return div;
+    return div
   },
 
-  name: "notepadToHTML",
-};
+  name: 'notepadToHTML',
+}
 
 export const LightColorHash = {
   render: () => {
     const colorStr = UI.pad.lightColorHash(
-      new $rdf.NamedNode("https://sharonstrats.inrupt.net/profile/card#me"),
-    );
-    const inputBox = document.createElement("INPUT");
-    inputBox.setAttribute("type", "text");
-    inputBox.style.backgroundColor = colorStr;
-    return inputBox;
+      new $rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me')
+    )
+    const inputBox = document.createElement('INPUT')
+    inputBox.setAttribute('type', 'text')
+    inputBox.style.backgroundColor = colorStr
+    return inputBox
   },
 
-  name: "lightColorHash",
-};
+  name: 'lightColorHash',
+}
 
 export const RenderParticipants = {
   // subject = new NamedNode('test') // this i think the page where a list.. ns.ws('participants') are stored
   render:
     // what to put in options
-    //options are used in the button personTR there are the following properties can be defined deleteFunction, link, draggable
+    // options are used in the button personTR there are the following properties can be defined deleteFunction, link, draggable
     () => {
-      const div = document.createElement("div");
-      const table = document.createElement("table");
-      const kb = SolidLogic.store;
-      const fetcher = $rdf.fetcher(kb);
+      const div = document.createElement('div')
+      const table = document.createElement('table')
+      const kb = SolidLogic.store
+      const fetcher = $rdf.fetcher(kb)
 
       const pad = $rdf.namedNode(
-        "https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this",
-      );
+        'https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this'
+      )
 
       fetcher.load(pad.doc()).then(() => {
-        const subject = kb.sym("https://test.test#");
-        const options = {};
+        const subject = kb.sym('https://test.test#')
+        const options = {}
 
         const tableOfParticipants = UI.pad.renderParticipants(
           document,
           table,
           pad,
           subject,
-          new $rdf.NamedNode("https://sharonstrats.inrupt.net/profile/card#me"),
-          options,
-        );
+          new $rdf.NamedNode('https://sharonstrats.inrupt.net/profile/card#me'),
+          options
+        )
 
-        div.appendChild(tableOfParticipants);
-      });
+        div.appendChild(tableOfParticipants)
+      })
 
-      return div;
+      return div
     },
 
-  name: "renderParticipants",
-};
+  name: 'renderParticipants',
+}
 
 export const ParticipationObject = {
   render: () => {
-    const container = document.createElement("pre");
-    const kb = SolidLogic.store;
-    const subject = kb.sym("https://test.test#");
-    const fetcher = $rdf.fetcher(kb);
+    const container = document.createElement('pre')
+    const kb = SolidLogic.store
+    const subject = kb.sym('https://test.test#')
+    const fetcher = $rdf.fetcher(kb)
 
     const pad = $rdf.namedNode(
-      "https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this",
-    );
+      'https://sharonstrats.inrupt.net/public/edu.mit.solid.pane.pad/id1584238219755/index.ttl#this'
+    )
 
     fetcher
       .load(pad.doc())
       .then(() => {
         const me = new $rdf.NamedNode(
-          "https://sharonstrats.inrupt.net/profile/card#me",
-        );
-        return UI.pad.participationObject(subject, pad, me);
+          'https://sharonstrats.inrupt.net/profile/card#me'
+        )
+        return UI.pad.participationObject(subject, pad, me)
       })
       .then((node) => {
         container.appendChild(
-          document.createTextNode(JSON.stringify(node, null, 2)),
-        );
-      });
+          document.createTextNode(JSON.stringify(node, null, 2))
+        )
+      })
 
-    return container;
+    return container
   },
 
-  name: "participationObject",
-};
+  name: 'participationObject',
+}
diff --git a/src/stories/RdfUtils.stories.js b/src/stories/RdfUtils.stories.js
index 3cba9b4b..9c91fae9 100644
--- a/src/stories/RdfUtils.stories.js
+++ b/src/stories/RdfUtils.stories.js
@@ -1,60 +1,60 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
-import { rawJsonDecorator } from "./decorators";
+import { rawJsonDecorator } from './decorators'
 
 export default {
-  title: "RDF utilities",
-};
+  title: 'RDF utilities',
+}
 
 export const AllClassUris = {
   render: () => {
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/#some-thing"),
-      $rdf.namedNode("http://www.w3.org/1999/02/22-rdf-syntax-ns#type"),
-      $rdf.namedNode("http://example.com/#some-class"),
-    );
+      $rdf.namedNode('http://example.com/#some-thing'),
+      $rdf.namedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type'),
+      $rdf.namedNode('http://example.com/#some-class')
+    )
 
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/#some-other-thing"),
-      $rdf.namedNode("http://www.w3.org/1999/02/22-rdf-syntax-ns#type"),
-      $rdf.namedNode("http://example.com/#some-other-class"),
-    );
+      $rdf.namedNode('http://example.com/#some-other-thing'),
+      $rdf.namedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type'),
+      $rdf.namedNode('http://example.com/#some-other-class')
+    )
 
-    return UI.widgets.allClassURIs();
+    return UI.widgets.allClassURIs()
   },
 
-  name: "allClassUris",
+  name: 'allClassUris',
   decorators: [rawJsonDecorator],
-};
+}
 
 export const DefaultAnnotationStore = {
   render: () => {
-    const url = "http://example.com/a/b.html";
-    return UI.widgets.defaultAnnotationStore($rdf.namedNode(url));
+    const url = 'http://example.com/a/b.html'
+    return UI.widgets.defaultAnnotationStore($rdf.namedNode(url))
   },
 
-  name: "defaultAnnotationStore",
+  name: 'defaultAnnotationStore',
   decorators: [rawJsonDecorator],
-};
+}
 
 export const ExtractLogUri = {
   render: () => {
     const url =
-      "https://example.com/logFile=http%3A%2F%2Fexample.org%2Flogs.ttl&rulesFile=ttp%3A%2F%2Fexample.org%2Frules.ttl";
-    return decodeURIComponent(UI.widgets.extractLogURI(url));
+      'https://example.com/logFile=http%3A%2F%2Fexample.org%2Flogs.ttl&rulesFile=ttp%3A%2F%2Fexample.org%2Frules.ttl'
+    return decodeURIComponent(UI.widgets.extractLogURI(url))
   },
 
-  name: "extractLogURI",
+  name: 'extractLogURI',
   decorators: [rawJsonDecorator],
-};
+}
 
 export const PropertyTriage = {
   // FIXME: make this example return actual possible properties
   render: () => {
-    const kb = SolidLogic.store;
-    return UI.widgets.propertyTriage(kb);
+    const kb = SolidLogic.store
+    return UI.widgets.propertyTriage(kb)
   },
 
-  name: "propertyTriage",
+  name: 'propertyTriage',
   decorators: [rawJsonDecorator],
-};
+}
diff --git a/src/stories/Tabs.stories.js b/src/stories/Tabs.stories.js
index 014c083a..33ff53e0 100644
--- a/src/stories/Tabs.stories.js
+++ b/src/stories/Tabs.stories.js
@@ -1,34 +1,34 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions'
 
 const loadTurtleDecorator = (Story) => {
-  const { render, data } = Story();
+  const { render, data } = Story()
   $rdf.parse(
     data,
     SolidLogic.store,
     location.origin,
-    "text/turtle",
+    'text/turtle',
     (error) => {
-      if (error) console.error(error);
-    },
-  );
-  const div = document.createElement("div");
-  const pre = document.createElement("pre");
-  pre.appendChild(document.createTextNode(data));
-  div.appendChild(pre);
-  div.appendChild(render());
-  return div;
-};
+      if (error) console.error(error)
+    }
+  )
+  const div = document.createElement('div')
+  const pre = document.createElement('pre')
+  pre.appendChild(document.createTextNode(data))
+  div.appendChild(pre)
+  div.appendChild(render())
+  return div
+}
 
 export default {
-  title: "Tabs",
-};
+  title: 'Tabs',
+}
 
 export const RdfCollection = {
   render: () => {
-    const subject = $rdf.namedNode(location.origin + "#subject1");
-    const predicate = $rdf.namedNode(location.origin + "#predicate1");
+    const subject = $rdf.namedNode(location.origin + '#subject1')
+    const predicate = $rdf.namedNode(location.origin + '#predicate1')
 
     return {
       data: `
@@ -43,20 +43,20 @@ export const RdfCollection = {
           predicate,
 
           renderMain: (bodyMain, subject) => {
-            bodyMain.innerText = `Content of ${subject.uri}`;
+            bodyMain.innerText = `Content of ${subject.uri}`
           },
         }),
-    };
+    }
   },
 
-  name: "rdf collection",
+  name: 'rdf collection',
   decorators: [loadTurtleDecorator],
-};
+}
 
 export const UnsortedTriples = {
   render: () => {
-    const subject = $rdf.namedNode(location.origin + "#subject2");
-    const predicate = $rdf.namedNode(location.origin + "#predicate2");
+    const subject = $rdf.namedNode(location.origin + '#subject2')
+    const predicate = $rdf.namedNode(location.origin + '#predicate2')
 
     return {
       data: `
@@ -77,193 +77,193 @@ export const UnsortedTriples = {
           ordered: false,
 
           renderMain: (bodyMain, subject) => {
-            bodyMain.innerText = `Content of ${UI.utils.label(subject)}`;
+            bodyMain.innerText = `Content of ${UI.utils.label(subject)}`
           },
         }),
-    };
+    }
   },
 
-  name: "unsorted triples",
+  name: 'unsorted triples',
   decorators: [loadTurtleDecorator],
-};
+}
 
 export const OptionItems = {
   render: () => {
-    const item1 = $rdf.namedNode(location.origin + "#item3A");
-    const item2 = $rdf.namedNode(location.origin + "#item3B");
+    const item1 = $rdf.namedNode(location.origin + '#item3A')
+    const item2 = $rdf.namedNode(location.origin + '#item3B')
 
     return UI.tabs.tabWidget({
       items: [item1, item2],
 
       renderMain: (bodyMain, subject) => {
-        bodyMain.innerText = `Content of ${subject}`;
+        bodyMain.innerText = `Content of ${subject}`
       },
-    });
+    })
   },
 
-  name: "option items",
-};
+  name: 'option items',
+}
 
 export const BackgroundColor = {
   render: ({ backgroundColor }) => {
-    const item1 = $rdf.namedNode(location.origin + "#item3A");
-    const item2 = $rdf.namedNode(location.origin + "#item3B");
+    const item1 = $rdf.namedNode(location.origin + '#item3A')
+    const item2 = $rdf.namedNode(location.origin + '#item3B')
 
     return UI.tabs.tabWidget({
       backgroundColor,
       items: [item1, item2],
 
       renderMain: (bodyMain, subject) => {
-        bodyMain.innerText = `Content of ${subject}`;
+        bodyMain.innerText = `Content of ${subject}`
       },
-    });
+    })
   },
 
-  name: "background color",
+  name: 'background color',
 
   args: {
-    backgroundColor: "#ff0000",
+    backgroundColor: '#ff0000',
   },
 
   argTypes: {
     backgroundColor: {
       control: {
-        type: "select",
-        options: ["#ff0000", "#00ff00", "#0000ff"],
+        type: 'select',
+        options: ['#ff0000', '#00ff00', '#0000ff'],
       },
     },
   },
-};
+}
 
 export const OnClose = {
   render: () => {
-    const item1 = $rdf.namedNode(location.origin + "#item3A");
-    const item2 = $rdf.namedNode(location.origin + "#item3B");
+    const item1 = $rdf.namedNode(location.origin + '#item3A')
+    const item2 = $rdf.namedNode(location.origin + '#item3B')
 
     return UI.tabs.tabWidget({
-      onClose: action("closed"),
+      onClose: action('closed'),
       items: [item1, item2],
 
       renderMain: (bodyMain, subject) => {
-        bodyMain.innerText = `Content of ${subject}`;
+        bodyMain.innerText = `Content of ${subject}`
       },
-    });
+    })
   },
 
-  name: "on close",
-};
+  name: 'on close',
+}
 
 export const Orientation = {
   render: ({ orientation }) => {
-    const item1 = $rdf.namedNode(location.origin + "#item3A");
-    const item2 = $rdf.namedNode(location.origin + "#item3B");
+    const item1 = $rdf.namedNode(location.origin + '#item3A')
+    const item2 = $rdf.namedNode(location.origin + '#item3B')
 
     return UI.tabs.tabWidget({
       orientation,
       items: [item1, item2],
 
       renderMain: (bodyMain, subject) => {
-        bodyMain.innerText = `Content of ${subject}`;
+        bodyMain.innerText = `Content of ${subject}`
       },
-    });
+    })
   },
 
-  name: "orientation",
+  name: 'orientation',
 
   args: {
-    orientation: "1",
+    orientation: '1',
   },
 
   argTypes: {
     orientation: {
       control: {
-        type: "select",
-        options: ["0", "1", "2", "3"],
+        type: 'select',
+        options: ['0', '1', '2', '3'],
       },
     },
   },
-};
+}
 
 export const RenderTab = {
   render: () => {
-    const item1 = $rdf.namedNode(location.origin + "#item3A");
-    const item2 = $rdf.namedNode(location.origin + "#item3B");
+    const item1 = $rdf.namedNode(location.origin + '#item3A')
+    const item2 = $rdf.namedNode(location.origin + '#item3B')
 
     return UI.tabs.tabWidget({
       items: [item1, item2],
 
       renderMain: (bodyMain, subject) => {
-        bodyMain.innerText = `Content of ${subject}`;
+        bodyMain.innerText = `Content of ${subject}`
       },
 
       renderTab: (tabDiv, subject) => {
-        tabDiv.innerText = `Go to ${subject.uri}`;
+        tabDiv.innerText = `Go to ${subject.uri}`
       },
-    });
+    })
   },
 
-  name: "renderTab",
-};
+  name: 'renderTab',
+}
 
 export const RenderTabSettings = {
   render: () => {
-    const item1 = $rdf.namedNode(location.origin + "#item3A");
-    const item2 = $rdf.namedNode(location.origin + "#item3B");
+    const item1 = $rdf.namedNode(location.origin + '#item3A')
+    const item2 = $rdf.namedNode(location.origin + '#item3B')
 
     return UI.tabs.tabWidget({
       items: [item1, item2],
 
       renderMain: (bodyMain, subject) => {
-        bodyMain.innerText = `Content of ${subject}`;
+        bodyMain.innerText = `Content of ${subject}`
       },
 
       renderTabSettings: (bodyMain, subject) => {
-        bodyMain.innerText = `Settings for ${subject.uri}`;
+        bodyMain.innerText = `Settings for ${subject.uri}`
       },
-    });
+    })
   },
 
-  name: "renderTabSettings",
-};
+  name: 'renderTabSettings',
+}
 
 export const SelectedTab = {
   render: () => {
-    const item1 = $rdf.namedNode(location.origin + "#item3A");
-    const item2 = $rdf.namedNode(location.origin + "#item3B");
+    const item1 = $rdf.namedNode(location.origin + '#item3A')
+    const item2 = $rdf.namedNode(location.origin + '#item3B')
 
     return UI.tabs.tabWidget({
       items: [item1, item2],
 
       renderMain: (bodyMain, subject) => {
-        bodyMain.innerText = `Content of ${subject}`;
+        bodyMain.innerText = `Content of ${subject}`
       },
 
       renderTab: (tabDiv, subject) => {
-        tabDiv.dataset.name = subject.uri;
-        tabDiv.innerText = UI.utils.label(subject);
+        tabDiv.dataset.name = subject.uri
+        tabDiv.innerText = UI.utils.label(subject)
       },
 
       selectedTab: item2.uri,
-    });
+    })
   },
 
-  name: "selectedTab",
-};
+  name: 'selectedTab',
+}
 
 export const StartEmpty = {
   render: () => {
-    const item1 = $rdf.namedNode(location.origin + "#item3A");
-    const item2 = $rdf.namedNode(location.origin + "#item3B");
+    const item1 = $rdf.namedNode(location.origin + '#item3A')
+    const item2 = $rdf.namedNode(location.origin + '#item3B')
 
     return UI.tabs.tabWidget({
       items: [item1, item2],
       startEmpty: true,
 
       renderMain: (bodyMain, subject) => {
-        bodyMain.innerText = `Content of ${subject}`;
+        bodyMain.innerText = `Content of ${subject}`
       },
-    });
+    })
   },
 
-  name: "startEmpty",
-};
+  name: 'startEmpty',
+}
diff --git a/src/stories/Widgets.stories.js b/src/stories/Widgets.stories.js
index 53bc1730..33ae9ad9 100644
--- a/src/stories/Widgets.stories.js
+++ b/src/stories/Widgets.stories.js
@@ -1,57 +1,57 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
 export default {
-  title: "Widgets",
-};
+  title: 'Widgets',
+}
 
 export const TwoLineTransactions = {
   render: () => {
     const twoLineTransaction =
       UI.widgets.index.twoLine[
-        "http://www.w3.org/2000/10/swap/pim/qif#Transaction"
-      ];
-    const thing = $rdf.namedNode("http://example.com/#transaction");
+        'http://www.w3.org/2000/10/swap/pim/qif#Transaction'
+      ]
+    const thing = $rdf.namedNode('http://example.com/#transaction')
     SolidLogic.store.add(
       thing,
-      UI.ns.qu("payee"),
-      $rdf.namedNode("https://payee.com/#me"),
-    );
-    SolidLogic.store.add(thing, UI.ns.qu("date"), $rdf.literal("2020-01-01"));
-    SolidLogic.store.add(thing, UI.ns.qu("amount"), $rdf.literal("20 USD"));
-    return twoLineTransaction(document, thing);
+      UI.ns.qu('payee'),
+      $rdf.namedNode('https://payee.com/#me')
+    )
+    SolidLogic.store.add(thing, UI.ns.qu('date'), $rdf.literal('2020-01-01'))
+    SolidLogic.store.add(thing, UI.ns.qu('amount'), $rdf.literal('20 USD'))
+    return twoLineTransaction(document, thing)
   },
 
-  name: "twoLineTransactions",
-};
+  name: 'twoLineTransactions',
+}
 
 export const TwoLineTrip = {
   render: () => {
     const twoLineTrip =
-      UI.widgets.index.twoLine["http://www.w3.org/ns/pim/trip#Trip"];
-    const thing = $rdf.namedNode("http://example.com/#trip");
-    SolidLogic.store.add(thing, UI.ns.dc("title"), "Some trip");
+      UI.widgets.index.twoLine['http://www.w3.org/ns/pim/trip#Trip']
+    const thing = $rdf.namedNode('http://example.com/#trip')
+    SolidLogic.store.add(thing, UI.ns.dc('title'), 'Some trip')
     SolidLogic.store.add(
       thing,
-      UI.ns.cal("dtstart"),
-      $rdf.literal("2020-01-01"),
-    );
-    SolidLogic.store.add(thing, UI.ns.cal("dtend"), $rdf.literal("2020-02-02"));
-    return twoLineTrip(document, thing);
+      UI.ns.cal('dtstart'),
+      $rdf.literal('2020-01-01')
+    )
+    SolidLogic.store.add(thing, UI.ns.cal('dtend'), $rdf.literal('2020-02-02'))
+    return twoLineTrip(document, thing)
   },
 
-  name: "twoLineTrip",
-};
+  name: 'twoLineTrip',
+}
 
 export const TwoLineWidgetForClass = {
   render: () => {
-    const rdfClass = UI.ns.foaf("Person");
+    const rdfClass = UI.ns.foaf('Person')
     const thing = $rdf.namedNode(
-      "https://michielbdejong.inrupt.net/profile/card#me",
-    );
-    const widgetFunction = UI.widgets.index.twoLine.widgetForClass(rdfClass);
-    const widget = widgetFunction(document, thing);
-    return widget;
+      'https://michielbdejong.inrupt.net/profile/card#me'
+    )
+    const widgetFunction = UI.widgets.index.twoLine.widgetForClass(rdfClass)
+    const widget = widgetFunction(document, thing)
+    return widget
   },
 
-  name: "twoLineWidgetForClass",
-};
+  name: 'twoLineWidgetForClass',
+}
diff --git a/src/stories/forms/Fields.stories.js b/src/stories/forms/Fields.stories.js
index 2aee5554..06b64d18 100644
--- a/src/stories/forms/Fields.stories.js
+++ b/src/stories/forms/Fields.stories.js
@@ -1,53 +1,53 @@
-import * as UI from "../../../src/index";
+import * as UI from '../../../src/index'
 
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions'
 
 export default {
-  title: "Forms/fields",
-};
+  title: 'Forms/fields',
+}
 
 export const BasicFields = {
   // FIXME: https://github.com/solidos/solid-ui/issues/239
   render: () => {
-    const container = document.createElement("div");
-    const already = {};
-    const subject = $rdf.namedNode("http://example.com/#this");
-    const form = $rdf.namedNode("http://example.com/#form");
-    const doc = $rdf.namedNode("http://example.com/");
+    const container = document.createElement('div')
+    const already = {}
+    const subject = $rdf.namedNode('http://example.com/#this')
+    const form = $rdf.namedNode('http://example.com/#form')
+    const doc = $rdf.namedNode('http://example.com/')
 
     const callbackFunction = (ok, errorMessage) => {
       console.log(
         ok,
         errorMessage,
-        document.getElementById("div-basicField").innerHTML,
-      );
-    };
+        document.getElementById('div-basicField').innerHTML
+      )
+    }
 
     SolidLogic.store.add(
       form,
-      UI.ns.ui("property"),
-      $rdf.namedNode("http://example.com/#some-property"),
-      doc,
-    );
+      UI.ns.ui('property'),
+      $rdf.namedNode('http://example.com/#some-property'),
+      doc
+    )
 
     document.outlineManager = {
       appendPropertyTRs: () => {},
     };
 
     [
-      "PhoneField",
-      "EmailField",
-      "ColorField",
-      "DateField",
-      "DateTimeField",
-      "TimeField",
-      "NumericField",
-      "IntegerField",
-      "DecimalField",
-      "FloatField",
-      "TextField",
-      "SingleLineTextField",
-      "NamedNodeURIField",
+      'PhoneField',
+      'EmailField',
+      'ColorField',
+      'DateField',
+      'DateTimeField',
+      'TimeField',
+      'NumericField',
+      'IntegerField',
+      'DecimalField',
+      'FloatField',
+      'TextField',
+      'SingleLineTextField',
+      'NamedNodeURIField',
     ].forEach((fieldName) => {
       UI.widgets.field[UI.ns.ui(fieldName).uri](
         document,
@@ -56,106 +56,106 @@ export const BasicFields = {
         subject,
         form,
         doc,
-        callbackFunction,
-      );
-    });
+        callbackFunction
+      )
+    })
 
-    return container;
+    return container
   },
 
-  name: "basic fields",
-};
+  name: 'basic fields',
+}
 
 export const FormGroupNoAlready = {
   // FIXME: https://github.com/solidos/solid-ui/issues/239
   render: () => {
-    const container = document.createElement("div");
-    const already = {};
-    const subject = $rdf.namedNode("http://example.com/#this");
-    const form = $rdf.namedNode("http://example.com/#form");
-    const store = $rdf.namedNode("http://example.com/#store");
+    const container = document.createElement('div')
+    const already = {}
+    const subject = $rdf.namedNode('http://example.com/#this')
+    const form = $rdf.namedNode('http://example.com/#form')
+    const store = $rdf.namedNode('http://example.com/#store')
 
     SolidLogic.store.add(
       form,
-      UI.ns.ui("parts"),
+      UI.ns.ui('parts'),
       new $rdf.Collection([
-        $rdf.namedNode("http://example.com/#part1"),
-        $rdf.namedNode("http://example.com/#part2"),
+        $rdf.namedNode('http://example.com/#part1'),
+        $rdf.namedNode('http://example.com/#part2'),
       ]),
-      $rdf.namedNode("http://example.com/"),
-    );
+      $rdf.namedNode('http://example.com/')
+    )
 
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/#part1"),
-      UI.ns.rdf("type"),
-      UI.ns.ui("Comment"),
-    );
+      $rdf.namedNode('http://example.com/#part1'),
+      UI.ns.rdf('type'),
+      UI.ns.ui('Comment')
+    )
 
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/#part1"),
-      UI.ns.ui("contents"),
-      "[this is part 1 of the form]",
-    );
+      $rdf.namedNode('http://example.com/#part1'),
+      UI.ns.ui('contents'),
+      '[this is part 1 of the form]'
+    )
 
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/#part2"),
-      UI.ns.rdf("type"),
-      UI.ns.ui("Comment"),
-    );
+      $rdf.namedNode('http://example.com/#part2'),
+      UI.ns.rdf('type'),
+      UI.ns.ui('Comment')
+    )
 
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/#part2"),
-      UI.ns.ui("contents"),
-      "[this is part 2 of the form]",
-    );
+      $rdf.namedNode('http://example.com/#part2'),
+      UI.ns.ui('contents'),
+      '[this is part 2 of the form]'
+    )
 
     document.outlineManager = {
       appendPropertyTRs: () => {},
-    };
+    }
 
-    UI.widgets.field[UI.ns.ui("Form").uri](
+    UI.widgets.field[UI.ns.ui('Form').uri](
       document,
       container,
       already,
       subject,
       form,
       store,
-      action("callback"),
-    );
-    return container;
+      action('callback')
+    )
+    return container
   },
 
-  name: "form / group, no already",
-};
+  name: 'form / group, no already',
+}
 
 export const FormGroupWithAlready = {
   // FIXME: https://github.com/solidos/solid-ui/issues/239
   render: () => {
-    const container = document.createElement("div");
-    const subject = $rdf.namedNode("http://example.com/#this");
-    const form = $rdf.namedNode("http://example.com/#form");
-    const store = $rdf.namedNode("http://example.com/#store");
-    const key = subject.toNT() + "|" + form.toNT();
+    const container = document.createElement('div')
+    const subject = $rdf.namedNode('http://example.com/#this')
+    const form = $rdf.namedNode('http://example.com/#form')
+    const store = $rdf.namedNode('http://example.com/#store')
+    const key = subject.toNT() + '|' + form.toNT()
 
     const already = {
       [key]: true,
-    };
+    }
 
     document.outlineManager = {
       appendPropertyTRs: () => {},
-    };
+    }
 
-    UI.widgets.field[UI.ns.ui("Group").uri](
+    UI.widgets.field[UI.ns.ui('Group').uri](
       document,
       container,
       already,
       subject,
       form,
       store,
-      action("callback"),
-    );
-    return container;
+      action('callback')
+    )
+    return container
   },
 
-  name: "form / group, with already",
-};
+  name: 'form / group, with already',
+}
diff --git a/src/stories/forms/Forms.stories.js b/src/stories/forms/Forms.stories.js
index 13dfd970..84c2453d 100644
--- a/src/stories/forms/Forms.stories.js
+++ b/src/stories/forms/Forms.stories.js
@@ -1,56 +1,56 @@
-import * as UI from "../../../src/index";
+import * as UI from '../../../src/index'
 
 export default {
-  title: "Forms/appendForm",
-};
+  title: 'Forms/appendForm',
+}
 
 export const TrivialCommentField = {
   render: () => {
-    const container = document.createElement("div");
-    const already = {};
-    const subject = $rdf.namedNode("http://example.com/#subject");
-    const form = $rdf.namedNode("http://example.com/#form");
-    const doc = subject.doc();
+    const container = document.createElement('div')
+    const already = {}
+    const subject = $rdf.namedNode('http://example.com/#subject')
+    const form = $rdf.namedNode('http://example.com/#form')
+    const doc = subject.doc()
 
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/#form"),
-      UI.ns.rdf("type"),
-      UI.ns.ui("Comment"),
-    );
+      $rdf.namedNode('http://example.com/#form'),
+      UI.ns.rdf('type'),
+      UI.ns.ui('Comment')
+    )
 
     SolidLogic.store.add(
-      $rdf.namedNode("http://example.com/#form"),
-      UI.ns.ui("contents"),
-      "[a trivial form with just a comment]",
-    );
+      $rdf.namedNode('http://example.com/#form'),
+      UI.ns.ui('contents'),
+      '[a trivial form with just a comment]'
+    )
 
-    UI.widgets.appendForm(document, container, already, subject, form, doc);
-    return container;
+    UI.widgets.appendForm(document, container, already, subject, form, doc)
+    return container
   },
 
-  name: "trivial / Comment field",
-};
+  name: 'trivial / Comment field',
+}
 
 export const Live = {
   render: () => {
-    const container = document.createElement("div");
-    const already = {};
+    const container = document.createElement('div')
+    const already = {}
     const subject = $rdf.namedNode(
-      "https://michielbdejong.inrupt.net/profile/card#me",
-    );
+      'https://michielbdejong.inrupt.net/profile/card#me'
+    )
     const form = $rdf.namedNode(
-      "https://timbl.com/timbl/Public/Test/Forms/individualForm.ttl#form1",
-    );
-    const doc = subject.doc();
-    const loadProfile = SolidLogic.store.fetcher.load(doc);
-    const loadForm = SolidLogic.store.fetcher.load(form.doc());
+      'https://timbl.com/timbl/Public/Test/Forms/individualForm.ttl#form1'
+    )
+    const doc = subject.doc()
+    const loadProfile = SolidLogic.store.fetcher.load(doc)
+    const loadForm = SolidLogic.store.fetcher.load(form.doc())
 
     Promise.all([loadProfile, loadForm]).then(() => {
-      UI.widgets.appendForm(document, container, already, subject, form, doc);
-    });
+      UI.widgets.appendForm(document, container, already, subject, form, doc)
+    })
 
-    return container;
+    return container
   },
 
-  name: "live",
-};
+  name: 'live',
+}
diff --git a/src/stories/forms/Options.stories.js b/src/stories/forms/Options.stories.js
index c22a3422..17f5c29b 100644
--- a/src/stories/forms/Options.stories.js
+++ b/src/stories/forms/Options.stories.js
@@ -1,10 +1,10 @@
-import * as UI from "../../../src/index";
+import * as UI from '../../../src/index'
 
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions'
 
 export default {
-  title: "Forms/Options",
-};
+  title: 'Forms/Options',
+}
 
 export const UsingRdfTypes = {
   /* UI to display in case subject is a house: */
@@ -13,106 +13,106 @@ export const UsingRdfTypes = {
     // Subject is a cow, so it should display [UI for cows]
     // FIXME: https://github.com/solidos/solid-ui/issues/239
     () => {
-      const container = document.createElement("div");
-      const already = {};
-      const subject = $rdf.namedNode("http://first.example/#this");
+      const container = document.createElement('div')
+      const already = {}
+      const subject = $rdf.namedNode('http://first.example/#this')
       const exampleOptionsField = $rdf.namedNode(
-        "http://first.example/#exampleOptionsField",
-      );
-      const store = $rdf.namedNode("http://first.example/#store");
+        'http://first.example/#exampleOptionsField'
+      )
+      const store = $rdf.namedNode('http://first.example/#store')
 
       SolidLogic.store.add(
         exampleOptionsField,
-        UI.ns.ui("case"),
-        $rdf.namedNode("http://first.example/#if-subject-is-house"),
-        $rdf.namedNode("http://first.example/"),
-      );
+        UI.ns.ui('case'),
+        $rdf.namedNode('http://first.example/#if-subject-is-house'),
+        $rdf.namedNode('http://first.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://first.example/#if-subject-is-house"),
-        UI.ns.ui("for"),
-        $rdf.namedNode("http://first.example/#house"),
-        $rdf.namedNode("http://first.example/"),
-      );
+        $rdf.namedNode('http://first.example/#if-subject-is-house'),
+        UI.ns.ui('for'),
+        $rdf.namedNode('http://first.example/#house'),
+        $rdf.namedNode('http://first.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://first.example/#if-subject-is-house"),
-        UI.ns.ui("use"),
-        $rdf.namedNode("http://first.example/#number-of-bedrooms"),
-        $rdf.namedNode("http://first.example/"),
-      );
+        $rdf.namedNode('http://first.example/#if-subject-is-house'),
+        UI.ns.ui('use'),
+        $rdf.namedNode('http://first.example/#number-of-bedrooms'),
+        $rdf.namedNode('http://first.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://first.example/#number-of-bedrooms"),
-        UI.ns.rdf("type"),
-        UI.ns.ui("Comment"),
-      );
+        $rdf.namedNode('http://first.example/#number-of-bedrooms'),
+        UI.ns.rdf('type'),
+        UI.ns.ui('Comment')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://first.example/#number-of-bedrooms"),
-        UI.ns.ui("contents"),
-        "[UI for houses]",
-      );
+        $rdf.namedNode('http://first.example/#number-of-bedrooms'),
+        UI.ns.ui('contents'),
+        '[UI for houses]'
+      )
 
       SolidLogic.store.add(
         exampleOptionsField,
-        UI.ns.ui("case"),
-        $rdf.namedNode("http://first.example/#if-subject-is-cow"),
-        $rdf.namedNode("http://first.example/"),
-      );
+        UI.ns.ui('case'),
+        $rdf.namedNode('http://first.example/#if-subject-is-cow'),
+        $rdf.namedNode('http://first.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://first.example/#if-subject-is-cow"),
-        UI.ns.ui("for"),
-        $rdf.namedNode("http://first.example/#cow"),
-        $rdf.namedNode("http://first.example/"),
-      );
+        $rdf.namedNode('http://first.example/#if-subject-is-cow'),
+        UI.ns.ui('for'),
+        $rdf.namedNode('http://first.example/#cow'),
+        $rdf.namedNode('http://first.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://first.example/#if-subject-is-cow"),
-        UI.ns.ui("use"),
-        $rdf.namedNode("http://first.example/#number-of-legs"),
-        $rdf.namedNode("http://first.example/"),
-      );
+        $rdf.namedNode('http://first.example/#if-subject-is-cow'),
+        UI.ns.ui('use'),
+        $rdf.namedNode('http://first.example/#number-of-legs'),
+        $rdf.namedNode('http://first.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://first.example/#number-of-legs"),
-        UI.ns.rdf("type"),
-        UI.ns.ui("Comment"),
-      );
+        $rdf.namedNode('http://first.example/#number-of-legs'),
+        UI.ns.rdf('type'),
+        UI.ns.ui('Comment')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://first.example/#number-of-legs"),
-        UI.ns.ui("contents"),
-        "[UI for cows]",
-      );
+        $rdf.namedNode('http://first.example/#number-of-legs'),
+        UI.ns.ui('contents'),
+        '[UI for cows]'
+      )
 
       SolidLogic.store.add(
         subject,
-        UI.ns.rdf("type"),
-        $rdf.namedNode("http://first.example/#cow"),
-        $rdf.namedNode("http://first.example/"),
-      );
+        UI.ns.rdf('type'),
+        $rdf.namedNode('http://first.example/#cow'),
+        $rdf.namedNode('http://first.example/')
+      )
 
       document.outlineManager = {
         appendPropertyTRs: () => {},
-      };
+      }
 
-      UI.widgets.field[UI.ns.ui("Options").uri](
+      UI.widgets.field[UI.ns.ui('Options').uri](
         document,
         container,
         already,
         subject,
         exampleOptionsField,
         store,
-        action("callback"),
-      );
+        action('callback')
+      )
 
-      return container;
+      return container
     },
 
-  name: "using RDF types",
-};
+  name: 'using RDF types',
+}
 
 export const DependingOn = {
   /* This form depends on persona: */
@@ -123,117 +123,117 @@ export const DependingOn = {
          power users] */
     // FIXME: https://github.com/solidos/solid-ui/issues/239
     () => {
-      const container = document.createElement("div");
-      const already = {};
-      const subject = $rdf.namedNode("http://second.example/#this");
+      const container = document.createElement('div')
+      const already = {}
+      const subject = $rdf.namedNode('http://second.example/#this')
       const exampleOptionsField = $rdf.namedNode(
-        "http://second.example/#exampleOptionsField",
-      );
-      const store = $rdf.namedNode("http://second.example/#store");
+        'http://second.example/#exampleOptionsField'
+      )
+      const store = $rdf.namedNode('http://second.example/#store')
 
       SolidLogic.store.add(
         exampleOptionsField,
-        UI.ns.ui("dependingOn"),
-        $rdf.namedNode("http://second.example/#persona"),
-        $rdf.namedNode("http://second.example/"),
-      );
+        UI.ns.ui('dependingOn'),
+        $rdf.namedNode('http://second.example/#persona'),
+        $rdf.namedNode('http://second.example/')
+      )
 
       SolidLogic.store.add(
         exampleOptionsField,
-        UI.ns.ui("case"),
-        $rdf.namedNode("http://second.example/#if-subject-is-developer"),
-        $rdf.namedNode("http://second.example/"),
-      );
+        UI.ns.ui('case'),
+        $rdf.namedNode('http://second.example/#if-subject-is-developer'),
+        $rdf.namedNode('http://second.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://second.example/#if-subject-is-developer"),
-        UI.ns.ui("for"),
-        $rdf.namedNode("http://second.example/#developer"),
-        $rdf.namedNode("http://second.example/"),
-      );
+        $rdf.namedNode('http://second.example/#if-subject-is-developer'),
+        UI.ns.ui('for'),
+        $rdf.namedNode('http://second.example/#developer'),
+        $rdf.namedNode('http://second.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://second.example/#if-subject-is-developer"),
-        UI.ns.ui("use"),
-        $rdf.namedNode("http://second.example/#ui-for-developers"),
-        $rdf.namedNode("http://second.example/"),
-      );
+        $rdf.namedNode('http://second.example/#if-subject-is-developer'),
+        UI.ns.ui('use'),
+        $rdf.namedNode('http://second.example/#ui-for-developers'),
+        $rdf.namedNode('http://second.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://second.example/#ui-for-developers"),
-        UI.ns.rdf("type"),
-        UI.ns.ui("Comment"),
-      );
+        $rdf.namedNode('http://second.example/#ui-for-developers'),
+        UI.ns.rdf('type'),
+        UI.ns.ui('Comment')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://second.example/#ui-for-developers"),
-        UI.ns.ui("contents"),
-        "[UI for developers]",
-      );
+        $rdf.namedNode('http://second.example/#ui-for-developers'),
+        UI.ns.ui('contents'),
+        '[UI for developers]'
+      )
 
       SolidLogic.store.add(
         exampleOptionsField,
-        UI.ns.ui("case"),
-        $rdf.namedNode("http://second.example/#if-subject-is-power-user"),
-        $rdf.namedNode("http://second.example/"),
-      );
+        UI.ns.ui('case'),
+        $rdf.namedNode('http://second.example/#if-subject-is-power-user'),
+        $rdf.namedNode('http://second.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://second.example/#if-subject-is-power-user"),
-        UI.ns.ui("for"),
-        $rdf.namedNode("http://second.example/#power-user"),
-        $rdf.namedNode("http://second.example/"),
-      );
+        $rdf.namedNode('http://second.example/#if-subject-is-power-user'),
+        UI.ns.ui('for'),
+        $rdf.namedNode('http://second.example/#power-user'),
+        $rdf.namedNode('http://second.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://second.example/#if-subject-is-power-user"),
-        UI.ns.ui("use"),
-        $rdf.namedNode("http://second.example/#ui-for-power-users"),
-        $rdf.namedNode("http://second.example/"),
-      );
+        $rdf.namedNode('http://second.example/#if-subject-is-power-user'),
+        UI.ns.ui('use'),
+        $rdf.namedNode('http://second.example/#ui-for-power-users'),
+        $rdf.namedNode('http://second.example/')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://second.example/#ui-for-power-users"),
-        UI.ns.rdf("type"),
-        UI.ns.ui("Comment"),
-      );
+        $rdf.namedNode('http://second.example/#ui-for-power-users'),
+        UI.ns.rdf('type'),
+        UI.ns.ui('Comment')
+      )
 
       SolidLogic.store.add(
-        $rdf.namedNode("http://second.example/#ui-for-power-users"),
-        UI.ns.ui("contents"),
-        "[UI for power users]",
-      );
+        $rdf.namedNode('http://second.example/#ui-for-power-users'),
+        UI.ns.ui('contents'),
+        '[UI for power users]'
+      )
 
       SolidLogic.store.add(
         subject,
-        $rdf.namedNode("http://second.example/#persona"),
-        $rdf.namedNode("http://second.example/#developer"),
-        $rdf.namedNode("http://second.example/"),
-      );
+        $rdf.namedNode('http://second.example/#persona'),
+        $rdf.namedNode('http://second.example/#developer'),
+        $rdf.namedNode('http://second.example/')
+      )
 
       SolidLogic.store.add(
         subject,
-        $rdf.namedNode("http://second.example/#persona"),
-        $rdf.namedNode("http://second.example/#power-user"),
-        $rdf.namedNode("http://second.example/"),
-      );
+        $rdf.namedNode('http://second.example/#persona'),
+        $rdf.namedNode('http://second.example/#power-user'),
+        $rdf.namedNode('http://second.example/')
+      )
 
       document.outlineManager = {
         appendPropertyTRs: () => {},
-      };
+      }
 
-      UI.widgets.field[UI.ns.ui("Options").uri](
+      UI.widgets.field[UI.ns.ui('Options').uri](
         document,
         container,
         already,
         subject,
         exampleOptionsField,
         store,
-        action("callback"),
-      );
+        action('callback')
+      )
 
-      return container;
+      return container
     },
 
-  name: "depending on",
-};
+  name: 'depending on',
+}
diff --git a/src/stories/iconForClass.stories.js b/src/stories/iconForClass.stories.js
index 8b636f94..02a44933 100644
--- a/src/stories/iconForClass.stories.js
+++ b/src/stories/iconForClass.stories.js
@@ -1,31 +1,31 @@
-import * as UI from "../../src/index";
+import * as UI from '../../src/index'
 
 const iconDecorator = (Story) => {
-  const items = Story();
+  const items = Story()
   const lines = items.map(
     ({ className, icon }) =>
-      `<tr><td>${className}</td><td>${icon}</td><td><img src="${UI.icons.iconBase}${icon}" style="width:20px; height:20px;" /></td></tr>`,
-  );
+      `<tr><td>${className}</td><td>${icon}</td><td><img src="${UI.icons.iconBase}${icon}" style="width:20px; height:20px;" /></td></tr>`
+  )
   return `<table><th>className</th><th>icon</th><th>Preview</th>
-            ${lines.join("")}
-          </table>`;
-};
+            ${lines.join('')}
+          </table>`
+}
 
 export default {
-  title: "iconForClass",
-};
+  title: 'iconForClass',
+}
 
 export const ForSolidAppProviderClass = {
   render: () =>
     Object.keys(UI.widgets.iconForClass).map((className) => {
-      const icon = UI.widgets.iconForClass[className];
+      const icon = UI.widgets.iconForClass[className]
 
       return {
         className,
         icon,
-      };
+      }
     }),
 
-  name: "for solid:AppProviderClass",
+  name: 'for solid:AppProviderClass',
   decorators: [iconDecorator],
-};
+}
diff --git a/webpack.config.mjs b/webpack.config.mjs
index 57e5f702..c015aa93 100644
--- a/webpack.config.mjs
+++ b/webpack.config.mjs
@@ -15,7 +15,7 @@ const externalsBase = {
 // ESM externals: keep imports
 const esmExternals = {
   rdflib: 'rdflib',
-  'solid-logic': 'solid-logic' 
+  'solid-logic': 'solid-logic'
 }
 
 const common = {
