@semiont/react-ui 0.2.33-build.79 → 0.2.33-build.80

package/dist/index.css

@@ -1,87 +1,3 @@
-/* src/components/layout/ResizeHandle.css */
-.semiont-resize-handle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 8px;
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: col-resize;
-  z-index: 10;
-  transition: background var(--semiont-duration-base);
-  min-width: 44px;
-  margin-left: -18px;
-}
-.semiont-resize-handle--left {
-  left: 0;
-}
-.semiont-resize-handle--right {
-  right: 0;
-}
-.semiont-resize-handle::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 3px;
-  height: 48px;
-  background: var(--semiont-color-gray-400);
-  border-radius: 2px;
-  opacity: 0.4;
-  transition: all var(--semiont-duration-base);
-}
-.semiont-resize-handle:hover::before {
-  opacity: 1;
-  height: 64px;
-  background: var(--semiont-color-primary-500);
-}
-[data-theme=dark] .semiont-resize-handle::before {
-  background: var(--semiont-color-gray-500);
-}
-[data-theme=dark] .semiont-resize-handle:hover::before {
-  background: var(--semiont-color-primary-400);
-}
-.semiont-resize-handle:hover {
-  background: rgba(0, 0, 0, 0.02);
-}
-[data-theme=dark] .semiont-resize-handle:hover {
-  background: rgba(255, 255, 255, 0.02);
-}
-.semiont-resize-handle--dragging,
-.semiont-resize-handle:active {
-  background: rgba(0, 0, 0, 0.04);
-}
-[data-theme=dark] .semiont-resize-handle--dragging,
-[data-theme=dark] .semiont-resize-handle:active {
-  background: rgba(255, 255, 255, 0.04);
-}
-.semiont-resize-handle--dragging::before,
-.semiont-resize-handle:active::before {
-  opacity: 1;
-  background: var(--semiont-color-primary-500);
-}
-[data-theme=dark] .semiont-resize-handle--dragging::before,
-[data-theme=dark] .semiont-resize-handle:active::before {
-  background: var(--semiont-color-primary-400);
-}
-.semiont-resize-handle:focus-visible {
-  outline: 2px solid var(--semiont-color-primary-500);
-  outline-offset: -2px;
-  background: rgba(0, 0, 0, 0.02);
-}
-[data-theme=dark] .semiont-resize-handle:focus-visible {
-  outline-color: var(--semiont-color-primary-400);
-  background: rgba(255, 255, 255, 0.02);
-}
-.semiont-resize-handle:focus-visible::before {
-  opacity: 1;
-}
-.semiont-resize-handle:focus:not(:focus-visible) {
-  outline: none;
-}
-
 /* src/components/Toast.css */
 .semiont-toast-container {
   position: fixed;
@@ -194,6 +110,90 @@
   color: var(--semiont-color-blue-300);
 }
 
+/* src/components/layout/ResizeHandle.css */
+.semiont-resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: col-resize;
+  z-index: 10;
+  transition: background var(--semiont-duration-base);
+  min-width: 44px;
+  margin-left: -18px;
+}
+.semiont-resize-handle--left {
+  left: 0;
+}
+.semiont-resize-handle--right {
+  right: 0;
+}
+.semiont-resize-handle::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 3px;
+  height: 48px;
+  background: var(--semiont-color-gray-400);
+  border-radius: 2px;
+  opacity: 0.4;
+  transition: all var(--semiont-duration-base);
+}
+.semiont-resize-handle:hover::before {
+  opacity: 1;
+  height: 64px;
+  background: var(--semiont-color-primary-500);
+}
+[data-theme=dark] .semiont-resize-handle::before {
+  background: var(--semiont-color-gray-500);
+}
+[data-theme=dark] .semiont-resize-handle:hover::before {
+  background: var(--semiont-color-primary-400);
+}
+.semiont-resize-handle:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+[data-theme=dark] .semiont-resize-handle:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+.semiont-resize-handle--dragging,
+.semiont-resize-handle:active {
+  background: rgba(0, 0, 0, 0.04);
+}
+[data-theme=dark] .semiont-resize-handle--dragging,
+[data-theme=dark] .semiont-resize-handle:active {
+  background: rgba(255, 255, 255, 0.04);
+}
+.semiont-resize-handle--dragging::before,
+.semiont-resize-handle:active::before {
+  opacity: 1;
+  background: var(--semiont-color-primary-500);
+}
+[data-theme=dark] .semiont-resize-handle--dragging::before,
+[data-theme=dark] .semiont-resize-handle:active::before {
+  background: var(--semiont-color-primary-400);
+}
+.semiont-resize-handle:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: -2px;
+  background: rgba(0, 0, 0, 0.02);
+}
+[data-theme=dark] .semiont-resize-handle:focus-visible {
+  outline-color: var(--semiont-color-primary-400);
+  background: rgba(255, 255, 255, 0.02);
+}
+.semiont-resize-handle:focus-visible::before {
+  opacity: 1;
+}
+.semiont-resize-handle:focus:not(:focus-visible) {
+  outline: none;
+}
+
 /* src/components/toolbar/Toolbar.css */
 .semiont-annotate-toolbar {
   display: flex;
@@ -463,6 +463,13 @@
   outline-offset: 2px;
   z-index: 10;
 }
+.semiont-annotation-pulse {
+  background: var(--semiont-bg-hover) !important;
+  transition: background 0.3s ease-in-out;
+}
+[data-theme=dark] .semiont-annotation-pulse {
+  background: var(--semiont-bg-hover) !important;
+}
 .semiont-annotation-entry__header {
   display: flex;
   align-items: flex-start;
@@ -1788,6 +1795,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  position: relative;
 }
 .semiont-detection-progress__message {
   display: flex;
@@ -1796,7 +1804,7 @@
   font-size: 0.875rem;
   color: var(--semiont-color-gray-900);
   font-weight: 500;
-  padding: 0.75rem 1rem;
+  padding: 0.75rem 2.5rem 0.75rem 1rem;
   border-radius: 0.5rem;
   background:
     linear-gradient(
@@ -1806,6 +1814,36 @@
   border: 2px solid rgba(59, 130, 246, 0.3);
   animation: semiont-detection-pulse 2s ease-in-out infinite;
 }
+.semiont-detection-progress__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.1);
+  color: var(--semiont-color-gray-700);
+  font-size: 1.25rem;
+  line-height: 1;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+.semiont-detection-progress__close:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+  color: var(--semiont-color-gray-900);
+}
+[data-theme=dark] .semiont-detection-progress__close {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: var(--semiont-color-gray-300);
+}
+[data-theme=dark] .semiont-detection-progress__close:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: var(--semiont-color-gray-100);
+}
 [data-theme=dark] .semiont-detection-progress__message {
   color: var(--semiont-color-gray-100);
   background: