@semiont/react-ui 0.2.30 → 0.2.31

package/src/styles/base/utilities.css

@@ -0,0 +1,465 @@
+/**
+ * Utility Classes
+ *
+ * Common utility classes for layout, spacing, and display
+ * These are semantic utilities, not Tailwind-style atomics
+ */
+
+/* ============================================
+   Display Utilities
+   ============================================ */
+
+.semiont-hidden {
+  display: none !important;
+}
+
+.semiont-block {
+  display: block;
+}
+
+.semiont-inline-block {
+  display: inline-block;
+}
+
+.semiont-flex {
+  display: flex;
+}
+
+.semiont-inline-flex {
+  display: inline-flex;
+}
+
+.semiont-grid {
+  display: grid;
+}
+
+/* ============================================
+   Flexbox Utilities
+   ============================================ */
+
+.semiont-flex-row {
+  flex-direction: row;
+}
+
+.semiont-flex-col {
+  flex-direction: column;
+}
+
+.semiont-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.semiont-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.semiont-flex-grow {
+  flex: 1;
+}
+
+.semiont-flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+/* Alignment */
+.semiont-items-start {
+  align-items: flex-start;
+}
+
+.semiont-items-center {
+  align-items: center;
+}
+
+.semiont-items-end {
+  align-items: flex-end;
+}
+
+.semiont-justify-start {
+  justify-content: flex-start;
+}
+
+.semiont-justify-center {
+  justify-content: center;
+}
+
+.semiont-justify-end {
+  justify-content: flex-end;
+}
+
+.semiont-justify-between {
+  justify-content: space-between;
+}
+
+.semiont-justify-around {
+  justify-content: space-around;
+}
+
+/* ============================================
+   Spacing Utilities
+   ============================================ */
+
+/* Margin */
+.semiont-m-auto {
+  margin: auto;
+}
+
+.semiont-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.semiont-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+/* Gaps */
+.semiont-gap-xs {
+  gap: var(--semiont-spacing-xs);
+}
+
+.semiont-gap-sm {
+  gap: var(--semiont-spacing-sm);
+}
+
+.semiont-gap-md {
+  gap: var(--semiont-spacing-md);
+}
+
+.semiont-gap-lg {
+  gap: var(--semiont-spacing-lg);
+}
+
+.semiont-gap-xl {
+  gap: var(--semiont-spacing-xl);
+}
+
+/* ============================================
+   Text Utilities
+   ============================================ */
+
+.semiont-text-left {
+  text-align: left;
+}
+
+.semiont-text-center {
+  text-align: center;
+}
+
+.semiont-text-right {
+  text-align: right;
+}
+
+.semiont-text-justify {
+  text-align: justify;
+}
+
+/* Font Weights */
+.semiont-font-normal {
+  font-weight: 400;
+}
+
+.semiont-font-medium {
+  font-weight: 500;
+}
+
+.semiont-font-semibold {
+  font-weight: 600;
+}
+
+.semiont-font-bold {
+  font-weight: 700;
+}
+
+/* Font Sizes */
+.semiont-text-xs {
+  font-size: var(--semiont-text-xs);
+}
+
+.semiont-text-sm {
+  font-size: var(--semiont-text-sm);
+}
+
+.semiont-text-base {
+  font-size: var(--semiont-text-base);
+}
+
+.semiont-text-lg {
+  font-size: var(--semiont-text-lg);
+}
+
+.semiont-text-xl {
+  font-size: var(--semiont-text-xl);
+}
+
+.semiont-text-2xl {
+  font-size: var(--semiont-text-2xl);
+}
+
+.semiont-text-3xl {
+  font-size: var(--semiont-text-3xl);
+}
+
+/* Text Transforms */
+.semiont-uppercase {
+  text-transform: uppercase;
+}
+
+.semiont-lowercase {
+  text-transform: lowercase;
+}
+
+.semiont-capitalize {
+  text-transform: capitalize;
+}
+
+.semiont-normal-case {
+  text-transform: none;
+}
+
+/* ============================================
+   Width & Height Utilities
+   ============================================ */
+
+.semiont-w-full {
+  width: 100%;
+}
+
+.semiont-h-full {
+  height: 100%;
+}
+
+.semiont-w-auto {
+  width: auto;
+}
+
+.semiont-h-auto {
+  height: auto;
+}
+
+.semiont-min-w-0 {
+  min-width: 0;
+}
+
+.semiont-min-h-0 {
+  min-height: 0;
+}
+
+/* ============================================
+   Position Utilities
+   ============================================ */
+
+.semiont-relative {
+  position: relative;
+}
+
+.semiont-absolute {
+  position: absolute;
+}
+
+.semiont-fixed {
+  position: fixed;
+}
+
+.semiont-sticky {
+  position: sticky;
+}
+
+.semiont-static {
+  position: static;
+}
+
+/* ============================================
+   Overflow Utilities
+   ============================================ */
+
+.semiont-overflow-auto {
+  overflow: auto;
+}
+
+.semiont-overflow-hidden {
+  overflow: hidden;
+}
+
+.semiont-overflow-visible {
+  overflow: visible;
+}
+
+.semiont-overflow-scroll {
+  overflow: scroll;
+}
+
+.semiont-overflow-x-auto {
+  overflow: auto visible;
+}
+
+.semiont-overflow-y-auto {
+  overflow: visible auto;
+}
+
+/* ============================================
+   Border Radius Utilities
+   ============================================ */
+
+.semiont-rounded-none {
+  border-radius: 0;
+}
+
+.semiont-rounded-sm {
+  border-radius: var(--semiont-radius-sm);
+}
+
+.semiont-rounded {
+  border-radius: var(--semiont-radius-base);
+}
+
+.semiont-rounded-md {
+  border-radius: var(--semiont-radius-md);
+}
+
+.semiont-rounded-lg {
+  border-radius: var(--semiont-radius-lg);
+}
+
+.semiont-rounded-xl {
+  border-radius: var(--semiont-radius-xl);
+}
+
+.semiont-rounded-full {
+  border-radius: 9999px;
+}
+
+/* ============================================
+   Cursor Utilities
+   ============================================ */
+
+.semiont-cursor-pointer {
+  cursor: pointer;
+}
+
+.semiont-cursor-default {
+  cursor: default;
+}
+
+.semiont-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.semiont-cursor-wait {
+  cursor: wait;
+}
+
+.semiont-cursor-text {
+  cursor: text;
+}
+
+/* ============================================
+   User Select Utilities
+   ============================================ */
+
+.semiont-select-none {
+  user-select: none;
+}
+
+.semiont-select-text {
+  user-select: text;
+}
+
+.semiont-select-all {
+  user-select: all;
+}
+
+.semiont-select-auto {
+  user-select: auto;
+}
+
+/* ============================================
+   Pointer Events Utilities
+   ============================================ */
+
+.semiont-pointer-events-none {
+  pointer-events: none;
+}
+
+.semiont-pointer-events-auto {
+  pointer-events: auto;
+}
+
+/* ============================================
+   Opacity Utilities
+   ============================================ */
+
+.semiont-opacity-0 {
+  opacity: 0;
+}
+
+.semiont-opacity-25 {
+  opacity: 0.25;
+}
+
+.semiont-opacity-50 {
+  opacity: 0.5;
+}
+
+.semiont-opacity-75 {
+  opacity: 0.75;
+}
+
+.semiont-opacity-100 {
+  opacity: 1;
+}
+
+/* ============================================
+   Z-Index Utilities
+   ============================================ */
+
+.semiont-z-0 {
+  z-index: 0;
+}
+
+.semiont-z-10 {
+  z-index: 10;
+}
+
+.semiont-z-20 {
+  z-index: 20;
+}
+
+.semiont-z-30 {
+  z-index: 30;
+}
+
+.semiont-z-40 {
+  z-index: 40;
+}
+
+.semiont-z-50 {
+  z-index: 50;
+}
+
+/* ============================================
+   Screen Reader Only
+   ============================================ */
+
+.semiont-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.semiont-not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}

package/src/styles/components/annotation-entries.css

@@ -0,0 +1,138 @@
+/**
+ * Annotation Entry Styles for Panels
+ *
+ * Base structure and common styles for annotation entries.
+ * Motivation-specific styles are in /styles/motivations/*.css
+ */
+
+/* Base annotation entry container */
+.semiont-annotation-entry {
+  padding: 0.75rem;
+  background: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-md);
+  border: 2px solid transparent;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+
+[data-theme="dark"] .semiont-annotation-entry {
+  background: var(--semiont-bg-tertiary);
+}
+
+/* Focused state */
+.semiont-annotation-entry[data-focused="true"] {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 2px;
+  z-index: 10;
+}
+
+/* Motivation-specific styles are handled in /styles/motivations/*.css */
+
+/* Entry structure */
+.semiont-annotation-entry__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.semiont-annotation-entry__content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Quote styling - base structure */
+.semiont-annotation-entry__quote {
+  font-size: var(--semiont-text-sm);
+  line-height: 1.5;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--semiont-radius-sm);
+  margin-bottom: 0.5rem;
+}
+
+/* Motivation-specific quote styles are handled in /styles/motivations/*.css */
+
+/* Body content */
+.semiont-annotation-entry__body {
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-primary);
+  line-height: 1.5;
+  margin-bottom: 0.5rem;
+}
+
+[data-theme="dark"] .semiont-annotation-entry__body {
+  color: var(--semiont-text-primary);
+}
+
+/* Motivation-specific body styles are handled in /styles/motivations/*.css */
+
+/* Metadata */
+.semiont-annotation-entry__metadata,
+.semiont-annotation-entry__meta {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+}
+
+[data-theme="dark"] .semiont-annotation-entry__metadata,
+[data-theme="dark"] .semiont-annotation-entry__meta {
+  color: var(--semiont-text-tertiary);
+}
+
+/* Footer */
+.semiont-annotation-entry__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.5rem;
+}
+
+/* Actions */
+.semiont-annotation-entry__actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.semiont-annotation-entry__action-row {
+  display: flex;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+/* Button group for edit mode */
+.semiont-annotation-entry__button-group {
+  display: flex;
+  gap: 0.25rem;
+}
+
+/* Edit mode */
+.semiont-annotation-entry__edit {
+  margin-top: 0.5rem;
+}
+
+.semiont-annotation-entry__edit-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.5rem;
+}
+
+.semiont-annotation-entry__char-count {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+}
+
+[data-theme="dark"] .semiont-annotation-entry__char-count {
+  color: var(--semiont-text-tertiary);
+}
+
+/* Tags within entries */
+.semiont-annotation-entry__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+
+/* Reference-specific styles moved to /styles/motivations/motivation-reference.css */

package/src/styles/components/annotations.css

@@ -0,0 +1,51 @@
+/**
+ * Inline Annotation Styles
+ *
+ * Common annotation styles and effects.
+ * Motivation-specific styles are in /styles/motivations/*.css
+ */
+
+/* Animation for newly created annotations (sparkle effect) */
+@keyframes sparkle {
+  0% {
+    box-shadow: 0 0 5px rgba(59, 130, 246, 0.8),
+                0 0 10px rgba(59, 130, 246, 0.6),
+                0 0 15px rgba(59, 130, 246, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 10px rgba(59, 130, 246, 0.8),
+                0 0 20px rgba(59, 130, 246, 0.6),
+                0 0 30px rgba(59, 130, 246, 0.4);
+  }
+  100% {
+    box-shadow: 0 0 5px rgba(59, 130, 246, 0.8),
+                0 0 10px rgba(59, 130, 246, 0.6),
+                0 0 15px rgba(59, 130, 246, 0.4);
+  }
+}
+
+.annotation-sparkle {
+  animation: sparkle 1.5s ease-in-out infinite;
+}
+
+/* Active/selected annotation */
+.annotation-active {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 2px;
+  z-index: 10;
+  position: relative;
+}
+
+/* Print styles */
+@media print {
+  .annotation-highlight,
+  .annotation-comment,
+  .annotation-assessment,
+  .annotation-reference,
+  .annotation-tag {
+    background: transparent !important;
+    outline: none !important;
+    text-decoration: underline !important;
+    color: inherit !important;
+  }
+}