Script Kit 2.3.0 Release

[johnlindquist]

Script Kit 2.3.0

This release focuses on minor bugs that popped up from releasing 2.0 to the community, but we were also able to sneak in a few goodies:

Features

path Prompt Follows Symlinks

When using await path(), you can now navigate into symlinks. We've also handled the scenario where it failed to parse broken symlinks.

widget show/hide and focus/blur

You can now create a widget then manually control its visibility:

// show a widget after 4 seconds
let w = await widget("hi", {show: false})

setTimeout(()=> {
w.show()
}, 4000)

Fixes

Widget Dragging Adjustments

Apparently, the system behavior of -webkit-app-region: drag changed again which disables all mouse events in widgets. (This wasn't tested on the 2.0 release because the widget code :/ ). Before, you were able to both drag the window and click an element, now, dragging works, but clicking is entirely broken.

We've removed the drag behavior of widgets (which would drag the widget by dragging any element). Now you'll have to specifically add a drag class to any element in a widget which you want to use to drag.

For example, adding an invisible "drag bar" to the top of your widget. Dragging anywhere else on the image would drag the image out of the widget:

// Note: the `drag` class is necessary to use an html element to drag the widget
let dragBar = `drag absolute z-10 h-4 w-full top-0 left-0`
let corgi = await widget(
  `
<img :src="url"/>
<div class="${dragBar}">
`,
  {
    state: await getState(),
  }
)

Windows: Prompt Flickering

In some scenarios on windows, opening/resizing a prompt would cause a brief flicker due to our custom window. This appears to be solved.

Clipboard keyword fixed

Typing c, then Enter (instead of a "space") would cause an issue with the clipboard input spacing.

console.log with Circular References

You can now safely console.log objects with circular references

Theme Designer/Swapper Fixes

Cleanup up how the theme designer works and added a "reset to defaults" option

Highly Experimental ⚠️

kit.css theme

Create a ~/.kenv/kit.css:

:root {
  --color-text: 255, 255, 255;
  --color-primary: 251, 191, 36;
  --color-secondary: 55, 55, 55;
  --color-background: 0, 0, 0;
  --opacity: 0.1;
  --mono-font: JetBrains Mono;
  --sans-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --serif-font: "ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif";
}

body {
  background: linear-gradient(to bottom, rgba(var(--color-background), 0.9), rgba(var(--color-text), 0.1));
}

This will allow you to play with background gradients, etc. Again, this is highly experimental and will break in the future. You may need to quit Kit and delete the file if your theme gets "stuck" for some reason.

In 3.0, we'll be moving from the 2.0 theme .json to just using plain .css like this, but we're still ironing out details.

.kitrc

Before you install Kit, if you create a :

~/.kitrc

You can point it to a .zip of a root kenv:

KENV_ZIP_URL=https://github.com/johnlindquist/kit-examples/releases/download/2024-01-07-00-13-41/kenv.zip

This will override the default root kenv (https://github.com/johnlindquist/kenv), but remember, this needs to be a .zip. This is really only useful when helping someone else set up Kit.

There are no other options for .kitrc, but we'll plan to add more in the future.

[zia-hasan]

How to set kit term font. I tried changing the font here but still squares in kit term:

:root {
  --color-text: 255, 255, 255;
  --color-primary: 251, 191, 36;
  --color-secondary: 55, 55, 55;
  --color-background: 0, 0, 0;
  --opacity: 0.1;
  --mono-font: "Hack Nerd Font";
  --sans-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Hack Nerd Font";
  --serif-font: "ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif", "Hack Nerd Font";
}

body {
  background: linear-gradient(to bottom, rgba(var(--color-background), 0.9), rgba(var(--color-text), 0.1));
}

[johnlindquist]

@zia-hasan In your ~/.kenv/env add a line like this:

KIT_TERM_FONT=Geist Mono

[zia-hasan]

Thank you :)