@semiont/react-ui 0.2.30 → 0.2.31

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

@@ -0,0 +1,91 @@
+/* ============================================
+   AssessmentPanel Component
+   Rating and assessment panel
+   ============================================ */
+
+.semiont-assessment-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-assessment-panel {
+  background: var(--semiont-bg-secondary);
+}
+
+.semiont-assessment-panel__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap-md);
+}
+
+.semiont-assessment-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-assessment-panel__label {
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-assessment-panel__rating {
+  display: flex;
+  gap: var(--semiont-panel-padding-xs);
+}
+
+.semiont-assessment-panel__star {
+  font-size: var(--semiont-panel-icon-size-lg);
+  color: var(--semiont-color-gray-300);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+[data-theme="dark"] .semiont-assessment-panel__star {
+  color: var(--semiont-color-gray-300);
+}
+
+.semiont-assessment-panel__star:hover {
+  color: var(--semiont-color-warning);
+}
+
+.semiont-assessment-panel__star--filled {
+  color: var(--semiont-color-warning);
+}
+
+[data-theme="dark"] .semiont-assessment-panel__star--filled {
+  color: var(--semiont-color-warning);
+}
+
+.semiont-assessment-panel__textarea {
+  width: 100%;
+  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);
+  resize: vertical;
+  min-height: 100px;
+  transition: border-color 0.2s ease;
+}
+
+[data-theme="dark"] .semiont-assessment-panel__textarea {
+  background: var(--semiont-bg-tertiary);
+  border-color: var(--semiont-color-gray-600);
+}
+
+.semiont-assessment-panel__textarea:focus {
+  outline: none;
+  border-color: var(--semiont-color-primary-500);
+}
+
+.semiont-assessment-panel__actions {
+  display: flex;
+  gap: var(--semiont-panel-gap-sm);
+}

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

@@ -0,0 +1,222 @@
+/* ============================================
+   CollaborationPanel Component
+   Styles for user collaboration features
+   ============================================ */
+
+.semiont-collaboration-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-collaboration-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-collaboration-panel__title {
+  color: var(--semiont-text-primary);
+}
+
+/* Sections */
+.semiont-collaboration-panel__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap-sm);
+}
+
+.semiont-collaboration-panel__section--bordered {
+  padding-top: var(--semiont-panel-gap);
+  border-top: 1px solid var(--semiont-border-secondary);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__section--bordered {
+  border-top-color: var(--semiont-color-gray-700);
+}
+
+/* Headings */
+.semiont-collaboration-panel__heading {
+  margin: 0 0 var(--semiont-panel-gap-sm);
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-semibold);
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__heading {
+  color: var(--semiont-text-primary);
+}
+
+/* Status Display */
+.semiont-collaboration-panel__status {
+  display: flex;
+  align-items: center;
+  gap: var(--semiont-panel-gap-sm);
+  flex-wrap: wrap;
+}
+
+.semiont-collaboration-panel__indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.semiont-collaboration-panel__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--semiont-radius-full);
+  background: var(--semiont-color-gray-400);
+  flex-shrink: 0;
+}
+
+.semiont-collaboration-panel__dot[data-connected="true"] {
+  background: var(--semiont-color-success);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.semiont-collaboration-panel__status-text {
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-tertiary);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__status-text {
+  color: var(--semiont-text-tertiary);
+}
+
+.semiont-collaboration-panel__status-text[data-connected="true"] {
+  color: var(--semiont-color-success-dark);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__status-text[data-connected="true"] {
+  color: var(--semiont-color-success-light);
+}
+
+.semiont-collaboration-panel__event-count {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__event-count {
+  color: var(--semiont-text-tertiary);
+}
+
+/* Details */
+.semiont-collaboration-panel__details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-secondary);
+  line-height: 1.5;
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__details {
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-collaboration-panel__label {
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__label {
+  color: var(--semiont-text-primary);
+}
+
+/* Description */
+.semiont-collaboration-panel__description {
+  margin: 0;
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-tertiary);
+  font-style: italic;
+  line-height: 1.5;
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__description {
+  color: var(--semiont-text-tertiary);
+}
+
+/* User List (for future use) */
+
+.semiont-collaboration-panel__user-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap-sm);
+}
+
+.semiont-collaboration-panel__user {
+  display: flex;
+  align-items: center;
+  gap: var(--semiont-panel-gap-md);
+  padding: var(--semiont-panel-padding-sm);
+  background: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-md);
+  transition: background-color 0.2s ease;
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__user {
+  background: var(--semiont-bg-tertiary);
+}
+
+.semiont-collaboration-panel__user:hover {
+  background: var(--semiont-color-gray-100);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__user:hover {
+  background: var(--semiont-color-gray-700);
+}
+
+.semiont-collaboration-panel__avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--semiont-radius-full);
+  background: var(--semiont-color-primary-100);
+  color: var(--semiont-color-primary-700);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--semiont-font-semibold);
+  font-size: var(--semiont-text-sm);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__avatar {
+  background: rgba(59, 130, 246, 0.2);
+  color: var(--semiont-color-primary-300);
+}
+
+.semiont-collaboration-panel__user-info {
+  flex: 1;
+}
+
+.semiont-collaboration-panel__username {
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__username {
+  color: var(--semiont-text-primary);
+}
+
+.semiont-collaboration-panel__user-status {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__user-status {
+  color: var(--semiont-text-tertiary);
+}

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

@@ -0,0 +1,130 @@
+/* ============================================
+   CommentsPanel Component
+   Comments and discussion panel
+   ============================================ */
+
+.semiont-comments-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--semiont-bg-primary);
+  border-radius: var(--semiont-radius-lg);
+}
+
+[data-theme="dark"] .semiont-comments-panel {
+  background: var(--semiont-bg-secondary);
+}
+
+.semiont-comments-panel__header {
+  padding: var(--semiont-panel-padding);
+  border-bottom: 1px solid var(--semiont-color-gray-200);
+}
+
+[data-theme="dark"] .semiont-comments-panel__header {
+  border-bottom-color: var(--semiont-color-gray-700);
+}
+
+.semiont-comments-panel__title {
+  font-size: var(--semiont-panel-title-size);
+  font-weight: var(--semiont-panel-title-weight);
+  color: var(--semiont-text-primary);
+  margin-bottom: var(--semiont-panel-header-margin-bottom);
+}
+
+[data-theme="dark"] .semiont-comments-panel__title {
+  color: var(--semiont-text-primary);
+}
+
+.semiont-comments-panel__list {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--semiont-panel-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap);
+}
+
+.semiont-comments-panel__comment {
+  padding: var(--semiont-panel-padding-md);
+  background: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-md);
+  border-left: 3px solid var(--semiont-color-primary-500);
+}
+
+[data-theme="dark"] .semiont-comments-panel__comment {
+  background: var(--semiont-bg-tertiary);
+}
+
+.semiont-comments-panel__comment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--semiont-panel-gap-sm);
+}
+
+.semiont-comments-panel__comment-author {
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-semibold);
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-comments-panel__comment-author {
+  color: var(--semiont-text-primary);
+}
+
+.semiont-comments-panel__comment-time {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+}
+
+[data-theme="dark"] .semiont-comments-panel__comment-time {
+  color: var(--semiont-text-tertiary);
+}
+
+.semiont-comments-panel__comment-text {
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-primary);
+  line-height: 1.5;
+}
+
+[data-theme="dark"] .semiont-comments-panel__comment-text {
+  color: var(--semiont-text-primary);
+}
+
+.semiont-comments-panel__input-area {
+  padding: var(--semiont-panel-padding);
+  border-top: 1px solid var(--semiont-color-gray-200);
+}
+
+[data-theme="dark"] .semiont-comments-panel__input-area {
+  border-top-color: var(--semiont-color-gray-700);
+}
+
+.semiont-comments-panel__input {
+  width: 100%;
+  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);
+  resize: vertical;
+  min-height: 80px;
+  transition: border-color 0.2s ease;
+}
+
+[data-theme="dark"] .semiont-comments-panel__input {
+  background: var(--semiont-bg-tertiary);
+  border-color: var(--semiont-color-gray-600);
+}
+
+.semiont-comments-panel__input:focus {
+  outline: none;
+  border-color: var(--semiont-color-primary-500);
+}
+
+.semiont-comments-panel__actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--semiont-panel-gap-sm);
+}

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

@@ -0,0 +1,63 @@
+/* ============================================
+   HighlightPanel Component
+   Text highlighting controls panel
+   ============================================ */
+
+.semiont-highlight-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-highlight-panel {
+  background: var(--semiont-bg-secondary);
+}
+
+.semiont-highlight-panel__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--semiont-panel-gap-sm);
+}
+
+.semiont-highlight-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-highlight-panel__label {
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-highlight-panel__colors {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--semiont-panel-gap-sm);
+}
+
+.semiont-highlight-panel__color {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: var(--semiont-radius-md);
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  border: 2px solid transparent;
+}
+
+.semiont-highlight-panel__color:hover {
+  transform: scale(1.1);
+}
+
+.semiont-highlight-panel__color--selected {
+  border-color: var(--semiont-text-primary);
+  transform: scale(1.1);
+}
+
+[data-theme="dark"] .semiont-highlight-panel__color--selected {
+  border-color: var(--semiont-text-primary);
+}