Refactor/styles separate css

[SharonStrats]

Ticket: SolidOS/solidos#244

Tested in solid-panes using local source-pane.

[Copilot]

Pull request overview

This PR refactors the Source Pane to move UI styling out of inline JS into dedicated CSS, and introduces a Webpack-based build/dev setup so the package can ship compiled artifacts (with CSS handling) under lib/.

Changes:

• Refactor src/sourcePane.js to ES module syntax, import CSS, and replace inline styling with CSS classes in src/styles/sourcePane.css.
• Add Webpack configs (prod + dev) plus Babel config to build lib/source-pane(.min).js and support local dev via webpack-dev-server.
• Update Jest setup with module mappers/mocks for CSS and solid-ui, and adjust tests/helpers for the new module format.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/sourcePane.js	Switch to ESM, import CSS, and replace inline visibility/color styling with class toggles.
src/styles/sourcePane.css	New stylesheet for Source Pane layout and state/visibility styling.
webpack.module.rules.mjs	Centralize loader rules for JS/TS, CSS, CSS modules, and TTL assets.
webpack.config.mjs	Production build to lib/ (UMD) with minified variant and styles copied to lib/styles.
webpack.dev.config.mjs	Dev-server configuration for local development with HTML template and polyfills.
babel.config.mjs	Babel preset config and TTL inline-import plugin configuration.
package.json	Publish/build changes: output in lib/, build scripts, CSS sideEffects, dev server script, new devDependencies.
jest.config.mjs	Update Jest module mapping for $rdf, solid-ui, and CSS imports.
test/sourcePane.test.js	Adjust import pattern to handle default export interop and reorganize result variable scope.
test/helpers/setup.js	Replace solid-logic store usage with an rdflib graph+Fetcher for tests.
test/helpers/solidUiMock.js	Add a minimal solid-ui mock (icons/widgets/ns) for DOM tests.
test/helpers/styleMock.js	Add CSS import mock for Jest.
test/helpers/rdfMock.js	Add $rdf mapper target for Jest (re-export rdflib).
dev/index.js	Add a local dev entry that loads a target URI and renders the pane.
dev/index.html	Add HTML template for the dev server.
dev/dev-global.css	Add local-only global CSS for dev UX.
dev/context.js	Add a dev context helper using solid-logic store/singleton.
README.md	Document AI-assisted refactor note.
.gitignore	Ignore lib/ build output.

Comments suppressed due to low confidence (1)

test/sourcePane.test.js:12

• result is now shared across the sibling text/turtle file and text/plain file describes. This can cause state leakage between suites (especially if additional tests are added later). Prefer scoping result inside each describe (or reinitializing it in each beforeEach) so each suite has its own isolated DOM.

  describe("test button compact", () => {
    let result

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.