# Shared UI Components

Framework: React 19 with custom TypeScript components and vanilla CSS. No third-party component library is used.

## Button families

Source: `../guanghu-knowledge-base/src/styles/app.css`

```css
.primary-button,
.secondary-button,
.text-button,
.icon-button {
  min-height: 36px;
  padding: 0 15px;
  border-radius: 9px;
  cursor: pointer;
}
.primary-button {
  border: 1px solid var(--lake-accent);
  background: var(--lake-accent);
  color: #06121c;
  font-weight: 650;
}
.secondary-button {
  border: 1px solid var(--lake-border);
  background: var(--lake-surface-2);
  color: var(--lake-text-soft);
}
.text-button,
.icon-button {
  border: 0;
  background: transparent;
  color: var(--lake-muted);
}
```

## HoloLake orbit mark

The current shared mark is CSS-only. It must replace every text avatar. The Chinese character `湖` is not a brand asset and must not appear as an avatar or empty-state illustration.

```css
.launcher-orbit {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(69, 183, 204, 0.58);
  border-radius: 50%;
  transform: rotate(-16deg);
}
.launcher-orbit::before {
  content: "";
  position: absolute;
  inset: 7px -5px;
  border: 1px solid rgba(69, 183, 204, 0.46);
  border-radius: 50%;
}
.launcher-orbit::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  left: 8px;
  top: 8px;
  border-radius: 50%;
  background: var(--lake-accent);
}
```

## StorageLocationSheet

Source: `../guanghu-knowledge-base/src/components/StorageLocationSheet.tsx`

Purpose: account/server sign-in and local-versus-server knowledge storage. This is an application-level sheet, not Agent content. Key state: local/server mode, active server session, repository selection, repository creation, sign-out.

## HumanSettings

Source: `../guanghu-knowledge-base/src/components/HumanSettings.tsx`

Purpose: device-local human preferences. Controls language preference, UI font, reading size and appearance. It must remain separate from server credentials and from Agent model configuration.

## AgentChat

Source: `../guanghu-knowledge-base/src/components/AgentChat.tsx`

Purpose: current-channel assistance. The default render must contain only scope, status, conversation and composer. Model and Git engine controls are advanced application settings and must not be rendered in the default Agent surface.

## Knowledge primitives

- `DocTree.tsx`: folder/page hierarchy.
- `Editor.tsx`: document preview and edit mode.
- `SearchBar.tsx`: channel-local document search.
- `VersionHistory.tsx`: Git-backed revision history.