@semiont/react-ui 0.2.30 → 0.2.31

package/src/styles/index.css

@@ -0,0 +1,93 @@
+/**
+ * Semiont React UI - Main Stylesheet
+ *
+ * This is the entry point for all styles.
+ * CLEANED UP: Only imports files that actually exist with real content.
+ *
+ * Total CSS: ~8,700 lines properly modularized (down from 25,000+ lines of cruft)
+ */
+
+/* Design Tokens */
+@import './variables.css';
+
+/* Base */
+@import './base/reset.css';
+@import './base/utilities.css';
+
+/* Utilities */
+@import './utilities/focus.css';
+@import './utilities/focus-extended.css';
+@import './utilities/motion.css';
+@import './utilities/motion-overrides.css';
+@import './utilities/contrast.css';
+@import './utilities/semantic-indicators.css';
+
+/* Layout */
+@import './layout/layout.css';
+
+/* Core UI Elements */
+@import './core/index.css';
+
+/* Core Components */
+@import './components/auth.css';
+@import './components/tables.css';
+@import './components/toast.css';
+@import './components/status-display.css';
+@import './components/panels-base.css';
+@import './components/panel-sections.css';
+@import './components/modals.css';
+@import './components/search-modal.css';
+@import './components/branding.css';
+@import './components/toolbar.css';
+@import './components/cards.css';
+@import './components/detection-widget.css';
+@import './components/references.css';
+@import './components/navigation-tabs.css';
+@import './components/collapsible-resource-navigation.css';
+@import './components/annotations.css';
+@import './components/annotation-entries.css';
+@import './components/skip-links.css';
+@import './components/header.css';
+@import './components/footer.css';
+@import './components/left-sidebar.css';
+@import './components/navigation-menu.css';
+@import './components/resize-handle.css';
+
+/* Motivation-Specific Styles (W3C Web Annotation) */
+@import './motivations/motivation-reference.css';
+@import './motivations/motivation-highlight.css';
+@import './motivations/motivation-assessment.css';
+@import './motivations/motivation-comment.css';
+@import './motivations/motivation-tag.css';
+
+/* Individual Panel Styles */
+@import './panels/collaboration-panel.css';
+@import './panels/jsonld-panel.css';
+@import './panels/references-panel.css';
+@import './panels/settings-panel.css';
+@import './panels/unified-annotations-panel.css';
+@import './panels/resource-info-panel.css';
+@import './panels/tagging-panel.css';
+@import './panels/highlight-panel.css';
+@import './panels/comments-panel.css';
+@import './panels/assessment-panel.css';
+@import './panels/statistics-panel.css';
+@import './panels/history-panel.css';
+@import './panels/user-panel.css';
+
+/* Features */
+@import './features/admin.css';
+@import './features/compose.css';
+@import './features/devops.css';
+@import './features/entity-tags.css';
+@import './features/recent-docs.css';
+@import './features/resource.css';
+@import './features/resource-discovery.css';
+@import './features/resource-viewer.css';
+@import './features/schemas.css';
+@import './features/static-pages.css';
+@import './features/welcome.css';
+
+/* Patterns */
+@import './patterns/loading.css';
+@import './patterns/errors.css';

package/src/styles/layout/layout.css

@@ -0,0 +1,85 @@
+/* ============================================
+   Tier 3: Layout Components
+   ============================================ */
+
+/* PageLayout Component */
+.semiont-page-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* Page wrapper for standalone pages (auth, etc) */
+.semiont-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--semiont-bg-primary);
+}
+
+[data-theme="dark"] .semiont-page-wrapper {
+  background: var(--semiont-bg-primary);
+}
+
+/* Auth-specific page layout modifier */
+.semiont-page-layout--auth {
+  background: var(--semiont-color-gray-50);
+}
+
+[data-theme="dark"] .semiont-page-layout--auth {
+  background: var(--semiont-color-gray-900);
+}
+
+.semiont-page-layout__header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+}
+
+.semiont-page-layout__header-container {
+  width: 100%;
+  background: var(--semiont-bg-primary);
+  border-bottom: 1px solid var(--semiont-border-primary);
+}
+
+.semiont-page-layout__main {
+  flex: 1;
+}
+
+/* App Layout for Document/Knowledge Views */
+.semiont-app-layout {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Layout with footer */
+.semiont-layout-with-footer {
+  /* Footer participates in flex layout flow. Content areas are scrollable within their flex boundaries. */
+}
+
+.semiont-app-layout__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0; /* Allow content to shrink */
+  overflow: hidden;
+}
+
+.semiont-app-layout__sidebar {
+  display: flex;
+  flex-shrink: 0;
+  height: 100%;
+}
+
+.semiont-app-layout__toolbar-panel {
+  width: 20rem;
+  height: 100%;
+  background: var(--semiont-bg-primary);
+  border-left: 1px solid var(--semiont-border-primary);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}

package/src/styles/motivations/motivation-assessment.css

@@ -0,0 +1,234 @@
+/**
+ * Motivation: Assessing
+ * Color Theme: Red with wavy underline
+ * W3C Web Annotation: assessing motivation
+ *
+ * This file defines all styles for assessment annotations
+ * across text, panels, and image annotations.
+ */
+
+/* ============================================
+   Color Variables
+   ============================================ */
+:root {
+  /* Light theme colors */
+  --semiont-motivation-assessment-primary: var(--semiont-color-red-500);
+  --semiont-motivation-assessment-secondary: var(--semiont-color-red-700);
+  --semiont-motivation-assessment-bg: rgba(254, 226, 226, 0.5);
+  --semiont-motivation-assessment-bg-hover: rgba(254, 226, 226, 0.7);
+  --semiont-motivation-assessment-border: rgba(239, 68, 68, 0.3);
+  --semiont-motivation-assessment-border-hover: rgba(239, 68, 68, 0.5);
+  --semiont-motivation-assessment-text: var(--semiont-color-red-700);
+
+  /* Dark theme colors */
+  --semiont-motivation-assessment-dark-bg: rgba(127, 29, 29, 0.3);
+  --semiont-motivation-assessment-dark-bg-hover: rgba(127, 29, 29, 0.4);
+  --semiont-motivation-assessment-dark-text: var(--semiont-color-red-300);
+  --semiont-motivation-assessment-dark-primary: var(--semiont-color-red-400);
+
+  /* Panel backgrounds */
+  --semiont-motivation-assessment-panel-bg: rgba(254, 226, 226, 0.3);
+  --semiont-motivation-assessment-panel-bg-dark: rgba(127, 29, 29, 0.2);
+
+  /* Button gradients - using red gradient for assessment */
+  --semiont-motivation-assessment-button-bg: linear-gradient(to right, var(--semiont-color-red-500), var(--semiont-color-red-600));
+  --semiont-motivation-assessment-button-bg-hover: linear-gradient(to right, var(--semiont-color-red-600), var(--semiont-color-red-700));
+}
+
+/* ============================================
+   Inline Text Annotations - Wavy Underline
+   ============================================ */
+.semiont-motivation-assessment,
+.annotation-assessment,
+.red-underline {
+  cursor: pointer;
+  transition: all 200ms;
+  text-decoration: underline wavy;
+  text-decoration-color: var(--semiont-motivation-assessment-primary);
+  text-decoration-thickness: 1.2px;
+  text-underline-offset: 0.8px;
+}
+
+.semiont-motivation-assessment:hover,
+.annotation-assessment:hover,
+.red-underline:hover {
+  opacity: 0.8;
+  text-decoration-thickness: 1.6px;
+}
+
+/* Fallback for browsers that don't support wavy underline */
+@supports not (text-decoration-style: wavy) {
+  .semiont-motivation-assessment,
+  .annotation-assessment,
+  .red-underline {
+    border-bottom: 1.2px solid var(--semiont-motivation-assessment-primary);
+    text-decoration: none;
+  }
+
+  .semiont-motivation-assessment:hover,
+  .annotation-assessment:hover,
+  .red-underline:hover {
+    border-bottom-width: 1.6px;
+  }
+}
+
+/* ============================================
+   Panel Entry Styling
+   ============================================ */
+.semiont-motivation-assessment-entry,
+.semiont-annotation-entry[data-type="assessment"] {
+  border-color: var(--semiont-motivation-assessment-border);
+}
+
+[data-theme="dark"] .semiont-motivation-assessment-entry,
+[data-theme="dark"] .semiont-annotation-entry[data-type="assessment"] {
+  border-color: var(--semiont-motivation-assessment-border);
+}
+
+.semiont-motivation-assessment-entry:hover,
+.semiont-annotation-entry[data-type="assessment"]:hover {
+  background: var(--semiont-motivation-assessment-panel-bg);
+  border-color: var(--semiont-motivation-assessment-border-hover);
+}
+
+[data-theme="dark"] .semiont-motivation-assessment-entry:hover,
+[data-theme="dark"] .semiont-annotation-entry[data-type="assessment"]:hover {
+  background: var(--semiont-motivation-assessment-panel-bg-dark);
+}
+
+/* ============================================
+   Quote/Excerpt Styling in Panels
+   ============================================ */
+.semiont-motivation-assessment-quote,
+.semiont-annotation-entry__quote[data-type="assessment"] {
+  background: var(--semiont-motivation-assessment-bg);
+  color: var(--semiont-motivation-assessment-text);
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--semiont-radius-sm);
+}
+
+[data-theme="dark"] .semiont-motivation-assessment-quote,
+[data-theme="dark"] .semiont-annotation-entry__quote[data-type="assessment"] {
+  background: var(--semiont-motivation-assessment-dark-bg);
+  color: var(--semiont-motivation-assessment-dark-text);
+}
+
+/* ============================================
+   Body Content (Rating Stars)
+   ============================================ */
+.semiont-annotation-entry__body[data-type="assessment"] {
+  display: flex;
+  gap: 0.25rem;
+  color: var(--semiont-color-warning);
+}
+
+[data-theme="dark"] .semiont-annotation-entry__body[data-type="assessment"] {
+  color: var(--semiont-color-warning);
+}
+
+/* ============================================
+   Detection Section in Unified Panel
+   ============================================ */
+.semiont-motivation-assessment-section,
+.semiont-detect-section[data-type="assessment"] {
+  border-color: var(--semiont-color-error);
+}
+
+[data-theme="dark"] .semiont-motivation-assessment-section,
+[data-theme="dark"] .semiont-detect-section[data-type="assessment"] {
+  border-color: var(--semiont-color-error-dark);
+}
+
+/* ============================================
+   Button Styling
+   ============================================ */
+.semiont-motivation-assessment-button,
+.semiont-button[data-variant="detect"][data-type="assessment"] {
+  background: var(--semiont-motivation-assessment-button-bg) !important;
+  color: var(--semiont-color-white) !important;
+  border: 1px solid var(--semiont-motivation-assessment-border);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.semiont-motivation-assessment-button:hover,
+.semiont-button[data-variant="detect"][data-type="assessment"]:hover {
+  background: var(--semiont-motivation-assessment-button-bg-hover);
+  border-color: var(--semiont-motivation-assessment-primary);
+}
+
+[data-theme="dark"] .semiont-motivation-assessment-button,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="assessment"] {
+  border-color: var(--semiont-motivation-assessment-border);
+}
+
+[data-theme="dark"] .semiont-motivation-assessment-button:hover,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="assessment"]:hover {
+  border-color: var(--semiont-motivation-assessment-dark-primary);
+}
+
+.semiont-motivation-assessment-button:focus-visible,
+.semiont-button[data-variant="detect"][data-type="assessment"]:focus-visible {
+  outline: 2px solid var(--semiont-motivation-assessment-primary);
+  outline-offset: 2px;
+}
+
+[data-theme="dark"] .semiont-motivation-assessment-button:focus-visible,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="assessment"]:focus-visible {
+  outline: 2px solid var(--semiont-motivation-assessment-dark-primary);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   Image Annotation Overlays
+   ============================================ */
+.semiont-image-annotation-assessment {
+  stroke: var(--semiont-motivation-assessment-primary);
+  stroke-width: 2px;
+  stroke-dasharray: 5, 3;
+  fill: var(--semiont-motivation-assessment-border);
+}
+
+.semiont-image-annotation-assessment:hover {
+  stroke-width: 3px;
+  fill: var(--semiont-motivation-assessment-border-hover);
+}
+
+[data-theme="dark"] .semiont-image-annotation-assessment {
+  stroke: var(--semiont-motivation-assessment-dark-primary);
+  fill: rgba(239, 68, 68, 0.2);
+}
+
+/* ============================================
+   Assessment-specific Visual Elements
+   ============================================ */
+.semiont-assessment-indicator {
+  color: var(--semiont-motivation-assessment-primary);
+  font-size: 1.125rem;
+}
+
+[data-theme="dark"] .semiont-assessment-indicator {
+  color: var(--semiont-motivation-assessment-dark-primary);
+}
+
+.semiont-assessment-star {
+  color: var(--semiont-color-warning);
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+[data-theme="dark"] .semiont-assessment-star {
+  color: var(--semiont-color-warning);
+}
+
+.semiont-assessment-star:hover {
+  transform: scale(1.1);
+}
+
+.semiont-assessment-star--filled {
+  color: var(--semiont-color-warning);
+}
+
+[data-theme="dark"] .semiont-assessment-star--filled {
+  color: var(--semiont-color-warning);
+}

package/src/styles/motivations/motivation-comment.css

@@ -0,0 +1,245 @@
+/**
+ * Motivation: Commenting
+ * Color Theme: Gray/Black/White with dashed outline
+ * W3C Web Annotation: commenting motivation
+ *
+ * This file defines all styles for comment annotations
+ * across text, panels, and image annotations.
+ */
+
+/* ============================================
+   Color Variables
+   ============================================ */
+:root {
+  /* Light theme colors */
+  --semiont-motivation-comment-primary: var(--semiont-color-gray-700);
+  --semiont-motivation-comment-secondary: var(--semiont-color-gray-600);
+  --semiont-motivation-comment-bg: var(--semiont-color-gray-100);
+  --semiont-motivation-comment-bg-hover: var(--semiont-color-gray-200);
+  --semiont-motivation-comment-border: rgba(107, 114, 128, 0.3);
+  --semiont-motivation-comment-border-hover: rgba(107, 114, 128, 0.5);
+  --semiont-motivation-comment-text: var(--semiont-color-gray-700);
+  --semiont-motivation-comment-outline: var(--semiont-color-gray-900);
+
+  /* Dark theme colors */
+  --semiont-motivation-comment-dark-bg: rgba(55, 65, 81, 0.3);
+  --semiont-motivation-comment-dark-bg-hover: var(--semiont-bg-secondary);
+  --semiont-motivation-comment-dark-text: var(--semiont-color-gray-300);
+  --semiont-motivation-comment-dark-outline: var(--semiont-color-gray-100);
+  --semiont-motivation-comment-dark-primary: var(--semiont-color-gray-400);
+
+  /* Panel backgrounds */
+  --semiont-motivation-comment-panel-bg: rgba(243, 244, 246, 0.5);
+  --semiont-motivation-comment-panel-bg-dark: rgba(55, 65, 81, 0.2);
+
+  /* Button gradients */
+  --semiont-motivation-comment-button-bg: linear-gradient(to right, var(--semiont-color-purple-600), var(--semiont-color-indigo-600));
+  --semiont-motivation-comment-button-bg-hover: linear-gradient(to right, var(--semiont-color-purple-700), var(--semiont-color-indigo-700));
+}
+
+/* ============================================
+   Inline Text Annotations - Dashed Outline
+   ============================================ */
+.semiont-motivation-comment,
+.annotation-comment {
+  border-radius: 0.25rem;
+  padding: 0 0.125rem;
+  cursor: pointer;
+  transition: all 200ms;
+  outline: 2px dashed var(--semiont-motivation-comment-outline);
+  outline-offset: 1px;
+}
+
+.semiont-motivation-comment:hover,
+.annotation-comment:hover {
+  background: var(--semiont-motivation-comment-bg);
+}
+
+[data-theme="dark"] .semiont-motivation-comment,
+[data-theme="dark"] .annotation-comment {
+  outline: 2px dashed var(--semiont-motivation-comment-dark-outline);
+}
+
+[data-theme="dark"] .semiont-motivation-comment:hover,
+[data-theme="dark"] .annotation-comment:hover {
+  background: var(--semiont-motivation-comment-dark-bg-hover);
+}
+
+/* ============================================
+   Panel Entry Styling
+   ============================================ */
+.semiont-motivation-comment-entry,
+.semiont-annotation-entry[data-type="comment"] {
+  border-color: var(--semiont-motivation-comment-border);
+}
+
+[data-theme="dark"] .semiont-motivation-comment-entry,
+[data-theme="dark"] .semiont-annotation-entry[data-type="comment"] {
+  border-color: var(--semiont-motivation-comment-border);
+}
+
+.semiont-motivation-comment-entry:hover,
+.semiont-annotation-entry[data-type="comment"]:hover {
+  background: var(--semiont-motivation-comment-panel-bg);
+  border-color: var(--semiont-motivation-comment-border-hover);
+}
+
+[data-theme="dark"] .semiont-motivation-comment-entry:hover,
+[data-theme="dark"] .semiont-annotation-entry[data-type="comment"]:hover {
+  background: var(--semiont-motivation-comment-panel-bg-dark);
+}
+
+/* ============================================
+   Quote/Excerpt Styling in Panels
+   ============================================ */
+.semiont-motivation-comment-quote,
+.semiont-annotation-entry__quote[data-type="comment"] {
+  background: var(--semiont-motivation-comment-bg);
+  color: var(--semiont-motivation-comment-text);
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--semiont-radius-sm);
+  border-left: 3px dashed var(--semiont-motivation-comment-border-hover);
+}
+
+[data-theme="dark"] .semiont-motivation-comment-quote,
+[data-theme="dark"] .semiont-annotation-entry__quote[data-type="comment"] {
+  background: var(--semiont-motivation-comment-dark-bg);
+  color: var(--semiont-motivation-comment-dark-text);
+  border-left-color: var(--semiont-motivation-comment-dark-primary);
+}
+
+/* ============================================
+   Detection Section in Unified Panel
+   ============================================ */
+.semiont-motivation-comment-section,
+.semiont-detect-section[data-type="comment"] {
+  border-color: var(--semiont-color-purple-500);
+}
+
+[data-theme="dark"] .semiont-motivation-comment-section,
+[data-theme="dark"] .semiont-detect-section[data-type="comment"] {
+  border-color: var(--semiont-color-purple-600);
+}
+
+/* ============================================
+   Button Styling
+   ============================================ */
+.semiont-motivation-comment-button,
+.semiont-button[data-variant="detect"][data-type="comment"] {
+  background: linear-gradient(to right, var(--semiont-color-gray-800), var(--semiont-color-gray-700)) !important;
+  color: var(--semiont-color-white) !important;
+  border: 1px solid var(--semiont-motivation-comment-border);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.semiont-motivation-comment-button:hover:not(:disabled),
+.semiont-button[data-variant="detect"][data-type="comment"]:hover:not(:disabled) {
+  background: linear-gradient(to right, var(--semiont-color-gray-900), var(--semiont-color-gray-800)) !important;
+  border-color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-motivation-comment-button,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="comment"] {
+  background: linear-gradient(to right, var(--semiont-color-gray-600), var(--semiont-color-gray-500)) !important;
+  color: var(--semiont-color-white) !important;
+  border-color: var(--semiont-motivation-comment-dark-primary);
+}
+
+[data-theme="dark"] .semiont-motivation-comment-button:hover:not(:disabled),
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="comment"]:hover:not(:disabled) {
+  background: linear-gradient(to right, var(--semiont-color-gray-500), var(--semiont-color-gray-400)) !important;
+  border-color: var(--semiont-color-gray-400);
+}
+
+.semiont-motivation-comment-button:focus-visible,
+.semiont-button[data-variant="detect"][data-type="comment"]:focus-visible {
+  outline: 2px solid var(--semiont-motivation-comment-primary);
+  outline-offset: 2px;
+}
+
+[data-theme="dark"] .semiont-motivation-comment-button:focus-visible,
+[data-theme="dark"] .semiont-button[data-variant="detect"][data-type="comment"]:focus-visible {
+  outline: 2px solid var(--semiont-color-purple-400);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   Comment Input Areas
+   ============================================ */
+.semiont-annotation-prompt[data-type="comment"] {
+  background: var(--semiont-motivation-comment-bg);
+  padding: var(--semiont-panel-padding);
+  border-radius: var(--semiont-radius-md);
+  border: 2px dashed var(--semiont-motivation-comment-border);
+}
+
+[data-theme="dark"] .semiont-annotation-prompt[data-type="comment"] {
+  background: var(--semiont-motivation-comment-dark-bg);
+  border-color: var(--semiont-motivation-comment-dark-primary);
+}
+
+.semiont-annotation-prompt__quote {
+  background: var(--semiont-bg-primary);
+  padding: var(--semiont-panel-padding-sm);
+  border-radius: var(--semiont-radius-sm);
+  border-left: 3px solid var(--semiont-motivation-comment-primary);
+  margin-bottom: var(--semiont-panel-gap-sm);
+}
+
+[data-theme="dark"] .semiont-annotation-prompt__quote {
+  background: var(--semiont-bg-secondary);
+  border-left-color: var(--semiont-motivation-comment-dark-primary);
+}
+
+/* ============================================
+   Image Annotation Overlays
+   ============================================ */
+.semiont-image-annotation-comment {
+  stroke: var(--semiont-motivation-comment-primary);
+  stroke-width: 2px;
+  stroke-dasharray: 8, 4;
+  fill: transparent;
+}
+
+.semiont-image-annotation-comment:hover {
+  stroke-width: 3px;
+  fill: var(--semiont-motivation-comment-border);
+}
+
+[data-theme="dark"] .semiont-image-annotation-comment {
+  stroke: var(--semiont-motivation-comment-dark-outline);
+}
+
+[data-theme="dark"] .semiont-image-annotation-comment:hover {
+  fill: rgba(107, 114, 128, 0.2);
+}
+
+/* ============================================
+   Comment-specific Visual Elements
+   ============================================ */
+.semiont-comment-indicator {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px dashed var(--semiont-motivation-comment-primary);
+  border-radius: 50%;
+  position: relative;
+}
+
+[data-theme="dark"] .semiont-comment-indicator {
+  border-color: var(--semiont-motivation-comment-dark-primary);
+}
+
+.semiont-comment-bubble {
+  background: var(--semiont-motivation-comment-bg);
+  border: 1px solid var(--semiont-motivation-comment-border);
+  border-radius: var(--semiont-radius-md);
+  padding: var(--semiont-panel-padding-sm);
+  position: relative;
+}
+
+[data-theme="dark"] .semiont-comment-bubble {
+  background: var(--semiont-motivation-comment-dark-bg);
+  border-color: var(--semiont-motivation-comment-dark-primary);
+}