solid-ui 3.0.6 → 3.1.1-test.0

package/README.md

@@ -17,9 +17,12 @@ See [Forms introduction](./docs/FormsReadme.md) for UI vocabulary implementation
 - [Use Directly in Browser](#use-directly-in-a-browser)
   - [UMD Bundle](#umd-bundle-global-variable)
   - [ESM Bundle](#esm-bundle-import-as-module)
-- [Development](#development-new-components)
+- [Web Components](#web-components)
+  - [solid-ui-header](#solid-ui-header)
+- [Development](#development)
 - [Testing](#adding-tests)
 - [Further Documentation](#further-documentation)
+- [Generative AI usage](#generative-ai-usage)
 
 
 ## Getting started
@@ -66,6 +69,8 @@ Solid-UI provides both **UMD** and **ESM** bundles for direct browser usage. Bot
 
 ### UMD Bundle (Global Variable)
 
+If you use the legacy UMD bundle (`solid-ui.js` / `solid-ui.min.js`), `rdflib` must define `window.$rdf` before `solid-ui` loads. If `rdflib` is missing, `solid-ui` will throw `ReferenceError: $rdf is not defined`.
+
 Load via `<script>` tags and access through global variables `window.$rdf`, `window.SolidLogic`, and `window.UI`.
 
 ```html
@@ -253,7 +258,101 @@ Use import maps for cleaner module specifiers:
 </html>
 ```
 
-### Development new components
+## Web Components
+
+solid-ui ships self-contained Lit-based custom elements as subpath exports. Each component is independently importable, registers its custom element on import, and ships its own styles encapsulated in a Shadow DOM.
+
+> Component UMD bundles do not export a shared global like `window.UI`. They only register the custom element on import, while the legacy main bundle still provides the `UI` global.
+
+### solid-ui-header
+
+A header bar with branding, auth state (logged-out / logged-in), an account dropdown, an optional logout icon, and a desktop-only help menu.
+
+**Subpath export:** `solid-ui/components/header`
+
+```typescript
+import { Header } from 'solid-ui/components/header'
+import type { HeaderMenuItem, HeaderAccountMenuItem, HeaderAuthState } from 'solid-ui/components/header'
+```
+
+```html
+<solid-ui-header theme="dark" layout="desktop" brand-link="/">
+  <a slot="help-menu" href="/help">Help</a>
+</solid-ui-header>
+```
+
+Importing this module automatically registers `<solid-ui-header>` as a custom element.
+
+### solid-ui-login-button
+
+A standalone login button that encapsulates the Solid OIDC login flow and emits `login-success` when authentication succeeds.
+
+**Subpath export:** `solid-ui/components/login-button`
+
+```typescript
+import { LoginButton } from 'solid-ui/components/login-button'
+```
+
+```html
+<solid-ui-login-button label="Log in" issuer-url="https://solidcommunity.net" icon="https://example.com/login-icon.svg"></solid-ui-login-button>
+```
+
+```typescript
+const loginButton = document.querySelector('solid-ui-login-button') as LoginButton
+loginButton.addEventListener('login-success', (event: CustomEvent) => {
+  console.log('Logged in as', event.detail.webId)
+})
+```
+
+### solid-ui-signup-button
+
+A standalone sign-up button that opens a signup URL in a new browser tab.
+
+**Subpath export:** `solid-ui/components/signup-button`
+
+```typescript
+import { SignupButton } from 'solid-ui/components/signup-button'
+```
+
+```html
+<solid-ui-signup-button label="Get a Pod" signup-url="https://solidproject.org/get_a_pod" icon="https://example.com/icon.svg"></solid-ui-signup-button>
+```
+
+### Component build pipeline
+
+Web components use a two-stage build to produce a clean public runtime layout while keeping internal TypeScript artifacts separate:
+
+1. **`scripts/component-manifest.mjs`** is the source of truth for v2 web components. It defines the component entrypoints used by webpack and the public subpath names exposed from the package.
+2. **webpack** (`npm run build-dist`) bundles each component entrypoint from the manifest and emits the runtime files to `dist/components/<name>/index.js` and `dist/components/<name>/index.esm.js`.
+3. **tsc** (`npm run build-js`) emits internal declaration and JS artifacts mirroring the source tree under `dist/v2/components/<name>/`.
+4. **`scripts/build-component-dts.mjs`** (runs automatically after tsc as part of `postbuild-js`) writes thin public declaration wrappers at `dist/components/<name>/index.d.ts`, re-exporting from the internal `dist/v2/components/<name>/` output.
+5. **`scripts/sync-component-exports.mjs`** keeps the `package.json` `exports` map aligned with the manifest. It runs automatically as part of `npm run build` and `npm version` workflows.
+
+The legacy main bundle remains a special case. In [webpack.config.mjs](webpack.config.mjs) only the `main` entry keeps the UMD `UI` global export; component entries are generated from the manifest and built as standalone scripts so they do not clobber one another when loaded directly.
+
+This keeps the `package.json` subpath export fully aligned while exposing only the public `dist/components/...` layout:
+
+```json
+"./components/header": {
+  "types":   "./dist/components/header/index.d.ts",
+  "import":  "./dist/components/header/index.esm.js",
+  "require": "./dist/components/header/index.js"
+}
+```
+
+Consumers never import from `dist/v2/components/...`; that path is an internal build artifact only.
+
+### Adding a new web component
+
+When adding a new v2 component:
+
+1. Create the component folder under `src/v2/components/` with its `index.ts` entrypoint. Components can be grouped in nested directories such as `src/v2/components/forms/select/`, `src/v2/components/auth/loginButton/`, or `src/v2/components/layout/header/`.
+2. Add one record to `scripts/component-manifest.mjs`. If the component lives in a nested directory, set its `sourcePath` in the manifest to match that grouped path.
+3. Run `npm run sync-component-exports` if you want to update `package.json` immediately, or just run `npm run build` and let the build do it automatically.
+
+You should not need to hand-edit the webpack component entry list or the `package.json` component export map anymore.
+
+## Development
 
 When developing a component in solid-ui you can test it in isolation using storybook
 
@@ -286,3 +385,48 @@ The following document gives guidance on how to add and perform testing in solid
 ## Further documentation
 
 - [Some code know-how](https://github.com/SolidOS/solidos/wiki/2.-Solid-UI-know-how)
+
+## 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 history:
+
+* Raptor mini: If I want to make the header a web component with a self contained CSS which only consumes CSS variables from a theme, how would I do this? 
+
+* Raptor mini: Go ahead and create a header web component, for backward compatibility keep the current code too.
+In the new header component I need to be flexible and receive from consumer - the layout (mobile or desktop) and the theme (light or dark) and its according CSS variables for light to dark.
+
+* Raptor mini: Propose code. how about webpack config for distribution?
+
+* Raptor mini: pls add a readme in the component documenting it usage and test and all
+
+* Raptor mini: the helpMenuList should be menu items inside the help icon drop down menu
+
+* Raptor mini: When I am not logged in I want the header to display: Log in button and Sign Up button.
+When the user is logged in, there is only one button, a drop down button called Accounts. The icon of the button is the avatar of the profile and it displays a list of available accounts of the user.
+I want this all to be presented flexible in the component.
+
+* Claude Sonnet 4.6: create a LitElement also for the signupButton in the SignupButton.ts based on the signup.js code and wire it into the header like you did the loginButton.
+
+* Raptor mini: when we are on layout mobile we do not want to display the help menu at all.
+
+* Raptor mini: Create for me a footer Lit Component in tsy style of the components I have and under v2. Take the code from this index.ts to start with.
+
+* Raptor mini: Good. Now, I want the footer to be a rectangular with round corners, grey background and it should have an adjustable position.
+
+* Raptor mini: The content of the footer should be different upon loggedin or not.
+If not logged in, it should say:
+Title Public View
+You are viewving this profile as a guest,
+And if logged in:
+Title: Logged in View
+You are logged in as nameOfLoggedIn user.
+
+* Raptor mini: add a readme to the Footer component with example.
+
+* Claude Sonnet 4.6: Make the drop down as a list under the input field and enlarge the pop up, make it higher, adjustable to fit the drop down. And make the drop down arrow area larger
+
+* GPT-5.4 Model: can you wire up the keyboard interactions and aria attributes for Select?
+
+* GPT-5.4 Model: Take the code from /Users/sharon/2025Dev/solid-ui/src/media/media-capture.ts and make it a web component. Make it work in forms as well as not. Make it configurable and follow LoginButton.

package/dist/acl/access-groups.js

@@ -230,7 +230,7 @@ export class AccessGroups {
                 ? `Detected RDF types: ${detectedTypes.join(', ')}`
                 : 'No RDF type was detected for this URI.';
             const error = `Error: Failed to add access target: ${uri} is not a recognized ACL target type.` +
-                ` Expected one of: vcard:WebID, vcard:Group, foaf:Person, foaf:Agent, solid:AppProvider, solid:AppProviderClass, or recognized ACL classes.` +
+                ' Expected one of: vcard:WebID, vcard:Group, foaf:Person, foaf:Agent, solid:AppProvider, solid:AppProviderClass, or recognized ACL classes.' +
                 ' Hint: try dropping a WebID profile URI, a vcard:Group URI, or a web app origin.' +
                 typeDetails;
             debug.error(error);

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from '../../v2/components/actions/button/index';