Post milestone3m

README.md

@@ -1,5 +1,4 @@
 # solid-panes
-
 A set of core solid-compatible applets based on solid-ui
 
 These are a set of interlinked applications, or parts of applications,
@@ -115,8 +114,23 @@ I want the menu to have a tiny button on the bottom margin left with an arrow to
 
 * Raprot mini: instead of this code (index.ts of footer), I want to make use of a new footer web component with the readme: # solid-ui-footer component
 
-* Raptor mini: The footer created shoudl actually be part of the left side menu only. Should be displayed inside it and should collaps and expand as the menu.
+* Raptor mini: The footer created should actually be part of the left side menu only. Should be displayed inside it and should collaps and expand as the menu.
 
 * Raptor mini: the footer should completely dissapear when menu folded up.
 
 * Raptor mini: Please always keep the footer at the bottom of the menu
+
+* GPT-5.3-Codex in GitHub Copilot: This is the comment I got from copilot, but suggested fix remove the dark class as well The nested table shading logic checks UI.utils.ancestor(newTable, 'TABLE') immediately after creating newTable, but at that moment newTable typically has no
+parent in the DOM yet. This makes parentTable null and will
+always apply dataContentPaneNestedLight, preventing the
+intended alternating light/dark nested backgrounds.
+Consider assigning the class after appending newTable into
+its parent table, or pass the parent table (or current nesting depth) into objectTree() so the decision can be made reliably. can you help me fix this without removing the dark altering 
+
+* GPT-5.4 Model: Make this (n3Pane) look good on mobile by indenting the lines that wrap.
+
+* GPT-5.4 Model: Generate TypeScript types for the default pane. 
+
+* GPT-5.4 Model: Add a compatibility shim in the form pane for mixed `ui:Group` plus field typing.
+
+* AI GPT-5.4 Model: After friend is added when mutual checkbox is checked refresh mutual and header sections */

dev/dev-mash.css

@@ -682,10 +682,6 @@ div.exceptionPane pre {
   display: none;
 }
 
-.active {
-  /* display: visible; */
-}
-
 .submitRow {
   clear: both;
   height: 5em;
@@ -704,119 +700,17 @@ div.exceptionPane pre {
   display: inline;
 }
 
-/******************* CV Pane *****************/
-
-.CVclass {
-  background-color: var(--color-cv-pane-bg);
-}
-
-/******************* Data Content Pane *****************/
-
-div.dataContentPane {
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  padding: 0.5em; /* color: #404; */
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.nestedFormula {
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  padding: 0.5em;
-  border-radius: 0.5em;
-}
-
-div.dataContentPane td {
-  padding-left: 0.2em;
-  padding-top: 0.1em;
-  padding-right: 0.2em;
-  padding-bottom: 0.05em;
-  /*	        vertical-align: middle; /*@@ Lalana's request*/
-  vertical-align: top; /*@@ Tims's request*/
-  /* With middel, you can't tell what is with what */
-  /* background-color: white; */
-}
-
-div.dataContentPane tr {
-  margin-bottom: 0.6em;
-  padding-top: 1em;
-  padding-bottom: 1em;
-}
-
-.dataContentPane a {
-  color: var(--color-text-link);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:link {
-  color: var(--color-text-link);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:visited {
-  color: var(--color-text-link-visited);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:hover {
-  color: var(--color-text-link-hover);
-  text-decoration: underline;
-  font-weight: bold;
-}
-.dataContentPane a:active {
-  color: var(--color-text-link-active);
-  text-decoration: none;
-}
-
-.dataContentPane.embeddedText {
-  white-space: pre-wrap;
-}
-
-/* div.dataContentPane a { text-decoration: none; color: #006} /* Only very slightly blue */
-div.dataContentPane td.pred {
-  min-width: 12em;
-} /* Keep aligned with others better */
 div.dataContentPane td.pred a {
   color: var(--color-text-muted);
 } /* Greyish as form field names have less info value */
 
 /* .collectionAsTables  {border-right: green 1px; margin: 0.2em;} */
 
-div.n3Pane {
-  padding: 1em;
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  color: var(--color-text-blue);
-}
-
 .imageView {
   border: 1em var(--color-background);
   margin: 1em;
 }
 
-.n3Pane pre {
-  font-size: 120%;
-}
-
-.RDFXMLPane pre {
-  font-size: 120%;
-}
-
-div.RDFXMLPane {
-  padding: 1em;
-  border-top: solid 2px var(--color-data-pane-border-top);
-  border-left: solid 2px var(--color-data-pane-border-top);
-  border-bottom: solid 2px var(--color-data-pane-border-side);
-  border-right: solid 2px var(--color-data-pane-border-side);
-  color: var(--color-text-brown);
-}
 
 /* Generic things useful anywhere */
 
@@ -1685,28 +1579,6 @@ button:disabled, [role="button"][aria-disabled="true"] {
   cursor: not-allowed;
   pointer-events: none;
 }
-
-/* Loading indicator accessibility */
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--color-border-pale);
-  border-top: 3px solid var(--color-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .loading-spinner {
-    animation: none;
-    border-top-color: var(--color-primary);
-  }
-}
 /* copied from profile-pane */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {

dev/loader.ts

@@ -128,7 +128,8 @@ function createIconElement (Pane: { icon: string }) {
 window.onload = async () => {
   console.log('document ready')
   // registerPanes((cjsOrEsModule: any) => paneRegistry.register(cjsOrEsModule.default || cjsOrEsModule))
-  paneRegistry.register(require('contacts-pane'))
+  const contactsPane = await import('contacts-pane')
+  paneRegistry.register((contactsPane as any).default || contactsPane)
   await authSession.handleIncomingRedirect({
     restorePreviousSession: true
   })

src/RDFXMLPane.css

@@ -0,0 +1,70 @@
+.rdfxml-pane {
+	padding: 1rem;
+	border-top: solid 2px var(--color-data-pane-border-top, black);
+	border-left: solid 2px var(--color-data-pane-border-top, black);
+	border-bottom: solid 2px var(--color-data-pane-border-side, #777);
+	border-right: solid 2px var(--color-data-pane-border-side, #777);
+	color: var(--color-text-brown, #440);
+	box-sizing: border-box;
+}
+
+.rdfxml-pane__source {
+	overflow-x: auto;
+	max-width: 100%;
+	box-sizing: border-box;
+	font-family: monospace;
+	font-size: 120%;
+	margin: 0;
+	white-space: pre;
+}
+
+.rdfxml-pane__line {
+	display: grid;
+	grid-template-columns: var(--rdfxml-indent, 0) minmax(max-content, auto);
+	align-items: start;
+}
+
+.rdfxml-pane__line-indent {
+	display: block;
+	width: var(--rdfxml-indent, 0);
+}
+
+.rdfxml-pane__line-content {
+	white-space: pre;
+}
+
+.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__source {
+	overflow-wrap: anywhere;
+	word-break: break-word;
+	white-space: normal;
+}
+
+.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__line {
+	grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
+}
+
+.rdfxml-pane[data-layout='mobile'] .rdfxml-pane__line-content {
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	word-break: break-word;
+	min-width: 0;
+}
+
+@media (max-width: 576px) {
+	.rdfxml-pane__source {
+		overflow-wrap: anywhere;
+		word-break: break-word;
+		white-space: normal;
+	}
+
+	.rdfxml-pane__line {
+		grid-template-columns: var(--rdfxml-indent, 0) minmax(0, 1fr);
+	}
+
+	.rdfxml-pane__line-content {
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+		word-break: break-word;
+		min-width: 0;
+	}
+}