@mathscan/math-exercise-engine 1.0.0 → 1.0.1

package/dist/style.css

@@ -1,4 +1,3 @@
-@import './dnd/dnd.css';
 /* ========================================
    MATH EXERCISE ENGINE - DEFAULT STYLES
    ========================================
@@ -344,3 +343,218 @@ button.drag-option {
   }
 }
 
+/* ============================================
+   DND STYLES
+   ============================================ */
+
+/* Draggable base */
+.draggable {
+  display: inline-block;
+  user-select: none;
+}
+
+.draggable.dragging {
+  opacity: 0.5;
+}
+
+/* Droppable base */
+.droppable {
+  display: inline-block;
+}
+
+.droppable.drop-active {
+  outline: 2px dashed #4a90d9;
+  outline-offset: 2px;
+  background-color: rgba(74, 144, 217, 0.1);
+  border-radius: 4px;
+}
+
+.droppable.drop-invalid {
+  outline: 2px dashed #e74c3c;
+  outline-offset: 2px;
+}
+
+/* Drag overlay - the item following cursor */
+.drag-overlay-option {
+  padding: 8px 16px;
+  background: #4a90d9;
+  color: white;
+  border-radius: 6px;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  cursor: grabbing;
+}
+
+/* Drag options container */
+.drag-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  /* padding: 12px; */
+  /* background: #f5f5f5; */
+  border-radius: 8px;
+  justify-content: center;
+}
+
+.drag-option-wrapper {
+  display: inline-block;
+}
+
+.drag-option {
+  padding: 10px 20px;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  background: white;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: grab;
+  transition: all 0.15s ease;
+}
+
+.drag-option:hover {
+  border-color: #4a90d9;
+  background: #f0f7ff;
+}
+
+.drag-option.selected {
+  border-color: #4a90d9;
+  background: #e3f0ff;
+}
+
+/* Slot container - maintains space when item is dragged out */
+.drag-option-slot {
+  display: inline-flex;
+  min-width: 60px;
+  min-height: 44px;
+}
+
+/* Empty slot - shows where item came from */
+.drag-option-empty {
+  min-width: 60px;
+  min-height: 44px;
+  border: 2px dashed #d4c5a9;
+  border-radius: 8px;
+  background: rgba(212, 197, 169, 0.2);
+}
+
+/* Inline input droppable */
+.inline-input-droppable {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  min-width: 50px;
+  min-height: 40px;
+}
+
+.inline-input {
+  padding: 4px 8px;
+  border: 2px dashed #b8a88a;
+  border-radius: 8px;
+  font-size: inherit;
+  text-align: center;
+  background: rgba(212, 197, 169, 0.15);
+  transition: border-color 0.15s ease;
+}
+
+.inline-input:focus {
+  outline: none;
+  border-color: #4a90d9;
+}
+
+/* Chip style for dropped values - matches drag-option button */
+.inline-input-chip {
+  padding: 10px 20px;
+  border: 2px solid #9b8fc7;
+  border-radius: 8px;
+  background: #e8e4f3;
+  font-size: 16px;
+  font-weight: 500;
+  color: #5c5470;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.inline-input-chip:hover {
+  background: #ddd8eb;
+  border-color: #8578b0;
+}
+
+/* When droppable is active, style the input inside */
+.inline-input-droppable.drop-active .inline-input {
+  border-color: #4a90d9;
+  background-color: rgba(74, 144, 217, 0.05);
+}
+
+/* Drag options container at bottom */
+.drag-options-container {
+  /* margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #eee; */
+}
+
+/* ============================================
+   FUTURE WIDGETS - Placeholder styles
+   ============================================ */
+
+/* ============================================
+   DRAGGABLE TOOLS (Ruler, Protractor, etc.)
+   ============================================ */
+
+.tools-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+.draggable-tool {
+  pointer-events: auto;
+  transition: box-shadow 0.15s ease;
+}
+
+.draggable-tool:hover {
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
+}
+
+.draggable-tool.dragging {
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
+}
+
+/* Rotate handle */
+.tool-rotate-handle {
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 24px;
+  background: #e8e4f3;
+  border: 2px solid #9b8fc7;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  font-size: 14px;
+  color: #5c5470;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.draggable-tool:hover .tool-rotate-handle {
+  opacity: 1;
+}
+
+.tool-rotate-handle:hover {
+  background: #e8e4f3;
+}
+
+/* Ensure exercise container has relative positioning for tools */
+.math-exercise-renderer {
+  position: relative;
+  min-height: 200px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mathscan/math-exercise-engine",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A DSL parser and validator for math exercises - transforms text-based exercise definitions into structured AST and JSON",
   "main": "dist/index.js",
   "module": "dist/index.mjs",