@semiont/react-ui 0.2.30 → 0.2.31

package/src/styles/panels/statistics-panel.css

@@ -0,0 +1,147 @@
+/* ============================================
+   StatisticsPanel Component
+   Statistics and metrics display panel
+   ============================================ */
+
+.semiont-statistics-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.semiont-statistics-panel__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap);
+  padding: var(--semiont-panel-padding);
+}
+
+/* Title */
+.semiont-statistics-panel__title {
+  margin: 0 0 var(--semiont-panel-gap-sm);
+  font-size: var(--semiont-text-lg);
+  font-weight: var(--semiont-font-semibold);
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-statistics-panel__title {
+  color: var(--semiont-text-primary);
+}
+
+/* List of statistics */
+.semiont-statistics-panel__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap-sm);
+}
+
+/* Individual statistic item */
+.semiont-statistics-panel__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: var(--semiont-panel-padding-sm);
+  background: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-md);
+  flex-wrap: wrap;
+  gap: var(--semiont-panel-gap-sm);
+}
+
+[data-theme="dark"] .semiont-statistics-panel__item {
+  background: var(--semiont-bg-tertiary);
+}
+
+.semiont-statistics-panel__label {
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-secondary);
+}
+
+[data-theme="dark"] .semiont-statistics-panel__label {
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-statistics-panel__value {
+  font-size: var(--semiont-text-lg);
+  font-weight: var(--semiont-font-semibold);
+  color: var(--semiont-text-primary);
+  margin-left: auto;
+}
+
+[data-theme="dark"] .semiont-statistics-panel__value {
+  color: var(--semiont-text-primary);
+}
+
+/* Sub-items (indented) */
+.semiont-statistics-panel__subitems {
+  width: 100%;
+  margin-top: var(--semiont-panel-gap-xs);
+  padding-left: var(--semiont-panel-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap-xs);
+}
+
+.semiont-statistics-panel__subitem {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.semiont-statistics-panel__sublabel {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+}
+
+[data-theme="dark"] .semiont-statistics-panel__sublabel {
+  color: var(--semiont-text-tertiary);
+}
+
+.semiont-statistics-panel__subvalue {
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-secondary);
+}
+
+[data-theme="dark"] .semiont-statistics-panel__subvalue {
+  color: var(--semiont-text-secondary);
+}
+
+/* Entity Types */
+.semiont-statistics-panel__entity-types {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap-sm);
+  padding: var(--semiont-panel-padding-sm);
+  background: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-md);
+}
+
+[data-theme="dark"] .semiont-statistics-panel__entity-types {
+  background: var(--semiont-bg-tertiary);
+}
+
+.semiont-statistics-panel__entity-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap-xs);
+}
+
+.semiont-statistics-panel__entity-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--semiont-panel-gap-sm);
+}
+
+.semiont-statistics-panel__entity-name {
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-primary);
+  flex: 1;
+}
+
+[data-theme="dark"] .semiont-statistics-panel__entity-name {
+  color: var(--semiont-text-primary);
+}
+
+/* Tags use .semiont-tag from core/tags.css */

package/src/styles/panels/tagging-panel.css

@@ -0,0 +1,59 @@
+/* ============================================
+   TaggingPanel Component
+   Tag management panel styles
+   ============================================ */
+
+.semiont-tagging-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap);
+  padding: var(--semiont-panel-padding);
+  background: var(--semiont-bg-primary);
+  border-radius: var(--semiont-radius-lg);
+}
+
+[data-theme="dark"] .semiont-tagging-panel {
+  background: var(--semiont-bg-secondary);
+}
+
+.semiont-tagging-panel__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap-sm);
+}
+
+.semiont-tagging-panel__label {
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-semibold);
+  color: var(--semiont-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+[data-theme="dark"] .semiont-tagging-panel__label {
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-tagging-panel__input {
+  padding: var(--semiont-panel-padding-sm);
+  background: var(--semiont-bg-secondary);
+  border: 1px solid var(--semiont-color-gray-300);
+  border-radius: var(--semiont-radius-md);
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-primary);
+  transition: border-color 0.2s ease;
+}
+
+[data-theme="dark"] .semiont-tagging-panel__input {
+  background: var(--semiont-bg-tertiary);
+  border-color: var(--semiont-color-gray-600);
+}
+
+.semiont-tagging-panel__input:focus {
+  outline: none;
+  border-color: var(--semiont-color-primary-500);
+}
+
+/* Tags now use centralized styles from components/tags.css
+   Tagging panel uses: .semiont-tags container with .semiont-tag children
+   Remove buttons use: .semiont-tag__remove */

package/src/styles/panels/unified-annotations-panel.css

@@ -0,0 +1,133 @@
+/* ============================================
+   UnifiedAnnotationsPanel Component
+   Unified annotations panel with tabs
+   ============================================ */
+
+.semiont-unified-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.semiont-unified-panel__title {
+  margin: 0 0 var(--semiont-panel-header-margin-bottom);
+  padding: var(--semiont-panel-padding);
+  padding-bottom: 0;
+  font-size: var(--semiont-panel-title-size);
+  font-weight: var(--semiont-panel-title-weight);
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-unified-panel__title {
+  color: var(--semiont-text-primary);
+}
+
+.semiont-unified-panel__tabs {
+  display: flex;
+  gap: 0;
+  padding: 0;
+  background: var(--semiont-bg-secondary);
+  border-bottom: 1px solid var(--semiont-color-gray-300);
+}
+
+[data-theme="dark"] .semiont-unified-panel__tabs {
+  background: var(--semiont-bg-tertiary);
+  border-bottom-color: var(--semiont-color-gray-700);
+}
+
+.semiont-unified-panel__tab-button {
+  flex: 1;
+  padding: var(--semiont-panel-padding-sm);
+  background: transparent;
+  border: none;
+  border-right: 1px solid var(--semiont-color-gray-300);
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--semiont-panel-padding-xs) * 1.5);
+  position: relative;
+}
+
+.semiont-unified-panel__tab-button:last-child {
+  border-right: none;
+}
+
+.semiont-unified-panel__tab-button:last-child:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+[data-theme="dark"] .semiont-unified-panel__tab-button:last-child:focus-visible {
+  outline-color: var(--semiont-color-primary-400);
+}
+
+[data-theme="dark"] .semiont-unified-panel__tab-button {
+  color: var(--semiont-text-secondary);
+  border-right-color: var(--semiont-color-gray-700);
+}
+
+.semiont-unified-panel__tab-button:hover {
+  background: var(--semiont-bg-tertiary);
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-unified-panel__tab-button:hover {
+  background: var(--semiont-color-gray-700);
+  color: var(--semiont-text-primary);
+}
+
+.semiont-unified-panel__tab-button:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+[data-theme="dark"] .semiont-unified-panel__tab-button:focus-visible {
+  outline-color: var(--semiont-color-primary-400);
+}
+
+.semiont-unified-panel__tab-button--active {
+  background: var(--semiont-bg-primary);
+  color: var(--semiont-text-primary);
+  font-weight: var(--semiont-font-semibold);
+  border-bottom: 2px solid var(--semiont-color-primary-500);
+}
+
+[data-theme="dark"] .semiont-unified-panel__tab-button--active {
+  background: var(--semiont-bg-primary);
+  color: var(--semiont-text-primary);
+  border-bottom-color: var(--semiont-color-primary-400);
+}
+
+.semiont-unified-panel__tab-button--active:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 2px;
+}
+
+[data-theme="dark"] .semiont-unified-panel__tab-button--active:focus-visible {
+  outline-color: var(--semiont-color-primary-400);
+}
+
+.semiont-unified-panel__tab-icon {
+  font-size: var(--semiont-panel-icon-size);
+}
+
+.semiont-unified-panel__content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Ensure child panels fill and scroll properly */
+.semiont-unified-panel__content > .semiont-panel {
+  height: 100%;
+}
+
+/* Motivation-specific detection styles moved to /styles/motivations/*.css */

package/src/styles/panels/user-panel.css

@@ -0,0 +1,24 @@
+/* ============================================
+   UserPanel Component
+   User account information and session management
+   ============================================ */
+
+.semiont-user-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap);
+  padding: var(--semiont-panel-padding);
+  background: var(--semiont-bg-primary);
+  border-radius: var(--semiont-panel-border-radius);
+}
+
+.semiont-user-panel__title {
+  margin: 0 0 var(--semiont-panel-header-margin-bottom);
+  font-size: var(--semiont-panel-title-size);
+  font-weight: var(--semiont-panel-title-weight);
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-user-panel__title {
+  color: var(--semiont-text-primary);
+}

package/src/styles/patterns/errors.css

@@ -0,0 +1,24 @@
+/**
+ * Error Patterns
+ *
+ * Styles for error states and error messages
+ */
+
+/* Error States */
+.semiont-error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 5rem 0;
+  gap: 1rem;
+}
+
+.semiont-error-message {
+  color: var(--semiont-color-error);
+  font-size: var(--semiont-text-base);
+}
+
+[data-theme="dark"] .semiont-error-message {
+  color: var(--semiont-color-error-light);
+}

package/src/styles/patterns/loading.css

@@ -0,0 +1,26 @@
+/**
+ * Loading Patterns
+ *
+ * Styles for loading states and skeleton screens
+ */
+
+/* Loading States */
+.semiont-loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5rem 0;
+}
+
+.semiont-loading-state-wrapper {
+  padding: 1rem 2rem;
+}
+
+.semiont-loading-message {
+  color: var(--semiont-color-gray-600);
+  font-size: var(--semiont-text-base);
+}
+
+[data-theme="dark"] .semiont-loading-message {
+  color: var(--semiont-color-gray-300);
+}