Better errors

packages/mdx/src/client/scrollycoding.scss

@@ -5,9 +5,9 @@
 }
 
 .ch-scrollycoding-content {
-  width: 50%;
   box-sizing: border-box;
   padding-right: 16px;
+  flex: 1;
 }
 
 .ch-scrollycoding-step-content {
@@ -39,7 +39,7 @@
   align-self: start;
   flex-flow: column;
   justify-content: center;
-  width: 420px;
+  width: var(--ch-scrollycoding-sticker-width, 420px);
   // capitalized Min to avoid usint the sass min
   // min-height: Min(100%, 80vh);
   max-height: 80vh;
@@ -66,7 +66,10 @@
   .ch-codegroup {
     width: 100%;
     min-width: 100%;
-    min-height: 200px;
+    min-height: var(
+      --ch-scrollycoding-code-min-height,
+      200px
+    );
     max-height: 80vh;
     margin-top: 0;
     margin-bottom: 0;

packages/mdx/src/index.scss

@@ -15,6 +15,8 @@
 
   & > * {
     height: 100%;
+    max-height: inherit;
+    min-height: inherit;
   }
 }
 

packages/mdx/src/plugin.ts

@@ -16,7 +16,9 @@ type CodeHikeConfig = {
   lineNumbers?: boolean
 }
 
-export function remarkCodeHike(config: CodeHikeConfig) {
+export function remarkCodeHike(
+  unsafeConfig: CodeHikeConfig
+) {
   return async (tree: Node) => {
     // TODO add opt-in config
     let hasCodeHikeImport = false
@@ -30,6 +32,8 @@ export function remarkCodeHike(config: CodeHikeConfig) {
       }
     })
 
+    const config = addConfigDefaults(unsafeConfig)
+
     addConfig(tree as Parent, config)
 
     if (!hasCodeHikeImport) {
@@ -52,6 +56,12 @@ export function remarkCodeHike(config: CodeHikeConfig) {
   }
 }
 
+function addConfigDefaults(
+  config: Partial<CodeHikeConfig> | undefined
+): CodeHikeConfig {
+  return { ...config, theme: config?.theme || {} }
+}
+
 function addConfig(tree: Parent, config: CodeHikeConfig) {
   tree.children.unshift({
     type: "mdxjsEsm",

packages/mini-editor/src/editor-frame.tsx

@@ -57,8 +57,6 @@ export const EditorFrame = React.forwardRef<
   },
   ref
 ) {
-  const c = useClasser("ch-editor")
-
   return (
     <div
       ref={ref}
@@ -185,7 +183,7 @@ function TabsContainer({
           }}
           onClick={onTabClick && (() => onTabClick(title))}
         >
-          <div>{title}</div>
+          <TabTitle title={title} />
         </div>
       ))}
       <div style={{ flex: 1 }} />
@@ -194,6 +192,23 @@ function TabsContainer({
   )
 }
 
+function TabTitle({ title }: { title: string }) {
+  if (!title) {
+    return <div />
+  }
+
+  const separatorIndex = title.lastIndexOf("/") + 1
+  const filename = title.substring(separatorIndex)
+  const folder = title.substring(0, separatorIndex)
+
+  return (
+    <div>
+      <span style={{ opacity: 0.5 }}>{folder}</span>
+      {filename}
+    </div>
+  )
+}
+
 type TabsSnapshot = Record<
   string,
   { left: number; active: boolean; width: number }

packages/mini-editor/src/editor-tween.tsx

@@ -6,6 +6,7 @@ import {
 import { TerminalPanel } from "./terminal-panel"
 import { useTransition, EditorStep } from "./editor-shift"
 import { CodeConfig } from "@code-hike/smooth-code"
+import { useLayoutEffect } from "@code-hike/utils"
 
 export {
   EditorTransition,
@@ -14,11 +15,6 @@ export {
   EditorTweenProps,
 }
 
-const useLayoutEffect =
-  typeof window !== "undefined"
-    ? React.useLayoutEffect
-    : React.useEffect
-
 type EditorTransitionProps = {
   prev?: EditorStep
   next?: EditorStep

packages/playground/styles.css

@@ -10,6 +10,8 @@ div#__next > div {
   flex-direction: column;
   font-family: sans-serif;
   background-color: #444;
+  /* --ch-scrollycoding-code-min-height: 500px;
+  --ch-scrollycoding-sticker-width: 500px; */
 }
 
 nav {

packages/smooth-code/src/code-tween.tsx

@@ -147,7 +147,7 @@ function AfterDimensions({
         opacity: 1,
         backgroundColor: bg,
         color: fg,
-        ["color-scheme" as any]: getColorScheme(theme),
+        ["colorScheme" as any]: getColorScheme(theme),
         ["--ch-selection-background" as any]: getColor(
           theme,
           ColorName.SelectionBackground

packages/smooth-code/src/use-dimensions.tsx

@@ -3,6 +3,7 @@ import {
   FocusString,
   getFocusIndexes,
   Tween,
+  useLayoutEffect,
 } from "@code-hike/utils"
 
 type Dimensions = {
@@ -16,11 +17,6 @@ type Dimensions = {
   lineNumberWidth: number
 } | null
 
-const useLayoutEffect =
-  typeof window !== "undefined"
-    ? React.useLayoutEffect
-    : React.useEffect
-
 export { useDimensions, Dimensions }
 
 const DEFAULT_WIDTH = 200

packages/utils/src/hooks.ts

@@ -0,0 +1,12 @@
+import React from "react"
+
+export const useLayoutEffect =
+  typeof window !== "undefined"
+    ? React.useLayoutEffect
+    : React.useEffect
+
+// for debugging:
+// export const useLayoutEffect = (
+//   effect: any,
+//   deps?: any
+// ) => {}

packages/utils/src/index.tsx

@@ -2,3 +2,4 @@ export * from "./tween"
 export * from "./code"
 export * from "./focus"
 export * from "./theme"
+export * from "./hooks"