Milestone2k

README.md

@@ -78,3 +78,11 @@ contacts (A VCARD Address Book, Group, Individual, Organization) can be handled
 pane. Any other pane which wants to deal with contacts can just use the pane within its own user interface.
 
 ![Mapping many classes on the L to panes on the R](https://solidos.github.io/solid-panes/doc/images/panes-for-classes.svg)
+
+
+## Generative AI usage
+The SolidOS team is using GitHub Copilot integrated in Visual Studio Code. 
+We have added comments in the code to make it explicit which parts are 100% written by AI. 
+
+### Prompt usage hitory:
+* Model Claude Opus 4.6: Initially solid-panes is loaded into a HTML shell form mashlib that looks like ... Also, an iFrame is rendered inside the <div class="TabulatorOutline" id="DummyUUID"> for “isolated pane rendering”. Analize the solid-panes code for what it uses from this HTML and suggest a new HTML structure which is mobile and accessibility friendly. Lets go ahead and make chnages in this code as suggested to accommodate the new databwroser HTML.

dev/dev-light.css

@@ -10,7 +10,7 @@
 :root {
   /* Background and Text */
   --color-background: white;
-  --color-text: ##1A1A1A;
+  --color-text: #1A1A1A;
   --color-text-secondary: #666;
   --color-text-light: #aaa;
   --color-text-link: #3B5998;
@@ -29,6 +29,7 @@
   --color-border-darker: #444;
   --color-border-light: #aaa;
   --color-border-pale: #eee;
+  --color-border-accent: #88c;
 
   /* Status Colors */
   --color-selected-bg: #8F3;
@@ -138,16 +139,23 @@
   /* Spacing and Sizing */
   --spacing-tiny: 0.05em;
   --spacing-small: 0.1em;
+  --spacing-xxxs: 0.2em;
+  --spacing-xxs: 0.3em;
   --spacing-xs: 0.5rem;
   --spacing-sm: 0.75em;
+  --spacing-btn: 0.7em;
   --spacing-base: 0.5em;
   --spacing-md: 1em;
   --spacing-lg: 1.5em;
   --spacing-xl: 2em;
   --spacing-2xl: 3em;
+  --border-width-xthin: 0.05em;
+  --border-width-sm: 0.1em;
   --border-width-thin: 1px;
   --border-width-medium: 2px;
   --border-width-bold: 5px;
+  --border-radius-xs: 0.1em;
+  --border-radius-sm: 0.2em;
   --border-radius-base: 0.5em;
   --border-radius-lg: 0.75em;
   --border-radius-full: 1em;
@@ -170,6 +178,12 @@
   /* Shadows */
   --box-shadow: 0 2px 8px rgba(124,77,255,0.08);
   --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12);
+  --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
+  --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
+  --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
+  --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
+  --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);
+  --box-shadow-popup: 0 0.5em 0.9em rgba(0, 0, 0, 0.2);
 
   /* Accessibility */
   --min-touch-target: 44px;
@@ -183,11 +197,13 @@
 
   /* Overlay and Modal */
   --overlay-bg: rgba(0, 0, 0, 0.5);
+  --overlay-bg-muted: rgba(0, 0, 0, 0.3);
   --z-index-modal: 9999;
   --z-index-skip-links: 1000;
 
   /* Opacity */
   --opacity-disabled: 0.6;
+  --opacity-input-disabled: 0.75;
 
   /* Layout Values */
   --max-width-readable: 65ch;

dev/dev-mash.css

@@ -8,81 +8,54 @@
 @import url("./dev-light.css");
 @import url("./dev-mash-utilities.css");
 
-/* I couldn't find the code for the collapse image. this is a quick work around
-to make the collapsing easier to use ( the triangles dont jump 20 pixels). ~cm2
-*/
-img[title="Hide details."] {
-  float: left;
-}
-
-html {
-  height: 100%;
-  line-height: 1.15;
-}
-body {
-  height: 100%;
-  background-color: var(--color-background);
-  color: var(--color-text);
+html, body {
+  margin: 0;
+  padding: 0;
   font-family: var(--font-family-base);
-}
-
-/* Improved heading hierarchy */
-h1, h2, h3, h4, h5, h6 {
-  color: var(--color-primary);
-  font-weight: 600;
-  line-height: var(--line-height-tight);
-  margin-top: 0;
-  margin-bottom: var(--spacing-sm);
-}
-
-h1 { font-size: 2em; }    /* 32px */
-h2 { font-size: 1.5em; }  /* 24px */
-h3 { font-size: 1.25em; } /* 20px */
-h4 { font-size: 1.125em; }/* 18px */
-h5, h6 { font-size: 1em; }/* 16px */
-
-/* Better paragraph spacing */
-p {
-  margin-bottom: var(--spacing-md);
+  font-size: var(--font-size-base);
   line-height: var(--line-height-base);
-  max-width: 65ch; /* Optimal reading width */
-}
-
-/* Improved link accessibility */
-a {
-  color: var(--color-primary);
-  text-decoration: underline;
-  text-underline-offset: 0.125em;
-  text-decoration-thickness: 0.0625em;
-}
-
-a:hover, a:focus {
-  text-decoration-thickness: 0.125em;
+  background: var(--color-background);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
-
-/* Main page elements in databrowser.html */
-#PageBody {
+/* ── App layout ── */
+body {
   display: flex;
   flex-direction: column;
+  min-height: 100dvh;        /* dvh = dynamic viewport for mobile chrome */
 }
-#DummyUUID {
-  flex: 1 0 auto;
-}
+
 #PageHeader {
+  position: sticky;
+  top: 0;
+  z-index: 100;
   flex-shrink: 0;
 }
+
+#MainContent {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
+  padding: clamp(0.5rem, 2vw, 1.5rem); /* responsive gutter */
+  container-type: inline-size;          /* enable @container queries */
+}
+
 #PageFooter {
   flex-shrink: 0;
 }
 
+
 .warning {
   color: var(--color-warning);
 }
 .selected {
   background-color: var(--color-selected-bg);
 }
 
+/* used in profile-pane as success button */
 .licOkay {
   background-color: var(--color-success-bg);
 }
@@ -1409,3 +1382,56 @@ End of styles for tableViewPane
   -moz-box-shadow: $x-axis $y-axis $blur $color;
   -o-box-shadow: $x-axis $y-axis $blur $color;
 }
+
+/* Generated by AI */
+@media screen and (max-width: 768px) {
+  #PageHeader,
+  #PageFooter {
+    width: 100%;
+  }
+
+  #MainContent {
+    padding-top: 0.75rem;
+    padding-right: max(0.75rem, env(safe-area-inset-right));
+    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
+    padding-left: max(0.75rem, env(safe-area-inset-left));
+  }
+
+  .TabulatorOutline,
+  .outline-view {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .TabulatorOutline table,
+  .outline-view table {
+    min-width: 100%;
+  }
+
+  img.outlineImage,
+  img.pic,
+  img.foafPic {
+    height: auto;
+    max-width: 100%;
+  }
+
+  div.description,
+  div.premises,
+  div.justification,
+  div.mildNotice {
+    box-sizing: border-box;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+html[data-layout="mobile"] #PageBody {
+  min-height: var(--app-height, 100dvh);
+}
+
+html[data-layout="mobile"] #MainContent {
+  overscroll-behavior-x: contain;
+}
+
+/* END of Generated by AI */

dev/loader.ts

@@ -5,6 +5,7 @@ import { solidLogicSingleton, store, authSession } from 'solid-logic'
 import { getOutliner } from '../src'
 import Pane from 'profile-pane'
 import './dev-mash.css'
+import { DataBrowserContext, RenderEnvironment } from 'pane-registry'
 
 // Add custom properties to the Window interface for TypeScript
 declare global {
@@ -27,15 +28,24 @@ async function renderPane (uri: string) {
   await new Promise((resolve, reject) => {
     store.fetcher.load(doc).then(resolve, reject)
   })
-  const context = {
+
+  const devEnvironment : RenderEnvironment = {
+    layout: 'desktop', // or 'mobile'
+    layoutPreference: 'desktop', // or 'mobile' or 'auto'
+    inputMode: 'pointer', // or 'touch'
+    theme: 'light', // or 'dark'
+    viewport: { width: 800, height: 480 } // this is the default viewport for the browser window
+  }
+  const context : DataBrowserContext = {
     // see https://github.com/solidos/solid-panes/blob/005f90295d83e499fd626bd84aeb3df10135d5c1/src/index.ts#L30-L34
     dom: document,
     getOutliner,
     session: {
       store: store,
       paneRegistry,
       logic: solidLogicSingleton
-    }
+    },
+    environment: devEnvironment
   }
 
   console.log(subject, context)

src/dashboard/basicPreferences.ts

@@ -15,6 +15,7 @@ export const basicPreferencesPane: PaneDefinition = {
   // The subject should be the logged in user.
   render: (subject, context) => {
     const dom = context.dom
+    // @ts-ignore
     const store = context.session.store as Store
 
     function complainIfBad (ok: Boolean, mess: any) {

src/internal/internalPane.ts

@@ -20,6 +20,7 @@ const pane: PaneDefinition = {
 
   render: function (subject, context) {
     const dom = context.dom
+    // @ts-ignore
     const store = context.session.store as Store
     const canonizedSubject = store.canon(subject) as BlankNode | NamedNode | Variable
     const types = store.findTypeURIs(canonizedSubject)

src/outline/context.ts

@@ -14,7 +14,9 @@ export function createContext (
     getOutliner,
     session: {
       paneRegistry,
+      // @ts-ignore
       store,
+      // @ts-ignore
       logic
     }
   }