use pane-registry types

Author: SharonStrats

src/RDFXMLPane.ts

@@ -7,7 +7,7 @@
 
 import * as UI from 'solid-ui'
 import * as $rdf from 'rdflib'
-import type { DataBrowserContext } from 'pane-registry'
+import type { DataBrowserContext, RenderEnvironment } from 'pane-registry'
 import type { NamedNode, Statement } from 'rdflib'
 import './RDFXMLPane.css'
 
@@ -21,10 +21,6 @@ type RDFXMLPaneDefinition = {
   render: (subject: NamedNode, context: DataBrowserContext) => HTMLDivElement
 }
 
-type RenderEnvironmentLike = {
-  layout?: 'mobile' | 'desktop'
-}
-
 function leadingIndentWidth (line: string): number {
   if (line.trim().length === 0) {
     return 0
@@ -79,7 +75,7 @@ export const RDFXMLPane: RDFXMLPaneDefinition = {
     const kb = context.session.store
 
     function applyEnvironmentAttributes (element: HTMLDivElement): void {
-      const environment = (context.environment ?? {}) as RenderEnvironmentLike
+      const environment = (context.environment ?? {}) as Partial<RenderEnvironment>
       element.dataset.layout = environment.layout ?? 'desktop'
     }
 

src/dataContentPane.ts

@@ -11,7 +11,7 @@
 
 import * as UI from 'solid-ui'
 import * as $rdf from 'rdflib'
-import type { DataBrowserContext } from 'pane-registry'
+import type { DataBrowserContext, RenderEnvironment } from 'pane-registry'
 import type {
   BlankNode,
   Formula,
@@ -39,12 +39,6 @@ type DataContentPaneLike = {
   ) => HTMLTableElement
 }
 
-type RenderEnvironmentLike = {
-  layout?: 'mobile' | 'desktop' | string
-  theme?: 'light' | 'dark' | string
-  inputMode?: 'pointer' | 'touch' | string
-}
-
 export const dataContentPane = {
   icon: UI.icons.originalIconBase + 'rdf_flyer.24.gif',
 
@@ -290,7 +284,7 @@ export const dataContentPane = {
     const myDocument = context.dom
 
     function applyEnvironmentAttributes (element: HTMLDivElement): void {
-      const environment = (context.environment ?? {}) as RenderEnvironmentLike
+      const environment = (context.environment ?? {}) as Partial<RenderEnvironment>
       element.dataset.layout = environment.layout ?? 'desktop'
       element.dataset.theme = environment.theme ?? 'light'
       element.dataset.inputMode = environment.inputMode ?? 'pointer'

src/humanReadablePane.ts

@@ -7,7 +7,7 @@ import { icons, ns } from 'solid-ui'
 import { Util } from 'rdflib'
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
-import type { DataBrowserContext } from 'pane-registry'
+import type { DataBrowserContext, RenderEnvironment } from 'pane-registry'
 import type { NamedNode } from 'rdflib'
 import './humanReadablePane.css'
 
@@ -23,10 +23,6 @@ type HumanReadablePaneDefinition = {
   render: (subject: NamedNode, context: DataBrowserContext) => HTMLDivElement
 }
 
-type RenderEnvironmentLike = {
-  layout?: 'mobile' | 'desktop' | string
-}
-
 const isMarkdownFile = (uri?: string | null): boolean => {
   if (!uri) return false
   const path = uri.split('?')[0].split('#')[0] // Remove query string and fragment
@@ -205,7 +201,7 @@ const humanReadablePane: HumanReadablePaneDefinition = {
     const kb = context.session.store
 
     function applyEnvironmentAttributes (element: HTMLDivElement): void {
-      const environment = (context.environment ?? {}) as RenderEnvironmentLike
+      const environment = (context.environment ?? {}) as Partial<RenderEnvironment>
       element.dataset.layout = environment.layout ?? 'desktop'
     }
 

src/n3Pane.ts

@@ -6,7 +6,7 @@
  */
 import * as UI from 'solid-ui'
 import * as $rdf from 'rdflib'
-import type { DataBrowserContext } from 'pane-registry'
+import type { DataBrowserContext, RenderEnvironment } from 'pane-registry'
 import type { NamedNode, Statement } from 'rdflib'
 import './n3Pane.css'
 
@@ -20,9 +20,6 @@ type N3PaneLike = {
   render: (subject: NamedNode, context: DataBrowserContext) => HTMLDivElement
 }
 
-type RenderEnvironmentLike = {
-  layout?: 'mobile' | 'desktop'
-}
 /* This code was generated by Generative AI (GPT-5.4 in GitHub Copilot) based on the following prompt:
     Make this look good on mobile by indenting the lines that wrap. */
 function leadingIndentWidth (line: string): number {
@@ -74,7 +71,7 @@ export const n3Pane: N3PaneLike = {
     const kb = context.session.store
 
     function applyEnvironmentAttributes (element: HTMLDivElement): void {
-      const environment = (context.environment ?? {}) as RenderEnvironmentLike
+      const environment = (context.environment ?? {}) as Partial<RenderEnvironment>
       element.dataset.layout = environment.layout ?? 'desktop'
     }
 

src/schedule/schedulePane.ts

@@ -7,7 +7,7 @@
 import * as UI from 'solid-ui'
 import { authn } from 'solid-logic'
 import * as $rdf from 'rdflib'
-import type { DataBrowserContext } from 'pane-registry'
+import type { DataBrowserContext, RenderEnvironment } from 'pane-registry'
 import type { NamedNode, Node as RdflibNode, Statement, Variable } from 'rdflib'
 import formText from './formsForSchedule.ttl'
 import './schedulePane.css'
@@ -56,10 +56,6 @@ type LoginStatusBoxLike = {
   refresh: () => void
 }
 
-type RenderEnvironmentLike = {
-  layout?: string
-}
-
 function runNextAgendaItem (agenda: AgendaTask[]): void {
   const nextTask = agenda.shift()
   if (nextTask) {
@@ -391,7 +387,7 @@ export const schedulePane = {
     const appPathSegment = 'app-when-can-we.w3.org' // how to allocate this string and connect to
 
     function applyEnvironmentAttributes (element: HTMLDivElement): void {
-      const environment = (context.environment ?? {}) as RenderEnvironmentLike
+      const environment = (context.environment ?? {}) as Partial<RenderEnvironment>
       element.dataset.layout = environment.layout ?? 'desktop'
     }
 

src/sharing/sharingPane.ts

@@ -9,6 +9,7 @@
  */
 
 import { aclControl, icons, ns } from 'solid-ui'
+import './sharingPane.css'
 
 const sharingPane = {
   icon: icons.iconBase + 'padlock-timbl.svg',