@chrryai/chrry 1.1.78

package/Thread.module.scss

@@ -0,0 +1,111 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+
+.thread {
+  max-width: breakpoints.$breakpoint-mobile;
+  margin: toRem.toRem(5) auto 0 auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(10);
+  font-size: toRem.toRem(15);
+  padding-bottom: toRem.toRem(195);
+  width: 100%;
+
+  &.empty {
+    margin-top: auto;
+    padding-bottom: toRem.toRem(160);
+
+    @media (min-height: toRem.toRem(600)) {
+      padding-bottom: toRem.toRem(170);
+    }
+
+    @media (min-height: toRem.toRem(700)) {
+      padding-bottom: toRem.toRem(180);
+    }
+
+    // @media (max-height: breakpoints.$breakpoint-mobile) {
+    //   padding-bottom: 0;
+    // }
+  }
+
+  @media (min-width: breakpoints.$breakpoint-tablet) {
+    max-width: breakpoints.$breakpoint-tablet;
+  }
+
+  @media (min-width: breakpoints.$breakpoint-desktop) {
+    max-width: breakpoints.$breakpoint-desktop;
+  }
+}
+
+.hourlyLimit {
+  font-size: toRem.toRem(12);
+  color: var(--shade-6);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+}
+
+.likeButton {
+  font-size: toRem.toRem(12);
+  & {
+    color: var(--shade-6);
+  }
+  &:hover {
+    color: var(--accent-1);
+  }
+}
+
+.headers {
+  display: flex;
+
+  flex-direction: column;
+  gap: toRem.toRem(10);
+
+  &:empty {
+    display: none;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: toRem.toRem(10);
+  flex-wrap: wrap;
+}
+
+.chatTop {
+  display: flex;
+  gap: toRem.toRem(10);
+  justify-content: center;
+  align-items: center;
+}
+
+.loadingContainer,
+.errorContainer {
+  display: flex;
+  justify-content: center;
+  margin-top: toRem.toRem(30);
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  align-items: center;
+  display: flex;
+  gap: toRem.toRem(5);
+}
+
+.messages {
+}
+
+.chatContainer {
+  &.empty {
+    .chat {
+      // @media (min-height: breakpoints.$breakpoint-mobile) {
+      //   padding: 0;
+      //   position: static;
+      //   transform: none;
+      // }
+    }
+  }
+}

package/Threads.module.scss

@@ -0,0 +1,105 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+
+.threads {
+  width: 100%;
+  max-width: breakpoints.$breakpoint-mobile;
+  margin: toRem.toRem(20) auto;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  flex-direction: column;
+  gap: toRem.toRem(10);
+  font-size: toRem.toRem(15);
+  margin-top: toRem.toRem(20);
+}
+
+.threadsContainer {
+  opacity: 0;
+}
+
+.threadsItem {
+  opacity: 0;
+}
+
+.characterProfiles {
+  display: flex;
+  gap: toRem.toRem(5);
+  flex-direction: column;
+  font-size: toRem.toRem(12);
+  align-items: flex-start;
+}
+
+.threadItemTitle {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  margin-bottom: toRem.toRem(5);
+}
+
+.right {
+  display: flex;
+  gap: toRem.toRem(7.5) toRem.toRem(10);
+  margin-left: auto;
+}
+
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+
+.threadItemDate {
+  font-size: toRem.toRem(11);
+  color: var(--shade-6);
+  margin-left: auto;
+}
+
+.searchInput {
+  border: toRem.toRem(1) dashed var(--accent-5) !important;
+}
+
+.searchContainer {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+}
+
+.threadsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(20);
+  margin-top: toRem.toRem(5);
+}
+
+.threadAiResponse {
+  margin: 0 0;
+  font-size: toRem.toRem(13);
+  color: var(--shade-7);
+}
+
+.threadsTitle {
+  font-size: toRem.toRem(22);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+}
+
+.loadMoreButton {
+  font-size: toRem.toRem(12.5);
+  padding: toRem.toRem(5) toRem.toRem(10);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+}
+
+.loadMoreButtonContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.profileImage {
+  border-radius: 50%;
+}

package/TypingIndicator.module.scss

@@ -0,0 +1,93 @@
+@use "./toRem.scss";
+
+.typingIndicator {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(8);
+  padding: toRem.toRem(8) toRem.toRem(12);
+  margin: toRem.toRem(8) 0;
+  background: var(--shade-1);
+  border-radius: 12px;
+  font-size: toRem.toRem(13);
+  color: var(--shade-5);
+  border: toRem.toRem(1) solid var(--shade-2);
+}
+
+.avatars {
+  display: flex;
+  gap: toRem.toRem(4);
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: toRem.toRem(20);
+  height: toRem.toRem(20);
+  border-radius: 50%;
+  background: var(--shade-2);
+  overflow: hidden;
+}
+
+.userImage {
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.typingText {
+  flex: 1;
+  font-weight: 500;
+}
+
+.dots {
+  display: flex;
+  gap: toRem.toRem(2);
+  align-items: center;
+}
+
+.dots span {
+  width: toRem.toRem(4);
+  height: toRem.toRem(4);
+  background: var(--shade-4);
+  border-radius: 50%;
+  animation: typing 1.4s infinite ease-in-out;
+}
+
+.dots span:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing {
+  0%,
+  60%,
+  100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  30% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  .typingIndicator {
+    background: var(--shade-0);
+    border-color: var(--shade-1);
+  }
+
+  .avatar {
+    background: var(--shade-1);
+  }
+}

package/Users.module.scss

@@ -0,0 +1,98 @@
+@use "./toRem.scss";
+@use "./utils.scss";
+@use "./breakpoints.scss";
+
+.users {
+  width: 100%;
+  max-width: breakpoints.$breakpoint-mobile;
+  margin: 0 auto;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  flex-direction: column;
+  gap: toRem.toRem(10);
+  font-size: toRem.toRem(15);
+}
+.searchInput {
+  border: toRem.toRem(1) dashed var(--accent-5) !important;
+}
+
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+
+.usersTitle {
+  margin-top: 0;
+  margin-bottom: toRem.toRem(10);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+}
+
+.usersContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.usersItem {
+  display: flex;
+  gap: toRem.toRem(10);
+  flex-direction: column;
+  border-bottom: toRem.toRem(1) dashed var(--shade-2);
+  padding: toRem.toRem(15) 0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.profileImage {
+  border-radius: 50%;
+}
+
+.usersItemUserImage {
+  display: flex;
+  gap: toRem.toRem(5);
+  align-items: center;
+}
+
+.usersItemUser {
+  display: flex;
+  gap: toRem.toRem(15);
+  align-items: center;
+}
+
+.usersItemCharacterProfiles {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(10);
+  align-items: flex-start;
+}
+
+.usersItemCharacterProfile {
+  display: flex;
+  gap: toRem.toRem(5);
+  align-items: center;
+  animation: slideUp 0.1s ease forwards;
+  @include utils.respect-reduced-motion;
+}
+
+.tags {
+  font-size: toRem.toRem(12);
+}
+
+.loadMoreButton {
+  font-size: toRem.toRem(12.5);
+  padding: toRem.toRem(5) toRem.toRem(10);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+}
+
+.loadMoreButtonContainer {
+  display: flex;
+  justify-content: center;
+}

package/Version.module.scss

@@ -0,0 +1,22 @@
+@use "./toRem.scss";
+
+.video {
+  width: toRem.toRem(30);
+  height: toRem.toRem(30);
+  object-fit: cover;
+  border-radius: 50%;
+  pointer-events: none; // So clicks pass through to foreground content
+}
+
+.updateModalButtons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: toRem.toRem(10);
+}
+
+.updateModalDescription {
+  font-size: toRem.toRem(14);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+}

package/Weather.module.scss

@@ -0,0 +1,31 @@
+@use "./toRem.scss";
+@use "./utils.scss";
+
+.weather {
+  display: inline-flex;
+  align-items: center;
+  font-size: toRem.toRem(13);
+  gap: toRem.toRem(5);
+  animation: slideUp 0.4s ease forwards;
+  @include utils.respect-reduced-motion;
+  padding: toRem.toRem(8) toRem.toRem(3);
+  color: var(--shade-8);
+}
+
+.location {
+  padding: 0;
+  margin: 0;
+  color: var(--accent-6);
+  cursor: pointer;
+  font-size: toRem.toRem(14);
+
+  &:hover {
+    color: var(--accent-5);
+  }
+}
+
+.info {
+  display: flex;
+  gap: toRem.toRem(5);
+  align-items: center;
+}

package/Why.module.scss

@@ -0,0 +1,79 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+@use "./utils.scss";
+
+.desktopOnly {
+  display: none;
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    display: flex;
+  }
+}
+
+.why {
+  section {
+    font-size: toRem.toRem(15);
+  }
+}
+
+.mobileOnly {
+  display: flex;
+  flex-direction: column;
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    display: none;
+  }
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(toRem.toRem(250), 1fr));
+  gap: toRem.toRem(20);
+  margin-top: toRem.toRem(20);
+}
+
+.feature {
+  padding: toRem.toRem(20);
+  background: var(--shade-1);
+  border-radius: 8px;
+  border: toRem.toRem(1) solid var(--shade-2);
+}
+
+.comparison {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(12);
+  margin-top: toRem.toRem(20);
+}
+
+.comparisonItem {
+  padding: toRem.toRem(16);
+  background: var(--shade-1);
+  border-radius: 6px;
+  border-left: toRem.toRem(4) solid var(--accent-1);
+}
+
+@media (max-width: breakpoints.$breakpoint-mobile) {
+  .mobileOnly {
+    h3,
+    h4 {
+      font-size: 1.1em;
+    }
+
+    div[style*="display: flex"] {
+      span:first-child {
+        flex: 1;
+        margin-right: toRem.toRem(8);
+      }
+
+      span:last-child {
+        flex-shrink: 0;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .features {
+    grid-template-columns: repeat(auto-fit, minmax(toRem.toRem(250), 1fr));
+    gap: toRem.toRem(20);
+  }
+}

package/__tests__/README.md

@@ -0,0 +1,126 @@
+# SCSS to TypeScript Converter Tests
+
+This directory contains comprehensive tests for the SCSS to TypeScript converter.
+
+## Test File
+
+**`TestComponent.module.scss`** - A comprehensive SCSS file that tests all features:
+
+### Features Tested:
+
+1. ✅ **Basic Styles** - All CSS properties
+2. ✅ **Interactive States** - `:hover`, `:active`, `:focus`, `:disabled`
+3. ✅ **CSS Variables** - `var(--accent-6)`, `var(--background)`, etc.
+4. ✅ **toRem.toRem()** - SCSS function conversion
+5. ✅ **Responsive Fonts** - `4vw` viewport units
+6. ✅ **Flexbox** - All flex properties
+7. ✅ **Colors** - Hex, RGB, CSS vars
+8. ✅ **Positioning** - Absolute, relative
+9. ✅ **Typography** - Font sizes, weights, line-height
+10. ✅ **Borders & Shadows** - Border radius, box-shadow
+
+## Running Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run only converter tests
+npm test scss-converter
+
+# Watch mode
+npm test -- --watch
+
+# Generate test output manually
+node ../../../scripts/scss-to-universal.js TestComponent.module.scss TestComponent.styles.ts
+```
+
+## Expected Output
+
+The converter should generate:
+
+```typescript
+export const TestComponentStyleDefs = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    // ... more styles
+  },
+  button: {
+    base: {
+      padding: 8,
+      backgroundColor: "__CSS_VAR__--accent-6",
+      // ... base styles
+    },
+    hover: {
+      backgroundColor: "__CSS_VAR__--accent-5",
+      transform: "translateY(-1px)",
+    },
+    active: {
+      transform: "translateY(1px)",
+    },
+    // ... more states
+  },
+  // ... more components
+}
+
+// Interactive hook for styles with pseudo-classes
+export const useTestComponentStyles = () => {
+  // ... generated hook
+}
+```
+
+## What Gets Tested
+
+### ✅ Conversion Accuracy
+
+- Property names (kebab-case → camelCase)
+- Values (numbers, strings, CSS vars)
+- toRem.toRem() → numbers
+- CSS variables → `__CSS_VAR__` markers
+
+### ✅ Interactive States
+
+- Detection of `:hover`, `:active`, `:focus`, `:disabled`
+- Proper `base` / `hover` / `active` structure
+- Hook generation with `useInteractiveStyles`
+
+### ✅ Type Safety
+
+- TypeScript types generated
+- Proper imports
+- Hook return types
+
+### ✅ Edge Cases
+
+- Mixed interactive and non-interactive styles
+- Multiple pseudo-classes on same element
+- Nested selectors (should be handled)
+- Media queries (should be removed)
+
+## Adding New Tests
+
+1. Add new SCSS patterns to `TestComponent.module.scss`
+2. Add corresponding test cases to `scss-converter.test.js`
+3. Run tests to verify
+4. Update this README
+
+## Troubleshooting
+
+If tests fail:
+
+1. Check the generated `TestComponent.styles.ts` file
+2. Compare with expected output
+3. Check script at `../../../scripts/scss-to-universal.js`
+4. Run converter manually to see errors
+
+## CI/CD
+
+These tests should run on every commit to ensure the converter doesn't break.
+
+Add to your CI pipeline:
+
+```yaml
+- name: Test SCSS Converter
+  run: npm test scss-converter
+```