Post milestone3m

README.md

@@ -28,6 +28,18 @@ npm test -- test/profile-view.accessibility.test.ts
 Accessibility markup baseline checklist:
 [docs/accessibility-baseline-checklist.md](docs/accessibility-baseline-checklist.md)
 
+Manual accessibility smoke test:
+[docs/accessibility-smoke-test.md](docs/accessibility-smoke-test.md)
+
+Accessibility workflow:
+
+- Run the focused accessibility test after markup or interaction changes.
+- Manually verify keyboard-only use: tab order, reachable controls, visible focus, dialog open/close, and return of focus after dialogs close.
+- Manually verify screen-reader output with VoiceOver on macOS for headings, landmarks, button names, dialog announcements, and inline error/status messages.
+- Check zoom and reflow at 200% and 400% to confirm content remains readable and usable without horizontal scrolling for core flows.
+- If a change affects dynamic UI feedback, confirm success, saving, and error states are announced appropriately.
+- Browser-level accessibility audits such as Lighthouse or Playwright/Cypress + axe are not yet wired into repo scripts, so treat the manual checks above as required review work for accessibility-sensitive changes.
+
 Refactor test plan (temporary skips and revisit checklist):
 [docs/refactor-test-plan.md](docs/refactor-test-plan.md)
 
@@ -61,3 +73,41 @@ npm run build
 
 The build is done by `tsc`, webpack is only used as dev server and not for production build.
 
+## 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 GPT-5.3-Codex:  write me a reusable function to open a dialog with a form and return the form values on submit. The function should also support validation and display error messages in the dialog. It should reuse the OpenModal function for consistency. 
+
+* Model GPT-5.3-Codex: the description needs to only show 2 lines and then more button please generate code for this. 
+
+* Model GPT-5.3-Codex: write me a function to convert a date to Month, Year 
+
+* Model GPT-5.3-Codex: The QRCode has a label "link to profile" but it should be a VCARD with name, and link to profile. So when you scan it it goes into your contacts. That's the current way works, IIRC.
+
+* GPT-5.3-Codex Model: 1. are you able to create a little trash can icon at the end of each entry so for each phone, email and address line. 2. are you able to add all the country flags and prefix next to the phone numbers? 3. can you write functions to sanitize the input values for emails, phones, and addresses? 
+
+* GPT-5.3-Codex Model:  can you have applyAddressFieldChange update the row status based on whether any fields have content 
+
+* GPT-5.3-Codex Model: do you see anything I can do differently in the mutation code so that it's not so verbose and possible reusable accross sections
+
+* GPT-5.3-Codex Model: can you implement on SocialEditDialog add the bentoIcon as the first item 
+on the row, you should be able to drag this button around and it should allow you to change the order of the rows and that should change the order in the mutations that happen for this data. 
+
+* GPT-5.3-Codex Model: Write a function handleCameraClick that uses the cameraCaptureControl to
+capture an image and update the profile photo in the heading section.
+
+* GPT-5.3-Codex Model: In header selectors select phone and email work type if it exists otherwise pick any. 
+
+* GPT-5.3-Codex Model: can you make this a month drop down for the start year 
+
+* GPT-5.3-Codex Model: write me a function to determine PastRole, CurrentRole, or FutureRole based on resume role date data. The function should return a NamedNode with the correct solid namespace and role type local name. The function should use the roleType field if it is set to one of those three values, otherwise it should infer the role type based on the start and end dates and isCurrentRole field. 
+
+* GPT-5.4 Model: can you add types to rdfMutationHelpers.ts and consolidate mutation logic where appropriate. 
+
+* GPT-5.4 Model: can you refactor texts so it's cleaner and easier to update 
+
+* GPT-5.4 Model: add keyboard interaction coverage for the shared dialog so we verify initial focus placement and focus restoration when the dialog is cancelled
+
+* GPT-5.4 Model: Use inputMode to toggle interactive cursors

TASKS.md

@@ -0,0 +1,22 @@
+# Profile Pane Task List
+
+## Working Notes
+- Mobile changes must be implemented in `layout='mobile'`, container queries, and only the necessary media-query fallbacks. `layout='mobile'` and container behavior are the source of truth.
+- Prefer `rem` units and mashlib variables from `light.css` where possible.
+- For color styling, use general variables for grays and whites where available. `lavender` and primary color variables are fine as-is.
+- Remove utility classes other than `sr-only` and `hidden`. Move styles into specific semantic classes; create specific classes when needed.
+- Where possible, make like things share the same class and styling so the same UI is styled once instead of through one-off selectors.
+
+## Current Tasks
+- [x] In resume, when tabbing to the company name, highlight the chevron icon v differently. it's like a blue border can you do the purple that happens on the other v for select maybe check all combox maybe they are all not correct only select is... it should be like organization drop down tab for v
+- [ ] fix drag and drop in solid-ui.  look at socialPane in solid-panes at the bullseye icon for adding friends you can see there what function is called in solid-ui that needs fixing.  The other place we need to look is the folder-pane plus icon at the bottom of the page you should be able to drag a file onto that and it will upload the file not open a new tab. Double check this but i think it uses the same solid-ui function as the socialPane bullseye in solid-panes. both of these need to work + on folder pane needs to upload a file and the bullseye needs to add a friend.
+- [x] What do you think about teh edit dialog css file is it too big, should we split this up into different css files per section that it is styling. Investigate let me know your thoughts and we will proceed from there.
+- [ ] I need to test how the ordered list are working in social section and the languages with the new changes in rdflib please let me know i need to do this when you get to it.
+- [ ] on skills the combobox drop down goes over the dialog footer so that all the values can be seen, can you do htat for all the comboboxes the other seem to go underneath the footer. you'll need to look through all the edit dialog and find the ones that have combobox.  i can think of resume, social, languages, please double check the others just to be sure. maybe do them one by one and i can check each time adn 
+we can then commit them separately.
+
+## Notes
+- Add new items here as they come up.
+- Work through tasks one by one.
+- After each task, stop and let the user review it before running `npm run prepush` or making a commit.
+- Once the user approves a task, run `npm run prepush`, fix any resulting errors, then commit only the files for that task.

dev/context.ts

@@ -1,6 +1,14 @@
 import { longChatPane } from 'chat-pane'
 //import * as contact from 'contacts-pane' //uncomment for profileEditor
-import { DataBrowserContext, PaneRegistry } from 'pane-registry'
+import {
+  DataBrowserContext,
+  InputMode,
+  LayoutMode,
+  LayoutPreference,
+  PaneRegistry,
+  RenderEnvironment,
+  ThemeMode,
+} from 'pane-registry'
 import { solidLogicSingleton, store } from 'solid-logic'
 import { LiveStore } from 'rdflib'
 
@@ -11,6 +19,79 @@ if (store.fetcher) {
   (store.fetcher as any).withCredentials = false;
 }
 
+const MOBILE_BREAKPOINT = 768
+
+function getViewport() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  }
+}
+
+function getInputMode(): InputMode {
+  return window.matchMedia('(pointer: coarse)').matches ? 'touch' : 'pointer'
+}
+
+function resolveLayout(
+  layoutPreference: LayoutPreference,
+  viewport = getViewport()
+): LayoutMode {
+  if (layoutPreference === 'auto') {
+    return viewport.width <= MOBILE_BREAKPOINT ? 'mobile' : 'desktop'
+  }
+
+  return layoutPreference
+}
+
+function getInitialTheme(): ThemeMode {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light'
+}
+
+export const environment: RenderEnvironment = {
+  layoutPreference: 'auto',
+  viewport: getViewport(),
+  inputMode: getInputMode(),
+  theme: getInitialTheme(),
+  layout: 'desktop',
+}
+
+environment.layout = resolveLayout(environment.layoutPreference, environment.viewport)
+
+export function updateEnvironment(
+  patch: Partial<Pick<RenderEnvironment, 'layoutPreference' | 'theme' | 'inputMode' | 'viewport'>> = {}
+): RenderEnvironment {
+  if (patch.layoutPreference) {
+    environment.layoutPreference = patch.layoutPreference
+  }
+
+  if (patch.theme) {
+    environment.theme = patch.theme
+  }
+
+  if (patch.inputMode) {
+    environment.inputMode = patch.inputMode
+  }
+
+  if (patch.viewport) {
+    environment.viewport = patch.viewport
+  }
+
+  environment.layout = resolveLayout(
+    environment.layoutPreference,
+    environment.viewport
+  )
+
+  return environment
+}
+
+export function syncEnvironmentToWindow(): RenderEnvironment {
+  return updateEnvironment({
+    viewport: getViewport(),
+  })
+}
+
 export const context: DataBrowserContext = {
   session: {
     store: store as LiveStore,
@@ -24,6 +105,7 @@ export const context: DataBrowserContext = {
   },
   dom: document,
   getOutliner: () => null,
+  environment,
 }
 
 export const fetcher = store.fetcher