radtools 0.1.0

package/templates/globals.css

@@ -0,0 +1,574 @@
+@import "tailwindcss";
+
+
+
+
+@font-face {
+  font-family: 'Mondwest';
+  src: url('/fonts/Mondwest-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Mondwest';
+  src: url('/fonts/Mondwest-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('/fonts/PixelCode.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+/* ============================================================================
+   Font Face Definitions
+   ============================================================================ */
+
+/* ============================================================================
+   Base Styles
+   ============================================================================ */
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: 'Joystix Monospace', monospace;
+  font-size: clamp(1rem, 1vw, 1.125rem);
+  background-color: var(--color-sun-yellow);
+  color: var(--color-black);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ============================================================================
+   Text Selection
+   ============================================================================ */
+
+::selection {
+  background: var(--color-sun-yellow);
+  color: var(--color-black);
+}
+
+::-moz-selection {
+  background: var(--color-sun-yellow);
+  color: var(--color-black);
+}
+
+/* ============================================================================
+   Animations
+   ============================================================================ */
+
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-right {
+  animation: slide-in-right 0.2s ease-out forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.15s ease-out forwards;
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-scaleIn {
+  animation: scaleIn 0.15s ease-out forwards;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-slideIn {
+  animation: slideIn 0.2s ease-out forwards;
+}
+
+/* ============================================================================
+   Tailwind v4 Theme Configuration
+   ============================================================================ */
+
+@theme inline {
+  /* ============================================
+     BRAND COLORS (internal reference only)
+     ============================================ */
+  
+  --color-cream: #FEF8E2;
+  --color-black: #0F0E0C;
+  --color-sun-yellow: #FCE184;
+  --color-sky-blue: #95BAD2;
+  --color-warm-cloud: #FEF8E2;
+  --color-sunset-fuzz: #FCC383;
+  --color-sun-red: #FF6B63;
+  --color-green: #CEF5CA;
+  --color-white: #FFFFFF;
+  
+  /* Neutral Colors */
+
+  
+  /* System Colors */
+  --color-success-green: #22C55E;
+  --color-success-green-dark: #87BB82;
+  --color-warning-yellow: var(--color-sun-yellow);
+  --color-warning-yellow-dark: #BE9D2B;
+  --color-error-red: var(--color-sun-red);
+  --color-error-red-dark: #9E433E;
+  --color-focus-state: var(--color-sky-blue);
+  
+  /* Fonts */
+  --font-mondwest: 'Mondwest';
+  --font-joystix: 'Joystix Monospace', monospace;
+}
+
+@theme {
+  /* ============================================
+     BRAND COLORS (Tailwind v4 auto-generates utilities)
+     bg-sun-yellow, text-black, border-warm-cloud, etc.
+     ============================================ */
+  
+  /* Brand Colors → bg-sun-yellow, text-black, etc. */
+  --color-cream: #FEF8E2;
+  --color-black: #0F0E0C;
+  --color-sun-yellow: #FCE184;
+  --color-sky-blue: #95BAD2;
+  --color-warm-cloud: #FEF8E2;
+  --color-sunset-fuzz: #FCC383;
+  --color-sun-red: #FF6B63;
+  --color-green: #CEF5CA;
+  --color-white: #FFFFFF;
+  
+  /* Neutral Colors */
+  
+  /* System Colors */
+  --color-success-green: #22C55E;
+  --color-success-green-dark: #87BB82;
+  --color-warning-yellow: var(--color-sun-yellow);
+  --color-warning-yellow-dark: #BE9D2B;
+  --color-error-red: var(--color-sun-red);
+  --color-error-red-dark: #9E433E;
+  --color-focus-state: var(--color-sky-blue);
+  
+  /* Border Radius → rounded-sm, rounded-md, etc. */
+  --radius-none: 0;
+  --radius-xs: 0.125rem;  /* 2px */
+  --radius-sm: 0.25rem;    /* 4px */
+  --radius-md: 0.5rem;     /* 8px */
+  --radius-lg: 1rem;       /* 16px */
+  --radius-full: 9999px;
+  
+  /* Box Shadows → shadow-btn, shadow-card, etc. */
+  --shadow-btn: 0 1px 0 0 var(--color-black);
+  --shadow-btn-hover: 0 3px 0 0 var(--color-black);
+  --shadow-card: 2px 2px 0 0 var(--color-black);
+  --shadow-card-lg: 4px 4px 0 0 var(--color-black);
+  --shadow-inner: inset 0 0 0 1px var(--color-black);
+  
+  /* Typography Scale */
+  --font-size-2xs: 0.5rem;    /* 8px - tiny labels */
+  --font-size-xs: 0.75rem;    /* 12px - buttons, small UI (most common) */
+  --font-size-sm: 0.875rem;   /* 14px - body text */
+  --font-size-base: 0.875rem; /* 14px - body text */
+  --font-size-lg: 1rem;       /* 16px - large body */
+  
+  /* Font Families */
+  --font-family-mondwest: var(--font-mondwest);
+  --font-family-joystix: var(--font-joystix);
+}
+
+/* ============================================
+   Additional CSS Custom Properties for compatibility
+   ============================================ */
+
+:root {
+  /* Border opacity variants */
+  --border-black-10: rgba(15, 14, 12, 0.1);
+  --border-black-20: rgba(15, 14, 12, 0.2);
+}
+
+/* ============================================================================
+   Custom Scrollbar Styles - Mac Compatible
+   
+   Retro-style webkit scrollbar matching the design system.
+   Uses CSS variables from globals.css for consistency.
+   ============================================================================ */
+
+/* Force scrollbars to always be visible - make wider for padding effect */
+::-webkit-scrollbar {
+  width: 1.75rem; /* Wider invisible container for padding effect */
+  height: 0px;
+  -webkit-appearance: none;
+}
+
+/* Only show horizontal scrollbar when actually needed */
+::-webkit-scrollbar:horizontal {
+  height: 0.5rem;
+  display: none !important;
+}
+
+/* Track - narrow and centered within wider scrollbar */
+::-webkit-scrollbar-track {
+  background: url('/scrollbar-background.svg') center center / 0.5rem auto repeat-y;
+  background-position: bottom;
+  background-size: 45%;
+  -webkit-appearance: none;
+}
+
+/* Hide horizontal scrollbar track completely */
+::-webkit-scrollbar-track:horizontal {
+}
+
+/* Thumb - using border/background-clip method for inset effect */
+::-webkit-scrollbar-thumb {
+  background: var(--color-warm-cloud);
+  border: 0.375rem solid transparent; /* Transparent border creates padding */
+  border-radius: 0.5rem;
+  -webkit-appearance: none;
+  min-height: 2.25rem;
+  background-clip: padding-box; /* This is the magic - clips background to content area only */
+  /* Add outline around the green area using inset box-shadow */
+  box-shadow: inset 0 0 0 1px var(--color-black);
+}
+
+/* Thumb hover state */
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-sun-yellow);
+  border: 0.375rem solid transparent;
+  background-clip: padding-box;
+  box-shadow: inset 0 0 0 1px var(--color-black);
+}
+
+/* Thumb active state */
+::-webkit-scrollbar-thumb:active {
+  background: var(--color-sun-yellow);
+  border: 0.375rem solid transparent;
+  background-clip: padding-box;
+  box-shadow: inset 0 0 0 1px var(--color-black);
+}
+
+/* Scrollbar buttons (arrows) - Hide all buttons */
+::-webkit-scrollbar-button {
+  display: none !important; /* Hide all arrow buttons */
+  height: 0 !important;
+  width: 0 !important;
+}
+
+/* Corner where horizontal and vertical scrollbars meet */
+::-webkit-scrollbar-corner {
+  display: none !important; /* Hide the corner completely */
+}
+
+/* ============================================================================
+   Scrollable Container Utility Class
+   
+   Apply .custom-scrollbar to any scrollable element for styled scrollbars
+   ============================================================================ */
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-warm-cloud) var(--color-sun-yellow);
+}
+
+/* For elements that need a dark-themed scrollbar */
+.custom-scrollbar-dark::-webkit-scrollbar-track {
+  background: var(--color-black);
+}
+
+.custom-scrollbar-dark::-webkit-scrollbar-thumb {
+  background: var(--color-warm-cloud);
+  box-shadow: inset 0 0 0 1px var(--color-sun-yellow);
+}
+
+.custom-scrollbar-dark::-webkit-scrollbar-thumb:hover {
+  background: var(--color-sun-yellow);
+}
+
+@layer base {
+  h1 {
+    @apply text-4xl font-bold leading-tight text-black;
+  }
+
+  h2 {
+    @apply text-3xl font-normal leading-tight text-black;
+  }
+
+  h3 {
+    @apply text-2xl font-semibold leading-snug text-black;
+  }
+
+  h4 {
+    @apply text-xl font-medium leading-snug text-black;
+  }
+
+  h5 {
+    @apply text-lg font-medium leading-normal text-black;
+  }
+
+  h6 {
+    @apply text-base font-medium leading-normal text-black;
+  }
+
+  p {
+    @apply text-base font-normal leading-relaxed text-black;
+  }
+
+  a {
+    @apply text-base font-normal leading-normal text-black underline hover:opacity-80;
+  }
+
+  ul {
+    @apply text-base font-normal leading-relaxed text-black pl-6;
+  }
+
+  ol {
+    @apply text-base font-normal leading-relaxed text-black pl-6;
+  }
+
+  li {
+    @apply text-base font-normal leading-relaxed text-black mb-2;
+  }
+
+  small {
+    @apply text-sm font-normal leading-normal text-black;
+  }
+
+  strong {
+    @apply text-base font-bold leading-normal text-black;
+  }
+
+  em {
+    @apply text-base font-normal leading-normal text-black italic;
+  }
+
+  code {
+    @apply text-sm font-normal leading-normal text-black bg-black/10 px-1 py-0.5 rounded-sm;
+    font-family: "PixelCode";
+  }
+
+  pre {
+    @apply text-sm font-normal leading-relaxed text-black bg-black/10 p-4 rounded-sm overflow-x-auto;
+    font-family: "PixelCode";
+  }
+
+  kbd {
+    @apply text-xs font-normal leading-normal text-cream bg-black px-1 py-0.5 rounded-sm;
+    font-family: "PixelCode";
+  }
+
+  mark {
+    @apply text-base font-normal leading-normal text-black bg-sun-yellow;
+  }
+
+  blockquote {
+    @apply text-base font-normal leading-relaxed text-black border-l-4 border-black pl-4 italic;
+  }
+
+  cite {
+    @apply text-sm font-normal leading-normal text-black italic;
+  }
+
+  abbr {
+    @apply text-base font-normal leading-normal text-black underline decoration-dotted;
+  }
+
+  dfn {
+    @apply text-base font-normal leading-normal text-black italic;
+  }
+
+  q {
+    @apply text-base font-normal leading-normal text-black italic;
+  }
+
+  sub {
+    @apply text-xs font-normal leading-none text-black;
+  }
+
+  sup {
+    @apply text-xs font-normal leading-none text-black;
+  }
+
+  del {
+    @apply text-base font-normal leading-normal text-black line-through;
+  }
+
+  ins {
+    @apply text-base font-normal leading-normal text-black underline;
+  }
+
+  caption {
+    @apply text-xs font-normal leading-normal text-black;
+  }
+
+  label {
+    @apply text-xs font-medium leading-normal text-black;
+  }
+
+  figcaption {
+    @apply text-xs font-normal leading-normal text-black;
+  }
+}
+
+@layer base {
+  h2 {
+    @apply font-joystix text-3xl font-normal leading-tight text-black;
+  }
+
+  h3 {
+    @apply font-joystix text-2xl font-semibold leading-snug text-black;
+  }
+
+  h4 {
+    @apply font-joystix text-xl font-medium leading-snug text-black;
+  }
+
+  h5 {
+    @apply font-joystix text-lg font-medium leading-normal text-black;
+  }
+
+  h6 {
+    @apply font-joystix text-base font-medium leading-normal text-black;
+  }
+
+  p {
+    @apply font-mondwest text-base font-normal leading-relaxed text-black;
+  }
+
+  a {
+    @apply font-mondwest text-base font-normal leading-normal text-sky-blue underline hover:opacity-80;
+  }
+
+  ul {
+    @apply font-joystix text-base font-normal leading-relaxed text-black pl-6;
+  }
+
+  ol {
+    @apply font-joystix text-base font-normal leading-relaxed text-black pl-6;
+  }
+
+  li {
+    @apply font-mondwest text-base font-normal leading-relaxed text-black mb-2;
+  }
+
+  small {
+    @apply font-joystix text-sm font-normal leading-normal text-black;
+  }
+
+  strong {
+    @apply font-joystix text-base font-bold leading-normal text-black;
+  }
+
+  em {
+    @apply font-joystix text-base font-normal leading-normal text-black italic;
+  }
+
+  code {
+    @apply text-sm font-normal leading-normal text-black bg-black/10 px-1 py-0.5 rounded-sm;
+    font-family: "PixelCode";
+  }
+
+  pre {
+    @apply text-sm font-normal leading-relaxed text-black bg-black/10 p-4 rounded-sm overflow-x-auto;
+    font-family: "PixelCode";
+  }
+
+  kbd {
+    @apply text-xs font-normal leading-normal text-cream bg-black px-1 py-0.5 rounded-sm;
+    font-family: "PixelCode";
+  }
+
+  mark {
+    @apply font-joystix text-base font-normal leading-normal text-black bg-sun-yellow;
+  }
+
+  blockquote {
+    @apply font-joystix text-base font-normal leading-relaxed text-black border-l-4 border-black pl-4 italic;
+  }
+
+  cite {
+    @apply font-joystix text-sm font-normal leading-normal text-black italic;
+  }
+
+  abbr {
+    @apply font-joystix text-base font-normal leading-normal text-black underline decoration-dotted;
+  }
+
+  dfn {
+    @apply font-joystix text-base font-normal leading-normal text-black italic;
+  }
+
+  q {
+    @apply font-joystix text-base font-normal leading-normal text-black italic;
+  }
+
+  sub {
+    @apply font-joystix text-xs font-normal leading-none text-black;
+  }
+
+  sup {
+    @apply font-joystix text-xs font-normal leading-none text-black;
+  }
+
+  del {
+    @apply font-joystix text-base font-normal leading-normal text-black line-through;
+  }
+
+  ins {
+    @apply font-joystix text-base font-normal leading-normal text-black underline;
+  }
+
+  caption {
+    @apply font-joystix text-xs font-normal leading-normal text-black;
+  }
+
+  label {
+    @apply font-joystix text-xs font-medium leading-normal text-black;
+  }
+
+  figcaption {
+    @apply font-joystix text-xs font-normal leading-normal text-black;
+  }
+}

package/templates/hooks/index.ts

@@ -0,0 +1 @@
+export { useWindowManager } from './useWindowManager';